Javascript无阻塞加载具体方式_javascript技巧_脚本之家

由于浏览器是单线程的,因此脚本在载的时候会阻塞下载其它资源;虽然在现在浏览器已经有所改善,但仍然有待改进。
很显然,脚本必须按顺序执行,但没有必要按顺序下载,解决方法:
1。内嵌JS
通常由于页面大小和缓存能带来更多好处,因此外部文件引入JS更好一些;
在少数情况下,比如首页、少量JS情况下尚可接受。 2。XHR Eval
通过XMLHttpRequest从服务器端获取脚本。
主要缺陷是,通过XHR获取的脚本必须部署在和主页面相同的域中。 复制代码 代码如下: Ajax.get(“test.js”, function
{ eval; 3。XHR注入 使用XHR获取脚本并创建script标签。
同样,通过XHR获取的脚本必须部署在和主页面相同的域中。 复制代码 代码如下: Ajax.get(‘test.js’, function
{ injectscript; function injectscript { var s = document.createElement;
s.text = scriptText; document.getElementsByTagName[0].appendChild; }
4。Script in Iframe
将需要的脚本放入到一个页面中,然后通过iframe来加载该页面。
缺点是iframe本身的开销比较大,另外浏览器安全机制不允许iframe中的js访问跨域的父页面,反之亦然。
5。Script DOM Element JS动态创建script DOM元素并设置其src属性。
复制代码 代码如下: var scriptElem =
document.createElement; scriptElem.src = ”;
document.ge[0].appendChild; 6。Script Defer
给script标签添加defer属性。 缺点是只有IE和一些新浏览器支持。 复制代码 代码如下:

威尼斯网址开户网站 ,看了《高性能JavaScript》的读书笔记

1.HTML5实现了script的async属性,这个新的属性可以让js在浏览器中以非阻塞的模式加载,另外script还有一个defer属性,这个属性目前所有浏览器都已实现(除了firefox和chrome的早期版本),IE这方面做得好,从一开始就支持些属性。
复制代码 代码如下: //async

浏览器为了确保正确执行脚本和呈现布局在浏览器加载和执行完成它之前会完全阻塞页面后续内容的呈现和其他资源的加载。

7。document.write Script Tag
使用document.write把HTML标签script写入页面。
缺点是只有在IE中是并行加载脚本的。 复制代码 代码如下: document.write(“

几个原则:

//defer

在页面的加载过程中如果可以做到内容的逐步呈现,对于良好的用户体验来说是非常重要的。通常我们也会在wondow对象的onload事件处理函数中做一些事情,但由于脚本阻塞加载和呈现的特性这一方面增加了页面载入时间推迟了onload事件的触发,另一方面也延迟了用户所期待的反馈。这就需要我们使用一些方法来让浏览器以非阻塞的方式加载外部脚本。

1、将脚本放在底部

2.async和defer的区别
带有async或者defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的onload事件处理,
在script下载完成后调用,用于做一些和此script相关的初始化工作。它的不同之处在于async一旦下载完成就立即执行,不确保执行的顺序,而defer能确保js是在按照其在页面中的顺序执行(在DOMContentLoaded事件之前)。
3.为了解决浏览器兼容问题可以使用下面的代码进行处理 复制代码 代码如下: function lazyload() { var
elem = document.createElement; elem.type = “text/javascript”; elem.async
= true; elem.src = “js/dquery.js?v=11”; //对应的JS文件
document.body.appendChild; } if (window.addEventListener) {
window.addEventListener(“load”, lazyload, false); } else if {
window.attachEvent; } else { window.onload = lazyload;}
由于是异步加载所以使用相应js内容就需要在window.onload事件中使用,直接写在页面中会报脚本错误,如:

一 使用XMLHttpRequest对象异步方式加载外部脚本。

还是在head中,用以保证在js加载前,能加载出正常显示的页面。

这种方式好处是触发较少的浏览器忙指示器,能够被所有现代浏览器的所支持。不足的之处在于由于浏览器的跨域安全机制所以只能允许加载同域下外部脚本。另外如果多个脚本之间存在依赖关系的话,需要使用编写相关的队列管理脚本来控制多个脚本的执行顺序。

内联和外部文件

二 使用Javascript来动态创建外部脚本的SCRIPT元素

带defer属性的

这种方式是我认为跨域并行加载外部脚本情况下的最佳方案,实现方法是使用Javascript来动态的创建在HTML中引用外部脚本所需要srcript元素并给创建的srcript元素的src属性设置相应的外部脚本的URL来实现和其他资源并行加载。

此种子文件大约10KB,

四 使用iframe加载外部脚本

使用:复制代码 代码如下:YUI().use{

这种方式我们需要使用一个新HTML页面把外部脚本转换成到该HTML页面的行内脚本,然后在主页面中使用iframe加载这个包含脚本的HTML页面,使用这种方式需要重构部分代码来访问主页面中DOM元素。而且IFRAM是开销相对较大DOM元素,同样也有跨域限制。

Y.Dom.addclass当所有代码可用时,回调函数被调用,YUI实例作为参数传入,就可以立即使用新下载的功能。

五 使用Script标签的 derfer 属性

The LazyLoad library

这种方式是实现非阻塞并行加载外部脚本的最简单的方式,只需要在引用外部脚本的是常规方式上给SCRIPT标签应用defer属性即可。但是使用这种方式加载外部脚本缺点是它只在部门浏览器中实现并行加载因此兼容性欠缺。

使用:先引入:lazyload-min.js

六 docuument.write script tag

复制代码 代码如下:LazyLoad.js{

这种方式实现起来也比较简单,就是直接使用是javascript的document.write方法来输出在HTML中引用外部脚本的script标记的字符串。不足之处和方法五一样兼容性欠缺。

Appliction.init多个文件:复制代码
代码如下:LazyLoad.js([“a.js”,”b.js”],function(){

总结

Application.initThe LABjs library

上述几种方式需要根据具体需求,如是否需要跨域?是否需要确保脚本按顺序执行?是否需要触发更多或更少的浏览器的忙指示器?以及兼容性,支持的代码量来确定来综合考虑那种方式才是追合适的。

先引入:lab.js复制代码
代码如下:$LAB.script.wait{

Application.init多个文件,就链式写法

他的独特之处在于能够管理依赖关系。

可以通过wait()函数指定哪些文件应该等待其他文件。

例如:b.js的代码保证不在a.js之前运行复制代码 代码如下:$LAB.script.script.wait{

Application.init这样,虽然两个文件是并行下载的,却能保证a.js能在b.js之前执行

相关文章