为加快您的网站最佳做法--雅虎工作者总结

尽量减少HTTP请求

标签：内容

80最终用户响应时间％用于前端。这段时间，大部分是绑在下载页面中的所有组件：图片，样式表，脚本，Flash等减少元件数量，从而减少了所需的HTTP请求的数量呈现页面。这是更快的网页的关键。

一种方法来减少元件的页码是简化页面的设计。但有没有办法建设有更丰富的内容网页，同时也取得快速的反应时间？以下是减少HTTP请求数量的一些技巧，同时还支持丰富的网页设计。

联合文件 是一种方式，以减少脚本数目单一的HTTP请求的脚本将结合所有，同样所有的CSS样式单相结合成一个。结合文件是更具挑战性的脚本和样式表时，从一页一页地不同，但使这一进程的一部分，你的释放提高响应时间。

CSS的精灵 ，是首选的方法对图像的要求的数目减少。结合您的单一图像背景图像分为A，使用CSS 背景图像和背景位置属性，以显示所需的图像部分。

影像地图 一幅图像的多个图像合并成一个。总的大小是大致相同，但数量减少页面的HTTP请求加快。只有当图像映射的图像页连续在酒吧，如导航。定义地图坐标形象，乏味和容易出错。用导航影像地图是不是太方便，所以不推荐。

内联图像 使用 数据：URL方案 实际网页中嵌入图像数据研究。这可以增加您的HTML文件的大小。结合）内置图片到您的样式（缓存是一种方法，以减少HTTP请求，并避免增加您的网页大小。嵌入式图像尚不支持所有主要浏览器。

减少页码在你的HTTP请求是开始的地方。这是第一次来访的最重要的准则，用以提高性能。正如上文滕尼塞尔的博客帖子 浏览器缓存的使用情况-暴露！ ，每天40-60％的游客到您的网站出现在一个空缓存。让您的时间为这些旅客的第一页快速的关键是一个更好的用户体验。

热门 | 讨论这一规则

使用内容传送网络

标签：服务器

用户在地理上接近你的Web服务器有一个响应时间的影响。您的内容部署在多个地理位置分散的服务器将让您的网页加载从用户的角度更快。但是，您应从何处入手？

作为第一个步骤，实施地理上分散的内容，不要试图重新设计你的web应用工作在一个分布式体系结构。根据应用，改变了结构可以包括艰巨的任务，如同步会话状态和复制整个服务器的位置数据库事务。企图以减少用户与您的内容可能会推迟的，或是从来没有通过的距离，这种应用架构的一步。

记住80-90％的时间对最终用户的响应是用于下载的所有页面中的组件：图片，样式表，脚本，Flash等，这是 表演的黄金规则 。而不是与您的应用程序架构起了艰巨的任务重新设计，最好先驱散你的静态内容。这不仅实现了更大的反应时间减少，但它更容易由于内容传递网络。

一个内容传递网路（CDN）是一个网络服务器集合在多个地点派发，以更有效地提供内容给用户。该服务器提供内容，选定一个特定的用户通常是基于对网络邻近措施。例如，用最少跳或网络服务器与服务器响应时间最快的选择。

一些大型互联网公司拥有自己的加币，但它的成本效益的使用CDN服务提供商作为，如 Akamai技术 , 镜像互联网，或者 Limelight Networks合作 。为创业公司和私人网站，服务费用1加元可以承受，但由于您的目标受众的增长更大，变得越来越全球化，一加币，是要实现快速的反应时间。在雅虎，属性，移动或关闭更多的静态内容的应用程序的Web服务器，以1加元提高最终用户响应时间的20％。切换到1加元是一个相对容易的代码更改，将大大提高网站的速度您的网络。

热门 | 讨论这一规则

添加过期或者缓存控制头

标签：服务器

有两个方面此规则：

• 静态部分：推行的“永不过期的”未来政策制定远远 过期头
• 对于动态部分：使用适当的 缓存控制标题，以帮助浏览器的要求与条件

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

浏览器（和代理）使用缓存来减少HTTP请求数量和大小，使网页加载更快。 Web服务器使用的HTTP响应头告诉过期多久，一个组件可以缓存客户端。这是一个遥远的未来Expires头，告诉浏览器，这种反应将要等到2010年4月15日失效。

      到期日：星期四，2010年4月15日格林尼治标准时间20:00:00

如果您的服务器是Apache，使用ExpiresDefault指令来设置过期日期相对于当前的日期。这次ExpiresDefault指令的示例设置过期日期从10年的请求超时。

      ExpiresDefault“访问加10年”

请记住，如果你使用一个遥远的未来到期头你必须改变组件的文件名时组件的变化。在Yahoo！我们常常使这种生成过程的步骤的一部分：1版本号是内嵌在组件的文件名，例如，yahoo_2.0.6.js。

遥远的未来使用Expires头影响用户页面浏览量已经访问后才您的网站。它没有影响的HTTP请求的数目，当用户访问您的网站缓存，第一次和浏览器的是空的。因此，改善性能的影响，这取决于用户经常打引物与您的网页缓存。 （甲“引物缓存”已经包含在网页上的所有的组件。）我们 测量我们在雅虎！ ，发现引物的数目缓存页面浏览量的是75-85％。通过使用一个足够长的Expires头，你增加人数因特网连接的组件的是由浏览器的缓存和重新使用后对用户浏览网页而不发送一个字节。

热门 | 讨论这一规则

gzip的组件

标签：服务器

所花费的时间传递HTTP请求和响应通过网络可以大大由前端工程师们所作出的决定减少。的确，最终用户的带宽速度，互联网服务提供商，接近对等交换点等超出了开发团队的控制范围。不过，有人认为会影响响应时间的其他变量。压降低，减少了HTTP响应的大小，反应时间。

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

      的Accept - Encoding：gzip的，放气

如果Web服务器看到这个请求报头中，它可能会使用压缩响应由客户列出的方法之一。该网站的服务器通知通过在响应内容编码头此Web客户端。

      内容编码：gzip的

Gzip是有效的压缩方法在这个时候最流行的和。它是由GNU项目和标准的 变更请求，1952年 。唯一的其他压缩格式你可能看到的是紧缩，但它不那么有效和冷门。

Gzipping普遍降低了约70％的响应大小。大约90％的交通今天的互联网穿过浏览器声称支持gzip。如果你使用Apache，gzip的模块配置取决于您的版本：Apache 1.3的使用 mod_gzip ，而Apache 2.x的使用 mod_deflate.

目前已知的浏览器和代理问题，可能会造成什么期望和什么浏览器就接收到一个压缩的内容不匹配。幸运的是，这些边缘案件作为旧版浏览器的使用减少脱落。 Apache的模块，帮助通过添加适当Vary的响应头自动。

服务器选择什么gzip的基于文件类型，但通常是在他们决定过于压缩有限。大部分网站gzip压缩的HTML文件。这也是值得的gzip的脚本和样式表，但很多网站错过这个机会。事实上，这是值得任何文本压缩响应包括XML和JSON。图像和PDF文件不应该用gzip压缩，因为他们已经压缩。他们试图Gzip已不仅浪费的CPU，但可以潜在地增加文件大小。

Gzipping尽可能多的文件类型是一种简单的方法，以减少重量，加快网页的用户体验。

热门 | 讨论这一规则

在样式表放在顶部

标签：CSS的

虽然在研究雅虎业绩！，我们发现，移动到文档的HEAD样式，使页面 看起来 是装载更快。这是因为把样式表头在允许的网页，逐步呈现。

前端工程师，业绩关心要逐步页面加载，也就是说，我们希望浏览器显示什么内容，它已尽快。这是特别重要的连接互联网的网页的内容很多与慢，为用户。这些指标的重要性，为用户提供视觉反馈的进展，如已被很好地研究和记载 。在我们的例子中的HTML页面是进步的指标！当浏览器加载页面逐步头，导航栏，顶部的徽标在等所有作为网页视觉反馈的用户，谁是等待。这提高了整体用户体验。

与附近的底部将样式表文件的问题是，禁止在许多浏览器逐渐呈现，其中包括IE浏览器。这些浏览器块渲染，以免重新划定的页面元素，如果他们的风格变化。用户被套牢观看空白页。

在 HTML规范 清楚指出样式表将被包含在页面的HEAD部分：一个“不像，[链接]只能出现在文档的HEAD部分，虽然它可能会出现任何次数的。”无论选择的，白色的空白屏幕或闪烁的无样式的内容，是值得冒这个险。最佳的解决方案是按照HTML规范并加载你的样式表文件的头部。

热门 | 讨论这一规则

在底部写脚本

标签：JavaScript的

由脚本所产生的问题是，他们的并行下载。在 HTTP/1.1规范 建议浏览器下载次数不得超过两次，每并行主机部件。如果您为您的图片从多个主机名，你可以得到两个以上的下载发生在平行。虽然脚本下载，但是，浏览器不会启动其他任何下载，甚至在不同的主机名。

在某些情况下，它并不容易移动脚本的底部。如果，例如，该脚本使用 文件撰写插入内容的一部分，该网页的，它不能被移动低的页面。还可能有作用域的问题。在许多情况下，有办法解决方法这些情况。

另一种建议，常跑是使用延迟脚本。该 推迟属性表示该脚本不包含文件撰写，是一个浏览器的线索，他们可以继续渲染。不幸的是，Firefox不支持的 推迟属性。在Internet Explorer中，该脚本可能会推迟，但没有达到预期。如果一个脚本可以推迟，也可以移动到页面底部。这将使您的网页载入速度。

热门 | 讨论这一规则

避免CSS的表达式

标签：CSS的

强大的CSS表达式是（和危险）的方式动态设置CSS属性。他们支持在Internet Explorer中开始，第5版，但 不赞成使用IE8的开头 。作为一个例子，背景颜色可以设置为每隔一小时轮流使用CSS表达式：

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

这说明，该 表达方法接受一个JavaScript表达式。 CSS的属性设置为表达式的结果评价的JavaScript。该 表达方法忽略了其他浏览器，因此它是互联网浏览器可用于设置属性的需要创建一个跨浏览器一致的体验。

与表达的问题是，他们更经常地评估比大多数人预料。它们不仅评价呈现页面时和调整大小，而且还当页面滚动，甚至当用户移动鼠标在页面。添加计数器的CSS表达式允许我们跟踪的时间和频率的CSS表达式计算。移动鼠标可以在页面周围容易产生超过10,000评价。

一种方法来减少你的CSS表达式计算次数是使用一次性的表达，其中首次表达式求值它设置样式属性设置为一个明确的价值，它取代了CSS的表达。如果样式属性必须设置在整个动态页面生命，而不是使用事件处理程序的CSS表达式是另一种方式。如果您必须使用CSS表达式，记住，他们可能是评估了数千次，并可能影响您的网页的效果。

顶级 | 讨论这一规则

让JavaScript和CSS外部

标签：Javascript，CSS之

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

在现实世界中使用外部文件的一般生产速度更快，因为JavaScript和CSS文件是由浏览器缓存页面。 JavaScript和是内嵌在HTML文件下载获得CSS的HTML文件是在每次请求的时间。这减少了所需的HTTP请求的数量，但增加了HTML文档的大小。另一方面，如果在JavaScript和CSS，浏览器缓存的外部文件，该HTML文件的大小减少而增加的HTTP请求数。

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

许多网站秋天在这些指标中。对于这些网站，最好的解决办法通常是部署的CSS外部文件的JavaScript和。唯一的例外是最好的地方是内联网页，如 雅虎的头版 和 我的Yahoo！ 。 首页页面有几个（也许只有一个），每节网页浏览可能会发现，内联的JavaScript和CSS在快结束的结果用户响应时间。

对于那些通常许多页面浏览量第一头版，有技术，利用减少HTTP请求内联规定，以及通过使用外部文件的缓存实现效益。其中一个方法是在头版内嵌JavaScript和CSS，但在外部文件动态下载页面后完成载入。后续页面将引用外部文件应该已经在浏览器的缓存。

热门 | 讨论这一规则

减少DNS查找

标签：内容

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

缓存DNS查找更好的性能。此缓存可以发生在一个特殊的缓存服务器上，由用户的ISP或局域网维护，但也有缓存，对个人用户的计算机上出现。 DNS信息仍然）在操作系统的DNS缓存（以下简称“DNS客户端服务在Microsoft Windows”。大多数浏览器都有自己的缓存，从操作系统的缓存分开。只要在浏览器保存在它自己的缓存的DNS记录，它不打扰了备案要求的操作系统。

因特网浏览器缓存DNS查找默认为30分钟，因为指定 DnsCacheTimeout的注册表设置。 Firefox的缓存DNS查找1分钟的，控制 network.dnsCacheExpiration的配置设置。 （Fasterfox更改为1小时。）

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

减少了独特的主机名数量有可能减少并行下载是发生在页面上的金额。避免DNS查询的响应时间，但是减少并行下载的响应时间可能会增加。我的方针是分裂这些组件在至少两个，而是不超过4个主机名。在一间减少DNS查询和下载，允许一组平行的高度，这很好的妥协结果。

热门 | 讨论这一规则

缩小的JavaScript和CSS

标签：Javascript，CSS之

微细化是时代的做法，解除不必要的字符代码，以减少其大小从而提高负载。当代码是精缩所有意见都将被删除，以及不需要的空白字符（空格，换行符和制表符）。在JavaScript的案件，这提高了响应时间的性能，因为在下载文件的大小降低。两个JavaScript代码流行工具minifying是 JSMin 和 锐压缩机 。压缩机的锐也可以缩小的CSS。

模糊处理是另一种优化，可用于源代码。它更复杂，缩率，从而更容易产生混淆作为加强自身错误的结果。在美国10个顶级网站的调查显示，缩率达到1对25的混淆％21％规模缩小。虽然模糊处理具有较高的尺寸减少，minifying JavaScript是风险较低。

除了minifying外部脚本和样式，内联 <script>和 <style>块可以而且也应该精缩。即使你gzip的脚本和样式，minifying他们仍然会减少或更多的大小5％。随着规模的使用和增加的JavaScript和CSS，因此将节省1369 minifying您的代码。

热门 | 讨论这一规则

避免重定向

标签：内容

实现重定向是用301和302状态代码。这里有一个例子是HTTP标头在301回应：

      HTTP/1.1中301永久移动位置：http://example.com/newuri内容类型：text / html的

浏览器会自动将用户在指定的URL 位置字段。重定向所有必要信息的是在头。身体的反应通常是空的。尽管他们的名字，既不是301也不是302的反应是缓存在实践中，除非额外头，如 过期或 缓存控制，表明它应该是。该元刷新标记和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执行性能的脚本。

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

除了生成HTTP请求的浪费，时间浪费评估脚本多次。这多余的JavaScript执行发生在Firefox和IE浏览器，无论是缓存的脚本。

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

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

PHP中的替代办法是建立一个函数调用 insertScript.

      <?php insertScript("menu.js") ?>

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

热门 | 讨论这一规则

配置ETags

标签：服务器

实体标记（ETags）是一种机制，Web服务器和浏览器使用，以确定是否缓存组件在浏览器的匹配服务器上的一个来源。 （一个“实体”是另一个单词“组成部分”：图像，脚本，样式表等）ETags又增加了提供的日期为验证机制的实体更灵活的修改比最后。一个ETag的是一个字符串，它唯一标识一个特定版本的一个组件。唯一的格式限制是该字符串被引用。原始服务器指定了组件的使用ETag的 ETag的响应头。

      HTTP/1.1 200确定最后修饰：周二，2006年12月12日格林尼治标准时间3时03分59秒的ETag：“10c24bc - 4ab - 457e1c1f”内容长度：12195

后来，如果浏览器要验证一个组件，它使用 如果无人能匹配头传递的ETag回到原始服务器。如果ETags匹配，则返回304状态代码这个例子中，减少为12195字节的响应。

      的GET /我/ yahoo.gif HTTP/1.1主机：us.yimg.com如果修饰，时间：星期一，2006年12月12日格林尼治标准时间3时03分59秒，如果无人能匹配：“10c24bc - 4ab - 457e1c1f”HTTP/1.1中304改性

与ETags问题是，他们通常是使用属性构造独特，使他们到一个特定的服务器托管的网站。 ETags将不匹配时，浏览器获得从一台服务器原始组件，后来尝试验证在不同的服务器组件，这种情况是所有的网站上也使用了服务器集群来处理请求普遍。默认情况下，Apache和IIS中嵌入的ETag，大大降低测试的有效性的赔率与多台服务器的网站成功的数据。

在Apache 1.3和2.x的ETag格式是 inode的大小，时间戳。不过，某一文件可能驻留在多个服务器在同一目录，并具有相同的文件大小，权限，时间戳等等，它的索引节点是服务器从一个不同的未来。

IIS 5.0和6.0有一个ETags类似问题。在IIS格式ETags的是 Filetimestamp：ChangeNumber。阿 ChangeNumber是一个计数器用来跟踪配置更改到IIS。这不太可能 ChangeNumber是同一网站所有IIS服务器后面的网络。

最终的结果是组件和etags产生由Apache IIS中的完全相同，不会从一个服务器到另一个匹配。如果ETags不匹配，用户不会收到小，快速反应，ETags 304设计了，相反，他们将获得一个正常的200响应以及所有组件的数据。如果你只是一台服务器主机你的网站上，这不是一个问题。但如果你有多个网站的服务器托管您，您使用的是默认的ETag配置的Apache或IIS的，你的用户是越来越慢的网页，你的服务器具有更高的负载，你消耗更大的带宽，和代理阿仁'吨缓存你的内容有效。即使您的组件有一个遥远的未来 过期头，一个有条件的GET请求时作出的仍是用户点击刷新或刷新。

如果你不采取灵活的优势，提供验证模式ETags，最好刚才删除的ETag完全。在 最后修改头验证基于组件的时间戳。减少和消除的ETag的要求的规模以及随后的HTTP头均。这个 微软支持文章 介绍如何删除ETags。在Apache中，这是通过简单地增加下面一行到你的Apache配置文件：

      FileETag无

热门 | 讨论这一规则

设为阿贾克斯可缓存

标签：内容

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

为了提高性能，重要的是要优化这些Ajax响应。最重要的途径，以改善性能的Ajax是使缓存的响应，如在讨论 加入过期或Cache - Control标题 。其他的一些规则也适用于阿贾克斯：

• gzip的组件
• 减少DNS查找
• 缩小的JavaScript
• 避免重定向
• 配置ETags

 

让我们来看一个例子。电子邮件客户端的Web 2.0可能会使用Ajax来下载用户的地址簿中自动完成。如果用户没有修改报告书的反应，因为她的地址簿，她最后一次使用的电子邮件网络应用程序，以前可以读取缓存如果Ajax响应了头缓存与未来到期或高速缓存控制。该浏览器时，必须通知使用反应与要求新一以前缓存的地址簿。这可能是例如通过添加一个时间戳通讯簿阿贾克斯网址显示最后一次为用户修改自己的地址簿，， ＆吨= 1190241612。 如果通讯簿没有被下载自上次修改的时间戳将是相同的地址簿将被读取从浏览器的缓存消除额外的HTTP往返。如果用户修改了自己的地址簿，确保了新的时间戳URL不匹配缓存的响应，浏览器会要求更新的地址簿。

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

热门 | 讨论这一规则

早期刷新缓冲区

标签：服务器

当用户请求一个页面时，它可以随时随地从200至500ms的后端服务器缝合在一起的HTML页面。在此期间，浏览器处于闲置状态，因为它来等待数据。在PHP中有函数 刷新（ ） 。它允许你把你的部分准备HTML响应到浏览器，使浏览器可以开始提取你的后端组件，同时使用HTML页忙，其余的。这种做法的好处，主要是看到忙碌的后端或轻前端。

一个好地方，考虑冲厕是正确的，因为头后，头部的HTML的通常是比较容易产生，它可以让你的JavaScript文件包含任何CSS的浏览器，并开始在平行提取，而后端仍在处理。

例如：

      ... <!-- css, js -->    </head>    <?php flush(); ?>    <body>      ... <!-- content -->

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

顶部

使用GET的Ajax请求

标签：服务器

在 雅虎！邮件 研究小组发现，在使用 XMLHttpRequest的，后一步是实施过程中的浏览器作为两个：发送的标头，然后发送数据。因此，最好使用GET，这只需一个TCP包发送（除非你有饼干很多）。最大的IE浏览器URL的长度为2K，因此，如果您发送超过2K的数据，您可能无法使用GET 。

一个有趣的副作用影响，是不实际的GET的POST数据公布任何类似行为。的基础上 的HTTP规范 ，GET是用于检索信息的意思，所以它是有意义的（语义）使用的GET请求时，你只是数据，而不是数据发送到存储服务器端。

 

顶部

后加载组件

标签：内容

您可以采取您的页面仔细看看，问自己：“什么是绝对需要，以使网页最初？”。其余部件的内容，还可以等待。

JavaScript是一个分裂的前，后onload事件的理想人选。例如，如果您有JavaScript代码和库做拖放和动画，那些可以等待，因为页面上拖动的元素之前，初步呈现。装载其他地方寻找职位候选人包括隐藏内容（内容显示经过用户操作），低于倍的图像。

工具，以帮助您在您的努力： 锐图片载入 ，您可以延迟倍以下的图像和 锐获取效用 ，是一种简单的方法，包括JS和CSS的对飞。对于在例如在野外采取看起来 雅虎！主页 与Firebug的网络小组打开。

这是很好的表现时，目标是发展内联同其他网络的最佳做法。在这种情况下，增强思想逐渐告诉我们，JavaScript中，当支持，可以提高用户体验，但你必须确保工程的页面，即使没有的JavaScript。因此，在您完成确保网页能正常工作，你可以提高它与一些动画后加载脚本，给你更多的铃声和口哨和如拖放。

顶部

预紧组件

标签：内容

预压负荷可能看上去像对面后，但它实际上有不同的目标。通过预压元件组件你可以利用的时间在浏览器处于闲置状态，并要求图像（如，样式和脚本），您将需要在未来。这样当用户访问下一个页面中，您可以为用户提供更快捷的大部分部件已经在缓存和负载，您的网页会。

其实有几种类型的预压：

• 无条件 负荷-尽快的onload火灾，你先走一步，取了一些额外的组件。检查google.com的，例如一个精灵的形象如何请求的onload。这精灵的形象是不需要对google.com的网页，但它需要对连续页搜索结果。
• 有条件的 预紧力-基于对用户操作进行猜测您的位置在用户下一次领导和相应的负荷。论 search.yahoo.com 你可以看到一些额外的组件，请你开始后，在输入框中输入内容。
• 预计 负荷-提前预载在发射前重新设计。它通常发生后，重新设计，你听到：“新网站是很酷，但它是”比以前慢。问题的部分可能是用户访问了一个完整的缓存与您的旧网站，但始终是一个新的空缓存的经验。你可以减轻推出了重新设计这个副作用的预压某些组件，然后再均匀。您的旧的土地，可以利用空闲时间在浏览器，并要求现场的图像和脚本，将使用新的

顶部

减少DOM元素数量

标签：内容

一个复杂的页面意味着更多的字节，下载速度较慢，这也意味着在JavaScript DOM访问。它的确与众不同，如果你的例子遍历500或5000 DOM元素在页面上时，你要添加一个事件处理程序。

一个DOM元素的高数量可以是一个症状，有些事应该页面改善，标记无一定删除的内容。您是否使用布局的目的嵌套表吗？你投入更多的 <div>唯一解决布局问题？也许有一个更好，更正确的方式做语义的标记。

一个很大的帮助与布局是 锐CSS的公用事业 ：grids.css可以帮助你的整体布局，fonts.css和reset.css可以帮助你剥离浏览器的默认格式。这是一个机会，重新开始，想想你标记，例如使用 <div>时，唯一有意义的语义，而不是因为它呈现一个新行。

DOM元素数量的简单测试，只是在Firebug的控制台类型：
document.getElementsByTagName ('*').长度

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

顶部

跨域斯普利特组件

标签：内容

分裂组件允许您最大化并行下载。请确保您使用的不超过2-4罚款，因为域的DNS查找。例如，您可以承载你的HTML和动态内容 www.example.org和分离元件的静态 static1.example.org和static2.example.org

欲了解更多信息，选中“ 拼车巷最大化并行下载中 智“的滕尼塞尔和帕蒂。

顶部

尽量减少内部框架号码

标签：内容

内部框架允许的HTML文件，将文件插入在父。重要的是要了解如何iframe的工作，使他们能有效地加以利用。

<iframe> 优点：

• 帮助慢第三方内容和广告一样徽章
• 安全沙箱
• 同时下载脚本

<iframe> 缺点：

• 即使成本高昂空白
• 块页的onload
• 非语义

顶部

没有404

标签：内容

HTTP请求昂贵，因此作出了HTTP请求和得到一个无用的反应（即404未找到）是完全不必要的，会拖慢用户体验没有任何好处。

一些网站已经有用404“您是指X上吗？”，这是经验丰富的用户，但也浪费服务器资源数据库（如，等）。特别是当坏的JavaScript链接到外部是错的，结果是404 。第一，这将阻止下载并行下载。接下来，浏览器可能会尝试解析404响应体，好象这是JavaScript代码，在它试图寻找可用的东西。

顶部

Cookie的大小减少

标签：饼干

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

欲了解更多信息查询 “当曲奇失去了根基” 的滕尼塞尔和帕蒂池。该拿回家，本研究：

 

• 消除不必要的饼干
• 保持饼干大小尽可能减少对用户的响应时间低的影响
• 可设置在适当的域级别的Cookie铭记这样其他子域不受影响
• 设置适当的到期日期。较早到期日期或没有删除Cookie的越早，提高用户的响应时间

顶部

使用Cookie的免费域名的组件

标签：饼干

当浏览器发出请求一个静态图像和发送请求的Cookie一起，服务器没有任何cookies使用的。因此，他们只有创造良好的交通网络没有理由。您应该确保静态组件与Cookie的免费申请要求。创建一个子域和主机所有部件有静态的。

如果您的域名 www.example.org，您可以在您的主机的静态部分 static.example.org。不过，如果你已经设置域的cookies顶层 example.org，而不是 www.example.org，那么所有的请求 static.example.org将包括那些饼干。在这种情况下，你可以买一个全新的域名，主机的静态组件那里，并保持此域名Cookie的自由。雅虎使用yimg.com，YouTube使用 ytimg.com，亚马逊使用 图像，amazon.com等。

另一个域效益免费托管静态组件上的Cookie的是，一些代理人可能拒绝缓存的Cookie，请与组件。与此相关的注意，如果您想知道您是否应该使用example.org或www.example.org为您的主页，可以考虑将Cookie的影响。省略WWW的叶子你没有选择，只能写信给饼干 *. example.org，所以性能方面的原因，最好使用www子域的Cookie并写入到该子域。

顶部

最大限度地减少DOM访问

标签：JavaScript的

使用JavaScript访问DOM元素缓慢，为了有一个更加敏感网页，你应该：

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

更多信息，请检查锐剧院的 “高性能的Ajax应用程序” 的朱利安勒孔特。

顶部

开发智能事件处理程序

标签：JavaScript的

有时觉得网页较少反应，因为太多太多的事件处理程序，然后执行附加到不同的元素的DOM树中。这就是为什么使用 事件代表团 是一个很好的办法。如果你有10个按钮内 科，只有一个事件处理程序附加的div包装，而不是为每一个按钮的处理程序。事件泡沫，以便您就可以捕捉该事件并计算出它起源于哪个按钮。

您也不必等待的onload事件，以便开始做一些与DOM树。通常所有你需要的是您要访问的元素是树中可用。你不必等待所有图像被下载。 DOMContentLoaded事件是你可以考虑使用代替的onload，但直到它适用于所有浏览器，您可以使用 锐事件 实用工具，它有一个 onAvailable方法。

更多信息，请检查锐剧院的 “高性能的Ajax应用程序” 的朱利安勒孔特。

顶部

选择<link>进口超过@

标签：CSS的

一个以前的最佳做法应该指出，CSS的顶部是在以允许逐步呈现。

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

顶部

避免过滤器

标签：CSS的

IE的专有 AlphaImageLoader过滤器的目的是解决问题的7半IE浏览器的版本<透明png格式的真彩色。与此过滤器的问题是，它阻止浏览器的渲染和冻结而正在下载的图片。这也增加了内存消耗和适用于每个元素的形象，不是每个，所以这个问题是成倍增加。

最好的办法是避免 AlphaImageLoader使用完全正常有辱人格的PNG8相反，这是IE的罚款。如果你绝对需要AlphaImageLoader，使用下划线劈 _filter为不惩罚你的IE7 +用户。

顶部

优化图片

标签：影像

经过设计师与您的网站做网页创建图像的，还有一些事情你可以尝试之前，你的FTP的图像到您的Web服务器。

• 您可以检查的GIF，看看他们用的是调色板大小对应的数字图像中的颜色。使用 imagemagick的 很容易检查是否使用了 
  查明，详细image.gif 
  当你看到一个图像使用4种颜色和一个256色“调色板槽”的，有改进的余地。
• 尝试以png格式转换的GIF，看看是否有储蓄。更多的，往往不是没有。开发商往往不惜使用png由于在浏览器的支持有限，但现在这是一个过去的事了。唯一真正的问题是α- png格式透明度的真彩色，但后来再次，GIF图像是不正确的颜色和透明度不支持可变的。因此，任何一个GIF可以做，一个调色板巴布亚新几内亚（PNG8）可以做太多（除了动画）。使用的png格式的imagemagick这个简单的命令结果在完全安全的： 
  转换image.gif image.png 
  “所有我们要说的是：给ping一个机会！“
• 运行 的pngcrush （或任何其他巴纽优化工具）对所有的PNG。例如：
  的pngcrush image.png -物权阿拉-减少，野蛮result.png
• 在所有的运行jpegtran JPEG文件。此工具的JPEG无损旋转等操作，也可用于优化和删除无用的信息，评论和其它信息（如图像的EXIF）从您的。 
  jpegtran拷贝没有，优化完美src.jpg dest.jpg

顶部

优化CSS的精灵

标签：影像

• 安排在雪碧的形象，而不是垂直水平通常在一个较小的文件大小的结果。
• 结合在一个类似雪碧的颜色可以帮助你保持256色下的颜色计数低，所以最好以适应一个PNG8。
• “要移动友好”，不要将图像之间在雪碧大的差距。这不影响文件的大小一样，但需要较少的内存为用户代理来解压缩图像的像素映射到一个。100x100图像万像素，其中100万像素1000x1000

顶部

不要在HTML中尺度图像

标签：影像

不要使用更大的图片比你只需要，因为你可以设置网页的宽度和高度。如果你需要 
<img width="100" height="100" src="mycat.jpg" alt="我的猫" /> 
那么你的形象（mycat.jpg）应为100x100像素，而不是缩小500x500px形象。

顶部

使中小企业可缓存的favicon.ico

标签：影像

的favicon.ico是一种形象，停留在你的服务器的根。这是一个必要的邪恶，因为即使你不关心它的浏览器将仍然要求，所以最好还是不回答了 404未找到。又因为它是对在同一台服务器，饼干送到每一个要求的时间它的。这形象也序列干扰下载，例如在IE浏览器时，您请求的onload额外组件，该图标将被下载之前，这些额外的组件。

因此，要减轻拥有的favicon.ico确保缺点：

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

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

顶部

应保持在25K型组件

标签：手机

此限制是有关事实，iPhone将不缓存大于25K型组件。注意，这是 未压缩 的大小。这是缩率是重要的，因为单靠gzip的可能是不够的。

欲了解更多信息检查“ 性能的研究，第5部分：iPhone可缓存-使之棒 塞尔“的韦恩谢伊和滕尼。

顶部

包元件集成在一个多部分文件

标签：手机

文档组件包装成一个多部分的附件，它就像一个电子邮件，它可以帮助你fetch是昂贵的几个组件与一个HTTP请求（记住：HTTP请求）。当您使用此方法，首先检查用户代理支持它（iPhone不）。

避免空图像型钢

标签：服务器

空字符串图像 型钢 属性将出现一个以上的预期。它出现在两个表格：

1. 直接的HTML
   

   <img src="">

2. JavaScript的
   

   IMG公司新形象的VaR =（）; 
   img.src =“”;

 

这两种形式导致同样的效果：浏览器发出另一个请求到服务器。

• 互联网浏览器 发出请求到所在的目录中的页面。
• Safari和铬 提出请求的实际页面本身。
• 火狐 3和早期版本相同的行为的Safari和铬，但3.5版解决了此问题 [错误444931] ， 不再发送请求。
• 歌剧 没有做任何事情时，一遇到src是空的形象。

 

为什么这种行为是坏？

1. 克里普尔您的服务器发送的网页，特别是获得每天页面浏览量以百万计的大量交通意外。
2. 浪费了服务器计算周期产生一个将永远不会被浏览的网页。
3. 可能损坏用户数据。如果您是跟踪请求的状态可以通过cookie或以另一种方式，你有破坏数据的可能性。即使图片要求不返回形象，头都是由浏览器读取和接受，包括所有的cookies。而其余的反应是扔掉，损失可能已经完成。

 

这种行为的根本原因是浏览器的方式，在执行决议的URI。这种现象被定义在RFC 3986 -统一资源标识符。当遇到空字符串的URI作为一个，它被认为是一个相对URI，并决心按照该算法定义在第5.2。这个具体的例子，一个空字符串，列在第5.4节。火狐，Safari和铬都解决每一个空字符串正确的规范，而IE是不正确的方法解决，用一个规范，RFC 2396的 - 统一资源标识符的早期版本（这是由RFC 3986废弃显然行） 。因此从技术上讲，浏览器正在做他们应该做的，解决相对URI。问题是，在这方面，显然是无意的空字符串。

HTML5中增加了说明的 标签的src属性指示浏览器不要作出在第4.8.2额外要求：

src属性必须存在，并且必须包含一个有效的URL引用一个非交互，可以选择动画，图像资源，也不是没有分页脚本。如果元素的基URI是因为该文件的地址相同，那么将src属性的值不能是空字符串。

但愿，浏览器将不会在未来这个问题。不幸的是，没有这样的条款为<script src=""> and <link href="">. Maybe there is still time to make that adjustment to ensure browsers don't accidentally implement this behavior.

 

这一规则的灵感来自雅虎的JavaScript大师尼古拉正Zakas。欲了解更多信息，看看他的文章“ 空图像型钢可以摧毁你的网站 “。