前端性能优化与块化开发.docxVIP

李周全 lizhouquan@ 前端性能优化与模块化开发 2013年5月 性能优化 不谈广告，只看疗效 性能优化 /wp-content/uploads/2012/10/doctor-mri-Small.jpg 性能优化工作就像是医生给病人看病，需要对症下药 淘宝详情页 特点：Dom元素多，首屏渲染慢 优化方法 减少首屏DOM节点数，setTimeout延迟构建HTML 优化效果： 百度首页导航 特点：展现简单，交互复杂，JS量大 优化方法 首屏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%左右 泛域名 增强型手段 基础库定制 ——用代码分析代码，自动打包被使用到的方法作为基础库，使基