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 相关文章推荐
JavaScript中的全局对象介绍
Jan 01 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
jQuery实现倒计时功能完整示例
Jun 01 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
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
js实现拖拽功能
2017/03/01 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
python之import机制详解
2014/07/03 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python字符串循环左移
2019/03/08 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
大四毕业生学习总结的自我评价
2013/10/31 职场文书
英文简历自荐信范文
2013/12/11 职场文书
机械专业求职信
2014/05/25 职场文书
委托公证书格式
2015/01/26 职场文书
邀请函样本
2015/02/02 职场文书
2015年教务工作总结
2015/05/23 职场文书
团拜会主持词
2015/07/04 职场文书
高中英语教学反思范文
2016/03/02 职场文书