script的async属性以非阻塞的模式加载脚本


Posted in Javascript onJanuary 15, 2013

1.HTML5实现了script的async属性,这个新的属性可以让js在浏览器中以非阻塞的模式加载,另外script还有一个defer属性,这个属性目前所有浏览器都已实现(除了firefox和chrome的早期版本),IE这方面做得好,从一开始就支持些属性。

//async 
<script async src="dquery.js" async></script> //defer 
<script async src="dquery.js" defer> 
</script>

2.async和defer的区别
带有async或者defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的onload事件处理, 在script下载完成后调用,用于做一些和此script相关的初始化工作。它的不同之处在于async一旦下载完成就立即执行(在window.onload事件之前),不确保执行的顺序,而defer能确保js是在按照其在页面中的顺序执行(在DOMContentLoaded事件之前)。
3.为了解决浏览器兼容问题可以使用下面的代码进行处理
function lazyload() { 
var elem = document.createElement("script"); 
elem.type = "text/javascript"; 
elem.async = true; 
elem.src = "js/dquery.js?v=11"; //对应的JS文件 
document.body.appendChild(elem); 
} if (window.addEventListener) { 
window.addEventListener("load", lazyload, false); 
} else if (window.attachEvent) { 
window.attachEvent("onload", lazyload); 
} else { 
window.onload = lazyload;}

由于是异步加载所以使用相应js内容就需要在window.onload事件中使用,直接写在页面中会报脚本错误,如:
script的async属性以非阻塞的模式加载脚本
Javascript 相关文章推荐
AngularJS中$interval的用法详解
Feb 02 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
javascript真的不难-回顾一下基础知识
Jan 15 #Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 #Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 #Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 #Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 #Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 #Javascript
jquery获取div宽度的实现思路与代码
Jan 13 #Javascript
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
三种php连接access数据库方法
2013/11/11 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
python计算方程式根的方法
2015/05/07 Python
python读取中文txt文本的方法
2018/04/12 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Django 自动生成api接口文档教程
2019/11/19 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
利用python爬取有道词典的方法
2020/12/08 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
普通简短的个人自我评价
2014/02/15 职场文书
运动会稿件100字
2014/02/21 职场文书
英文演讲稿开场白
2014/08/25 职场文书
个人债务授权委托书
2014/10/17 职场文书
考试作弊检讨
2015/01/27 职场文书
贷款收入证明范本
2015/06/12 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python