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

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 Slicings Kiss of Death 3) 图像地图 4) 内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据. 2. 减少 DNS 查找 (Reduce DNS Lookups) 必须明确的一点，DNS 查找的开销是很大的。另外，我倒是觉得这是 Yahoo! 所有站点的通病，Yahoo！主站点可能还不够明显，一些分站点，存在明显的类似问题。对于国内站点来说，如果过多的使用了站外的 Widget ，也很容易引起过多的 DNS 查找问题。 3. 避免重定向 (Avoid Redirects) 不是绝对的避免，尽量减少。另外，应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ，就能有效避免一次重定向。/arch 与 /arch/ 二者之间是有差异的。如果是 Apache 服务器，通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。 4. 使得 Ajax 可缓存 (Make Ajax Cacheable) 响应时间对 Ajax 来说至关重要，否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。 5. 延迟载入组件 (Post-load Components) 6. 预载入组件 (Preload Components) 上面两条严格说来，都是属于异步这个思想灵活运用的事儿。 7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements) 8. 切分组件到多个域 (Split Components Across Domains) 主要的目的是提高页面组件并行下载能力。但不要跨太多域名，否则就和第二条有些冲突了。 9. 最小化 iframe 的数量 (Minimize the Number of iframes) 熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处，也有其弊端，一分为二看问题吧。 10. 杜绝 http 404 错误 (No 404s) 对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误，亦能提升用户体验。值得一提的是，CSS 与 Java Script 引起的 404 错误因为定位稍稍难一点而往往容易被忽略。 这是内容篇的 10 条。应该说具体引导性的内容还不够详细。逐渐会根据自己的理解补充上来。 Web 前端优化最佳实践第二部分面向 Server 。目前共计有 6 条实践规则。【注，这最多算技术笔记，查看最原始内容，还请访问：Exceptional Performance : Best Practices for Speeding Up Your Web Site 】 1. 使用 CDN (Use a Content Delivery Network) 国内 CDN 的普及还不够。不过我们有独特的电信、网通之间的问题，如果针对这个作优化，基本上也算能收到 CDN 或类似的效果吧(假装如此)。【Tin 说国内 CDN 用的挺多，看看 CDN 厂商的市场就知道了，还没走入寻常百姓家】 2. 添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header) 各个浏览器都有针对的方案, Apache 例子【注意：下面的说明例子还不够精细，具体的环境上还要加一些调整】: ExpiresActive On ExpiresByType image/gif modification plus 1