JS加载与运行

来源：互联网发布：美即黑面膜怎么样知乎编辑：程序博客网时间：2024/05/29 11:13

高性能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()函数允许你指定哪些文件应该等待其他文件。

阅读全文

1 0