yslow的中文翻译

为加快您的网站的最佳实践

最大限度地减少HTTP请求

标签：内容

80％的最终用户响应时间花在前端。大部分时间是捆绑在下载页面中的所有组件：图片，样式表，脚本，闪存等依次减少元件数量减少来渲染页面的HTTP请求的数量。这是更快的页面的关键。

页面，以减少元件数量的方法之一是简化页面的设计。但有一个方法来建立与更丰富的内容的网页，同时也实现了快速的反应时间？这里是减少HTTP请求的数量，同时还支持丰富的网页设计的一些技巧。

合并的文件合并成一个单一的脚本的所有脚本，同样所有的CSS结合到一个单一的样式表的方式来减少HTTP请求数量 。合并文件是更具挑战性的脚本和样式表页与页之间的不同，但是这部分释放过程，提高响应时间。

CSS精灵的首选方法是减少图像请求的数量 。您的背景图像合并成一个单一的形象和使用的CSS背景图片和背景位置属性，以显示所需的图像部分 。

图像映射到一个单一的形象相结合的多张图像。总体规模大致相同，但HTTP请求的数量减少了页面的速度 。图片地图只有工作如果图像是连续在页面，如导航栏。定义影像地图的坐标可乏味而且容易出错 。使用导航影像地图是无法访问过，所以不推荐。

内嵌图片使用的数据： URL方案，在实际的页面中嵌入的图像数据 。这可以增加你的HTML文档的大小 。内嵌图片到您的样式表（缓存）相结合的方式来减少HTTP请求，并避免增加您的网页的大小。内嵌图像尚不支持所有主要浏览器。

减少HTTP请求在您的网页数量是开始的地方。这是首次访问者的性能改善的最重要的准则。作为在Tenni陶依尔的博客文章中描述的浏览器高速缓存的使用-暴露，每天游客到您的网站的40-60％来自于一个空缓存。这些首次访问者的页面快速更好的用户体验是关键。

首页 | 讨论这个规则

使用内容传送网络

标签：服务器

用户的接近您的Web服务器响应时间的影响。部署在多个地理上分散的服务器，您的内容会从用户的角度来看，您的网页加载更快。但是，你应该在哪里开始呢？

作为第一步实施地理上分散的的内容，不要试图重新设计的Web应用程序工作在一个分布式体系结构。根据不同的应用，改变结构可以包括跨服务器的位置同步会话状态和复制数据库交易等艰巨任务。尝试，以减少用户和内容之间的距离可能会推迟，或从来没有通过，此应用程序的架构步骤。

请记住，最终用户响应时间的80-90％是花费在下载页面中的所有组件：图片，样式表，脚本，闪光灯等，这是性能黄金法则。而不是重新设计您的应用程序体系结构的艰巨任务开始时，最好先驱散你的静态内容。这不仅实现了一个更大的减少响应时间，但它的内容交付网络更简单的感谢。

内容交付网络（CDN）是分布在多个地点的Web服务器，更有效地向用户提供内容的集合。选择一个特定的用户提供内容的服务器通常是基于衡量一个网络接近。例如，用最少的网络啤酒花或服务器以最快的响应时间服务器选择。

一些大型互联网公司拥有自己的CDN，但是使用一个CDN服务提供商，如Akamai技术，EdgeCast，或Level3的，它的成本效益 。对于刚成立的公司和私人网站，一个CDN服务的成本可以让人望而却步，但您的目标受众越来越多，越来越全球化，CDN是必要的，以实现快速的响应时间。在雅虎，移出其应用程序的Web服务器上的静态内容到一个CDN（包括第三方的上述以及雅虎自己的CDN），改善最终用户的响应时间， 20％以上的属性。切换到一个CDN是一个相对容易的代码更改，这将大大提高您的网站的速度。

首页 | 讨论这个规则

添加一个Expires或Cache - Control头

标签：服务器

此规则有两个方面：

• 对于静态组件：实现“永不过期”不远的将来通过设置政策Expires标头
• 对于动态组件：使用适当的Cache - Control头，帮助有条件的请求的浏览器

网页设计是越来越丰富，这意味着更多的脚本，样式表，图像和Flash在页 ​​面 。是第一次到您的网页的访问者可能有几个HTTP请求，但是通过使用Expires头你让这些组件缓存的 。这就避免了不必要的HTTP请求，在随后的页面浏览量。过期头是最常用的图像，但他们应该使用的所有组件，包括脚本，样式表和Flash组件 。

浏览器（和代理）使用缓存来减少HTTP请求的数量和规模，使网页加载速度更快。使用一个Web服务器的HTTP响应的Expires头信息告诉客户端组件可以被缓存多久。这是一个遥远的未来Expires头，告诉浏览器，这种反应不会陈旧，直到2010年4月15日，。

到期日：星期四，2010年4月15日20:00:00 GMT      

如果你的服务器是Apache，使用ExpiresDefault指令来设定相对当前日期到期日期。这个例子的ExpiresDefault指令集，过期日期10年来的请求时。

ExpiresDefault“访问加10年”      

记住，如果您使用的是遥远的未来，你必须改变组件的文件名组件的变化时Expires头。雅虎，我们常常使这个生成过程中的步骤的一部分：一个版本号是嵌入式组件的文件名，例如yahoo_2.0.6.js。

不远的将来使用过期头的影响只有在用户已经访问了您的网站页面浏览量。这对HTTP请求的数量没有影响，当用户首次访问您的网站和浏览器的缓存是空的。因此这种性能改善的影响取决于多久用户点击您的网页与催芽缓存 。（一个“底漆缓存”已包含在页面中的所有组件。）测量雅虎，发现与催芽缓存的页面浏览量的数量是75-85 ％。通过使用一个遥远的未来Expires头，你不发送了用户的互联网连接的单字节的浏览器，并在随后的页面浏览量再使用缓存的组件数量增加。

首页 | 讨论这个规则

Gzip已组件

标签：服务器

通过网络传输HTTP请求和响应所花费的时间可大大减少前端工程师所作出的决定。这是真正的最终用户的带宽速度，互联网服务提供商，接近对等交换点等超出开发团队的控制。但也有其他变数影响响应时间的。通过减少HTTP响应的大小，压缩减少了响应时间。

Web客户端与HTTP/1.1的开始，表示支持在HTTP请求的Accept - Encoding头压缩。

的Accept - Encoding：GZIP，DEFLATE      

如果Web服务器认为在要求这个头，可能压缩响应使用由客户列出的方法之一。Web服务器通知该Web客户端，通过在响应的Content - Encoding头。

内容编码：gzip      

gzip是在这个时候最流行 ​​和最有效的压缩方法。它是由GNU项目，并通过标准化RFC 1952。你可能会看到其他压缩格式是紧缩，但它的效果较差，不太受欢迎。

gzip压缩一般可降低约70％的响应大小 。今天的互联网流量的约90％穿过声称支持gzip的浏览器。如果您使用Apache，模块配置GZIP取决于你的版本：Apache 1.3中使用，而Apache 2.x 的使用 mod_deflate mod_gzip。

有与已知问题，可能会导致在浏览器期望收到关于压缩的内容不匹配的浏览器和代理。幸运的是，这些边缘情况正在减少，使用旧版本的浏览器脱落。Apache模块帮助加入适当的变化的响应头自动。

服务器选择什么样的gzip根据文件类型，但通常太有限，在他们决定压缩。大多数网站的gzip他们的HTML文件。这也是值得GZIP你的脚本和样式表，但许多网站错过这个机会。事实上，这是值得的压缩任何文本响应，包括XML和JSON。图片和PDF文件不应该用gzip压缩的，因为它们已经被压缩。试图GZIP他们不仅浪费CPU，但可能会增加文件大小。

gzip压缩尽可能多的文件类型，是一种简单的方法，减少页面的重量和加快用户体验。

首页 | 讨论这个规则

在上面的样式表“

标签：CSS

虽然研究在雅虎的表现，我们发现，将样式表文档的HEAD使得网页加载更快 。这是因为将在HEAD的样式表可以让页面呈现逐步。

前端工程师，关心性能要逐步加载页面，也就是说，我们希望浏览器显示的任何内容，尽快 。了很多内容的网页和用户在互联网连接速度较慢，这一点尤为重要。重要性，为用户提供视觉反馈，如进度指标，得到了很好的研究和记录。在我们的例子中的HTML页面是进度指示器！当浏览器加载页面逐步头，导航栏，在顶部的标志，等所有用户等待页面的视觉反馈服务。这提高了整体的用户体验 。

与样式表放在文档底部附近的问题是，它禁止在许多浏览器进行渲染，包括Internet Explorer。这些浏览器块渲染，以避免重绘页面元素，如果其款式变化。用户停留观看一个空白页。

HTML规范中明确指出，样式表是包含在页面的HEAD：“不像，可能只出现在文档的HEAD部分，虽然它可能会出现任意多次。” 既不替代品，空白屏幕或无样式内容的闪光灯，是值得冒这个险 。最佳的解决方案，是按照HTML规范，并加载在文件头你的样式表 。

首页 | 讨论这个规则

放在底部的脚本

标签：JavaScript的

由脚本引起的问题是，他们阻止并行下载。HTTP/1.1规范 建议浏览器下载不超过两部分组成，在每个主机名并行 。如果您的图片，从多个主机服务，你可以得到并行发生在两个以上的下载 。然而，当一个脚本下载，浏览器不会启动任何其他下载，甚至在不同的主机名。

在某些情况下它是不容易移动脚本的底部。如果，例如，该脚本使用的document.write来插入页面的内容的一部分，它不能被移到较低页面 。还可能有范围问题。在许多情况下，有办法来解决这些情况。

常出现的另一种建议是使用延迟脚本 。defer属性表示脚本不包含的document.write，是一个线索，他们可以继续渲染的浏览器 。不幸的是，Firefox不支持defer属性。在Internet Explorer中，脚本可能会推迟，但不及所需。如果脚本可以被推迟，它也可以被移动到页面底部。这将使您的网页加载速度更快。

首页 | 讨论这个规则

避免CSS表达式

标签：CSS

CSS表达式是一个强大的和危险的方式动态设置CSS属性 。他们支持在Internet Explorer版本5开始，但已过时与IE8开始。作为一个例子，可以设置背景颜色交替每隔一小时，使用CSS表达式 ：

背景颜色：表达式（（新的Date（））getHours（）％2“＃B8D4FF”：？“＃F08A00”）;      

如下所示，表达方法接受一个JavaScript表达式。CSS属性设置为JavaScript表达式评估结果。其他浏览器中的表达方法被忽略，因此它是用于设置属性在Internet Explorer的需要，以创建一个跨浏览器一致的体验 。

与表达式的问题是，他们比大多数人预期的更频繁的评估。他们不仅评估时，页面呈现和调整，而且当页面滚动，甚至当用户移动鼠标在页面。添加计数器的CSS表达式，使我们能够保持跟踪何时以及如何往往是CSS表达式求值。鼠标移动页面，可以方便地生成超过10,000评估。

减少你的CSS表达式求值的次数的方法之一是使用一次性的表情，表达是评估它的第一次设置样式属性的一个明确的价值，它取代了CSS表达式。如果样式属性必须设置动态页面的整个生命，使用事件处理程序，而不是CSS表达式是一种替代方法。如果必须使用CSS表达式，记住，他们可能会评估几千倍，并可能影响你的页面的性能。

首页 | 讨论这个规则

使JavaScript和CSS外部

标签：JAVASCRIPT，CSS

许多这些性能规则处理如何管理外部元件。然而，这些因素出现之前，你应该问一个更基本的问题：JavaScript和CSS包含外部文件中，或在网页本身的内联？

在现实世界中使用外部文件通常会产生更快的网页，因为JavaScript和CSS文件浏览器缓存。JavaScript和CSS，HTML文档中的内联得到下载的每一个HTML文档要求的时间。这减少了所需要的HTTP请求的数量，但增加了HTML文档的大小。另一方面，如果在浏览器缓存的外部文件，JavaScript和CSS，HTML文档的大小是不增加HTTP请求的数量减少。

的关键因素，那么，是与外部JavaScript和CSS组件被缓存请求的HTML文件的数量相对的频率。这个因素，虽然难以量化，可衡量使用各种指标。如果您网站上的用户，每个会话的多个页面浏览量和许多您的网页上重复使用相同的脚本和样式表，有一个更大的缓存外部文件的潜在利益。

许多网站在这些指标中下降。对于这些网站，最好的解决办法通常是JavaScript和CSS作为外部文件来部署。唯一的例外，最好是内联网页，如雅虎的头版和我的 Yahoo! 。很少（也许只有一个）页查看每节的主页可能会发现，内联JavaScript和CSS成果更快的终端用户响应时间。

通常许多页面浏览量第一的头版，有技术，利用减少HTTP请求，内联提供的，以及通过使用外部文件的缓存实现利益。这样的技术之一是内联的JavaScript和CSS在头版，但页面加载完成后动态下载外部文件。随后的页面引用外部文件，应该已经在浏览器的缓存。

首页 | 讨论这个规则

减少DNS查找

标签：内容

域名系统（DNS）映射主机名到IP地址，就像他们的电话号码的通讯录，地图人的名字。当您键入www.yahoo.com到您的浏览器，浏览器联系一个DNS解析返回该服务器的IP地址。DNS有代价的。它通常需要20-120毫秒的DNS来查找一个给定的主机名的IP地址。浏览器不能从此主机下载的东西，直到DNS查找完成。

DNS查找更好的性能，缓存。此缓存可以发生在一个特殊的缓存服务器，由用户的ISP或局域网维护，但也有个人用户的计算机上发生的缓存。DNS信息仍保留在操作系统的DNS缓存（在Microsoft Windows的“DNS客户端服务”）。大多数浏览器都有自己的高速缓存，独立于操作系统的缓存。只要浏览器保持在它自己的缓存DNS记录，它并不理会记录的要求操作系统。

Internet Explorer的缓存DNS查找，默认情况下，30分钟由 指定 DnsCacheTimeout的注册表设置。Firefox的缓存DNS查找为1分钟，由控制network.dnsCacheExpiration配置设置。（Fasterfox变化至1小时。）

当客户端的DNS缓存是空的（浏览器和操作系统），DNS查找的数量是独特的主机名的网页数量相等。这包括在页面的URL中使用的主机名，图像，脚本文件，样式表，Flash对象等，减少了独特的主机名的数量减少DNS查找。

降低独特的主机名的数量有可能减少，需要在页面的平行下载量。避免DNS查找的响应时间，但减少同时下载可能会增加响应时间。我的方针是分割成至少两个，这些组件，但不超过4个的主机名。在一个很好的妥协之间减少DNS查找，并允许一个高度并行下载结果。

首页 | 讨论这个规则

缩小的JavaScript和CSS

标签：JAVASCRIPT，CSS

微小的，是从代码中删除不必要的字符，以减小其大小，从而改善加载时间的实践。缩小的代码时，所有的意见都将被删除，以及不需要的空白字符（空格，换行符和制表 ）。在JavaScript的情况下，这样可以提高响应时间的性能，因为下载的文件的大小降低。minifying JavaScript代码的两个流行的工具是 JSMin 和YUI压缩机 。YUI压缩也可以缩小的CSS。

模糊处理是一种替代的，可以应用到源代码的优化。它的微小和复杂得多，因而更容易产生混淆步骤本身的错误。在美国十大网站的调查中，微小的达到21％，体积减少混淆与25％。虽然模糊了更高的体积减少，minifying的JavaScript是风险较小。

此外，minifying外部脚本和样式，<SCRIPT>内联和<STYLE>块可以，也应该缩小的。即使你的gzip你的脚本和样式，minifying他们仍然会减少5％或以上的规模 。使用JavaScript和CSS的增加的大小，因此将储蓄取得minifying你的代码。

首页 | 讨论这个规则

避免重定向

标签：内容

重定向使用301和302状态码来完成。这里的301响应的HTTP头的一个例子：

HTTP/1.1 301永久移动
      地点：http://example.com/newuri
      内容类型：文本/ HTML      

浏览器会自动将用户在位置字段中指定的URL 。所有必要的信息重定向是在头。响应主体通常是空的。尽管他们的名字，既不是301也不是一个302响应缓存是在实践中中，除非附加头，如过期或者缓存控制，表明它应。META刷新标记和JavaScript的其他方式将用户定向到不同的URL，但如果你必须做一个重定向，首选的方法是使用标准3xx的HTTP状态代码，主要是为了确保“后退”按钮正常工作。

主要的是要记住，重定向减慢用户体验。插入一个重定向和用户之间，因为没有什么可以在页面呈现，并没有组件可以开始下载，直到HTML文档已经抵达的页面的HTML文档延误一切。

一个最浪费的重定向经常发生和Web开发人员一般都没有意识到这一点 。它发生时应该有一个从URL中缺少一个斜线（/） 。例如，http://astrology.yahoo.com/astrology 301响应结果重定向到http://astrology.yahoo.com/astrology/（通知添加结尾的斜线）。这是固定在Apache中使用别名或mod_rewrite的，或DirectorySlash指令，如果你使用Apache处理程序 。

旧网站连接到一个新的，是另一个共同使用重定向 。其他人包括一个网站的不同部分连接，并指导用户基于一定条件下（浏览器类型，类型的用户帐户，等）。使用重定向来连接两个网站很简单，需要一点额外的编码。虽然在这些情况下使用重定向减少了开发的复杂性，降低了用户体验。使用这种重定向的替代品，包括使用别名和 mod_rewrite的，如果在同一台服务器上托管的两个代码路径。如果一个域名的变化是使用重定向的原因，另一种方法是创建一个CNAME（DNS记录创建一个别名，从一个域名指向到另一个）与组合 别名或 mod_rewrite的。

首页 | 讨论这个规则

删除重复的脚本

标签：JavaScript的

它伤害的表现，包括在一个页面两次同一个JavaScript文件。这是不是像你想象的不寻常。美国十大网站的审查表明，他们两个包含重复的脚本。两个主要因素增加，在一个单一的网页复制一个脚本的赔率：团队的规模和数量的脚本。当它发生，重复，造成不必要的HTTP请求和浪费JavaScript执行脚本损害性能。

在Internet Explorer中发生不必要的HTTP请求，但不能在Firefox。在Internet Explorer中，如果外部脚本被包含两次，是不可缓存的，它会生成在页面加载的两个HTTP请求。即使脚本是可缓存的，额外的HTTP请求时有发生，当用户重新加载页面。

除了产生浪费的HTTP请求，浪费时间评估脚本多次。这种冗余的JavaScript执行发生在Firefox和Internet Explorer，不管是否脚本缓存。

的方式，以避免意外相同的脚本，包括两次之一是落实在你的模板系统脚本管理模块。包括脚本的典型方法是使用在你的HTML页面的脚本标签。

<script type="text/javascript" src="menu_1.0.17.js"> </ SCRIPT>      

在PHP中的另一种选择是创建调用的函数insertScript。

<？PHP insertScript（“menu.js”）？>      

此外，以防止被插入多次相同的脚本，这个功能可以处理脚本，如依赖性检查和增加版本号的脚本文件名支持不远的将来到期头，其他的问题。

首页 | 讨论这个规则

配置ETag的

标签：服务器

实体标记（ETag的）是一种机制，Web服务器和浏览器使用，以确定是否在浏览器的缓存组件与原服务器上的一个 。（“实体”是添加ETag的人提供了一个验证实体的最后修改日期较灵活的机制，另一个字的“分量”：图像，脚本，样式表等 ）。一个ETag是一个字符串，它唯一标识一个组件的具体版本 。唯一的格式限制，被引用的字符串 。源服务器使用的ETag响应头指定组件的ETag的。

HTTP/1.1 200 OK
      最后修改时间：星期二，2006年12月12日3时03分59秒格林尼治标准​​时间
      ETag的：“10c24bc 4AB - 457e1c1f”
      内容长度：12195      

后来，如果浏览器来验证组件，它使用如果没有匹配头传递的ETag到源服务器。如果ETag的比赛中，返回一个304状态代码是这个例子中，响应减少12195字节 。

GET / I / yahoo.gif HTTP/1.1
      主持人：us.yimg.com
      如果- Modified - Since的：星期二，2006年12月12日3时03分59秒格林尼治标准​​时间
      如果无匹配：“10c24bc 4AB - 457e1c1f”
      HTTP/1.1 304未修改      

与ETag的问题是，他们通常使用的属性，使它们独特的站点到一个特定的服务器托管。ETag的不匹配，当浏览器从一台服务器上获取原始组件，并稍后尝试不同的服务器上验证该组件，这种情况是很常见的网站上，使用一个服务器集群来处理请求。默认情况下，Apache和IIS嵌入的ETag的有效性测试多个服务器的网站上获得成功的几率，大大降低了数据。

适用于Apache 1.3和2.x的ETag格式是inode的大小时间戳。虽然一个给定的文件可能跨多个服务器驻留在相同的目录，并有相同的文件大小，权限，时间戳等，它的inode是从一个服务器到不同的未来。

IIS 5.0和6.0有ETag的一个类似的问题。IIS上的ETag的格式是：ChangeNumber Filetimestamp 。一个ChangeNumber是一个计数器用来跟踪到IIS的配置更改 。这是不可能的ChangeNumber，是一个网站背后的所有IIS服务器 相同。

最终的结果是完全相同的组件Apache和IIS生成ETag的，将不匹配从一个服务器到另一个 。如果ETag的不匹配，用户不接受小，速度快，ETag的被设计为304响应，相反，他们会得到一个正常的200响应组件的所有数据 。如果你只有一台服务器上托管你的网站，这不是一个问题。但如果你有多个服务器托管您的网站，你使用Apache或IIS默认的ETag配置，你的用户是越来越慢的页面，您的服务器具有更高的负载，你消耗更大的带宽，和代理 AREN“ 吨缓存你的内容有效 。即使你的组件有一个遥远的未来Expires标头，仍是一个有条件的GET请求，每当用户点击刷新或刷新。

如果你不采取ETag的提供灵活的验证模型的优势，它的更好，只是完全删除的ETag。基于组件的时间戳的Last - Modified头验证。和删除的ETag减少的反应和后续的请求的HTTP头的大小 。此Microsoft支持文章 ​​介绍了如何删除ETag的 。在Apache中，这样做是通过简单的Apache配置文件中添加以下行 ：

FileETag无      

首页 | 讨论这个规则

制作的Ajax可缓存

标签：内容

引用Ajax的好处之一是，它提供瞬时反馈给用户，因为它要求从后端Web服务器的信息异步。但是，使用Ajax是没有保证用户不会再做这些异步JavaScript和XML响应等待返回他的拇指。在许多应用中，无论用户是一直在等待取决于Ajax是如何使用。例如，在一个基于Web的电子邮件客户端的用户将保持等待一个Ajax请求，找到符合他们的搜索条件的所有电子邮件的结果。重要的是要记住，“异步”并不意味着“瞬间”。

为了提高性能，重要的是要优化Ajax响应。提高Ajax性能是最重要的方式作出反应缓存的，因为在讨论添加一个Expires或Cache - Control头。其他的一些规则也适用于对Ajax ：

• Gzip已组件
• 减少DNS查找
• 缩小的JavaScript
• 避免重定向
• 配置ETag的

让我们来看看一个例子。Web 2.0的电子邮件客户端可能会使用Ajax自动完成下载用户的地址簿 。如果用户没有修改自己的地址簿中，因为她最后一次使用电子邮件的Web应用程序，以前的地址簿中的反应可以从缓存中读取，如果说Ajax响应缓存的未来Expires或Cache - Control头。必须告知浏览器，当请求一个新的使用与以前缓存的地址簿中的反应。这可以通过一个时间戳添加到地址簿中的Ajax URL说明最后一次用户修改了她的地址簿，例如，T = 1190241612。如果通讯簿中没有被修改，自上次下载的时间戳将同一地址簿将消除额外的HTTP往返，从浏览器的缓存读取 。如果用户已经修改了她的地址簿，时间戳，确保新的URL不匹配缓存的响应，浏览器将请求更新地址簿条目。

即使你的Ajax响应动态创建的，并且可能只适用于单个用户，他们仍然可以被缓存。这样做将会使您的Web 2.0应用的速度。

首页 | 讨论这个规则

提前刷新缓冲区

标签：服务器

当用户请求一个页面，它可以在任何地方从200至500ms缝合在一起的HTML页面的后端服务器。在这段时间内，浏览器处于闲置状态，等待数据到达 。在PHP中的flush（）函数。它允许你发送部分准备的HTML浏览器，这样浏览器就可以开始抓取元件，而你的后端是忙于其他的 HTML页面。这样做的好处主要是在繁忙的后端或轻前端。

因为头的HTML通常比较容易产生，它允许您包括任何CSS和JavaScript文件的浏览器开始并行抓取，而后端仍在处理后的头一个好地方，要考虑冲洗。

例如：

... ... <！ - CSS，JS - >
    </ HEAD>
    <PHP的flush（）;？>
    <BODY>
      ... ... <！ - 内容 - >
      

雅虎搜索率先研究和实际用户测试，证明使用这种技术的好处 。

顶部

AJAX请求使用GET

标签：服务器

在雅虎 邮件研究小组发现， 使用 XMLHttpRequest时，POST是在浏览器中实现一个两步的过程：发送标题，然后发送数据 。所以，最好使用GET，只需要一个TCP数据包发送（除非你有很多的饼干）。在IE的最大URL长度是2K，所以，如果你发送超过2K的数据，你可能不能够使用 GET。

一个有趣的影响是该职位没有发布任何数据行为像GET。基于的HTTP规范，GET检索信息的含义，所以它才有意义（语义）使用GET时，你只请求数据，而不是发送到服务器端存储的 数据。

顶部

后负荷

标签：内容

您可以在您的网页定睛一看，问自己：“什么是绝对必要的，以渲染页面最初？”。可以等待其余的内容和组成部分。

JavaScript是一种分裂的onload事件之前和之后的理想人选。例如，如果你有JavaScript代码和库拖放和动画，那些可以等​​待，因为拖动页面上的元素后初步呈现。其他地方寻找后加载的候选人包括隐藏的内容（用户操作后出现的内容，）和倍以下的图像。

工具，以帮助你在你的努力：YUI图像装载机允许您延迟低于倍和图像锐获得实用程序是一个简单的方法，包括JS和CSS飞。在野外的一个例子来看看雅虎 首页 Firebug的净面板打开。

这是很好的绩效目标时，内联与其他Web开发最佳实践。在这种情况下，渐进增强的想法告诉我们的JavaScript支持时，可以改善用户体验，但你必须确保页的作品，即使没有JavaScript。所以当你确保页面正常工作，可以加强与一些后加载的脚本，给你更多的钟声和口哨声，如拖放和动画。

顶部

预压元件

标签：内容

预压后负荷相反可能看起来像，但它实际上有不同的目标。通过预加载组件，你可以利用浏览器是空闲的时间，并要求组件（如图像，样式和脚本），您将需要在未来的优势。这种方式，当用户访问下一页，你可能有大部分组件已经在缓存中，您的网页将加载用户快得多。

实际上有堆载预压的几种类型：

• 无条件预紧-尽快的onload火灾，你继续前进，获取一些额外的组件。检查google.com sprite图像是如何要求的onload的一个例子。这个sprite图像是没有必要对google.com网页，但它是需要连续搜索结果页上。
• 有条件的预紧-基于对用户操作进行猜测用户相应的领导和预紧 。search.yahoo.com你可以看到如何要求一些额外的组件后，开始在输入框中输入。
• 预计推出重新设计前提前预压-预紧。它经常发生的经过重新设计，你听到：“新网站是凉爽的，但它比以前慢 “。问题的部分原因可能是用户一个完整的高速缓存访问您的旧网站，但新的始终是一个空缓存的经验 。堆载预压的一些组件之前，你甚至推出了重新设计，您可以减轻这种副作用 。您的旧网站可以使用浏览器是空闲的时间和要求图像和脚本将被用于新网站

顶部

减少DOM元素数量

标签：内容

一个复杂的页面意味着更多的字节下载，这也意味着慢DOM的JavaScript访问。它的确与众不同，如果循环当你想添加一个事件处理程序，例如通过500或5000个页面的DOM元素。

一个DOM元素的高数量可以是一个症状，有什么东西，应与改善，而不必删除内容页的标记。你使用嵌套表布局的目的呢 ？你在投掷<DIV>唯一的解决布局问题？也许有一个更好，更语义正确的方式做标记 。

与布局的一个很大的帮助了YUI的CSS实用工具：grids.css可以帮助你的总体布局，fonts.css和reset.css可以帮助你去掉浏览器的默认格式。这是一个机会重新开始，想想你的标记，例如使用<DIV> s的，只有当它是有意义的语义，而不是因为它呈现一个新 行。

DOM元素数量很容易测试，在Firebug的控制台只需键入：document.getElementsByTagName ('*').长度

多少DOM元素太多呢？检查其他类似的网页，有良好的标记。例如在雅虎 主页是一个非常繁忙的页面，并仍在700个元素（HTML 标签）。

顶部

分割成域组件

标签：内容

分割组件，可以最大限度地提高并行下载。确保您使用的是由于DNS查找罚款不超过2-4域。例如，您可以承载你的HTML和动态内容的 www.example.org和分裂之间的静态组件 static1.example.org 和 static2.example.org

有关详细信息，选中“在共乘车道最大化的同时下载“Tenni陶依尔和侯佩岑 志。

顶部

iframe的数量最小化

标签：内容

IFRAMES允许在父文档中插入一个HTML文档。重要的是要了解如何工作，使他们能够有效地使用iframe的。

<IFRAME>优点：

• 缓慢的第三方如徽章和广告的内容有帮助
• 安全沙箱
• 并行的下载脚本

<IFRAME>的利弊：

• 不惜血本，即使空白
• 阻止页面的onload
• 非语义

顶部

没有404

标签：内容

HTTP请求是昂贵的，所以一个HTTP请求，并得到一个无用的反应（即404未找​​到）是完全不必要的的，并会减慢用户体验没有任何好处。

有些网站有用404“您的意思是X？”，这是伟大的用户体验，但也浪费了服务器资源（如数据库等）。特别糟糕的是当一个外部JavaScript的链接是错误的，结果是404。首先，此下载将块并行下载。接下来，浏览器可能会尝试解析404响应体，就好像它是JavaScript代码，试图找到它可用的东西。

顶部

减少cookie大小

标签：CO​​OKIE

用于各种原因，如身份验证和个性化的HTTP cookies。有关Cookie的信息交换，在Web服务器和浏览器之间的的HTTP标头。重要的是要保持尽可能低的饼干的大小，以尽量减少对用户的响应时间的影响。

欲了解更多信息， 检查“繁忙 “Tenni陶依尔和侯佩岑志 。这项研究的带回家：

• 消除不必要的Cookie
• 保持尽可能低的cookie的大小，以尽量减少对用户的响应时间的影响
• 要注意在适当的域级别设置的，因此不影响其他子域的Cookie
• 设置一个过期日期适当。较早的到期日期或没有删除的cookie越早，提高用户的响应时间

顶部

组件使用无Cookie的域

标签：CO​​OKIE

当浏览器发出一个静态图像的请求并发送请求的Cookie，服务器没有任何使用这些cookie。因此，他们只能创建网络流量，没有充分的理由。你应该确保静态组件与无Cookie的请求要求。创建一个子域和主机中的所有静态组件。

如果您的域名是www.example.org，您可以承载你的静态组件 static.example.org 。不过，如果你已经设置上的顶级域名的 cookie example.org，而不是到 www.example.org，然后所有的请求 到static.example.org将会包括那些cookie 。在这种情况下，你可以买一个全新的领域，你的静态组件主机，并保持此域的 cookie。雅虎使用yimg.com，YouTube使用ytimg.com，亚马逊使用图像，amazon.com等。

无cookie的域上承载的静态组件的另一个好处是，有些代理服务器可能会拒绝缓存与cookies请求的组件。与此相关的，如果你想知道，您是否应该使用为您的主页example.org或www.example.org，考虑cookie的影响 。省略WWW离开你别无选择，但写的cookie *. example.org，所以性能方面的原因，最好使用www的子域和写子域的 cookies。

顶部

最小化DOM访问

标签：JavaScript的

使用JavaScript访问DOM元素是缓慢的，所以为了有更多的响应页面，你应该：

• 缓存引用访问的元素
• 更新节点“离线”，然后将它们添加到树
• 避免固定使用JavaScript的布局

欲了解更多信息，检查锐剧院 的“高性能Ajax应用程序 “，由Julien Lecomte。

顶部

开发智能事件处理程序

标签：JavaScript的

网页有时感觉不到，因为太多的事件处理程序附加到DOM树的不同元素，然后执行往往反应。这就是为什么使用事件代表团是一个很好的办法。如果你有10个按钮格内，只有一个事件处理程序附加到div包装，每个按钮的处理程序，而不是一个。事件冒泡，让您能够捕捉的事件，并找出它起源于哪个按钮。

你也不必等待onload事件，以开始做DOM树的东西 。通常你需要的是你要访问的元素在树。您不必等待下载所有图像。 DOMContentLoaded是你可能考虑的onload事件，而不是使用事件，但直到它在所有的浏览器，你可以使用YUI事件工具，其中有一个onAvailable方法。

欲了解更多信息，检查锐剧院 的“高性能Ajax应用程序 “，由Julien Lecomte。

顶部

选择对的@ import的<link>

标签：CSS

以前最好的做法一个国家的CSS应在顶部，以便逐步呈现。

在IE浏览器的@ import的行为使用的是相同的 <link>在页面的底部，所以最好不要使用它 。

顶部

避免过滤器

标签：CSS

IE专有的AlphaImageLoader筛选器的目的是修复与真彩色的PNG半透明版本的IE <7问题 。此过滤器的问题是，它块的渲染和冻结浏览器，而正在下载的图像。这也增加了内存消耗是每个元素的应用，而不是每幅图像，这样的问题是成倍增加 。

最好的办法是完全避免AlphaImageLoader和使用优雅有辱人格的PNG8，而不是，这是在IE的罚款 ​​。如果你绝对需要AlphaImageLoader的，使用下划线劈 _Filter不惩罚你的IE7 + 用户。

顶部

优化图像

标签：图像

经过设计师与创造您的网页图像，仍然有一些事情你可以先试后到Web服务器FTP这些图像。

• 您可以查看GIF和看看他们使用的是调色板的大小对应于图像中的颜色数量 。使用ImageMagick的，很容易地 检查确定详细 image.gif，当你看到的图像，使用4种颜色，256色调色板中的“槽”，有 改进的余地。
• 尝试转换的GIF，PNG和查看是否有节省。往往不是存在。开发人员经常会毫不犹豫地使用PNG格式，由于在浏览器中的有限支持，但现在这是过去的事情了。唯一的真正问题是真彩色的PNG的Alpha透明度，但话又说回来，gifs是不是真彩色，不支持可变的透明度。调色板PNG（PNG8），所以任何一个GIF可以做，可以做太多（动画除外） 。这个简单的ImageMagick命令的结果，在完全安全使用PNG 图像：转换 image.gif image.png“我们说的是：给ping一个 机会！“
• 运行pngcrush所有的PNG（或任何其他PNG优化工具）。例： pngcrush image.png REM ALLA减少野蛮result.png
• 运行在所有的JPEG文件jpegtran。此工具如旋转无损JPEG操作，也可用于优化和删除您的图片的意见和其他无用的信息（如EXIF信息） 。jpegtran复制没有优化完美src.jpg dest.jpg

顶部

优化CSS精灵

标签：图像

• 安排在水平垂直通常在较小的文件大小的结果，而不是的精灵的图像。
• 结合相似的颜色在精灵帮助您保持色彩数低，下256色的理想，以适应在一个PNG8。
• “可移动的友好”，不留一个sprite图像之间的较大差距。这不会影响文件的大小，尽可能多的，但需要较少的内存，为用户代理解压缩到一个像素图的图像。100x100的图像是10万像素，1000X1000 100万像素的

顶部

不要规模HTML图像

标签：图像

不要使用比你需要的仅仅是因为你可以在HTML中的宽度和高度设置一个较大的图像。如果您需要<img WIDTH="100" height="100" src="mycat.jpg" alt="My Cat" /> 那么你的形象（mycat.jpg）应，而不是向下500x500px图像的缩放 100x100px。

顶部

favicon.ico小和可高速缓存

标签：图像

favicon.ico是一个停留在您的服务器的根的形象。这是一个必要的邪恶，因为即使你不关心它的浏览器将仍然要求，所以最好不要回应一个404未找到。此外，由于在同一服务器上的，Cookie是发送的每一个要求的时间。此图片下载序列的干扰，例如在IE浏览器额外的组件，当您请求的onload的favicon会被下载之前，这些额外的组件 。

因此，为了减轻favicon.ico确保弊端：

• 它的小，最好在1K。
• 设置Expires头与你感觉很舒服（因为你不能重命名它，如果你决定改变它）。你或许可以安全地设置Expires头在未来的几个月。您可以查看您当前favicon.ico的最后修改日期做出明智的决定。

ImageMagick的可以帮助你创建小的网站 图示

顶部

保持下25K组件

标签：手机

这种限制是有关的事实，iPhone将不缓存超过25K的组件 。请注意，这是未压缩的大小 。这是微小的，是因为GZIP单独可能不足以。

欲了解更多信息，检查“性能的研究，第5部分：iPhone可缓存-它棒“韦恩乳木果和Tenni陶依尔 。

顶部

包成一个Multipart文件组件

标签：手机

包装成一个多文档的组件，如带有附件的电子邮件，它可以帮助你获取一个HTTP请求（记住：HTTP请求昂贵）几部分组成。当你使用这种方法，首先检查是否用户代理支持它（iPhone不）。

避免空洞的图片的src

标签：服务器

与空字符串的图片的 src属性发生超过预期 。它有两种形式出现：

1. 直接的HTML

   <img src="">

2. JavaScript的

   VAR IMG =新的Image（）; 

   img.src =“”;

这两种形式引起相同的效果：浏览器发出另一个请求到您的服务器。

• Internet Explorer的要求在该页面所在的目录。
• Safari和Chrome实际页面本身的请求 。
• 火狐 3和早期版本的Safari和Chrome相同的行为，但3.5版本解决了这一问题[错误 444931]不再发送请求。
• 歌剧没有做任何事情时遇到一个空的形象SRC 。

为什么这是不好的行为呢？

1. 跛子您的服务器发送的大量突发流量，尤其是得到以百万计的页面浏览量每天的网页。
2. 废物服务器计算周期产生一个永远不会被浏览的网页。
3. 可能会破坏用户数据。如果你是跟踪请求的状态，可以通过cookie或以另一种方式，你有破坏数据的可能性。即使图像请求不返回一个图像，所有的标题都阅读并接受浏览器，包括所有的cookies。虽然响应的其余部分扔掉，损害可能已经完成。

这种行为的根源是，在浏览器中进行解析URI的方式。这种行为是定义在RFC 3986 - 统一资源标识符。当遇到一个空字符串作为URI，它被认为是一个相对的URI，是根据5.2节定义的算法解决。这个具体的例子，一个空字符串，列在第5.4节。火狐，Safari和Chrome都解决一个空字符串按照规范正确，而Internet Explorer是解决不正确的，显然是在RFC 2396规范的早期版本， - 统一资源标识符（这是由RFC 3986过时） 。所以从技术上来说，浏览器是做他们应该做的事情来解决相对URI。问题是，在这种情况下，空字符串显然是无意的。

HTML5的增加

标记的src属性的说明，指示浏览器不作出第4.8.2节中的额外 要求：

src属性必须存在，并且必须包含一个有效的URL引用一个非交互式的，可以选择动画，图像资源，既不是分页，也不照本宣科。如果元素的基URI是文档的地址相同，则src属性的值必须不能是空字符串。

希望，浏览器不会有这个问题在未来。不幸的是，该条款没有<script src="">和<link href="" target="_blank" rel="external nofollow" >。也许还有时间做出调整，以确保浏览器不小心执行此行为。

此规则的设计灵感来自雅虎的JavaScript大师尼古拉斯C. Zakas。欲了解更多信息，检查出他的文章“空图像的src可以摧毁你的网站 “。

顶部