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 相关文章推荐
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
js实现表格筛选功能
Jan 18 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
vue组件中的数据传递方法
May 14 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
用python写asp详细讲解
2013/12/16 Python
python基础教程之元组操作使用详解
2014/03/25 Python
Python中有趣在__call__函数
2015/06/21 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
python实现名片管理系统
2018/11/29 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
python ubplot使用方法解析
2020/01/10 Python
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
C语言笔试题
2014/09/04 面试题
追悼会子女答谢词
2014/01/28 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
施工安全协议书范本
2014/09/26 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记