脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 加载 Javascript

加载 Javascript 最佳实践

 更新时间：2011年10月30日 23:37:06   作者：  
相信很多与页面打过交道的同学都对 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生

相信很多与页面打过交道的同学都对 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生。而这 35 条最佳实践中，对 Javascript 的加载顺序的要求是：Put Scripts at the Bottom。因为根据 HTTP/1.1 specification 看来，在同一时间加载两个文件是最理想的，而 Javascript 脚本会阻碍平行下载。Steve 说那是 2008 – 2009 那个时代用的。现在，加载 Javascript 已经有了革命性的化变。

javascript-download

在开讲之前，有一个必须解决的问题是：为什么我们要把 JS 文件放在 </body> 之前的最底部。根本原因是，它不能平行下载。而其实并不是所有浏览器都不支持。现在大部分浏览器都支持 Script 的平行下载，除了老掉牙的 IE6&7、Firefox 2&3.0、 Safari 3、Chrome 1。但我们最熟悉的老掉牙同学 IE6 （或以IE为核的那些壳）还是中国（甚至世界上）市场上占用率最高的浏览器，因此我们需要一个折衷的方案。

一、分析

我们有6种方法可以实现平行（NON-Blocking）下载：

  • XHR Eval – 用 XHR 下载，并 eval() 执行 responseText.。
  • XHR Injection – 用 XHR 下载，在页面中动态创建一个 script 元素，并将 responseText 作为其 text 。
  • Script in Iframe – 把脚本放在 HTML 中，使用 ifame  来下载它。
  • Script DOM Element – 动态创建一个 script 元素，把 src 指向脚本URL.
  • Script Defer – 给 script 标添加 defer 属性
  • document.write Script Tag – 利用 document.write 把 <script src=""> 添加到 HTML 中。但这个只对 IE 有效。

兼容性可看下图：

Technique Parallel Downloads Differ Existing Scripts Busy Indicators Ensures Order Size (bytes)
XHR Eval IE, FF, Saf, Chr, Op no no Saf, Chr - ~500
XHR Injection IE, FF, Saf, Chr, Op no yes Saf, Chr - ~500
Script in Iframe IE, FF, Saf, Chr, Op no no IE, FF, Saf, Chr - ~50
Script DOM Element IE, FF, Saf, Chr, Op yes yes FF, Saf, Chr FF, Op ~200
Script Defer IE, Saf4, Chr2, FF3.1 yes yes IE, FF, Saf, Chr, Op IE, FF, Saf, Chr, Op ~50
document.write Script Tag IE, Saf4, Chr2, Op yes yes IE, FF, Saf, Chr, Op IE, FF, Saf, Chr, Op ~100

二、方案

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

0405-load-scripts-decision-tree-04

从总体上看来，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="http://your.cdn.com/first.js"></script>
<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="foo.js"></script>

四、实践
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="core.js"></script>

在使用的时候，再利用 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
您可能感兴趣的文章:

相关文章

  • js实现类似新浪微博首页内容渐显效果的方法

    js实现类似新浪微博首页内容渐显效果的方法

    这篇文章主要介绍了js实现类似新浪微博首页内容渐显效果的方法,实例分析了渐显效果的实现要点与方法,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解

    对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断JavaScript程序的执行，从而造成副作用；而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑
    2014-03-03
  • 浅谈nodeName,nodeValue,nodeType,typeof 的区别

    浅谈nodeName,nodeValue,nodeType,typeof 的区别

    本文主要简单介绍了nodeName,nodeValue,nodeType,typeof 的区别,算是知识点的一个小总结，希望对小伙伴们有所帮助
    2015-01-01
  • ES6 javascript中Class类继承用法实例详解

    ES6 javascript中Class类继承用法实例详解

    这篇文章主要介绍了ES6 javascript中Class类继承用法,结合实例形式较为详细的分析了ES6继承的基本用法、相关属性、方法与使用技巧,需要的朋友可以参考下
    2017-10-10
  • JavaScript实现twitter puddles算法实例

    JavaScript实现twitter puddles算法实例

    这篇文章主要介绍了JavaScript实现twitter puddles算法实例,本文源自twitter的一道面试题,本文使用js解开了这首题,需要的朋友可以参考下
    2014-12-12
  • JS中如何实现复选框全选功能

    JS中如何实现复选框全选功能

    本文通过实例代码给大家介绍了js中实现复选框全选功能，代码简单易懂，非常不错，需要的朋友参考下
    2016-12-12
  • JavaScript 笔记二 Array和Date对象方法

    JavaScript 笔记二 Array和Date对象方法

    本篇主要讲解本地对象Array和Date的各种方法。
    2010-05-05
  • JS正则获取HTML元素的方法

    JS正则获取HTML元素的方法

    这篇文章主要介绍了JS正则获取HTML元素的方法,结合实例形式分析了JS针对页面HTML元素正则操作相关技巧与注意事项,需要的朋友可以参考下
    2017-03-03
  • 微信小程序实现购物车功能

    微信小程序实现购物车功能

    这篇文章主要为大家详细介绍了微信小程序实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • javascript实时显示当天日期的方法

    javascript实时显示当天日期的方法

    这篇文章主要介绍了javascript实时显示当天日期的方法,可实时显示当前日期及星期的功能,非常简单实用,需要的朋友可以参考下
    2015-05-05

最新评论