Dynamic JS Loader
- 1. 以下人群 请勿 阅读此系列 PPT 输入地址， 3 秒之后窗口仍然空白一片，但没有感觉 任何不适 不相信 优化 网站性能会带来更多的 效益 不认为页面速度 提升 能够带来客户 满意度 提升 压根就不认为优化网站性能可以 改变命运
- 2. Section II Dynamic JS Loader Ctrip 前端开发 feifeipan Email : feifeipan59@gmail.com Section I 请参看 高性能网站建设
- 3. 思考…… 我们真的认为性能 很重要 吗？
- 4. 发现…… 亚马逊发现，网站每慢 0.1 秒等于丢失 600 万美元 的销售额。 Google 则发现，网页载入慢 0.5 秒会导致 20% 的用户 流失。 Ctrip 发现了吗 ？
- 5. 思考…… 我们怎么 引用 JS 文件？
- 6. 曾经（或现在）
- 7. 总是认为… 随便 找个地儿放一下 JS ， 只要页面 不报错 就行啦！
- 8. 结果总是…… 曾经的痛
- 9. 结果总是…… 为啥总是空白呢？ 空白还是空白 !!
- 10. 因为…… 浏览器在解析到 <body> 之前，不会 渲染页面 任何部分。 无论是内嵌还是外链，页面的下载和渲染都必须停下来 等待脚本执行完成 。
- 11. 解决方案 将脚本放在底部 减少脚本文件的大小 限制 HTTP 请求数
- 12. 思考…… JS 真的需要在页面渲染的时候 一起加载 吗？ JS 可以在 需要的时候 才加载吗？ JS 可以先 缓存 好，等需要的时候再 执行 吗？
- 14. 无阻塞的脚本之 延迟脚本 延迟的脚本 <script src=‘file.js’ defer ></script> defer 表明该脚本不会修改 DOM, 因此能 安全地延迟 执行。
- 15. 无阻塞的脚本之 延迟脚本 延迟的脚本 { 测试结果 } 注 : firefox3.6 不支持 defer 属性 只有 IE6.0+ 和 Firefox3.5 支持，其余浏览器均不支持
- 16. 动态脚本元素 无阻塞的脚本之 动态脚本元素 在页面中 创建脚本节点 ，并添加到 DOM 中
- 17. 动态脚本元素 无阻塞的脚本之 动态脚本元素 可以 实时监听 到加载结束，添加 回调函数
- 18. 动态脚本元素 { 测试结果 } 无阻塞的脚本之 动态脚本元素 无论何时启动下载，文件的下载和执行过程 不会阻塞 页面其他进程 。 注：加在 head 中比在 body 中要可靠，防止 IE 抛出“操作已中止”的错误
- 19. XMLHttpRequest 脚本注入 无阻塞的脚本之 XMLHttpRequest
- 20. XMLHttpRequest 脚本注入 { 测试结果 } 无阻塞的脚本之 XMLHttpRequest 兼容所有浏览器 下载 JS 代码但是不立刻执行 不能跨域！
- 21. 似乎…… “ 动态脚本元素 ”是一剂良药 简单的情况 下可以轻松的解决问题
- 22. 可是…… 现实往往比预期 要 复杂 、 更有 挑战性
- 23. 再思考…… 有两台服务器，其中一台备用。如何让客户能 最快 加载到 JS 文件？ 如何既能并发请求到 JS 文件，又能让他们按照 正确的顺序执行 ？
- 24. Ctrip 的实际情况 有两台服务器，速度和稳定性能如下 域名 c-ctrip.com ctrip.com （备用） 速度 {speed} 稳定性 {stability}
- 25. Ctrip 的前端初步策略 加载 c-ctrip 站点的文件 fileN.js 1000ms 后检测是否加载到 继续加载后续 fileN.js 加载备用 ctrip 站点的文件 fileN_bak.js 是否页面 JS 全部加载完毕 否 是 否
- 26. Ctrip 实现方案 方案一 先用”动态脚本加载”从 c-ctrip 加载 file.js 。 如果超时没有加载到，则从备用服务器 ctrip 上获取 file_bak.js 。
- 27. Ctrip 实现方案 方案一 { 测试结果 } try { 在请求 file_bak.js 的同时， file.js 也请求到了。 } catch (error){ throw ( 额外 的 http 请求 执行 两遍 JS 函数 ) }
- 28. Ctrip 实现方案 方案二 先用”动态脚本加载”从 c-ctrip 加载 file.js 。 如果超时没有加载到， 则删除这个 DOM, 从备用服务器 ctrip 上获取 file_bak.js 。
- 29. Ctrip 实现方案 方案二 { 测试结果 } try { if( 浏览器是 Firefox){ 即使删除脚本，浏览器 不会停止请求 } } catch (error){ throw ( 额外 的 http 请求 执行 两遍 JS 函数 ) }
- 30. Ctrip 实现方案 方案三 优化方案二中的 Firefox 。在 JS 文件头部先判断是否已经被加载 ; 如果加载过，则抛出一个错误，不再执行。
- 31. Ctrip 实现方案 方案三 { 测试结果 } try { 多个文件同时加载 } catch (error){ throw ( 额外 的 http 请求 不能保证 JS 的执行顺序 ) }
- 32. 方案四 使用 prefetch 预加载 文件 不阻塞任何下载，并支持并行下载。 <link rel=“prefetch” href=“file.js” onload =“registerScript()”> Ctrip 实现方案
- 33. Ctrip 实现方案 方案四 { 测试结果 } try { 使用 prefetch 预加载 } catch (error){ throw ( 目前只支持 html5 ，未来可用。 ) }
- 34. 方案 5 ( V5 ) 原则： 将下载和执行分离 并行下载，不阻塞其他元素下载。 不阻塞页面渲染，在需要的时候才执行脚本。 Ctrip 实现方案
- 35. 方案五 new Image or object 进行预加载 Ctrip 实现方案
- 36. 方案五 判断前一个依赖文件是否执行，以此来控制当前 JS 的执行时间。 Ctrip 实现方案
- 37. 方案五 { 测试结果 } 目前为止， 业内完美 的解决方案 Ctrip 实现方案
- 38. 让我们跟数据说说话
- 39. 以下数据由 webpagetest.org 测试得来 环境
- 40. 发送请求截图 并行发送 js 文件的请求，将文件先缓存下来 根据需要的 js 执行顺序，确保执行顺序 第一次加载 第二次加载
- 41. 第一屏显示对比
- 43. Before
- 44. After
- 45. 结论 “ JS 下载和执行分离 ”带来了明显的变化 页面开始渲染时间从 7.4s 降低到 1.3s 页面加载完成时间从 8.8s 降低到 4.3s
- 46. 参考资料 velocity- efws.ppt by Steve Souders “ High Performance Javascript” by Nicbolas C. Zakas Labjs by Kyle Simpson Webpagetest.org
- 47. 感谢…… Steve Souders 的优化思想 @nyanhan ， @ 流光奕羽提供的思路和方案 @ctrip 前端开发 JS 组 @ 水漫三楼 @Jackie