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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
jQuery Ajax文件上传(php)
Jun 16 Javascript
类似CSDN图片切换效果脚本
Sep 17 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
How do I change MySQL timezone?
2008/03/26 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
js实现小时钟效果
2020/03/25 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
django中静态文件配置static的方法
2018/05/20 Python
django的ORM模型的实现原理
2019/03/04 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
django自带调试服务器的使用详解
2019/08/29 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
关于Python解包知识点总结
2020/05/05 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
买房协议书
2014/04/11 职场文书
成绩单评语
2015/01/04 职场文书
Python基础之字符串格式化详解
2021/04/21 Python