高性能JavaScript 加载和执行

jopen 9年前

前言

本章主要讲述如何加载脚本使得用户能有良好的用户体验，而核心内容就是JavaScript的异步加载。之前写过一篇 不得不说的JavaScript异步加载 ，相似的内容就不多加描述，讲些不同的东西，主要讲下JavaScript文件加载器 labjs 的常用方法。

流水账

脚本位置：推荐将所有的<script>标签尽可能放到<body>标签的底部，也就是</body>之前，这样就能在执行js代码之前将用户界面呈现出来，改善用户体验。

组织脚本：由于每个<script>标签初始下载时都会阻塞页面渲染，所以减少页面包含的<script>标签数量有助于改善这一情况。通常一个大型网站或者网络应用需要依赖数个JavaScript文件，你可以把多个文件合并成一个，这样只需要一个<script>标签，就可以减少性能消耗，实质是减少了http请求。

无阻塞的脚本：defer、动态脚本元素、XMLHttpRequest脚本注入（和动态脚本元素技术相比的优点是你可以下载JavaScript代码但不立即执行，但是因为同源策略所以有很大的局限性）、 LazyLoad类库 。

LABjs

接下来就是labjs的时间了，labjs是一个js文件加载器，而requirejs和seajs则是模块加载器，模块加载器一般可以降级为文件加载器使用。labjs通过优雅的语法（script和wait 链式）实现了这两大特性，核心是性能优化，可以管理文件依赖，并且“异步”执行。下面通过具体的例子来简单讲讲这两大api的用法。

如果你只需实现动态脚本元素技术那样的多个脚本并发“异步”执行，那实在太简单不过了： 

$LAB .script("script1.js")    .script("script2.js");

当然你也可以用数组或者对象的方式传参，详细可以参考 文档 ，我也会在下一篇中详细介绍labjs的常用api。

如果说加载完两个文件（或者多个），你需要一个回调，这时候就要用到wait了： 

$LAB    .script("script1.js")    .script("script2.js")    .script("script3.js")    .wait(function() {  // 等待所有script加载完再执行这个代码块        // ...    });

如何管理文件依赖？也很简单： 
$LAB    .script("script1.js") // script1, script2, and script3 相互不依赖, 可以按照任意的顺序执行    .script("script2.js")    .script("script3.js")    .wait(function(){      console.log("Scripts 1-3 are loaded!");    })    .script("script4.js") // 必须等待script1.js,script2.js,script3.js执行完毕之后才能执行    .wait(function(){initScript4Func();});

script4依赖script1、script2和script3，通过以上代码依赖文件能够异步并行执行，而等它们三个文件执行完后执行 script4，效率大大提升。需要特别注意的是，script中只能包含.js结尾的文件（或者对象、数组），而不能是一个匿名的js函数，如果是则会立即执行。

来自：http://www.tuicool.com/articles/EFVbayN