优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/。
1.背景
去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点缓慢,大约需要20多秒。和另外一个同事一起花了一两天进行了代码优化、代码压缩、中间件优化以及服务部署优化后使地图出图缩短到了9秒上下。
这里对上次的经验做一个总结,提供一种优化JS文件加载时间过长的思路。这里的中间件使用的是tomcat6.0。
2.代码优化
2.1代码模块化
代码重构,使代码模块化。利用require.js,实现代码按需加载。
2.2框架精简
去掉不必要的框架,或者将框架中涉及到的部分提取出来,去掉不用的部分。比如漳州项目中,用了公司的传统框架YUI,但是界面部分是用Jquery编写。YUI框架仅仅利用了其事件机制。这里我们将YUI的事件机制进行提取,封装成一个单独的类后,其余部分全部舍去。
3.代码打包压缩
对代码模块化后的一个很大的好处就是方便代码打包,避免出现公共变量名冲突等问题。这里使用ant对JS文件进行压缩合并打包。
压缩时要注意各模块之间的依赖关系。将被依赖模块放在依赖模块的前面。
4.中间件压缩优化
中间件环节压缩的原理是:在客户端请求网页后,从服务器端将网页文件压缩,再下载到客户端,由客户端的浏览器负责解压缩并浏览。相对于普通的浏览过程HTML ,CSS,Javascript , Text ,它可以节省40%左右的流量。更为重要的是,它可以对动态生成的,包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩,压缩效率惊人。
Tomcat5.0以后的版本是支持对输出内容进行压缩的,使用的是gzip压缩格式。
在server.xml文件中增加配置方式如下:
5.服务部署优化
当访问后台请求增多时,JS加载也会变慢,优化服务的部署能起到一定的作用。
5.1中间件线程池优化
在server.xml文件中合理增加中间件线程池的数目:
5.2中间件内存的优化
在catalina.bat文件中合理增加中间件的内存:
5.3合理部署服务
漳州项目中的GIS服务和多个其他服务部署在同一个中间件下。由于GIS服务的访问量远大于其他项目服务。在访问量骤升时会对其他服务造成一定的卡顿。
解决方案是对GIS项目在服务器上单独发布。
有博友给出一个建议:把动态请求和静态请求分离,单独部署静态文件服务器。此方法个人觉得很好。
5.4合理集群
设置多个服务节点,进行服务的负载均衡配置。
-----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/
如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^
转载于:https://www.cnblogs.com/naaoveGIS/p/4500406.html
优化JS加载时间过长的一种思路相关推荐
- 页面加载时间过长的解决
有时候会遇到这样的问题: 页面加载时间很长,需要一个友好界面来load这段空白时间, 而页面未加载的时候,页面里面的表单元素都是不存在的, 那前台写的初始化的js肯定是用不了了, 怎么办? 到网上搜了 ...
- 移动4G网络App页面加载时间过长
移动4G网络App页面加载时间过长 发现问题 2016年12月份开始,使用android客户端的部分用户反映在使用移动4G网络的情况下,App内的页面加载时间过长,几乎加载不出来,导致无法正常使用Ap ...
- Mp4视频首帧加载时间过长问题分析
一.背景说明 用户反映某课程视频(mp4格式)从打开播放器到第一帧画面显示,加载时间过长,影响观看体验. 二.时间埋点 1.定位耗时问题,最直接的方法是在关键节点埋点,打印时间戳,找出耗时操作.项目使 ...
- Python+selenium自动化:页面加载慢、超时加载情况下内容已经加载完毕的快速执行脚本解决方案,页面加载时间过长优化方案
driver.set_page_load_timeout(3) 页面加载时间设置 3 秒,执行到某一步涉及页面加载如果加载时间超过 3 秒就会停止加载并抛出异常,其实这个时候页面内的元素已经加载出来了 ...
- 如何优化网站加载时间
一.背景 我们要监测网站的加载情况,可以使用 window.performance 来简单的检测. window.performance 是W3C性能小组引入的新的API,目前IE9以上的浏览器都支持 ...
- vue首屏性能优化,解决页面加载时间过长(白屏)方法
vuecli做了个spa项目,大概有几十个个路由 直接 npm run build打包出来,有一个 1M的巨大 js文件,导致首页白屏时间过长 分析工具 vuecli 2.x自带了分析工具,只要运行 ...
- Openvino IGPU(GPU) 读取模型(加载时间过长)中的读取缓存加速方式
cl_cache的定位还未设定: cl_cache 这是一种机制,用于缓存应用程序以文本形式提供的 OpenCL 内核的二进制表示.通过存储二进制表示,只需要第一次编译,这提高了性能. 在工作目录中, ...
- vscode中设置npm install加载时间过长
问题: 产生原因: 默认使用国外镜像 npm config get registry #查看当前镜像地址 解决方式: 修改镜像地址 npm config set registry http://reg ...
- vue项目优化 - 网站首屏加载时间
文章目录 1. 首先打包后看看加载时间 2. vendor 2.1. 路由懒加载 2.2. (@vue/cli < 3.0.0) map.gzip.console.log 2.3. (@vue/ ...
最新文章
- javascript中for循环和setTimeout同时使用,出现的问题
- IOS开发之sqlite封装
- [转贴]IT外包服务商如何构建高效率的服务台运营机制
- JS正则表达式详解(转)
- 对 Linux 新手非常有用的 20 个命令
- 笔记本输入法, u、i 等字母变成了数字
- TIMING_03 时序分析原理
- Windows环境下Android Studio系列5—日志调试
- [蓝桥杯2018决赛]阅兵方阵-模拟,枚举
- IOS资源丰富的听书软件<白鲨听书>
- python做动画的库_用matplotlib动画库制作等分法动画
- Android 四大组件系列篇
- at shutdown 不起作用_at胎是什么胎
- UOS U盘复制性能,3M
- 罗永浩被判为“老赖”最新回应:“卖艺”也要还完债,锤子科技会做下去
- 多线程_线程插队_join()方法与锁的释放
- docker部署mysql出错:mysqld: Can't read dir of '/etc/mysql/conf.d/' (Errcode: 13 - Permission denied)
- 易语言编写登录小程序
- 什么是敏捷管理 常用的敏捷Scrum会议有哪些
- JPEG图像压缩和解压缩操作