js并行加载，顺序执行

<script>运行脚本或加载外部文件时，会阻塞页面渲染，阻塞其他资源的加载。如果页面中需要加载多个js文件，在古老浏览器中性能会比较糟糕。 因此有了最原始的优化原则：把脚本放在底部。

如何实现js非阻塞、并行加载，甚至能保持执行顺序呢？各浏览器表现如何？站在巨人的肩膀上，Kyle Simpson、Nicholas C. Zakas和Steve Souders对此有过总结和方案。

背景

1. Script DOM Element。 动态插入<script>，不会阻塞，但无法保持执行顺序。但唯有Firefox可以保持执行顺序，但也差点在Firefox 4 nightly的版本中去掉这个特性。

2. HTML5 async 非阻塞，加载完后立即执行，不保证顺序。这个属性不管有没有值、值为true或false，都是等同的效果（由于Kyle的推进，不能保证执行顺序与其值无关了）。

Google Analytics的新版嵌入代码就结合使用了上面两个方案，如：

1 2 3 4 5 6 7 8

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')           + '.google-analytics.com/ga.js';   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

3. IE partsandspares.co.za defer属性。不阻塞，可以保证顺序，在DOM加载完成后执行（在DOMContentLoaded之前）。

4. <script>的type属性设为”script/cache” 非标准的type属性，使js文件只会被加载而不会执行。需要执行时，创建一个type属性为”text/javascript”的正常<script>元素，src设为前面已经加载的js地址即可，执行顺序开发者可控（执行时机也完全可控）。类似的方式也有通过<img>来做预加载的。

5. document.write。文档流关闭后执行会清空整个页面。

6. XHR 并行加载，执行顺序可控，但有同域限制。

基本需求

Steve Souders 和 Nicholas C. Zakas 一起总结了下，认为js加载方案必须解决以下问题：

1. 支持特性检测
2. 不会重复加载
3. 支持并行加载

开发者的美好愿望

Nicholas C. Zakas 几经周折，有了以下的提案，分离js的加载和执行，方便开发者自由控制js的执行时间。

1 2 3 4 5 6 7 8 9 10 11 12 13

var script = document.createElement("script");   // 此属性仅可由js动态写入，在HTML标签中直接写入无效 script.preload = true;   // src赋值后，立即触发加载（仅加载，不会执行js内容） script.src = "foo.js";   // onpreload是需要新支持的事件，加载完成后触发此事件 script.onpreload = function(){     // 在需要时，将加载的js插入到DOM中，即可运行生效     document.body.appendChild(script); };

基于特性检测feature detection（区别于特性推测feature inference）

var isPreloadSupported = (typeof script.preload == “boolean”);

这一特性只有在Javascript中动态赋值时生效，直接写到HTML标签上时是无效的。

但这只是一个提案，开发者们的美好愿望，而非被浏览器支持的标准。目前这一提案已在LABjs中支持，Zakas本人也在积极推进此提案的标准化。

而Kyle在推进另外一种方式，即要求对含有属性async=false的<script>保持执行顺序。如果async=true，则一旦加载完则会马上执行脚本，不会严格保持顺序。默认地，页面中的<script>的async属性为false，即保持执行顺序；js创建的<script>的async属性为true，即加载完立即执行，不保证顺序。

为了支持特性检测，一个由js创建的<script>标签默认具有async=true的属性。

Kyle的这一提案已被HTML5小组接受放入草案，在Firefox 4 nightly版本中的也已实现。

Firefox 4为了更向HTML5标准看齐，一度在开发者版本中去掉了对动态创建<script>来加载js文件的执行顺序支持：

<script> elements created using document.createElement() and inserted into a document now behave according to the HTML5 specification by default. Scripts with the src attribute execute as soon as available (without maintaining ordering) and scripts without the src attribute execute synchronously.

为此，Kyle向WebKit开发团队抗议，提了一个bug，最终得到了如他所愿的支持：

To make script-inserted scripts that have the src attribute execute in the insertion order, set .async=false on them.

Zakas很欣赏Kyle的方案，Kyle在LABjs中也支持了Zakas的提议，各浏览器们也这么和谐就好了。

转自：http://www.impng.com/web-dev/parallel-download-ordered-execute.html

评论

1 楼 GreatExpectations 2016-09-06  

666可以可以哦