前端开发入门：yahoo军规性能优化

浅浅的花香味﹌ 2022-08-19 05:53 234阅读 0赞

雅虎给出了[优化网站加载速度][Link 1]的34条法则（包括Yslow规则22条） 详细说明，下载转发 ponytail 的译文（来自帕兰映像）。

1.**尽量减少HTTP请求个数——须权衡**  Minimize HTTP Requests [ 减少HTTP请求**   **][_HTTP]

图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。谨记：80%-90%的终端响应时间是花费在下载页面中的图片，样式表，脚本，flash等；合并图片（如css sprites，内置图片使用数据）、合并CSS、JS，这一点很重要，但是要考虑合并后的文件体积。  
2.**使用CDN（内容分发网络）**Use a Content Delivery Network 利用CDN技术

CDN 确实是好东西，不过服务器提供商的这项服务一般是要收费的，以前买的国内空间是有这个的，但是当时根本不知道啥用，现在没了。CDN的三类实现：镜像、高速缓存、专线，以及智能路由器和负载均衡；  
3.**添加Expire/Cache-Control 头** Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存

浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果 页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。区分静态内容和动态内容，避免以后页面访问中不必要的HTTP请求。  
4.**使用gzip压缩内容**Gzip Components Gzip压缩

Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到 这里 做下测试。Gzip压缩所有可能的文件类型以来减少文件体积。Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这样可以显著减少文件传输的大小。传输完毕后浏览器会 重新对压缩过的内容进行解压缩，并执行。目前的浏览器都能“良好”地支持 gzip。不仅浏览器可以识别，而且各大“爬虫”也同样可以识别，各位seoer可以放下心了。而且gzip的压缩比例非常大，一般压缩率为85%，就是 说服务器端100K的页面可以压缩到25K左右再发送到客户端。具体的Gzip压缩原理大家可以参考csdn上的《gzip压缩算法》 这篇文章。雅虎特别强调， 所有的文本内容都应该被gzip压缩: html (php), js, css, xml, txt… 这一点我们网站做得不错，是一个A。以前我们的首页也并不是A，因为首页上还有很多广告代码投放的js，这些广告代码拥有者的网站的js没有经过gzip压缩，也会拖累我们网站。  
5.**把CSS放到顶部** Put Stylesheets at the Top 把CSS放顶部

让浏览者能尽早的看到网站的完整样式。实现页面有秩序地加载，这对于拥有较多内容的页面和网速较慢的用户来说更为重要，同时，HTML规范清楚指出样式表要放包含在页面的区域内；  
6.**把JS放到底部** Put Scripts at the Bottom 把JS放底部

网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个，而问题在于脚本阻止了页面的平行下载，即便是主机名不相同。

7.**避免使用CSS表达式** Avoid CSS Expressions 避免CSS Expressions

CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死！~页面显示和缩放，滚动、乃至移动鼠标时，CSS表达式的计算频率是我们要关注的。可以考虑一次性的表达式或者使用事件句柄来代替CSS表达式。  
8.**将CSS和JS放到外部文件中** Make JavaScript and CSS External 将JS和CSS外链。

前面讲到了缓存这个事情，一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我就是从Google外链来的Jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！~  
9.**减少DNS查找次数** Reduce DNS Lookups 减少DNS查找

貌似是要减少网站从外部调用资源，我的Google分析和picasa的外链图片都算在里面了。我们需要权衡减少 DNS查找次数和保持较高程度并行下载两者之间的关系。  
10.**精简CSS和JS** Minify JavaScript and CSS 减小JS和CSS的体积

写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点。目的就是减少下载的文件体积，可考虑压缩工具JSMin和YUI Compressor。  
11. **避免跳转** Avoid Redirects 避免重定向

再写入链接时，虽然”http://www. today-s-ooxx. com”和”http://www. today-s-ooxx. com/” 仅有一个最后的”/”只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转，这个要自己注意，也可以在Apache里用Alias 或者mod\_rewrite或者DirectorySlash解决。

为了确保“后退”按钮可以正确地使用，使用标准的 3XXHTTP状态代码；同域中注意避免反斜杠 “/” 的跳转；跨域使用 Alias或者 mod\_rewirte建立 CNAME（保存一个域名和另外一个域名之间关系的DNS记录）

12. **剔除重复的JS和CSS** Remove Duplicate Scripts 删除重复脚本

重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。  
13. **配置ETags** Configure ETags 配置ETags

Entity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内 容”，包括图片、脚本、样式表等），是比last-modified date更更加灵活的机制，单位时间内文件被修过多次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载。总之我是在. htaccess里把它删除了。  
14. **使AJAX可缓存** Make Ajax Cacheable 缓存Ajax

Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高效率。利用时间戳，更精巧的实现响应可缓存与服务器数据同步更新。  
15.**尽早刷新输出缓冲** Flush the Buffer Early 尽早的释放缓冲

当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合HTML，将写在head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。尤其对于css，js文件的并行下载更有意义。  
16. **使用GET来完成AJAX请求** Use GET for AJAX Requests 用GET方式进行AJAX请求

Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。在url小于2K时使用GET获取数据时更加有意义。  
17. **延迟加载** Post-load Components 延迟加载组件

最先加载必须的组件进行页面初始化，然后再加载其他，YUI Image Loader 是很好的例子。确定页面运行正常后，再加载脚本来实现如拖放和动画，或者是隐藏部分的内容以及折叠内容等。  
18. **预加载** Preload components 预加载组件

提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的响应，参见Google首页上的CSS sprites应用。关注下无条件加载，有条件加载和有预期的加载。  
19. **减少DOM元素个数** Reduce the Number of DOM Elements 减少DOM元素数量

复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是好的前端的必备条件。使用更适合或者在语意是更贴切的标签，要考虑大量DOM元素中循环的性能开销。  
20. **根据域名划分页面内容** Split Components Across Domains 跨域分离组件

页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上面说到的DNS查找浪费。很显然， 是最大限度地实现平行下载。  
21. **尽量减少iframe的个数** Minimize the Number of iframes 减少iframe数量

需要更有效的利用 ifames。  
iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本  
iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义  
22. **避免404** No 404s 不要出现404页面

站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。HTTP请求时间消耗是很大的，有些站点把404错误响应页面改为“你是不是要找\*\*\*”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。  
23. **减少Cookie的大小** Reduce Cookie Size 减小Cookie

Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。  
24.**使用无cookie的域** Use Cookie-free Domains for Components 对组件使用无Cookie的域名

对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件式一个好方法，或者也可以在Cookie中只存放带www的域名。去除不必要的coockie  
使coockie体积尽量小以减少对用户响应的影响，注意在适应级别的域名上设置coockie以便使子域名不受影响，设置合理的过期时间。较早地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。  
25. **减少DOM访问** Minimize DOM Access 减少DOM的访问次数

JS访问DOM是很慢的，尽量不要用JS来设置页面布局。缓存已经访问过的有关元素，线下更新完节点之后再将它们添加到文档树中，避免使用JavaScript来修改页面布局。  
26. **开发智能事件处理程序** Develop Smart Event Handlers 开发灵活的事件处理句柄

DOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄。有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event delegation（事件代理）是一种好方法了。如果你在一个div中有10个按钮，你只需要在div上附加一次事件句柄就可以了，而不用去为每一个按 钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。  
你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。  
你可能会希望用DOMContentLoaded事件来代替 事件应用程序中的onAvailable方法。  
27. **用<link>代替@import** Choose < link >over @import 使用< link >而非 @import

在IE中使用@import就和在页面底部用< link >一样，我们前面说要把< link >放顶部的。在IE中，页面底部@import和使用<link>作用是一样的，因此最好不要使用它。  
28. **避免使用滤镜** Avoid Filters 避免过滤器的使用

如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只对IE6及以下的版本适用，用PNG8图片。如果你非要使用，加上\_filter以免影响IE7+用户。完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用 AlphaImageLoader，请使用下划线\_filter又使之对IE7以上版本的用户无效。  
29. **优化图像** Optimize Images 优化图片

将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图片以达到优化效果。尝试把GIF格式转换成PNG格式，看看是否节省空间。在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。  
30. **优化CSS Spirite** Optimize CSS Sprites 优化CSS Sprites

在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小图片本身的大小及提高页面图片显示速度。

在Spirite中水平排列你的图片，垂直排列会稍稍增加文件大小；

Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；

便于移动，不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。 100×100的图片为1万像素，而1000×1000就是100万像素。

31. **不要在HTML中缩放图像——须权衡** Don’t Scale Images in HTML 不要在HTML中缩放图片

图片要用多大的就用多大的，1000X1000的图片被width=”100″ height=”100″以后，本身的KB数是不会减少的。

不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需要：

那么你的图片（mydog.jpg）就应该是100×100像素而不是把一个500×500像素的图片缩小使用。这里在下文有更有趣的分析。

32. **avicon.ico要小而且可缓存** Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它

站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下。avicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一 个404 Not Found的响应。由于是在同一台服务器上，它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序，例如在IE中当你在 onload中请求额外的文件时，favicon会在这些额外内容被加载前下载。

因此，为了减少favicon.ico带来的弊端，要做到：

文件尽量地小，最好小于1K

在适当的时候（也就是你不要打算再换favicon.ico的时候，因为更换新文件时不能对它进行重命名）为它设置Expires文件头。你可以很安全地 把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。

Imagemagick可以帮你创建小巧的favicon。

33. **保持单个内容小于25K** Keep Components under 25K 保证组件在25K以下

iPhone不能缓存25K以上的组件，并且这还是要在被压缩前。因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求，因此精简文件就显得十分重 要。  
34.**打包组件成复合文本** Pack Components into a Multipart Document 将组件打包进一个多部分的文档中

就好像在邮件中加入附件一样，一个HTTP请求就够了，但是这一技术需要确保你的代理支持，iPhone就不支持。页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组件（切记：HTTP请求是很奢侈的）。当你使用这条规 则时，首先要确定用户代理是否支持（iPhone就不支持）。

**Yahoo军规再度挖掘会怎样？**

在网站性能优化的路上，是不会有终点的，这也是前端工程师永不会妥协的地方。

使用combo合并静态资源

Bigpipe技术合并动态数据

Comet：基于http的服务端推技术

使用DataURI减少图片请求

使用良好的JS，CSS版本管理方案

尝试仅作必要的JS更新

利用本地存储做缓存

关于最小化HTML

进一步讨论Gzip

进一步讨论域名划分

打开keep-alive，重用HTTP连接

使用JSON进行数据交换

保障页面可交互性

缩短最快可交互时间

异步无阻脚本下载

优化内存使用，防止内存泄露

高效的JavaScript

第三方代码性能问题

Inline脚本不要与CSS穿插使用

使用高效的CSS选择器

进一步讨论及早Flush

关于视觉和心理学

[Link 1]: http://www.fovweb.com/search?cx=014309696931864936449%3Abvmjfz7vbmu&cof=FORID%3A11&ie=UTF-8&q=%E7%BD%91%E7%AB%99%E4%BC%98%E5%8C%96&sa=#1496
[_HTTP]: http://www.fovweb.com/optimizer/optimize-the-website-to-reduce-the-http-request.html