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 控制弹出窗口
Apr 10 Javascript
js select常用操作控制代码
Mar 16 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
使用ECharts实现状态区间图
Oct 25 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
vue element upload实现图片本地预览
Aug 20 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与已存在的Java应用程序集成
2006/10/09 PHP
用PHP动态创建Flash动画
2006/10/09 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
Javascript模板技术
2007/04/27 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
解决python3输入的坑——input()
2020/12/05 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
小学毕业家长寄语
2014/01/19 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
开发房地产协议书
2014/09/14 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
旷课检讨书500字
2014/10/14 职场文书
学校端午节活动总结
2015/02/11 职场文书
世界气象日活动总结
2015/02/27 职场文书
出国导师推荐信
2015/03/25 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
酒桌上的开场白
2015/06/01 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
SQL基础的查询语句
2021/11/11 MySQL