加载 Javascript 最佳实践

兼容性可看下图：

二、方案

对于究竟应该使用哪种方案。这完全取决于你需要自身的需要。这张图描述了什么时候使用什么方法：

从总体上看来，Script DOM Element 是比较好的方案。NCZ 的博客上提过，目前最好的技术是：

1. 创建两个 JavaScript  文件。第一个文件只提供动态下载 Javascript 的代码，第二个文件则包含所有其他页面所需脚本的文件。
2. 像 <script> 在页部（</body> 之前）引入第一个文件。
3. 创建第二个 <script> 来执行下载第二个 Javascript 文件的函数和其他的初始化代码。

三、实现代码

根据上面的提到的技术。NCZ 推荐第一个文件只包含相应的实现第二个文件动态加载的代码：
复制代码 代码如下:
function loadScript(url, callback){

var script = document.createElement("script")
script.type = "text/javascript";

if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}

script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}

然后，我们可以在页面中这样做：
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/first.js"><script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
//初始化你的代码
});
</script>

在 HTML5 上，我们可以使用 async 属性。这个 HTML 属性的作用正是我们需要的 NON-Blocking 下载技术。虽然目前支持的浏览器并不多（似乎只有 Firefox 3.6+ ?），但给需要平行下载的 Javascript（按照方案看来，一般是第一个 JS 文件） 加上这个属性，也不会影响其他不支持的浏览器，所以，是推荐使用的。
复制代码 代码如下:<script type="text/javascript" async src="/UploadFiles/2021-04-02/foo.js">四、实践
YUI3 的 Loader 使用了 NCZ 的这样的方法。而在支付宝。我们也使用了类似的方法。这里简单说一下。
复制代码 代码如下:
<script type="text/javascript" charset="utf-8">
// 配置 combo 服务的 PATH
araleConfig = {
combo_host: "http://domain.com",
combo_path: '/path/to/the/compressed/file'
}
</script>
<script type="text/javascript" src="/UploadFiles/2021-04-02/core.js">
在使用的时候，再利用 Loader.use() 来实现代码的动态加载。当然，这里不仅仅是动态加载，还有一定的缓存机制在里面。建议你查看相关的 combo 服务的技术。目前支付宝前端架构组的工友们，已经在这一块取得了一些不错的进展（根据测试报告，速度是非常不错的，可能会在适当的时候开源出来）。

五、总结
前端性能优化方面。还有很多东西可以做。并且，随着 HTML5 技术的出现和 Javascript 技术的不断创新，相信还有更多东西是值得期待。前端们，加油吧，未来有很多东西应该是由你来主导的。

Reference:

1. Loading Scripts Without Blocking
2. The best way to load external JavaScript
3. Evolution of Script Loading
4. What is a non-blocking script?
5. HTML5 – Scripting: async Attribute