Dynamic JS Loader

以下人群请勿阅读此系列 PPT ,[object Object],[object Object],[object Object],[object Object]

Section II Dynamic JS Loader Ctrip 前端开发 feifeipan Email : feifeipan59@gmail.com Section I 请参看高性能网站建设

发现…… ,[object Object],[object Object],[object Object]

总是认为… 随便找个地儿放一下 JS ，只要页面不报错就行啦！

结果总是…… ,[object Object]

结果总是…… 为啥总是空白呢？空白还是空白 !!

因为…… ,[object Object],[object Object]

解决方案 ,[object Object],[object Object],[object Object]

思考…… ,[object Object],[object Object],[object Object]

无阻塞脚本 ,[object Object]

无阻塞的脚本之延迟脚本 ,[object Object],[object Object],[object Object]

无阻塞的脚本之延迟脚本 ,[object Object],注 : firefox3.6 不支持 defer 属性只有 IE6.0+ 和 Firefox3.5 支持，其余浏览器均不支持

[object Object],无阻塞的脚本之动态脚本元素在页面中创建脚本节点，并添加到 DOM 中

[object Object],无阻塞的脚本之动态脚本元素可以实时监听到加载结束，添加回调函数

[object Object],无阻塞的脚本之动态脚本元素 ,[object Object],[object Object]

[object Object],无阻塞的脚本之 XMLHttpRequest

[object Object],无阻塞的脚本之 XMLHttpRequest 兼容所有浏览器下载 JS 代码但是不立刻执行不能跨域！

似乎…… ,[object Object],[object Object]

可是…… 现实往往比预期要复杂、更有挑战性

再思考…… ,[object Object],[object Object]

Ctrip 的实际情况有两台服务器，速度和稳定性能如下域名 c-ctrip.com ctrip.com （备用）速度 {speed} 稳定性 {stability}

Ctrip 的前端初步策略加载 c-ctrip 站点的文件 fileN.js 1000ms 后检测是否加载到继续加载后续 fileN.js 加载备用 ctrip 站点的文件 fileN_bak.js 是否页面 JS 全部加载完毕否是否

Ctrip 实现方案 ,[object Object],[object Object],[object Object]

Ctrip 实现方案 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ctrip 实现方案方案二先用”动态脚本加载”从 c-ctrip 加载 file.js 。如果超时没有加载到，则删除这个 DOM, 从备用服务器 ctrip 上获取 file_bak.js 。

Ctrip 实现方案方案二 { 测试结果 } ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ctrip 实现方案方案三优化方案二中的 Firefox 。在 JS 文件头部先判断是否已经被加载 ; 如果加载过，则抛出一个错误，不再执行。

Ctrip 实现方案方案三 { 测试结果 } ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],Ctrip 实现方案

Ctrip 实现方案方案四 { 测试结果 } ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],Ctrip 实现方案

[object Object],[object Object],Ctrip 实现方案

[object Object],[object Object]

发送请求截图 ,[object Object],[object Object],第一次加载第二次加载

页面加载对比 ,[object Object],After

结论 ,[object Object],[object Object],[object Object]

参考资料 ,[object Object],[object Object],[object Object],[object Object],[object Object]

感谢…… ,[object Object],[object Object],[object Object],[object Object]

Dynamic JS Loader

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (19)

Semelhante a Dynamic JS Loader

Semelhante a Dynamic JS Loader (20)

Dynamic JS Loader