加载 Javascript 最佳实践
作者:sofish 来源:幸福收藏夹 时间:2011-01-16 18:29:00
相信很多与页面打过交道的同学都对 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 已经有了革命性的化变。
在开讲之前,有一个必须解决的问题是:为什么我们要把 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 有效。
兼容性可看下图:
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python入门教程之Python的安装下载配置
![](https://img.aspxhome.com/file/2023/7/86597_0s.png)
python实现对列表中的元素进行倒序打印
![](https://img.aspxhome.com/file/2023/7/99327_0s.jpg)
Python中ROC曲线绘制
![](https://img.aspxhome.com/file/2023/8/97358_0s.jpg)
matplotlib.pyplot绘图显示控制方法
![](https://img.aspxhome.com/file/2023/3/62903_0s.jpg)
mysql实现多表关联统计(子查询统计)示例
![](https://img.aspxhome.com/file/2023/7/129917_0s.png)
Python实现socket非阻塞通讯功能示例
详解python中静态方法staticmethod用法
![](https://img.aspxhome.com/file/2023/3/69633_0s.png)
红黑树的插入详解及Javascript实现方法示例
![](https://img.aspxhome.com/file/2023/0/136240_0s.png)
select 终极美化
Javascript——浅析注册事件
Go语言包管理模式示例分析
![](https://img.aspxhome.com/file/2023/5/123865_0s.png)
sqlalchemy实现时间列自动更新教程
Go处理json数据方法详解(Marshal,UnMarshal)
简单的网站页面有什么好处
状态机的概念和在Python下使用状态机的教程
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
Python中字符串List按照长度排序
简单谈谈axios中的get,post方法
Python 使用 PyQt5 开发的关机小工具分享
windows下python安装pip方法详解
![](https://img.aspxhome.com/file/2023/8/72918_0s.png)