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

Posted 2022-06-29 yaosusu

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

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瀑布流。