前端JS装载策略与性能分析实战指南

JavaScript装载策略

一、装载

首先加载静态页面中引用的JavaScript文件，随后检查这些文件中是否定义了onload函数。例如，若main.js包含onload函数，则需进一步检查该函数内部是否引用了其他JS文件。对于被引用的JS文件，应优先加载，且其加载顺序需与main.js中的引用顺序保持一致。

所有脚本加载完成后，开始执行onload函数。鉴于JavaScript按顺序执行的特性，为提升页面响应速度，通常建议在onload函数中仅处理页面渲染逻辑。而事件绑定、Ajax请求等耗时操作，可酌情延后执行。

响应速度分析方法

二、响应速度分析

1.借助工具进行分析

利用各大浏览器的开发者工具（推荐Firefox）可以便捷地查看各个JS文件、HTML文件、CSS文件及图片的加载与执行时间。

2.硬编码分析

在第一步中，我们基本能定位到瓶颈JS文件。在瓶颈JS中，可以使用console.time('test')和console.Endtime('test')语句对JS函数及代码块掐取执行时间。不过console语句只在非IE浏览器中执行有效，而在IE下会报错。如果你偏爱使用IE，那就使用时间戳吧。在掐取时，比较方便的方法是，直接掐住整个js文件，然后使用火狐浏览器，按F12可以在控制台中看到目标js中所有函数及代码块的耗时，即可定位到瓶颈代码处。