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

转载 2012年03月28日 21:47:30

这两天在处理一个小需求,目的是当用户页面里引入一段外部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*/

2016.12.9 js 加载过多 影响页面的加载速度

自己的代码检查了很久,才检查 出来 通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊, 一堆,最后弄得页面加载速度很慢,很慢。 解决办法:换一个j...
  • zfj2016
  • zfj2016
  • 2016年12月12日 14:01
  • 204

JS判断页面加载时间

beforeload = (new Date()).getTime(); function pageloadingtime() { afterload = (new Date()).getTi...
  • mh942408056
  • mh942408056
  • 2011年09月30日 16:28
  • 2682

不同浏览器内核简介及测试重点

现在网络上浏览器是风生水起,IE、Opera、Firefox、Safari、The World还有现在的Chrome,360,TT,搜狗 等。那可谓是百家争鸣。看似许多不同的浏览器,其实其中还是有很多...
  • nicole_jj
  • nicole_jj
  • 2012年05月09日 11:19
  • 626

汇编test、cmp对标志位的影响

CMP {cond}    Rn,operand2CMP比较指令使用寄存器Rn的值减去operand2的值,根据操作的结果影响新CPSR中相应的条件标志位,以便后面的指令根据相应的条件标志来判断是否执...
  • lmyclever
  • lmyclever
  • 2011年05月19日 19:03
  • 4562

论文-科学技术发展对人类影响面面观(科学技术与哲学课论文)

摘要人类社会发展的历史也是一部科学技术的发展史,从石器时代辅助狩猎的石斧到现代探索宇宙空间的飞船,科技进步为人类社会的发展和进步提供了巨大的动力,但是从辩证的角度分析,任何事物都具有两面性,而非十全十...
  • starshine
  • starshine
  • 2010年01月07日 18:37
  • 13190

终端电阻的效果

http://blog.sina.com.cn/s/blog_5eaf7cb90100ebbi.html 无论是RS485、CAN总线、USB。都是需要加终端电阻进行阻抗匹配的,许多工程师对...
  • bonson2004
  • bonson2004
  • 2017年03月30日 13:37
  • 481

如何让js调用不影响页面的加载速度

在WEB页面最常用的语言除了HTML、样式表外就是javascript了,但您知道怎么使用javascript才能不影响页面的加载 速度吗?本文就来解决这个疑问,我们先来看看通常js 的加载 方...
  • smeyou
  • smeyou
  • 2010年12月16日 14:18
  • 4826

原生js检测页面加载完毕的方法

原生js的页面加载完毕的使用方法为window.onload=function(){ //somecode }在jquery的影响下的错误写法为:window.onload(function(){...
  • u012536005
  • u012536005
  • 2016年10月14日 15:44
  • 2175

js页面加载之前触发的事件

$(document).ready(function(){ var param = window.location.search;//获取当前页面URL信息 //...
  • lmb55
  • lmb55
  • 2015年12月16日 19:17
  • 3229

JavaScript DOM编程艺术第七章Ajax学习笔记

关于Ajax原理 本地file浏览不要用webkit核心浏览器,要用firefox。否则就要搭建服务器后通过http访问。今天学习了Ajax从本地文件获取文本。遇到了些问题,在网络上都找到了解决...
  • where_slr
  • where_slr
  • 2017年07月08日 14:04
  • 248
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于js对页面加载影响的测试
举报原因:
原因补充:

(最多只允许输入30个字)