拆分初始化负载,提高性能(四)

拆分初始化负载,提高性能

1  在初始化时加载必要的javaScript,其余的JavaScript稍后再加载;避免给用户带来响应停顿的印象。(在初始化页面时,很多函数下载了,但并未执行);

2   寻找拆分的函数

Firebug的JavaScript性能分析器能显示出在触发onload事件之前执行的函数名。我们可以通过这个列表,把js代码拆分成一个页面初始化需要加载的文件;另一个可以延迟加载。(需要保留醋无处理以及条件判断的代码)

Doloto可以自动拆分javascript代码的系统,可以拆分成不同的组,第一组包含初始化网页所必需的函数,剩下的在初始化函数加载完后再进行无阻塞加载。

3 未定义标识符和竞争状态

拆分javascript代码时应该注意:避免出现未定义标识符错误;

解决方案:在延迟加载的代码与用户界面元素相关链的情况下,可以通过改变元素的展现来解决延迟代码没有加载完的问题(如果延迟代码没有加载完,用户点击了这个按钮,就会出现未定义错误);

在这种情况下,菜单可以包含一个“加载中...”的图标;提醒用户还没有加载完。

 

还有个选择是延迟加载的代码里绑定界面元素的事件处理程序。菜单会初始化为静态文本,不会执行js文件;Internet Explorer 可通过attachEvent实现;其它浏览器可采用addEventListener.

在延迟加载的代码不与界面相关连时,可使用桩(stub)函数解决这个问题。(stub()函数是一个与原函数名称相同但是函数体为空,或者是一些李女士代码代替原有函数内容。初始化时插入stub()函数,调用他们时,再去加载其他的javascript代码;新增的javascript代码会覆盖桩函数。如果有需要,桩函数会返回一个值,比如一个空的字符串。也可以用桩函数记录用户的请求,并在javascript代码加载完时调用相应的代码)

 

相关例子:google的HTTP瀑布流。

 

原文地址:https://www.cnblogs.com/yaosusu/p/11273120.html