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创建并行对象或者合并对象的实现代码
Oct 10 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
详解vue高级特性
Jun 09 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
php 正则表达式小结
2009/08/31 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
如何更优雅地写python代码
2019/07/02 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
高考考python编程是真的吗
2020/07/20 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
python excel多行合并的方法
2020/12/09 Python
python实现双人五子棋(终端版)
2020/12/30 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
计算机应用职专应届生求职信
2013/11/12 职场文书
教导处工作制度
2014/01/18 职场文书
班班通校本培训方案
2014/03/12 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
采购员岗位职责范本
2015/04/07 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js