源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

无阻塞加载脚本分析[全]

  • 时间:2021-11-01 12:21 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:无阻塞加载脚本分析[全]
由于浏览器是单线程的,因此脚本在载的时候会阻塞下载其它资源;虽然在现在浏览器已经有所改善,但仍然有待改进。 很显然,脚本必须按顺序执行,但没有必要按顺序下载,解决方法: [b]1。内嵌JS[/b] 通常由于页面大小和缓存能带来更多好处,因此外部文件引入JS更好一些; 在少数情况下,比如首页、少量JS情况下尚可接受。 [b]2。XHR Eval[/b] 通过XMLHttpRequest从服务器端获取脚本。 主要缺陷是,通过XHR获取的脚本必须部署在和主页面相同的域中。
[u]复制代码[/u] 代码如下:
Ajax.get("test.js", function (xhr) { eval(xhr.responseText); });
[b]3。XHR注入 [/b]使用XHR获取脚本并创建script标签。 同样,通过XHR获取的脚本必须部署在和主页面相同的域中。
[u]复制代码[/u] 代码如下:
Ajax.get('test.js', function (xhr) { injectscript(xhr.responseText); }); function injectscript(scriptText) { var s = document.createElement('script'); s.text = scriptText; document.getElementsByTagName('head')[0].appendChild(s); }
[b]4。Script in Iframe[/b] 将需要的脚本放入到一个页面中,然后通过iframe来加载该页面。 缺点是iframe本身的开销比较大,另外浏览器安全机制不允许iframe中的js访问跨域的父页面,反之亦然。 [b]5。Script DOM Element [/b]JS动态创建script DOM元素并设置其src属性。
[u]复制代码[/u] 代码如下:
var scriptElem = document.createElement('script'); scriptElem.src = 'http://domain.com/test.js'; document.ge('head')[0].appendChild(scriptElem);
[b]6。Script Defer[/b] 给script标签添加defer属性。 缺点是只有IE和一些新浏览器支持。
[u]复制代码[/u] 代码如下:
<script defer src='test.js'></script>
[b]7。document.write Script Tag[/b] 使用document.write把HTML标签script写入页面。 缺点是只有在IE中是并行加载脚本的。
[u]复制代码[/u] 代码如下:
document.write("<script type='text/javascript' src='test.js'><\/script>");
有一个大家不曾广泛讨论的不同点是对于浏览器忙碌状态的影响,包括浏览器的状态栏、进度条、Tab图标以及鼠标。 当你加载多个彼此间有依赖关系的脚本时,还需要一种能够保证执行顺序的技术。
[b]技术[/b][b] [/b] [b][/b]  [b]并行下载[/b][b] [/b] [b][/b]  [b]可以跨域[/b][b] [/b] [b][/b]  [b]存在[/b][b]Script[/b][b]标签[/b][b] [/b] [b][/b]  [b]忙碌指示[/b][b] [/b] [b]顺序保证[/b][b] [/b] [b]大小[/b][b] (bytes)[/b]
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 本文参考《高性能网站建设进阶指南》
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部