Javascript加载总结
Download as DOCX, PDF0 likes630 views
文档探讨了 JavaScript 脚本加载的性能问题及其解决方案。主要涉及浏览器并发数对脚本加载的影响，以及使用异步加载、延迟执行等技术来提高加载效率。推荐工具和方法包括 YUI Loader、CommonJS、SeaJS 和 LabJS，以优化脚本的加载和执行顺序。
Javascript加载总结
- 1. javascript 加载总结 加载 javascript 的 demo http://labjs.com/test_suite/test-script-tags.php Timeline: IE8: IE8 模拟 IE7: FF7: Chrome14: 问题：脚本加载会阻塞后续的页面内容加载，影响 web 性能。 内联脚本同样阻塞脚本并行下载,影响 web 性能。
- 2. 原因： 浏览器并发即可以同时下载 CSS 文件和 JS 文件，在 http1.1 的协议多支持 2 个并发数，IE8、 firefox2 最多支持 6 个并发数，opera 和 safari 最多支持 8 个并发数，chrome 最多支持 4 个并 发数。 常规解决办法： 浏览器并发个数是指同一个域名同时可请求数量。浏览器的并发数是可以设置的。 使用多域名下载，使用 CDN 可以有效的提高并发数。 脚本放在页面底部。 脚本加载完毕即执行。 脚本的加载和执行 最理想的情况：无阻塞并行加载，并且能控制脚本加载顺序(解决文件间的依赖问题)。 脚本加载方式： XHR Eval XHR Inject Script Iframe Script DOM Element Script Defer document.write Script Tag
- 3. 控制脚本的执行时机 http://labjs.com/test_suite/test-script-tags.php 假设依赖关系是 script2 依赖于 script1,script3 依赖于 script2。能达到理想的状况么？ 默认脚本下载完即执行。非并行下载可以保证脚本的执行顺序。 异步加载回调 window onload 定时器(Timer) Script Onload Degrade Script Tag
- 4. Script 标签的 defer 属性： 脚本加载完后并不立即执行，在 DOMReady 后执行。 延迟脚本执行，相当于将 script 标签放入页面 body 标签的底部。 IE,FF3.1+支持 HTML5 的 script 标签 async 属性 该脚本异步加载，下载完即执行，无视其他脚本的存在。 一些解决方案 YUILoader:前后端一起来解决这个问题，后端 combo 服务拼接好所需 js。减少 http 请求。 commonjs/seajs:换个角度看这个问题，不是解决脚本加载本身的问题。而是通过模块化的思 想重新组织脚本。 labjs/reqiurejs/headjs: 解决脚本加载问题。 labjs http://labjs.com/test_suite/test-LABjs-preloading.php?which=16 IE8 模拟 IE7 Timeline: FF7:
- 5. FF7 Debug 日志： 脚本的执行顺序是 script1，script2，script3，虽然下载完毕的时间不是 script1,script2,script3 labjs 原理： http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order 要保证并行下载，而且按给定顺序执行，需要预加载 js 文件而不执行。 labjs 中预加载,执行的几种方式： 1.给 script 设置 src 属性但是并不把 dom 节点 append 到 head 中，实现预加载， dom 追加 当 到 head 中时脚本执行(IE 中使用该方法)。 2.相同 domain。使用 XHR 对象加载。然后使用 eval(xhr.responseText)来执行脚本。 3. 非 IE 浏 览 器 ， 使 用 <script type=”text/cache”></script> 来 预 先 加 载 脚 本 。 然 后 将 type=”text/javascript”来执行脚本。 (类似的思路还可以使用(new Image().src=”xx.js” 来将脚本加载到缓存中，然后使用 DOM 操 作添加 script 节点) 4.使用 html5 中<script async ></script>来保证执行顺序
- 6. 5.单个 js 加载直接使用 DOM 操作。