- 时间：2020-10-29 14:10 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：Javascript 异步加载详解(浏览器在javascript的加载方式)
[b]一、同步加载与异步加载的形式
[/b]1. 同步加载
我们平时最常使用的就是这种同步加载形式：
<script src="http://yourdomain.com/script.js"></script>
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。
js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。
以前的一般建议是把<script>放在页面末尾</body>之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。
简单说：加载的网络 timeline 是瀑布模型，而异步加载的 timeline 是并发模型。
2. 常见异步加载（Script DOM Element）
[url=http://requirejs.org/]RequireJS[/url] 、 [url=http://www.commonjs.org/]CommonJS[/url] 以及 王保平(淘宝)的 [url=http://seajs.com/]SeaJS[/url] 及其[url=http://lifesinger.wordpress.com/]博客[/url] 。
[b]七、JS最佳实践：[/b]
1. 最小化 js 文件，利用压缩工具将其最小化，同时开启http gzip压缩。工具：
2. 尽量不要放在 <head> 中，尽量放在页面底部，最好是</body>之前的位置
3. 避免使用 document.write 方法
4. 异步加载 js ，使用非阻塞方式，就是此文内容。
5. 尽量不直接在页面元素上使用 Inline Javascript，如onClick 。有利于统一维护和缓存处理。
[b]参考资料：[/b]
[url=http://friendlybit.com/js/lazy-loading-asyncronous-javascript/]Lazy Loading Asyncronous Javascript[/url]
[url=http://www.sitepoint.com/non-blocking-async-defer/]Load Non-blocking JavaScript with HTML5 Async and Defer[/url]
2010年 Velocity China 上的两个讲义：
Steve Souders(Google)的 [url=http://velocity.oreilly.com.cn/2010/ppts/velocity-efws-20101208SteveSoudersEvenFaster.pdf]Even Faster Web Sites[/url] (pdf)
李穆(淘宝)的 [url=http://velocity.oreilly.com.cn/2010/ppts/limufromTaobao.pdf]第三方广告代码稳定性和性能优化实战[/url] (pdf)
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
