Web前端性能优化全攻略.doc

Web 前端性能优化全攻略目录 Web 前端优化最佳实践之内容篇 Web 前端优化最佳实践之 Server 篇 Web 前端优化最佳实践之 Cookie 篇 Web 前端优化最佳实践之 CSS 篇 Web 前端优化最佳实践之 JavaScript 篇 Web 前端优化最佳实践之图象篇 Web 前端优化最佳实践之 Mobile(iPhone) 篇 Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术。 Web 前端优化最佳实践之内容篇 Yahoo! 的Exceptional Performance team 在Web 前端方面作出了卓越的贡献。广为人知的优化规则也由 13条到 14条,再到 20条,乃至现在的 34条--真是与时俱进啊。最新的 34条也针对不同的角度做了分类。面向内容的优化规则目前有 10条。 1. 尽量减少 HTTP 请求(Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条。根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益。有几种常见的方法能切实减少 HTTP 请求: ?1) 合并文件,比如把多个 CSS 文件合成一个; ?2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位; 参见: CSS Sprites: Image Slicing's Kiss ofDeath ?3) 图像地图?4) 内联图象使用 data: URL scheme 在实际的页面嵌入图像数据. DNS 查找(Reduce DNS Lookups) 必须明确的一点,DNS 查找的开销是很大的。另外,我倒是觉得这是 Yahoo! 所有站点的通病, Yahoo !主站点可能还不够明显,一些分站点,存在明显的类似问题。对于国内站点来说,如果过多的使用了站外的 Widget ,也很容易引起过多的 DNS 查找问题。 3. 避免重定向(Avoid Redirects) 不是绝对的避免,尽量减少。另外,应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个/(Slash) ,就能有效避免一次重定向。 h 与h /二者之间是有差异的。如果是 Apache 服务器,通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。 Ajax 可缓存(Make Ajax Cacheable) 响应时间对 Ajax 来说至关重要,否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。 5. 延迟载入组件(Post-ponents) 6. 预载入组件(ponents) 上面两条严格说来,都是属于异步这个思想灵活运用的事儿。 DOM 元素数量(Reduce the Number of DOM Elements) 8. 切分组件到多个域(ponents Across Domains) 主要的目的是提高页面组件并行下载能力。但不要跨太多域名,否则就和第二条有些冲突了。 9. 最小化 iframe 的数量(Minimize the Number of iframes) 熟悉 SEO 的朋友知道 iframe 是SE