无阻塞加载脚本分析[全]_Javascript教程-查字典教程网
无阻塞加载脚本分析[全]
无阻塞加载脚本分析[全]
发布时间:2016-12-30 来源:查字典编辑
摘要:由于浏览器是单线程的,因此脚本在载的时候会阻塞下载其它资源;虽然在现在浏览器已经有所改善,但仍然有待改进。很显然,脚本必须按顺序执行,但没有...

由于浏览器是单线程的,因此脚本在载的时候会阻塞下载其它资源;虽然在现在浏览器已经有所改善,但仍然有待改进。

很显然,脚本必须按顺序执行,但没有必要按顺序下载,解决方法:

1。内嵌JS

通常由于页面大小和缓存能带来更多好处,因此外部文件引入JS更好一些;

在少数情况下,比如首页、少量JS情况下尚可接受。

2。XHR Eval

通过XMLHttpRequest从服务器端获取脚本。

主要缺陷是,通过XHR获取的脚本必须部署在和主页面相同的域中。

复制代码 代码如下:

Ajax.get("test.js", function (xhr) {

eval(xhr.responseText);

});

3。XHR注入

使用XHR获取脚本并创建script标签。

同样,通过XHR获取的脚本必须部署在和主页面相同的域中。

复制代码 代码如下:

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);

}

4。Script in Iframe

将需要的脚本放入到一个页面中,然后通过iframe来加载该页面。

缺点是iframe本身的开销比较大,另外浏览器安全机制不允许iframe中的js访问跨域的父页面,反之亦然。

5。Script DOM Element

JS动态创建script DOM元素并设置其src属性。

复制代码 代码如下:

var scriptElem = document.createElement('script');

scriptElem.src = 'http://domain.com/test.js';

document.ge('head')[0].appendChild(scriptElem);

6。Script Defer

给script标签添加defer属性。

缺点是只有IE和一些新浏览器支持。

复制代码 代码如下:

<script defer src='test.js'></script>

7。document.write Script Tag

使用document.write把HTML标签script写入页面。

缺点是只有在IE中是并行加载脚本的。

复制代码 代码如下:

document.write("<script type='text/javascript' src='test.js'></script>");

有一个大家不曾广泛讨论的不同点是对于浏览器忙碌状态的影响,包括浏览器的状态栏、进度条、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

本文参考《高性能网站建设进阶指南》

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类