javaｓｃｒｉｐｔ异步加载分析

前言
关于javaｓｃｒｉｐｔ脚本加载的问题，我相信您已经见过很多—
文件加载、文件依赖性和由1个同步脚本和异步脚本带来的执行顺序问题

由2个同步脚本和异步脚本引起的性能优化问题
深入理解脚本加载的相关方面，不仅有助于解决实际问题，而且更有利于性能优化的把握和执行。
首先看一个随机脚本标签—
复制代码代码如下所示：

如果把它放在上面，所有页面渲染都会被阻塞，以便用户在脚本加载和执行之前一直处于白屏状态，脚本最终只会让用户看到静态页面而没有活力。客户应该提供的地方分散了无效的控制和空盒子。
复制代码代码如下所示：

脚本异步加载

我是内容
在这，在test.js内容—
复制代码代码如下所示：

警报（我是头部的脚本代码，在这里执行js之后，只需启动正文内容呈现！；
我们将看到警报是一个页面空白的停顿点，但注意整个页面已经加载。如果身体有一些标签的src属性（如img标签上面），浏览器已经开始加载相关内容。总之，注意的JS引擎的定时和渲染引擎是互斥的（有些书称为UI线程）。
因此，我们需要——那些负责使页面看起来更好更好的使用脚本的人应该立即加载，并且稍后可以加载的脚本稍后将被加载。
1。延迟执行的脚本
现在把脚本放在页面标签的结尾变得越来越流行，一方面，用户可以更快地看到页面，另一方面，脚本可以直接操作已经加载的DOM元素，对于大多数脚本来说，这是一个很大的进步—
复制代码代码如下所示：


这就大大加快了网页的渲染时间，但是请注意，这可能会给用户一个互动的机会之前的页面加载bodyｓｃｒｉｐｔ。浏览器不能加载这些脚本之前加载整个文档，这是通过缓慢的连接上发送大文件的一大瓶颈。
理想情况下，脚本的加载应该在文档加载的同时进行，并且不影响DOM的呈现，这样，一旦文档准备好，就可以运行脚本了，因为相应的脚本已按标签的顺序加载。
我们可以推迟做这件事，那就是—
复制代码代码如下所示：

添加延迟属性相当于告诉浏览器：请立即加载脚本，但请等到文档准备好后，所有延迟属性脚本都在运行后运行。
这样，把延迟脚本放在头标签中，当脚本把它放在标签上时，它就带来了所有的好处，而且它也能大大增加大文档的加载速度—
复制代码代码如下所示：


但并非所有浏览器都支持延迟。一些现代的浏览器，如果推迟宣布，其内部脚本不执行段和DOM渲染操作。IE4 +支持defer属性）。这意味着，如果你想确保你的延迟脚本可以运行后，文件被加载，你必须将所有延迟的脚本代码在这种结构作为jQuery的$（document）。准备好。这是值得的，因为几乎97%的游客可以享受并行加载的好处，而其他3%个仍然可以使用全功能的Javaｓｃｒｉｐｔ。
两。脚本的完全并行化
让加载和执行脚本再次快人一步，我不想等到延迟脚本逐一运行（推迟让我们觉得等待文件加载，更有序的排队场面）不想等到文件准备运行这些脚本之后，我想加载和运行脚本尽快。在这里我们也认为HTML5 async属性，但要知道，这是一个混乱的无政府状态。

例如，我们的负载两个完全无关的第三方脚本和网页做的很好，没有他们，他们不在乎谁跑第一然后运行。因此，使用async属性这第三方脚本，不花一分钱相当于增加他们的速度。

async属性添加到HTML5。效果类似的延迟，这使得DOM渲染是当脚本下载完成。但会尽快下载执行（即JS引擎是免费的执行），它并不能保证将执行脚本为。他们将在onload事件完成。

Firefox 3.6、Opera 10.5，IE 9，和最新的Chrome和Safari支持async属性，你可以使用异步和推迟，同时使所有IE后，IE 4支持异步加载，但需要注意的是，如果将覆盖推迟重要。

然后页面模型如下所示—

复制代码代码如下所示：


我们应该注意执行顺序加载每个脚本文件，然后执行headｓｃｒｉｐｔ.js，然后加载defferedｓｃｒｉｐｔ.js的背景而渲染DOM。下一步，我们将defferedｓｃｒｉｐｔ.js这两个异步脚本在DOM渲染结束。注意，这两个脚本将运行在浏览器支持异步性障碍。
三。可编程脚本加载
尽管上述两个脚本属性的功能非常吸引人，但由于兼容性问题，应用程序不是很广泛，因此，我们使用更多的脚本来加载其他脚本。
在浏览器API级别，有两种合理的方法来抓取和运行服务器脚本。
1 >生成Ajax请求和处理响应eval函数

2 >插入标签到DOM
后一种方法更好，因为浏览器会担心创造我们的HTTP请求。此外，评估有一些实际的问题：泄漏范围，调试和性能降低。所以，加载一个脚本调用feture.js，我们应该使用下面的代码：
复制代码代码如下所示：

VaR的头= document.getelementsbytagname（很）{ 0 }；

VaR脚本= document.createelement（'ｓｃｒｉｐｔ）；

ｓｃｒｉｐｔ.src = 'feature JS；

head.appendchild（剧本）；
当然，我们要处理回调监控和HTML5规范定义了一个onload属性可以绑定回调。
复制代码代码如下所示：

ｓｃｒｉｐｔ.onload =函数（）{

console.log（'ｓｃｒｉｐｔ加载…；

}
然而，IE8和旧版本不支持onload，他们支持onreadystatechange。此外，错误处理仍然是各种奇怪的东西。在这里，你可以参考一些流行的校本加载库，如labjs，了yepnope，requirejs等等。
如下，你有一个简单的loadjs文件封装
复制代码代码如下所示：

无功loadjs =功能（URL，回调）{

VaR的头= document.getelementsbytagname（很）{ 0 }；

VaR脚本= document.createelement（'ｓｃｒｉｐｔ）；

ｓｃｒｉｐｔ.src =网址；

ｓｃｒｉｐｔ.type =文本/ javaｓｃｒｉｐｔ；

head.appendchild（剧本）；

/ /脚本标签，即W3C标准onreadystatechange事件，onload事件

/ / IE9 +还支持W3C标准的onload

var ua = navigator.useragent，

ua_version；

/ / / / 8 7 IE6

如果（ / MSIE（{ ^；} +）/测试（UA））{

ua_version = parseFloat（regexp {1美元}，10）；

如果（ua_version <= 8）{

ｓｃｒｉｐｔ.onreadystatechange =函数（）{

如果（this.readystate = =装）{

回调（）；

}

}

{人}

ｓｃｒｉｐｔ.onload =函数（）{

回调（）；

}；

}

{ { { }

ｓｃｒｉｐｔ.onload =函数（）{

回调（）；

}；

}

}；
对于document.write，异步加载脚本不在这里。现在很少有人这么做了，因为浏览器的多样性真的很棒。

需要注意的是，图像对象是异步使用的，以便预加载js文件，而内部的js代码不会执行。

最后，谈谈requirejs异步加载脚本。

requirejs并不保证目标脚本的运行秩序，只有确保其运行秩序可以满足各自的依赖需求。因此，我们确保所有的脚本都是装在尽可能平行，和脚本有序执行根据依赖关系的拓扑结构。
四。总结
好的，在这种情况下，异步加载脚本的语句已经完成。

在1的传统方式中，我们使用脚本标记直接嵌入到HTML文档中，分为两种情况—

a嵌入在头标记中。需要注意的是，这种方式不影响文档内容中其他静态资源文件的并行加载。它会影响文档内容的呈现，也就是说DOM渲染将被阻塞并在此时呈现白色屏幕。

B＞嵌入身体的标签底部避免白屏现象，我们优先考虑DOM渲染，然后执行脚本，但是问题又来了。首先，第一个问题-如果DOM文档的内容较大，交互事件的结合将被推迟，而经验是更糟一点。当然，我们需要依靠的要求，让重要的脚本执行第一。作为脚本文件是在体底部二更多的问题，这些脚本的加载延迟与剧本的比较。因此，对于身体的底部，它不是优化的最终。

C >加入defer属性-我们希望脚本是装在尽可能快的并行，我们仍然把脚本放在头上。脚本的加载时间应在文件的加载同一进行的，不影响DOM渲染。这样，脚本可以运行一次文件准备好。所以我们有性能延迟。但要注意其兼容性，而对于那些不支持defer属性浏览器，我们需要在$封装代码（文件）。准备好，如jQuery。需要注意的是，脚本所有延迟属性是秩序的执行，所以它也是严格同步。

一个小2 >，讲的都是同步执行的脚本（注意，这些脚本的加载过程是并行的，但谁是第一个触发请求谁触发请求后，再差）优化是并行执行的脚本，当然，我们知道，在一个时间点，只有一个js文件的实施，这里指的是平行的，谁先完成加载，只要JS引擎空转，立即执行。这里的优化主要分为两大类。

一>添加异步，这是能够完成上述的优化点，但它具有很高的局限性，即它只加载非依赖脚本。最恰当的例子是引入多个第三方脚本。这是不同性质的组合，这真是让人的大脑。当然，它也有兼容性问题。上述三个问题没有被广泛使用。使用同步的时候，一定要注意的相关问题。

B >脚本加载脚本-显然，我们用它来实现脚本并行执行的目的。同时，我们也方便控制脚本的依赖问题，我们使用的智能负载管理为JS requirejs异步加载。

好的，把它写在这里。

这里，我只是在谈论异步加载脚本的内容。还有一个内容是异步加载的样式文件或其他静态资源。