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 相关文章推荐
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
jquery 插件学习(四)
Aug 06 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
php目录拷贝实现方法
2015/07/10 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
如何用python处理excel表格
2020/06/09 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
相亲大会策划方案
2014/06/05 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
员工工作心得体会
2019/05/07 职场文书