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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
js实现全选和全不选功能
Jul 28 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 sprintf()函数用例解析
2011/05/18 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Python random模块用法解析及简单示例
2017/12/18 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
python实现SOM算法
2018/02/23 Python
多个应用共存的Django配置方法
2018/05/30 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
奥林匹克运动会口号
2014/06/19 职场文书
升国旗演讲稿
2014/09/05 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
小学家长意见怎么写
2015/06/03 职场文书
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python