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最佳实践完整篇
Aug 20 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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
15 个 JavaScript Web UI 库
2010/05/19 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python中requests小技巧
2017/05/10 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
运动会解说词200字
2014/02/06 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
花木兰观后感
2015/06/10 职场文书
六一儿童节致辞
2015/07/31 职场文书