注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

【JS加载器】loadJS、LabJS、SeaJS、Document.write简单对比  

2013-03-19 15:19:49|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

为了实现脚本加载情况的监控和重试,我们在今年引入了loadjs v1(gzip后300bytes左右)。但是由于loadJS v1会引起simple.js对后面JS的阻塞,故需要对其进行一定的优化。9月,casper对labjs进行了代码阅读和输出loadjs v2。11月,webryan重写loadjs v3(herbert bug fix并上线)。下面分享下,我们在做加载器的整个逻辑分析和判断,主要是对pengyou.com进行分析和yuni等人交流一些seajs使用中会遇到的一些问题(比如:seajs动态加载的话会引起的数据丢失问题)。

SeajsLabjsLoadjs V3Doucment.write
压缩后大小14.5k5.4k1.4k0k
gzip后4.7k2.2k0.7k0k
使用团队Pengyou.com(负责人victor),taobao-IM WebQzone(rizen)
优势
  1. 加载器和模块管理一并支持
  2. 避免了全局变量的污染和可能的覆盖。
  3. 单纯的加载器
  4. 支持多种加载方式。
1.尽力做最简单的加载器

2.支持ie重试逻辑

  1. 极简
  2. 无冗余
劣势
  1. seajs对文件管理方式冲击太大,
  2. 无法避免的导致seajs必须第一个串行加载。
  3. 需要对 seajs未加载下来时,对window.seajs进行hack保存变量和路径(hack提供是由玉伯提供的,见pengyou.com官网)
1、有很多加载场景是不适用于我们,比如xhr获取。1、功能简单,边缘浏览器尚未全部测试

2、未实现webkit重试逻辑

  1. 不支持重试
  2. 未做变量检查
  3. 做不了准确的js加载时间检测

 

根据上述表格的对比和分析,我们不难发现一下几个结论:

  1. 通常情况下document.write是最优的性能处理的选择(虽然document.write在执行过程中会中止页面的加载情况,但通常在文档的最后端)。在不做监控和重试逻辑情况下,默认应该使用document.write。比如ID.QQ.COM,QZONE.QQ.COM
  2. Document.write+setTimeout可以做一定的监控,但是存在误判。不能做重试逻辑。
  3. 由于seajs对文本模块管理方式的冲突比较大,故我们通常项目性能优化过程中,不会采用seajs的处理方式。同时,及时新项目使用seajs的模块管理方式,我们应该也会更倾向于采用自己写一个简单的加载模块。
  4. 使用库加载会存在一个问题,就是通过内联方式还是外链方式引入。外链方式的好处是可以cache,坏处是会增加第一次加载的请求逻辑阻塞(或者类似seajs的hack);内联方式是会导致load模块每次都需要加载。这里需要综合平衡,没有绝对的好。
  评论这张
 
阅读(190)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017