无阻塞加载脚本[全]
来源:互联网 发布:js将json转换成数组 编辑:程序博客网 时间:2024/06/03 09:26
script标签的阻塞行为会对页面性能产生负面影响,大多数浏览器在下载或执行脚本的同时,会阻塞下载位于它之后的资源,也会阻塞渲染位于它之后的元素。 由于浏览器是单线程的,因此脚本在载的时候会阻塞下载其它资源;虽然在现在浏览器已经有所改善,但仍然有待改进。 很显然,脚本必须按顺序执行,但没有必要按顺序下载,解决方法: 1。内嵌JS 通常由于页面大小和缓存能带来更多好处,因此外部文件引入JS更好一些; 在少数情况下,比如首页、少量JS情况下尚可接受。 2。XHR Eval 通过XMLHttpRequest从服务器端获取脚本。 主要缺陷是,通过XHR获取的脚本必须部署在和主页面相同的域中。 3。XHR注入 使用XHR获取脚本并创建script标签。 同样,通过XHR获取的脚本必须部署在和主页面相同的域中。 4。Script in Iframe 将需要的脚本放入到一个页面中,然后通过iframe来加载该页面。 缺点是iframe本身的开销比较大,另外浏览器安全机制不允许iframe中的js访问跨域的父页面,反之亦然。 5。Script DOM Element JS动态创建script DOM元素并设置其src属性。 6。Script Defer 给script标签添加defer属性。 缺点是只有IE和一些新浏览器支持。 7。document.write Script Tag 使用document.write把HTML标签script写入页面。 缺点是只有在IE中是并行加载脚本的。 有一个大家不曾广泛讨论的不同点是对于浏览器忙碌状态的影响,包括浏览器的状态栏、进度条、Tab图标以及鼠标。 当你加载多个彼此间有依赖关系的脚本时,还需要一种能够保证执行顺序的技术。 技术 并行下载 可以跨域 存在Script标签 忙碌指示 顺序保证 大小(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 在大多数情况下,Script DOM Element是一个好的选择。这种方式适用于所有的浏览器,而且没有跨域的限制,实现起来也非常的简单和易于理解。唯一的缺点是不能保证各个脚本的执行 顺序。如果需要加载多个有依赖关系的脚本,应该将这些脚本拼成一个来保证其按需要的顺序执行,或者使用别的技术。 目前异步加载时保持执行顺序的方法有下面几种,由于篇幅原因,暂不详细描述。 单个脚本 1、Hardcoded Callback 2、Window Onload 3、Timer 4、Script Onload 5、Degrading Script Tags 多个脚本 1、Managed XHR 2、DOM Element and Doc Write 本文参考《高性能网站建设进阶指南》1
Ajax.get(
"test.js"
,
function
(xhr) {<br> eval(xhr.responseText);<br>});<br>
1
Ajax.get(
'test.js'
,
function
(xhr) {<br> injectscript(xhr.responseText);<br>});<br>
function
injectscript(scriptText) {<br>
var
s = document.createElement(
'script'
);<br> s.text = scriptText;<br> document.getElementsByTagName(
'head'
)[0].appendChild(s);<br>}<br>
1
var
scriptElem = document.createElement(
'script'
);<br>scriptElem.src =
'http://domain.com/test.js'
;<br>document.ge(
'head'
)[0].appendChild(scriptElem);<br>
1
<script defer src=
'test.js'
></script><br>
1
document.write(
"<script type='text/javascript' src='test.js'><//script>"
);<br>
- 无阻塞加载脚本[全]
- 脚本无阻塞加载
- 无阻塞加载脚本/示例
- 无阻塞加载javascript脚本
- 63. 无阻塞加载脚本
- 了解无阻塞加载javascript脚本技术
- JavaScript 无阻塞加载脚本与异步脚本整合
- 使用do 框架进行javascript无阻塞加载脚本
- 高性能Javascript--脚本的无阻塞加载策略
- 高性能Javascript:脚本的无阻塞加载策略
- 高性能Javascript--脚本的无阻塞加载策略
- 高性能Javascript:脚本的无阻塞加载策略
- 高性能Javascript--脚本的无阻塞加载策略
- 高性能Javascript--脚本的无阻塞加载策略
- 高性能Javascript:脚本的无阻塞加载策略
- 高性能JavaScript:脚本的无阻塞加载策略
- 高性能Javascript:脚本的无阻塞加载策略
- 高性能Javascript--脚本的无阻塞加载策略
- AS3 zip加密解密算法一
- 请大家帮个忙关于SD卡的问题。
- flex中parentDocument parent owner 实现 drag
- Excel 冻结窗口
- 我眼中的软件测试----(二)测试在做什么
- 无阻塞加载脚本[全]
- .NET深入学习笔记(4):深拷贝与浅拷贝(Deep Copy and Shallow Copy)
- 批量查找替换字符串
- Dom4j下载及使用Dom4j读写XML简介
- [吐]IPC弱口令入侵图文详解
- 没想到CSDN里也有博客
- java中向上转型(upcast)和向下转型(downcast)
- 2011中国城市生活质量排名,人民生活质量满意度没有提高
- wince6.0 注册表的相关操作和说明