精彩人生

{总结,是为了更好的开始}专注于web技术,每天进步一点点{学无止境,积累创造财富}...

关于js对页面加载影响的测试

这两天在处理一个小需求,目的是当用户页面里引入一段外部js(外部js由内部生成,用户手动添加),然后根据外部js提供参数回调不同的js文件和方法(js文件和方法未知,由参数传递),回调的js文件异步在客户的页面里加载,目前已实现基本功能,之所以这么做就是为了尽可能的减小外部js对客户页面加载效率的影响。

事实上目前接触到公司的产品中也遇到了这种情况,页面里因为有较多的辅助功能而引入了比较多的js文件,本地测试开发的话基本看不出对页面加载的影响,但是在模拟的较差网络环境下页面瞬间空白的出现时间有点超过预期,虽然不仅仅是那些js文件造成的加载白屏现象,但是过多js零碎文件的引入任然拖慢了页面的加载速度,目前建议使用$LABjs管理和Combo脚本文件来优化。

鉴于这个小需求又想到了js对大型网站页面加载的影响条件,下面根据不同的情况做了不同的对比,已经尽可能的模拟同等条件下的载入效果,展示上会略有不同,已经取了平均值,数据还算是比较可靠。

第一种方式:js文件在页面元素上面加载

目前较多网站采取了这种方式,虽然这种方式会阻塞页面流的正常加载,但是也是最安全的一种方式。

第二种方式:js放到页面元素底部加载

Yslow建议的方式,会在页面元素先载入完毕再加载js文件,一些网站优化后都会把js文件放到底部加载。

第三种方式:js文件顺序依赖异步加载

一些网站会使用这种方式,这种方式不阻碍页面流的加载,但是当js文件过多时就会与“减少HTTP请求”这个条件冲突,页面载入完毕时间明显比非顺序依赖加载js文件方式要长一些。

第四种方式:另一种js文件顺序依赖异步加载

和第三种方式相同,只不过代码更加完善,更加适用于项目。可以看出页面载入时间依然较长。

第五种方式:利用$LAB.js

去年新版Twitter就是使用了$LAB.js的方式来管理页面里的js文件,使用$LAB.js的神奇之处在于即不会阻碍页面流的加载,又可以实现js并行顺序依赖加载,这种方式非常适合页面里有较多的js文件。

引入外部js大概就上面几种常用情况,但实际运用还需要根据项目需求,总结一些就是

合理Combo文件,你的服务器不会因为一个几KB或者几十KB的Combo后的js文件拖慢速度;

无阻塞加载js文件,优先保证页面元素加载。

最大化浏览器的多线程性能。

相信你的服务器,避免过度优化。

php可以使用flush();

PS:

Demo参考原型:动态加载js

/*Make A Hard Decision*/

阅读更多
个人分类: javascript
想对作者说点什么? 我来说一句

js测试第三方网页加载时间

2017年10月18日 1KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭