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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
PyQt5每天必学之组合框
2018/04/20 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
大学生自荐书范文
2013/12/10 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL