javascript延迟加载方式

网页中通常在head中包含script标签加载js文件，但有些js文件不是很重要，比如网页数据统计的js脚本，就可以在网页显示完之后再慢慢加载，这样也有利于网页的显示效率，别在加载js脚本的过程中，页面显示一片空白。

实现延迟加载的方式有很多种：

1，直接将script节点放置在</body>之前，这样js脚本就会在页面显示出来之后再加载。

2，使用script标签的defer和async属性，defer属性为延迟加载，是在页面渲染完成之后再进行加载的，而async属性则是和文档并行加载，这两种解决方案都不完美，原因在于不是所有浏览器都支持。

3，通过监听onload事件，动态添加script节点：

//Firefox，Opera，Chrome，Safari的方式

var script = document.createElement ("script")
script.type = "text/javascript";//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){alert("Script loaded!");
};script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);

//IE的方式

var script = document.createElement("script")
script.type = "text/javascript";//Internet Explorer
script.onreadystatechange = function(){if (script.readyState == "loaded" || script.readyState == "complete"){script.onreadystatechange = null;alert("Script loaded.");}
};script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);

其实IE和其它浏览器加载添加节点的方式都一样，只是加载之后监听是否成功的事件不一样，其实这个不需要也无所谓。

4，通过ajax下载js脚本，动态添加script节点

这种方式与第二种类似，区别就在与js脚本的自动下载还是通过ajax下载，ajax的方式显然可控制性更好一点，它可以先下载js文件，但不立即执行：

var xhr = new XMLHttpRequest();
xhr.open("get", "script1.js", true);
xhr.onreadystatechange = function(){if (xhr.readyState == 4){if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){var script = document.createElement ("script");script.type = "text/javascript";script.text = xhr.responseText;document.body.appendChild(script);}}
};
xhr.send(null);

但是ajax有一个缺点，就是无法引用使用CDN方式提供的js文件，因为这种方式下，你即时通过xhr.open下载了js文件，而向body中注入script节点时还是需要向CDN请求js文件。

具体使用哪种方式就得看具体情况了，有几个原则：

如果使用延迟加载技术，那么js脚本应该不能对页面的元素进行更改；

js脚本文件的数量应该尽量少，可以将多个合并在一起。

参考文档：

1，Javascript 异步加载详解

2，JavaScript 的性能优化：加载和执行

3，defer、async属性以及JS异步加载并执行解决方案

PS：Chrome中文本框的右键菜单“粘贴为纯文本”非常好用嘛。

javascript延迟加载方式相关推荐

艾伟_转载：我对NHibernate的感受（1）：对延迟加载方式的误解
NHibernate是.NET平台上最著名的ORM框架,虽说出身于Java平台上的Hibernate,但是从外部看来这几乎就是一个.NET平台上的原生产品:有自己的社区,有自己的用户,有自己的商业支持 ...
html-JS延迟加载方式
JS延迟加载方式问题: 当浏览器解析html文件时,遇到纯script标签会先暂停html文件的解析去请求获取js文件并执行.在js代码执行完毕后才会继续解析html文件,这就会阻塞DOM的加载.所 ...
JavaScript——引入方式
JavaScript引入方式 1.编写一个简单网页 2.将JavaScript嵌入到HTML中 3.JavaScript引入方式 1.嵌入式 2.外链式 3.行内式 1.编写一个简单网页 <!D ...
面试：js 延迟加载方式
相关知识点: js 延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件. js 延迟加载有助于提高页面加载速度一般有以下几种方式: defer 属性 async 属性动态创建 D ...
c#Clay开源的动态语言dynamic框架，让您形如javascript的方式创建对象！
简介 Clay非常类似于ExpandoObject, 可以看做是ExpandoObject的加强版. 它们能够让我们在不需要定义类的情况下,就构建出我们想要的对象.Clay和ExpandoObject ...
用 JavaScript 的方式理解递归
原文地址 1. 递归是啥? 递归概念很简单,"自己调用自己"(下面以函数为例). 在分析递归之前,需要了解下 JavaScript 中"压栈"(call sta ...
JavaScript 书写方式与注释
JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互.JavaScript是浏览器解释执行的,前端脚本语言还有JScript(微 ...
javascript 创建对象方式
本文主要是对<JavaScript高级程序设计>第六章(面向对象的程序设计)的总结,书上的这章至少看了4遍是有的.该章主要讲对象的创建与继承.其中创建对象和继承方式至少6种,再加上一些方法 ...
HTML引入CSS和JavaScript的方式
高速通道 HTML结合CSS 引入CSS之内联式引入CSS之嵌入式引入CSS之外部式三种方式的比较 HTML结合JavaScript 引入JavaScript之嵌入式引入JavaScript之 ...

javascript延迟加载方式

javascript延迟加载方式相关推荐

最新文章

热门文章