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左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
javascript实现二叉树遍历的代码
Jun 08 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 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把小数转成整数3种方法
2014/06/30 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
php简单截取字符串代码示例
2016/10/19 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
JS实现打砖块游戏
2020/02/14 Javascript
vue实现登录拦截
2020/06/29 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Python random模块的使用示例
2020/10/10 Python
经理职责范文
2013/11/08 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
协议书怎么写
2014/04/21 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
Html5生成验证码的示例代码
2021/05/10 Javascript