javascript延迟加载方式
来源:互联网 发布:阿里巴巴云计算 编辑:程序博客网 时间:2024/04/28 20:10
网页中通常在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 Explorerscript.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延迟加载方式
- Javascript延迟加载的方式(未完)
- js延迟加载方式
- 页面延迟加载Javascript
- javascript图片延迟加载
- javascript延迟加载图片
- 【译】延迟加载JavaScript
- 延迟加载JavaScript
- 实现延迟加载的方式
- 延迟加载三种方式
- js延迟加载的方式
- JS延迟加载的方式
- javascript力道上延迟加载
- javascript页面加载顺序以及延迟加载
- 网页内容延迟加载实现方式
- 【单例】之延迟加载实现方式
- js延迟加载的方式有哪些?
- 延迟加载(Lazyload)三种实现方式
- .src.rpm文件安装
- Android触摸事件分发机制
- OC之【@property的用法】
- 清空DNS缓存
- 使用单例模式实现mysql类
- javascript延迟加载方式
- NYOJ-168-房间安排-2013年10月12日16:17:14
- du命令
- Fedora17处理gedit打开中文乱码
- Fedora17处理vim打开中文乱码
- 框架整合视频
- NYOJ-206-矩形的个数-2013年10月12日16:45:37
- grep用法
- kill的用法