2013年5月 前端性能优化与模块化开发 李周全 lizhouquan@baidu.com
性能优化 不谈广告，只看疗效
性能优化 性能优化工作就像是医生给病人看病，需要对症下药 http://sarahhylandcentral.com/wp-content/uploads/2012/10/doctor-mri-Small.jpg
淘宝详情页 特点：Dom元素多，首屏渲染慢
优化方法 减少首屏DOM节点数，setTimeout延迟构建HTML 优化效果：
百度首页导航 特点：展现简单，交互复杂，JS量大
Baidu.widget.load(“A”,function(A){ 优化方法 首屏JS最小化，用户有操作后再延迟加载 用户访问页面 加载首屏代码 Baidu.widget.load(“A”,function(A){ A.doSomething(); }) 用户操作A模块 优化效果：
常规手段 CSS置顶，JS置底，CSS Sprite 静态资源外联、合并、压缩. 图片优化。 —— Png使用pngcrush；Gif使用gifsicle；Jpeg使用jpegtran 图片延迟加载。 静态文件上CDN ——提速20%左右 静态文件设置强缓存。 ——命中强缓存80%左右；命中弱缓存4%左右； HTML压缩。 ——gzip后减小5%左右 泛域名
增强型手段 基础库定制 ——用代码分析代码，自动打包被使用到的方法作为基础库，使基础库从原来的压缩后25K减小为9.8K,减小了60% 页面数据存储优化。 ——模板到页面的同步数据，从原来的直接写json形式的script，改为将json隐藏在textarea中，初始化或用到的时候才去提取并进行解析。 JS按需加载 ——JS代码每减小1k，性能提升10ms左右 如何做到对症下药？
性能监控 工欲善其事，必先利其器
性能监控的目的 辅助分析，发现性能瓶颈 监测每次上线带来的影响，及时发现问题
页面监控 页面大小、DOM元素数、静态文件大小
速度监控 页面渲染不同阶段的监控 可以看出：这个页面性能的瓶颈在script的下载和解析上 Head时间 – head标签加载完成的时间 TTi时间 – 页面可交互时间（首屏时间？） Dom时间– Dom Ready的时间 Load 时间– 页面完全加载完成的时间 可以看出：这个页面性能的瓶颈在script的下载和解析上
更多监控 按浏览器 按地域 按运营商 按时段
性能周边 用户网速测试 静态文件监控 JS报错监控 CPU监控 - ？ 增量式发布 模板预编译发布 —— 小于10k/s的用户占到了10%左右 静态文件监控 —— css总是有一定的丢失率。 JS报错监控 —— 上线后有js报错怎么办，是否可以比用户先感觉到？ CPU监控 - ？ 增量式发布 —— 每次编译都生成新的文件。 index_4f38ab.js。避免上线过程中的短暂不可访问 模板预编译发布 —— 避免模板编译时，用户请求被大量hang住
附：网速测试
JS按需加载 只提供给用户他所需要的代码
JS加载机制 页面直接引用 动态创建script标签 1. 直接创建<script> 标签，js自执行 2. 通过加载器，有回调方法
Baidu.widget.load(“C”,function(c){ Baidu.widget.load(“C”,function(c){ 泥潭 假设一个页面，A模块和B模块的代码都需要延迟加载执行，且他们都依赖C模块 用户访问页面 加载首屏代码 Baidu.widget.load(“C”,function(c){ C.doSomething(); }) 用户操作A模块 C.doSomething(); ? 用户操作B模块 Baidu.widget.load(“C”,function(c){ C.doSomething(); }) 文件加载混乱 代码形式不统一 ?
让文件的加载透明 .js / .css 浏览器 加载器
模块化开发 众神归位，各司其职
模块化机制 加载器 文件映射 模块定义 （js/css） 模块调用 require / use 打包配置
模块化开发 http://www.commonjs.org/ http://seajs.org
文件打包 – 模块化
模块化带来的好处 文件加载机制对开发者透明 按需加载及打包配置更清晰 模块间耦合降低 SVN拆分变得非常容易 – 各svn做自己的加载配置。F.use(“svn目录名:模块名”) 更适合做JS单元测试
模块化以后的整体设计
SVN拆分 应用场景：一个页面里有多个模块，同时在做升级。 模块定义 （js/css） SVN-1 svn1文件映射 模块定义 加载器 页面内调用 use（svn-x：模块名/文件名） SVN-2 svn2文件映射 模块定义 （js/css） SVN-3 每个svn都可以主干开发，独立上线，没有了代码合并与等待成本 1-2版本发布/周 优化为 1-2版本/天 svn3文件映射
2013年5月 THE END Thank you! 李周全 lizhouquan@baidu.com