web前端性能优化

二、前端优化的主要方法—— ——充分利用并行下载
• 将脚本放在底部，以避免对并行下载的影响。 因为下载脚本时，并行下载是禁止的。
三、前端优化的主要方法
• • • • 减少http请求次数 减少http请求次数 充分利用并行下载 减小元素的大小 其他方法
三、前端优化的主要方法—— ——减小元素的大小
三、前端优化的主要方法—— ——其他
• 使用CDN（Content Delivery Network）， 缩小内容和用户的距离 • 将样式表放在顶部，使内容逐步呈现。
– 尽管整个页面的加载总耗时可能并无变化，但逐步呈现 内容，能使用户感觉更快。
• 适当减少主机名，以减少DNS查找 • Ajax下的优化问题
Web前端优化学习笔记 Web前端优化学习笔记
mengxl 2011 092011-09-28
主要内容
• 源自文库端优化的重要性 • 前端优化的主要方法 • 推荐前端优化工具
注：主要是学习总结《高性能网站建设指南》一书部分内容 《高性能网站建设指南》
一、前端优化的重要性
• 优化分类 • 用户响应时间分布(二八原则) 用户响应时间分布(二八原则)
• 关注Expires头的设置。缓存可以使一些http请
求转为调用客户端的已有资源。另外，HTTP1.1引入了 “Cache-Control”头，可以用“max-age”来设置缓存的 时间长度。
二、前端优化的主要方法—— ——减少http请求次数
• 移除ETag或者对ETag进行专门配置，以免 影响缓存调取
一、前端优化的重要性
• 优化分类
– 前端优化：通常只要较少的时间和资源，例如修改
Web服务器配置文件、将脚本和样式表放在特定位置 、合并图片、合并脚本等；
– 后端优化：通常代价比较大，例如重新设计应用程序
架构和代码、查找和优化临界代码路径、添加或改动 硬件、对数据库进行分布化等。
一、前端优化的重要性
• 用户响应时间分布
– 10%～20%——从服务器端获取HTML文档上（后端 优化内容） – 80%～90%——下载页面中的所有组件上（前端优化 内容）
• 根据二八原则，我们应该更关注前端优化。
注：这数据不是猜测的，著者列举了十大网站的具体数据。
二、前端优化的主要方法
• • • • 减少http请求次数 减少http请求次数 充分利用并行下载 减小元素的大小 其他方法
二、前端优化的主要方法—— ——减少http请求次数
• 优化图片，有三个具体方案：图片地图、 CSS Sprites、内联图片三种，最值得关注 的是CSS Sprites。 • 合并脚本和样式表，虽然合并有悖于模块 化开发的原则，但非常有利于性能。
二、前端优化的主要方法—— ——减少http请求次数
二、前端优化的主要方法
• • • • 减少http请求次数 减少http请求次数 充分利用并行下载 减小元素的大小 其他方法
二、前端优化的主要方法—— ——充分利用并行下载
• 使用两个主机名。HTTP1.1建议浏览器从每个主机名
并行下载两个元素，使用多个主机名能进行更多的并行下 载，但由于带宽和CPU速度，过多的并行下载也会降低性 能。Yahoo！的研究表明，使用两个主机名性能最优。
– 因为默认配置的ETag，和原始服务器的属性相关，当 多台服务器时，会导致缓存调取失败。（N台服务器， 缓存调取成功的概率是1/N）
二、前端优化的主要方法—— ——减少http请求次数
• 加载后下载（Post-Onload Download）
脚本和样式表内联，但在页面加载完成后通过onload事件， 动态下载外部脚本和样式表。
三、前端优化的主要方法
• • • • 减少http请求次数 减少http请求次数 充分利用并行下载 减小元素的大小 其他方法
三、前端优化的主要方法—— ——其他方法
• 避免没必要的重定向
– 在重定向完毕并且html文档下载完毕之前，没有任何东 西展示给用户； – 对于为了跟踪流量而使用的重定向，建议改用“referer” 或“beacon + XMLHttpRequest”； – 对于为了转换新旧网站而进行的重定向，著者在书中 P81上提供了解决方案。
• 精简脚本。用JSMin精简外置脚本，这能移除所有的注
释以及不必要的空白字符，使脚本减小20%。（内联的脚 本也应该尽量精简） 避免使用CSS表达式，改用一次性表达式和使用事件处理 器。
• 优化CSS。合并相同的类、移除不使用的类。同时，应
三、前端优化的主要方法—— ——减小元素的大小
• 务必使用Gzip对脚本、样式表、html文档进 行压缩，这通常能减小60%的数据量。
四、前端优化工具推荐
• HTTP请求图表使用IBM Page Detailer • 响应时间的测量使用Gomez的Web监视服 务 • 页面中的脚本及CSS分析使用Firebug • 分析页面性能使用Yslow • 抓包工具HTTP Analyzer
Q&A
Thanks☺
Email: mengxl@rd.netease.com Popo : frankie_meng@corp.netease.com Msn : mengxiangl@msn.com