Yahoo前端优化规则

概述

Yahoo前端优化规则[1]

一、Content

1.减少HTTP请求（Make Fewer HTTP Requests）

什么是HTTP请求？

详见：http://my.oschina.net/areawen2os/blog/599052

 

怎样才能减少HTTP请求？

1）合并文件

浏览器每加载一个文件（css/js/图片）都会发出一个HTTP请求，要减少HTTP请求，必须减少文件的数量，合并文件是一个可行的方案；

2）CSS Sprites

CSS Sprites技术属于合并文件类，只是合并的对象是图片；

关于CSS Sprites更多信息请访问：http://my.oschina.net/areawen2os/blog/600352

3）图片地图

4）内联图象

图片在线生成base64编码

http://tool.css-js.com/base64.html

2.减少DNS查找（Reduce DNS Lookups）

3.避免重定向（Avoid Redirects）

最浪费的重定向经常发生和Web开发人员通常不知道它。它发生在一个尾随的（/）是从一个不应该有一个网址丢失。例如，要http://astrology.yahoo.com/astrology结果301响应包含重定向到http://astrology.yahoo.com/astrology/（注意加斜线）。这是通过使用别名或mod_rewrite固定在Apache，或directoryslash指令如果你使用Apache的处理。

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 条。应该说具体引导性的内容还不够详细。逐渐会根据自己的理解补充上来。

 

二、Server

11.使用 CDN (Use a Content Delivery Network)

12. 添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header)

13. 压缩内容 (Gzip Components)

14. 设置 Etags (Configure ETags)

15. 尽早刷新 Buffer (Flush the Buffer Early)

16. 对 AJAX 请求使用 GET 方法 (Use GET for AJAX Requests)

XMLHttpRequest POST 要两步，而 GET 只需要一步。但要注意的是在 IE 上 GET 最大能处理的 URL 长度是 2K。

 

三、Cookie

 

17. 缩小 Cookie (Reduce Cookie Size)

18. 针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)

 

四、Css

 

19. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)

官方的解释我觉得多少有点语焉不详。这一条其实和用户访问期望有关。CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。没有人喜欢等待，而浏览器已经考虑到了这一点。

20. 避免 CSS 表达式 (Avoid CSS Expressions)

个人认为通过 CSS 表达式能做到的事情，通过其它手段也同样能做到而且风险更小一些。

21. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。

22. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

如果没有 JavaScript 与 CSS 可能更好。但，这是不可能的，SO，尽量小点吧。语法能简写的简写。

23. 使用 <link> 而不是@importChoose <link> over @import

在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。

24. 避免使用Filter (Avoid Filters)

五、JavaScript

25. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

当一个脚本在下载的时候，浏览器干不了其它的事儿(串行了)。所以，把它扔到最后面去处理。对于一些功能性的脚本，可能实现起来有些两难。不过对于国内网站来说，有很多使用 Google Analytics 服务进行网站数据分析的。这这一点来说，绝对可行的建议，放到页面最底下。

26. Make JavaScript and CSS External

参见 CSS 篇的描述

27. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

参见 CSS 篇的描述

28. 移除重复脚本 (Remove Duplicate Scripts)

对于一些历史遗留站点或是论坛类的网站来说，这倒是比较常见的。接手维护人前后变化过多，每个人都有自己的一套。这就会带来一些潜在的麻烦。

29. 减少 DOM 访问 (Minimize DOM Access)

有三条指导建议: 

1）缓存已经访问过的元素 (Cache references to accessed elements) 

2）离线"更新节点, 再将它们添加到树中 (Update nodes "offline" and then add them to the tree) 

3）避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿 (Avoid fixing layout with JavaScript) 

30. Develop Smart Event Handlers

除了英文解释外，这里也提醒一下注意关于 Java Script 内存泄漏的问题。

另外推荐一篇《如何优化 JavaScript 脚本的性能》，关于 Ajax 优化指导原则，可以参见 提高 Ajax 应用程序性能，避开 Web 服务漏洞。

后记1) ：整理得差不多之后，发现网络上已经有一篇 《Yahoo!网站性能最佳体验的34条黄金守则》，是翻译稿。看来我做了一部分重复劳动。

后记 2)：CSS / JavaScript 都有优化规则。但似乎缺少了对 Flash 的优化实践。

六、Image

31. 优化图片 (Optimize Images)

使用 GIF 、JPG 还是 PNG 格式的图片? 尽可能的使用 PNG 格式的图片，更多的功能，更小的尺寸(与 GIF 相比)。

对于 PNG 图片，考虑用 Pngcrush 或类似的工具进行优化。常见的工具如下表: 

pngcrush http://pmt.sourceforge.net/pngcrush/ 

pngrewrite http://www.pobox.com/~jason1/pngrewrite/ 

OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (refer: 教程) 

PNGOut http://advsys.net/ken/utils.htm 

另请参见: Five Tips For the Effective Use of PNG Images

对 JPEG 图片的优化工具：

jpegtran (http://jpegclub.org/) 

必需要强调的是，图片设计的同学啊，请考虑设计面向 Web 的图片，不要动不动就设计超过可接受尺寸之外大家伙，这应该是一种习惯，而不是什么高超的技能，只需要记住就成了。

32. 使用 CSS Sprites 技巧对图片优化 (Optimize CSS Sprites)

之前提到过，简单的说就是"利用 CSS background 相关元素进行背景图绝对定位"，把多次 HTTP 调用变为一次调用，更多参考：CSS Sprites: Image Slicing's Kiss of Death

补充一下：对于这个技巧我曾经见到有人滥用的。把多个背景图片揉成一个，减少　HTTP 调用，这是一个很好的思路。但一定要记住这个大图片不能太"重"，我看到过 100 多K 的背景图。一个图片就把整个网站拖得很慢。比较好的例子可以参考雅虎关系的这个图.

更新：使用 CSS Sprites 的一个潜在的副作用是客户端将消耗更多内存(参考)。

33. 不要在 HTML 中使用缩放图片 (Don't Scale Images in HTML)

更多的时候，可能是因为偷懒而没有制作合适大小的图片，如果是批量处理图片的话，可能一条 ImageMagic 命令（convert ）就能搞定 。必须提及的是，看到太多的对图片拉伸很难看的页面，救救这些页面!

34. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)

更小，可缓存，这两条可能都不是问题。问题是，太多站点根本没有 favicon.ico 。有的时候，判断独立域名的 Blog 是否专业，基本看一下是否有 favicon.ico 就差不多了。

--EOF--

补充：视觉设计者应该尽量考虑控制图片大小，推荐在 200K 以下。这不是胡说的，参考页面。

七、Mobile（iPhone）

Web 前端优化最佳实践最后一部分是针对移动应用的，其实只是针对 iPhone 的，目前只有两条规则。

35. 单个数据对象小于 25K (Keep Components under 25K)

这个似乎只是针对 iPhone 研究的。建议保持单个 Web 数据对象在 25 K 以下。为什么是 25K? Apple 官方信息指出可缓存到内存中的 Web 对象最大支持到 10M，但经过测试，发现也就是 25K 左右。

iPhone 在市场上的优异表现，让 Web 人员不得不考虑如何针对其进行优化。相信这部分内容也在不断变化中。

36. Pack Components into a Multipart Document

把Web 页面组件打包成一个多部分组成的文档。其目的是减少 HTTP 请求。对这部分语焉不详，等待后续更新吧。

参考地址：

[1]https://developer.yahoo.com/performance/rules.html

转载于:https://my.oschina.net/areawen2os/blog/872294