script的async属性以非阻塞的模式加载脚本

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事件中使用，直接写在页面中会报脚本错误，如：

赞 (0)

相关推荐

  • javascript 支持链式调用的异步调用框架Async.Operation

    复制代码 代码如下: Async = {}; Async.Operation = function(options) { options = options || {}; var callbackQueue = []; var chain = (options.chain && options.chain === true) ? true : false; var started = false; var innerChain = null; this.result = undefined

  • JS脚本defer的作用示例介绍

    复制代码 代码如下: <script src="../cgi-bin/delscript.js" defer></script> 中的defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题---有点问题 <button id="myButton" onclick="alert('ok')">test</button> <script> myButton.click(); &

  • js的[defer]和[async]属性

    [defer] 可以在<script>中加入defer属性,告诉浏览器这段script不必立即执行,那么浏览器就会在完全载入文档之后再执行这个script,相当于window.onload,但它比window.onload更灵活. 复制代码 代码如下: <script defer="true"></script> [async] 使用async属性加载JavaScript,这样整个脚本就可以异步加载和执行. <script>标签的defe

  • javascript延时加载之defer测试

    偶尔发现 js 中有个延时加载的标签 defer,还在疑惑这么好用的东西为什么没有流行起来. 测试了几个浏览器.在ie7,8,9和360安全济览器下可以.这就是为什么不选择defer的原因了. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • 基于jquery的$.ajax async使用

    (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. 复制代码 代码如下: var temp; $.ajax({ async: false, type : "POST", url : defaultPostData.url, dataType : 'json', success : function(data) { temp=data; } }); alert(t

  • jquery ajax属性async(同步异步)示例

    例1.jquery+ajax/" target="_blank">jquery ajax同步方式 复制代码 代码如下: $.ajax({url : 'test.php',type : 'post',async: false,//使用同步的方式,true为异步方式data : {'act':'addvideo', 'videoname':videoname},//这里使用json对象success : function(data){//code here...},fail

  • 利用jQuery的deferred对象实现异步按顺序加载JS文件

    利用jQuery的deferred对象实现异步按顺序加载JS文件

    前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是把我之前写的一个利用jQuery的deferred异步按顺序加载JS文件方案分享出来,欢迎指正. 如果你现在对jQuery中的deferred还不了解,强烈建议你看一下阮一峰的jQuery的deferred对象详解一文. 加载JS文件的代码如下: 复制代码 代码如下: /* Loading Ja

  • script的async属性以非阻塞的模式加载脚本

    script的async属性以非阻塞的模式加载脚本

    1.HTML5实现了script的async属性,这个新的属性可以让js在浏览器中以非阻塞的模式加载,另外script还有一个defer属性,这个属性目前所有浏览器都已实现(除了firefox和chrome的早期版本),IE这方面做得好,从一开始就支持些属性. 复制代码 代码如下: //async <script async src="dquery.js" async></script> //defer <script async src="dq

  • 无阻塞加载脚本分析[全]

    由于浏览器是单线程的,因此脚本在载的时候会阻塞下载其它资源:虽然在现在浏览器已经有所改善,但仍然有待改进. 很显然,脚本必须按顺序执行,但没有必要按顺序下载,解决方法: 1.内嵌JS 通常由于页面大小和缓存能带来更多好处,因此外部文件引入JS更好一些: 在少数情况下,比如首页.少量JS情况下尚可接受. 2.XHR Eval 通过XMLHttpRequest从服务器端获取脚本. 主要缺陷是,通过XHR获取的脚本必须部署在和主页面相同的域中. 复制代码 代码如下: Ajax.get("test.js

  • js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)

    看个例子: 复制代码 代码如下: <input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> <script type="text/javascript"> <!-- function addImg(isrc) { var Img = new Image(); Img.src = isrc; I

  • 让浏览器非阻塞加载javascript的几种方法小结

    浏览器为了确保正确执行脚本和呈现布局在浏览器加载和执行完成它之前会完全阻塞页面后续内容的呈现和其他资源的加载. 在页面的加载过程中如果可以做到内容的逐步呈现,对于良好的用户体验来说是非常重要的.通常我们也会在wondow对象的onload事件处理函数中做一些事情,但由于脚本阻塞加载和呈现的特性这一方面增加了页面载入时间推迟了onload事件的触发,另一方面也延迟了用户所期待的反馈.这就需要我们使用一些方法来让浏览器以非阻塞的方式加载外部脚本. 一  使用XMLHttpRequest对象异步方式

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • JavaScript无阻塞加载和defer、async详解

    JavaScript无阻塞加载和defer、async详解

    无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许并行加载js了,也就是说可以同时下载js文件,但是还是按先后顺序执行文件的. 下载是异步的没问题,但是每个javascript执行的时候还是同步的,就是先出现的script标签一定是先执行,即使是并行下载它是最后一个下载完成的,除非标有defer的script标签.任何javascript在执行的时

  • Script的加载方法小结

    Script的加载方法小结

    1.静态加载 CSS,图片资源文件在页面渲染过程中可以并行下载,不会阻塞.在IE8,FF下,也可以支持JS的并行下载.尽管页面的JS下载加速了,但是JS对页面渲染的阻塞还是依然存在的,只有JS加载完毕了,页面的剩余部分才能继续渲染.放在Head部分的Script是最为恶劣的,因为对页面来说,Head部分是require的,是后部分所必须的,Head部分不加载完毕,Body部分不会开始解析,Body解析之前,页面是空白的.静态Script放到页面的哪部分来说都是阻塞,从浏览器实现的角度来说很好理解

  • 网页资源阻塞浏览器加载的原理示例解析

    目录 正文 测试前环境准备 图片会造成阻塞吗? CSS 加载阻塞 CSS 会阻塞后面 JS 的执行吗? JS 加载阻塞 defer 和 async 动态脚本会造成阻塞吗? DOMContentLoaded 和 onload DOMContentLoaded 遇到脚本 DOMContentLoaded 遇到样式 正文 一个页面允许加载的外部资源有很多,常见的有脚本.样式.字体.图片和视频等,对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢?今天来一探究竟. 如何用 Chrome 定制网络加载

  • 用js的document.write输出的广告无阻塞加载的方法

    用js的document.write输出的广告无阻塞加载的方法

    一.广告代码分析 很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接. 复制代码 代码如下: <script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script> 这个java

  • 完美解决JS文件页面加载时的阻塞问题

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化为脚本使用,该方法不会造成页面渲染和onload事件的阻塞,因为是异步处理,推荐使用. 2.iframe注入:加载一个iframe框架,通过使用iframe框架中的脚本来避免src方式加载脚本的阻塞,但是iframe元素开销较大,不推荐. 3.DOM注入:就是创建script元素,通过制定该元素的s

随机推荐