当前位置:Gxlcms > JavaScript > Javascript异步加载详解(浏览器在javascript的加载方式)_javascript技巧

Javascript异步加载详解(浏览器在javascript的加载方式)_javascript技巧

时间:2021-07-01 10:21:17 帮助过:11人阅读

一、同步加载与异步加载的形式
1. 同步加载
我们平时最常使用的就是这种同步加载形式:
输出 document 内容、修改dom、重定向等行为,所以默认同步执行才是安全的。
以前的一般建议是把输出文档内容。
在同步模式下,document.write 是在当前 script 所在的位置输 出文档的。而在异步模式下,浏览器继续处理后续页面内容,根本无法确定 document.write 应该输出到什么位置,所以异步模式下 document.write 不可行。而到了页面已经 onload 之后,再执行 document.write 将导致当前页面的内容被清空,因为它会自动触发 document.open 方法。
实际上document.write的名声并不好,最好少用。
替代方法:
1. 虽然异步加载不能用 document.write,但还是可以onload之后执行操作dom(创建dom或修改dom)的,这样可以实现一些自己的动态输出。比如要在页面异步创建一个浮动元素,这和它在页面中的位置就没关系了,只要创建出该dom元素添加到 document 中即可。
2. 如果需要在固定位置异步生成元素的内容,那么可以在该固定位置设置一个dom元素作为目标,这样就知道位置了,异步加载之后就可以对这个元素进行修改。
六、JS 模块化管理
异步加载,需要将所有 js 内容按模块化的方式来切分组织,其中就存在依赖关系,而异步加载不保证执行顺序。
另外,namespace 如何管理 等相关问题。这部分已超出本文内容,可参考:
RequireJS 、 CommonJS 以及 王保平(淘宝)的 SeaJS 及其博客 。
七、JS最佳实践:
1. 最小化 js 文件,利用压缩工具将其最小化,同时开启http gzip压缩。工具:
2. 尽量不要放在 中,尽量放在页面底部,最好是之前的位置
3. 避免使用 document.write 方法
4. 异步加载 js ,使用非阻塞方式,就是此文内容。
5. 尽量不直接在页面元素上使用 Inline Javascript,如onClick 。有利于统一维护和缓存处理。
参考资料:
Lazy Loading Asyncronous Javascript
Load Non-blocking JavaScript with HTML5 Async and Defer
2010年 Velocity China 上的两个讲义:
Steve Souders(Google)的 Even Faster Web Sites (pdf)
李穆(淘宝)的 第三方广告代码稳定性和性能优化实战 (pdf)

人气教程排行