js异步加载的三种解决方案


Posted in Javascript onMarch 04, 2013

默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。

(1) defer,只支持IE
defer属性的定义和用法(我摘自w3school网站)
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。
有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。

如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。
示例:

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

(2) async
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用,则会异步执行。
示例:
<script type="text/javascript" src="demo_async.js" async="async"></script>

注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
注释:有多种执行外部脚本的方法:
•如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
•如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
•如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

(3) 创建script,插入到DOM中,加载完毕后callBack,见代码:

function loadScript(url, callback){ 
var script = document.createElement_x("script") 
script.type = "text/javascript"; 
if (script.readyState){ //IE 
script.onreadystatechange = function(){ 
if (script.readyState == "loaded" || 
script.readyState == "complete"){ 
script.onreadystatechange = null; 
callback(); 
} 
}; 
} else { //Others: Firefox, Safari, Chrome, and Opera 
script.onload = function(){ 
callback(); 
}; 
} 
script.src = url; 
document.body.appendChild(script); 
}
Javascript 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
javascript复制对象使用说明
Jun 28 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 #Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 #Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 #Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 #Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 #Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 #Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 #Javascript
You might like
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php csv操作类代码
2009/12/14 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
女方回门宴答谢词
2014/01/14 职场文书
英文商务邀请信
2014/01/22 职场文书
保护环境倡议书
2014/04/14 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang