JS加载与运行

最新推荐文章于 2023-04-19 16:23:03 发布

luyajun0730

最新推荐文章于 2023-04-19 16:23:03 发布

阅读量316

点赞数 1

高性能JS编程之加载与运行

原则：

第一条定律：将脚本放在底部—— 因为脚本阻塞其他页面资源的下载过程，所以推荐的办法是：将所有 <script> 标签放在尽可能接近 <body> 标签底部的位置，尽量减少对整个页面下载的影响。保证页面在脚本运行之前完成解析

第二条定律：限制页面的 <script> 总数—— 由于每个 <script> 标签下载时阻塞页面解析过程，所以限制页面的 <script> 总数也可以改善性能。这个规则对内联脚本和外部脚本同样适用。通过一个打包工具实现将多个JS文件打包为一个。页面的 <script> 标签越少，页面的加载速度就越快，响应也更加迅速。

过程分析：

JavaScript具有阻塞特征，当JavaScript 运行时其他的事情不能被浏览器处理，这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。当浏览器遇到一个<script>标签时，无法知JavaScript 是否在<p>标签中添加内容。因此，浏览器停下来，运行此JavaScript 代码，然后再继续解析、翻译页面。同样的事情发生在使用src 属性加载JavaScript 的过程中。浏览器必须首先下载外部文件的代码，这要占用一些时间，然后解析并运行此代码。此过程中，页面解析和用户交互是被完全阻塞的。

非阻塞脚本的秘密在于，等页面完成加载之后，再加载 JavaScript 源码。从技术角度讲，这意味着在 window 的 load 事件发出之后开始下载代码。

1、如目标浏览器只包括 Internet Explorer 和 Firefox 3.5，添加 defer 属性可支出JS并行下载。任何带有 defer 属性的 <script> 元素在 DOM 加载完成之前不会被执行，不论是内联脚本还是外部脚本文件。

2、动态创建 <script> 元素，用它下载并执行代码

3、用 XHR 对象下载代码，并注入到页面中

非阻塞 JavaScript 加载库是 LABjs （ http://labjs.com/ ）， $LAB.script() 函数用于下载一个 JavaScript 文件， $LAB.wait() 函数用于指出一个函数，该函数等待文件下载完成并运行之后才会被调用。 LABjs 的独特之处在于它能够管理依赖关系， LABjs 通过 wait() 函数允许你指定哪些文件应该等待其他文件。