首页 > 代码库 > JavaScript异步编程（二） 异步的脚本加载
JavaScript异步编程（二） 异步的脚本加载
异步的脚本加载
问题：
<head>标签里的大脚本会滞压所有页面渲染工作，使页面在脚本加载完毕前一直处于白屏；
<body>标签末尾的大脚本使用户只能看到静态页面，原本应进行渲染的地方却是空的；
解决方案：
对脚本分而治之;
负责让页面更好看、更好用的脚本立即加载，可稍后再加载的脚本稍后再加载。
HTML5的async/defer属性
?<script标签>
经典型和非阻塞型
理想情况下，脚本的加载应该与文档的加载同时进行，并且不影响DOM的渲染。
这样，一旦文档就绪就可以运行脚本，因为已经按照<script>标签次序加载了相应脚本。
大多数浏览器支持一个简单的解决方案：
在<head>标签里放入延迟脚本
<script defer src = http://www.mamicode.com/“deferredScript.js”>
defer属性：马上开始加载该脚本，但是请等到文档就绪且正在运行的defer脚本结束后再运行它。
不足：并非所有浏览器都支持defer；因此，使用defer应将所有延迟脚本代码都封装在例如jQuery的$(document).ready中。
脚本的完全并行化
async属性
脚本会以任意次序运行，只要JavaScript引擎可用就立即运行，无论文档就绪与否。
→ 对于独立的脚本，异步脚本是性能提升的好方法；
同时支持defer和async的浏览器中，如果脚本属性defer和aysnc都用了的时候，async会覆盖掉defer。
可编程的脚本加载
浏览器API层面的方法：
生成Ajax请求并用eval函数处理响应；
向DOM插入<script>标签。
yepnope的条件加载
yepnope是一个简单轻量级的脚本加载库，其设计目标是服务于最常见的动态脚本加载。
yepnope({
load: ‘XX.js’,
callback: function() {
…
}
});
JavaScript异步编程（二） 异步的脚本加载