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 关于# 和 void的区别分析
Oct 26 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
JavaScript实现表单验证功能
Dec 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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php短址转换实现方法
2015/02/25 PHP
php强制下载文件函数
2016/08/24 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python threading多线程编程实例
2014/09/18 Python
python中zip和unzip数据的方法
2015/05/27 Python
简单谈谈python中的多进程
2016/11/06 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
表彰先进集体通报
2014/01/12 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
初中作文评语
2014/12/25 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
商业计划书格式、范文
2019/03/21 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL
利用Java连接Hadoop进行编程
2022/06/28 Java/Android