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 相关文章推荐
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
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
关于手调机和数调机的选择
2021/03/02 无线电
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
php+mysql写的简单留言本实例代码
2008/07/25 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
Python进行特征提取的示例代码
2020/10/15 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
创业计划书的内容步骤和要领
2014/01/04 职场文书
公务员诚信承诺书
2014/05/26 职场文书
比赛口号大全
2014/06/10 职场文书
募捐感谢信
2015/01/22 职场文书
社区干部培训心得体会
2016/01/06 职场文书
四年级作文之植物
2019/09/20 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
Java 异步任务计算FutureTask
2022/04/28 Java/Android