加载 Javascript 最佳实践


Posted in Javascript onOctober 30, 2011

相信很多与页面打过交道的同学都对 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 最佳实践

在开讲之前,有一个必须解决的问题是:为什么我们要把 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

二、方案

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

加载 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="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
Javascript 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
js判断是否为数组的函数: isArray()
Oct 30 #Javascript
JS trim去空格的最佳实践
Oct 30 #Javascript
js中更短的 Array 类型转换
Oct 30 #Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 #Javascript
关于图片按比例自适应缩放的js代码
Oct 30 #Javascript
js 弹出菜单/窗口效果
Oct 30 #Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 #Javascript
You might like
Terran热键控制
2020/03/14 星际争霸
Views rows style模板重写代码
2011/05/16 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
React实现全选功能
2020/08/25 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python实现复制文件到指定目录
2019/10/16 Python
关于numpy数组轴的使用详解
2019/12/05 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Python PyQt5整理介绍
2020/04/01 Python
详解python中的闭包
2020/09/07 Python
python3 re返回形式总结
2020/11/20 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
夜不归宿检讨书
2014/02/25 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
外贸业务员岗位职责
2015/02/13 职场文书