几个JavaScript异步加载相关问题
原创
 09:06:54
175
默认的js是同步加载的，这里的“加载”可以理解成是解析、执行，而不是“下载”，在最新版本的浏览器中，浏览器对于代码请求的资源都是瀑布式的加载，而不是阻塞式的，但是js的执行总是阻塞的。这会引起什么问题呢？如果我的index页面要加载一些js，但是其中的某个请求迟迟得不到响应，于是阻塞了后面的js代码的执行（同步加载），同时页面渲染也不能继续（如果js引入是在head标签后）。&script type=&text/javascript& src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'&&/script&
&script type=&text/javascript& src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'&&/script&
this is a test比如上面的这段代码，保存为index.html文件，页面的主体是一个简单的字符串，但是代码执行后页面迟迟都是空白，为何？因为请求的js迟迟无法加载（可能由于谷歌被墙等原因），于是阻塞了后面的代码的执行，页面得不到渲染。可能你会提议，把js代码放到&/body&前不就能先渲染页面了！好方法，我们尝试着将js放后面：this is a test
&script type=&text/javascript& src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'&&/script&
&script type=&text/javascript& src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'&&/script&页面瞬间被渲染，“this is a test&也很快出现在前台，世界似乎平静了，可是：this is a test
&script type=&text/javascript& src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'&&/script&
&script type=&text/javascript& src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'&&/script&
&script type=&text/javascript&&
console.log('hello world');
&/script&在前面代码的基础上简单加了一段代码，但是&hello world&迟迟无法在控制台输出，显然前面的js请求阻塞了后面代码的加载，我们恍然大悟，改变js的加载位置只能改变页面的渲染，然而对于js的加载并没有什么卵用，js还是会阻塞。实现js异步加载我们的要求似乎很简单，能在页面加载的同时，在控制台输出字符串即可，再讲的通俗一点，就是在请求第一段谷歌提供的js的同时，继续执行下面的js，也就是实现js的异步加载。最常见的做法是动态生成script标签：&body&
this is a test
&script type=&text/javascript&&
~function() {
var s = document.createElement('script');
s.src = 'http://china-addthis.googlecode.com/svn/trunk/addthis.js';
document.body.appendChild(s);
&script type=&text/javascript& src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'&&/script&
&script type=&text/javascript&&
console.log('hello world');
&/body&但是还是有点问题，这种加载方式在加载执行完之前会阻止 onload 事件的触发，而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等，所以还是会阻塞部分页面的初始化处理：&body&
this is a test
&script type=&text/javascript&&
~function() {
// function async_load() {
var s = document.createElement('script');
s.src = 'http://china-addthis.googlecode.com/svn/trunk/addthis.js';
document.body.appendChild(s);
// window.addEventListener('load', async_load, false);
window.onload = function() {
var txt = document.createTextNode(' hello world');
document.body.appendChild(txt);
&script type=&text/javascript& src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'&&/script&
&/body&比如上面的代码不能很好地渲染”hello world”，我们只需将注释去掉就可以了，让谷歌提供的js在onload 时才开始异步加载。这样就解决了阻塞 onload 事件触发的问题。补充DOMContentLoaded 与 OnLoad 事件 DOMContentLoaded : 页面(document)已经解析完成，页面中的dom元素已经可用。但是页面中引用的图片、subframe可能还没有加载完。 OnLoad：页面的所有资源都加载完毕（包括图片）。浏览器的载入进度在这时才停止。这两个时间点将页面加载的timeline分成了三个阶段。以上似乎能较好解决这个问题，但是html5提供了更简便的方法，async属性！this is a test
&script type=&text/javascript& src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' async='async'&&/script&
&script type=&text/javascript& src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'&&/script&
&script type=&text/javascript&&
console.log('hello world');
&/script&async是html5的新属性，async 属性规定一旦脚本可用，则会异步执行（一旦下载完毕就会立刻执行）。需要注意的是async 属性仅适用于外部脚本（只有在使用 src 属性时）defer属性常常和async一起提起：this is a test
&script type=&text/javascript& src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer='defer'&&/script&
&script type=&text/javascript& src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'&&/script&
&script type=&text/javascript&&
console.log('hello world');
&/script&似乎实现效果差不多，但是真的一样吗？我们来看看defer属性的定义。以前的defer只支持ie的hack，现在html5的出现开始全面支持defer。defer 属性规定当页面已完成加载后，才会执行脚本。defer 属性仅适用于外部脚本（只有在使用 src 属性时）。ps：ie支持的defer似乎并非如此，因为对ie无感，不深究，有兴趣的可以去查阅相关资料。既然async和defer经常一起出现，那么辨析一下吧！如果没有async和defer属性（赋值为true，下同），那么浏览器会立即执行当前的js脚本，阻塞后面的脚本；如果有async属性，加载和渲染后续文档元素的过程将和当前js的加载与执行并行进行（异步）；如果有defer属性，那么加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素（DOM）解析完成之后，DOMContentLoaded 事件触发之前完成。来看一张网上盗的图：蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。此图告诉我们以下几个要点（摘自defer和async的区别）：defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics但是在我看来（以下个人理解，如有出入还望指出），defer在异步加载上的应用并不会比async广。async的英文解释是异步，该属性作用在脚本上，使得脚本加载（下载）完后随即开始执行，和动态插入script标签作用类似（async只支持h5，后者能兼容浏览器）；而defer的英文解释是延迟，作用也和字面解释类似，延迟脚本的执行，使得dom元素加载完后才开始有序执行脚本，因为有序，所以会带来另一个问题：this is a test
&script type=&text/javascript& src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer='defer'&&/script&
&script type=&text/javascript& src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js' defer='defer'&&/script&
&script type=&text/javascript& src='index.js' defer='defer'&&/script&
console.log('hello world');如果执行这段代码，控制台的“hello world”也会迟迟得不到结果。所以我觉得还是async好用，如果要考虑依赖的话，可以选择requirejs、seajs等模块加载器。总结JavaScript的异步加载还有一些方式，比如：AJAX eval（使用AJAX得到脚本内容，然后通过eval(xmlhttp.responseText)来运行脚本）、iframe方式等。相关推荐:以上就是几个JavaScript异步加载相关问题的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
全栈工程师
文章总浏览数几个异步加载 JS 的开源免费框架简介【javascript吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：162,864贴子：
几个异步加载 JS 的开源免费框架简介收藏
几个异步加载 JS 的工具简介由于网站的 js 逐渐增多，最近发现需要用异步来加载它们，以加快网页加载速度。研究了下，发现网上已有好几个的开源免费框架可用，简单罗列下：1. RequireJS国外的，已经发展的比较成熟了，功能强大。最新版本的压缩后只有 14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用 RequireJS 将使您的前端代码质量得以提升。使用简单示例：//引入 require.js&script src="require.js"&&/script&//异步加载 jquery，后执行require(['jquery'], function($) {
alert($().jquery);});//同时加载多个js，你可以这样require(['jquery', 'jquery-ui', 'form'], function($) {
alert($().jquery);});2. LABjs还是国外的，通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。体积比 RequireJS 更小，只有 5k。使用示例：//引入 LABjs&script src="LAB.js"&&/script&$LAB.script("script1.js")
.script("script2.js")
.script("script3.js")
.wait(function(){// 等待所有script加载完再执行这个代码块
script1Func();
script2Func();
script3Func();
});来个国内的：3. Orderjs 是一个 JS 按需、异步加载工具，同时也是 JS 模块化管理工具。使用示例：//引入 Orderjs&script src="order.js"&&/script&//加载所需模块:orderjs('jquery', 'jquery-ui', 'form');alert(typeof jQuery);//结果 undefined, 因为 orderjs 是异步加载以上模块的//需要将以上语句用一个匿名函数包裹，放到 js 执行队列中，等待 jquery 等模块加载完之后再执行，//orderjs(fn) 函数即实现此功能：orderjs(function(){
alert(typeof jQuery);//有了});Orderjs 跟 RequireJS 不一样的地方是，前者风格是声明一次所需模块后，后面随处可用；而后者风格是每次都必须声明所需模块，然后执行 callback。好，先简单记到这，不知大家有没有其它推荐与大家分享？
淘宝和腾讯合作的seajs
玉伯的seajs居然没出现
seajs 还没试用过， 就不献丑了。期待路过的朋友补几枪。。。
一直用headjs
dojo应该是把这方面发挥的淋漓尽致的一个了！
登录百度帐号JavaScript异步加载浅析
转载 &更新时间：日 11:16:51 & 投稿：junjie
这篇文章主要介绍了JavaScript异步加载浅析,本文讲解了脚本延迟执行、脚本的完全并行化、可编程的脚本加载等内容,需要的朋友可以参考下
关于JavaScript脚本加载的问题，相信大家碰到很多。主要在几个点——
1& 同步脚本和异步脚本带来的文件加载、文件依赖及执行顺序问题
2& 同步脚本和异步脚本带来的性能优化问题
深入理解脚本加载相关的方方面面问题，不仅利于解决实际问题，更加利于对性能优化的把握并执行。
先看随便一个script标签代码——
&script src="js/myApp.js"&&/script&
如果放在&head&上面，会阻塞所有页面渲染工作，使得用户在脚本加载完毕并执行完毕之前一直处于“白屏死机”状态。而&body&末尾的打脚本只会让用户看到毫无生命力的静态页面，原本应该进行客户端渲染的地方却散布着不起作用的控件和空空如也的方框。拿一个测试用例——
&!DOCTYPE html&
&head lang="en"&
&&& &meta charset="UTF-8"&
&&& &title&异步加载script&/title&
&&& &script src="js/test.js"&&/script&
&&& &div&我是内容&/div&
&&& &img src="img/test.jpg"&
其中,test.js中的内容——
alert('我是head里面的脚本代码，执行这里的js之后，才开始进行body的内容渲染!');
我们会看到,alert是一个暂停点，此时，页面是空白的。但是要注意，此时整个页面已经加载完毕，如果body中包含某些src属性的标签(如上面的img标签)，此时浏览器已经开始加载相关内容了。总之要注意——js引擎和渲染引擎的工作时机是互斥的（一些书上叫它为UI线程）。
因此,我们需要——那些负责让页面更好看、更好用的脚本应该立即加载，而那些可以待会儿再加载的脚本稍后再加载。
一、脚本延迟执行
现在越来越流行把脚本放在页面&body&标签的尾部。这样，一方面用户可以更快地看到页面，另一方面脚本可以直接操作已经加载完成的dom元素。对于大多数脚本而言，这次“搬家”是个巨大的进步。该页面模型如下——
&!DOCTYPE html&
&head lang="en"&
&&& &!--metadata and scriptsheets go here--&
&&& &script src="headScript.js"&&/script&
&&& &!--content goes here--&
&&& &script src="bodyScript.js"&&/script&
这确实大大加快了页面的渲染时间，但是注意一点，这可能让用户有机会在加载bodyScript之前与页面交互。源于浏览器在加载完整个文档之前无法加载这些脚本，这对那些通过慢速连接传送的大型文档来说会是一大瓶颈。
理想情况下，脚本的加载应该与文档的加载同时进行，并且不影响DOM的渲染。这样，一旦文档就绪就可以运行脚本，因为已经按照&script&标签的次序加载了相应脚本。
我们使用defer便能够完成这样的需求，即——
&script src="deferredScript.js"&&/script&
添加defer属性相当于告诉浏览器：请马上开始加载这个脚本吧，但是，请等到文档就绪且此前所有具有defer属性的脚本都结束运行之后再运行它。
这样，在head标签里放入延迟脚本，技能带来脚本置于body标签时的所有好处，又能让大文档的加载速度大幅提升。此时的页面模式便是——
&!DOCTYPE html&
&head lang="en"&
&&& &!--metadata and scriptsheets go here--&
&&& &script src="headScript.js"&&/script&
&&& &script src="deferredScript.js" defer&&/script&
&&& &!--content goes here--&
但是并非所有的浏览器都支持defer（对于一些modern浏览器，如果声明defer，其内部脚本将不会执行document.write及DOM渲染操作。IE4+均支持defer属性）。这意味着，如果想确保自己的延迟脚本能在文档加载后运行，就必须将所有延迟脚本的代码都封装在诸如jQuery之$(document).ready之类的结构中。这是值得的，因为差不多97%的访客都能享受到并行加载的好处，同时另外3%的访客仍然能使用功能完整的JavaScript。
二、脚本的完全并行化
让脚本的加载及执行再快一步，我不想等到defer脚本一个接着一个运行（defer让我们想到一种静静等待文档加载的有序排队场景），更不想等到文档就绪之后才运行这些脚本，我想要尽快加载并且尽快运行这些脚本。这里也就想到了HTML5的async属性，但是要注意，它是一种混乱的无政府状态。
例如，我们加载两个完全不相干的第三方脚本，页面没有它们也运行得很好，而且也不在乎它们谁先运行谁后运行。因此，对这些第三方脚本使用async属性，相当于一分钱没花就提升了它们的运行速度。
async属性是HTML5新增的。作用和defer类似，即允许在下载脚本的同时进行DOM的渲染。但是它将在下载后尽快执行（即JS引擎空闲了立马执行），不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有 IE 都支持异步加载，但是要注意，async会覆盖掉defer。
那么此时的页面模型如下——
&!DOCTYPE html&
&head lang="en"&
&&& &!--metadata and scriptsheets go here--&
&&& &script src="headScript.js"&&/script&
&&& &script src="deferredScript.js" defer&&/script&
&&& &!--content goes here--&
&&& &script src="asyncScript1.js" async defer&&/script&
&&& &script src="asyncScript2.js" async defer&&/script&
要注意这里的执行顺序——各个脚本文件加载，接着执行headScript.js，紧接着在DOM渲染的同时会在后台加载defferedScript.js。接着在DOM渲染结束时将运行defferedScript.js和那两个异步脚本，要注意对于支持async属性的浏览器而言，这两个脚本将做无序运行。
三、可编程的脚本加载
尽管上面两个脚本属性的功能非常吸引人，但是由于兼容性的问题，应用并不是很广泛。故此，我们更多使用脚本加载其他脚本。例如，我们只想给那些满足一定条件的用户加载某个脚本，也就是经常提到的“懒加载”。
在浏览器API层面，有两种合理的方法来抓取并运行服务器脚本——
1& 生成ajax请求并用eval函数处理响应
2& 向DOM插入&script&标签
后一种方式更好，因为浏览器会替我们操心生成HTTP请求这样的事。再者，eval也有一些实际问题：泄露作用域，调试搞得一团糟，而且还可能降低性能。因此，想要加载名为feture.js的脚本，我们应该使用类似下面的代码：
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = 'feature.js';
head.appendChild(script);
当然，我们要处理回调监听，HTML5规范定义了一个可以绑定回调的onload属性。
script.onload = function() {
&&& console.log('script loaded ...');
不过，IE8及更老的版本并不支持onload，它们支持的是onreadystatechange。而且，对于错误处理仍然千奇百怪。在这里，可以多参考一些流行的校本加载库，如labjs、yepnope、requirejs等。
如下，自己封装了一个简易loadjs文件——
var loadJS = function(url,callback){
&&& var head = document.getElementsByTagName('head')[0];
&&& var script = document.createElement('script');
&&& script.src =
&&& script.type = "text/javascript";
&&& head.appendChild( script);
&&& // script 标签，IE下有onreadystatechange事件, w3c标准有onload事件
&&& // IE9+也支持 W3C标准的onload
&&& var ua = navigator.userAgent,
&&&&&&& ua_
&&& // IE6/7/8
&&& if (/MSIE ([^;]+)/.test(ua)) {
&&&&&&& ua_version = parseFloat(RegExp["$1"], 10);
&&&&&&& if (ua_version &= 8) {
&&&&&&&&&&& script.onreadystatechange = function(){
&&&&&&&&&&&&&&& if (this.readyState == "loaded" ){
&&&&&&&&&&&&&&&&&&& callback();
&&&&&&&&&&&&&&& }
&&&&&&&&&&& }
&&&&&&& } else {
&&&&&&&&&&& script.onload = function(){
&&&&&&&&&&&&&&& callback();
&&&&&&&&&&& };
&&& } else {
&&&&&&& script.onload = function(){
&&&&&&&&&&& callback();
&&&&&&& };
对于document.write的方式异步加载脚本，在这里就不说了，现在很少有人这么干了，因为浏览器差异性实在是搞得头大。
要注意，使用 Image 对象异步预加载 js 文件，里面的js代码将不会被执行。
最后，谈一下requirejs中的异步加载脚本。
requirejs不会保证按顺序运行目标脚本，只是保证它们的运行次序能满足各自的依赖性要求。从而我们确保了尽快的并行加载所有脚本，并有条不紊的按照依赖性拓扑结构去执行这些脚本。
OK，谈到这儿，异步加载脚本的陈述也就完了。我再次啰嗦一下这里的优化顺序——
1& 传统的方式，我们使用script标签直接嵌入到html文档中，这里分两种情况——
　　a& 嵌入到head标签中——要注意，这样做并不会影响文档内容中其他静态资源文件的并行加载，它影响的是，文档内容的渲染，即此时的DOM渲染就会被阻塞，呈现白屏。
　　b& 嵌入到body标签底部——为了免去白屏现象，我们优先进行DOM的渲染，再去执行脚本，但问题又来了。先说第一个问题——如果DOM文档内容比较大，交互事件绑定便有了延迟，体验便差了些。当然，我们需要根据需求而定，让重要的脚本优先执行。再说第二个问题——由于脚本文件至于body底部，导致对于这些脚本的加载相对于至于head中的脚本而言，它们的加载便有了延迟。所以，至于body底部，也并非是优化的终点。
　　c& 添加defer属性——我们希望脚本尽早的进行并行加载，我们把这批脚本依旧放入head中。脚本的加载应该与文档的加载同时进行，并且不影响DOM的渲染。这样，一旦文档就绪就可以运行脚本。所以便有了defer这样属性。但是要注意它的兼容性，对于不支持defer属性的浏览器，我们需要将代码封装在诸如jQuery之$(document).ready中。需要注意一点，所有的defer属性的脚本，是按照其出场顺序依次执行，因此，它同样严格同步。
&2& 上一点，讲的都是同步执行脚本（要注意，这些脚本的加载过程是并行的，只不过是谁先触发请求谁后触发请求的区别而已），接下来的优化点便是“并行执行脚本”，当然，我们知道，一个时间点，只有执行一个js文件，这里的“并行”是指，谁先加载完了，只要此时js引擎空闲，立马执行之。这里的优化分成两种——
　　a& 添加async这个属性——确实能够完成上面我们所说的优化点，但是它有很高的局限性，即仅仅是针对非依赖性脚本加载，最恰当的例子便是引入多个第三方脚本了。还有就是与deffer属性的合用，实在是让人大费脑筋。当然，它也存在兼容性问题。以上三个问题便导致其应用并不广泛。当使用async的时候，一定要严格注意依赖性问题。
　　b& 脚本加载脚本——很显然，我们使用之来达到“并行执行脚本”的目的。同时，我们也方便去控制脚本依赖的问题，我们便使用了如requirejs中对于js异步加载的智能化加载管理。
好，写到这儿。
这里，我仅仅谈的是异步加载脚本的相关内容。还有一块儿内容，便是异步加载样式文件或者其他静态资源。待续......
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}