China help: December 2008

尽量减少HTTP请求

80 ％的最终用户响应时间花在前端。其中大部分时间是困绑在下载的所有组成部分的网页：图片，样式，脚本，闪存等减少的元件数量又减少了HTTP请求提供所需的页面。这是关键，速度更快的网页。

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

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

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

图片地图结合多张图片到一个单一的形象。整体规模差不多，但减少的速度HTTP请求的网页。影像地图的工作，如果仅是连续的图像的网页，如导航栏。确定的坐标影像地图可以乏味而又容易出错的。使用影像地图的导航是无法访问的，所以它不是建议。

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

减少HTTP请求在您的网页是开始。这是最重要的准则，提高性能的首次来访。中所描述Tenni Theurer的博客帖子浏览器的缓存使用-暴露！，每天40-60 ％的游客到您的网站有一个空的缓存。使您的网页快速的这些第一次来访的关键是更好的用户体验。

使用内容分发网络

用户接近您的网络服务器影响了响应时间。部署您的内容在多个地理上分散的服务器将您的网页载入速度从用户的观点。但是，您应从何处入手？

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

请记住， 80-90 ％的最终用户响应时间花在下载所有组件在页：图片，样式，脚本，闪存等性能，这是黄金规则。而不是首先是艰巨的任务，重新设计您的应用程序架构，它能够更好地分散你的第一个静态内容。这不仅实现了更大的反应时间减少了，但它更容易由于内容传送网络。

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

一些大型互联网公司拥有自己的信用，但它的成本效益的使用信用服务提供商，如Akamai技术，镜像互联网，或王牌网络。开办公司和私人网站上，费用的信用服务可以让人望而却步，但由于您的目标受众越来越大，变得更加全球性的，一加币是必要的，以实现快速的反应时间。在Yahoo ！，属性，静态内容搬到了他们的网络服务器应用到加改善终端用户响应时间的20 ％或更多。切换到信用是一个相对容易的代码变化，将显着改善的速度，你的网站。

添加过期或Cache - Control标题

有两件事在本规则：
•对于静态部分：实施“永不过期”的政策制定长远Expires头
•动态的组成部分：使用适当的Cache - Control标题，帮助有条件的浏览器请求
网页设计越来越丰富，这意味着更多的脚本，样式，图片和Flash在网页上。第一次的访客到您的网页可能已使一些HTTP请求，但通过使用 Expires头你这些组件缓存。这可以避免不必要的HTTP请求，在随后的页面浏览量。到期标题是最常用的图像，但它们应该使用所有组件，包括脚本，样式，和Flash组件。

浏览器（和代理人）使用高速缓存，以减少的数量和规模的HTTP请求，使网页的载入速度。一个web服务器使用Expires头的HTTP响应告诉客户端的一个组成部分多久才能缓存。这是一个遥远的未来Expires头，告诉浏览器，这种反应将不会过时，直到2010年4月15号。

Expires: Thu, 15 Apr 2010 20:00:00 GMT

如果您的服务器的Apache ，使用ExpiresDefault指示，设定到期日相对于当前的日期。这个例子的ExpiresDefault指令集的到期之日起10年，从时间上的要求。

ExpiresDefault "access plus 10 years"

请记住，如果您使用的是遥远的将来Expires头你必须改变原有的组成部分的文件名时，部分的变化。在Yahoo ！我们常常使这一步构建过程的一部份：一个版本编号是植根于该组件的文件名，例如， yahoo_2.0.6.js 。

使用Expires头遥远的未来影响页面浏览量只有在用户已经访问了您的网站。它不影响一些HTTP请求当用户访问您的网站第一次和浏览器的缓存是空的。因此所产生的影响这一性能的改善取决于如何往往用户达到您的网页，引缓存。（甲“引快取”已包含所有组件的网页。）我们衡量这个在Yahoo ！发现的页面浏览数与引缓存75-85 ％。通过使用Expires头遥远的未来，您更多的组成部分，是由浏览器缓存和重新使用的意见，随后的网页发送一个字节的用户的互联网连接。
gzip或组件

所花费的时间，以转让的HTTP请求和响应整个网络可以大大减少作出的决定前端工程师。的确，最终用户的带宽速度，互联网服务提供商，接近对等交换点，等无法控制的开发团队。但还有其他变数，影响响应时间。压缩响应时间减少，减少的规模HTTP响应。

从HTTP/1.1 ， Web客户端显示的支持与接受压缩编码头在HTTP请求。

Accept-Encoding: gzip, deflate

如果Web服务器认为，这头的请求，可以使用压缩的反应的方法之一列出的客户端。 Web服务器Web客户端通知该通过内容编码标题反应。

Content-Encoding: gzip

修改的是最流行和有效的压缩方法在这个时候。它是由GNU项目和标准的符合RFC 1952 。唯一的其他压缩格式您可能看到的是压缩，但它不太有效和较冷门。
Gzipping普遍降低了反应的大小约70 ％。大约90 ％的今天的互联网流量都通过浏览器支持gzip或索赔。如果您使用的Apache的模块配置gzip或取决于您的版本： Apache 1.3的使用mod_gzip的Apache 2.x的使用，同时mod_deflate 。
目前已知问题的浏览器和代理，可能会导致不匹配的是什么浏览器期望收到关于压缩内容。幸运的是，这些优势的情况下减少使用旧版本的浏览器滴赶走。在Apache模块的帮助，增加适当的响应头自动卡罗维。
服务器选择要修改的文件类型的基础上，但通常是十分有限，他们决定在什么压缩。大多数网站gzip或他们的HTML文件。这也是值得的gzip或您的脚本和样式，但许多网站错过这一机会。事实上，这是值得任何文字压缩反应包括XML和简称JSON 。图像和PDF文件不应被gzip压缩的，因为他们已经压缩。试图gzip或他们不仅浪费的CPU ，但有可能会增加文件大小。
Gzipping许多文件类型可能是一种简单的方法来减轻体重，并加快网页的用户体验。
把样式表顶部
虽然研究业绩雅虎，我们发现，移动样式的文件头使得网页似乎是载入更快。这是因为把样式的头部可以逐步使网页。
前端工程师关心的性能要逐步加载页面，这就是我们想要的浏览器来显示什么内容，它尽快。这一点尤其重要的网页有很多的内容和用户的互联网连接速度较慢。的重要性，让用户视觉反馈，如进度指标，已得到很好的研究和记载。在我们的情况是在HTML页的进展的指标！当浏览器加载网页逐步页眉中，导航栏，标志上方，等所有担任视觉反馈的用户谁正在等待页面。这提高了整体的用户体验。

的问题，把样式表底部附近的文件，它禁止逐步呈现在许多浏览器，包括Internet Explorer 。这些浏览器块渲染，以避免重绘网页元素，如果他们的风格变化。用户是坚持观看了空白页。
该HTML规范明确指出，样式要列入团长的一页： “不像， [链接]可能只出现在HEAD部分的一份文件，虽然它可能会出现任何数量的时间。 ”既不的替代品，在空白画面或Flash的unstyled内容，是值得的风险。最佳解决办法是按照HTML规范和加载您的样式表文件中的头。
把脚本底
所造成的问题是，他们的脚本块并行下载。 HTTP/1.1规范建议浏览器下载不超过两个部分平行每个主机名。如果您提供您的图片从多个主机名，你可以两个以上的下载发生在平行。虽然脚本下载，但是，浏览器将无法启动任何其他下载，甚至在不同的主机名。
在某些情况下，这并不容易将脚本的底部。例如，如果使用文件撰写脚本插入部分的网页的内容，它不能被移动较低的网页。还可能有范围的问题。在许多情况下，有办法来替代这些情况。

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

避免的CSS表达式
的CSS表达式是一个强大的（危险）的方法动态设置CSS属性。他们支持在Internet Explorer中，从第5版。作为一个例子，背景颜色可设置为每隔小时使用CSS表达式。

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如下所示，接受的表达方法的JavaScript表达。这个CSS属性设置为评价结果的JavaScript表达。中的表达方法，忽视了其他浏览器，因此它是有用的设置属性在Internet Explorer中需要建立一个统一的体验跨浏览器。
的问题，表达的是，他们更经常地评价比大多数人预期。他们不仅是评估网页时作出和调整，而且网页时滚动，甚至当用户移动鼠标的一页。添加计数器的CSS表达了使我们能够跟踪何时和如何通常的CSS表达式。移动鼠标在网页可以很容易地产生超过10000评价。

其中一个方法，以减少了多少次你的CSS表达式是使用一次性的表达，在那里第一次表达了评价的作风树立一个明确的财产价值，取代的CSS表达。如果风格财产必须设置的整个生命周期的动态页面，使用事件处理程序代替的CSS表达式是一个替代办法。如果您必须使用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快取（以下简称“ DNS客户端服务”的Microsoft Windows ）。大多数浏览器都有自己的缓存，独立于操作系统的缓存。只要您的浏览器保持了DNS记录在自己的缓存，它不打扰操作系统的要求备案。

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

当客户端的DNS缓存是空的（包括浏览器和作业系统）的数量的DNS查询数目相等的独特的主机中的网页。这包括使用的主机名该网页的网址，图片，脚本文件，样式，闪光物体等降低一些独特的主机的数量减少的DNS查找。

减少了一些独特的主机名有可能减少并行下载这发生在该网页。避免DNS查询响应时间减少，但是减少并行下载可能会增加响应时间。我的准则就是分裂这些组件之间至少有两个，但不超过4主机。这样的结果是一个良好的折衷减少DNS查询，并允许有高度的并行下载。

缩小的JavaScript和CSS

缩小的做法是消除不必要的字符代码，以减少它的大小从而改善载入时间。当代码minified所有评论将被删除，以及不必要的空格字符（空格，换行，和标签）。在案件的JavaScript ，这提高了响应时间的性能，因为规模的下载文件是减少。两个热门工具minifying JavaScript代码是JSMin和语言无压缩机。该语言无压缩机也可以缩小的CSS 。

混淆是另一种优化的，可以适用于源代码。这要复杂得多缩小，从而更有可能产生的错误所造成的混乱步骤本身。在调查的十大美国网站，缩小达到了21 ％缩小为25 ％的困惑。虽然困惑具有较高的规模减少， minifying JavaScript是风险较小。

除了minifying外部脚本和样式，内置

另一种在PHP将建立一个功能称为insertScript 。

此外，以防止同样的脚本插入多次，这个功能可以处理其他问题的脚本，如扶养检查和添加的版本号码为脚本的文件名，以支持未来的截止日期为止的标题。

配置ETags

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

header.

HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195

Later, if the browser has to validate a component, it uses the If-None-Match header to pass the ETag back to the origin server. If the ETags match, a 304 status code is returned reducing the response by 12195 bytes for this example.

GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified

ETags的问题是，它们通常采用的属性，使它们特有的某一特定的服务器托管的网站。 ETags不匹配时，浏览器会从原来的一台服务器组成，后来试图验证该元件在不同的服务器，这种情况是司空见惯的网站上使用服务器集群来处理请求。默认情况下，都嵌入Apache和IIS中的数据ETag ，可大幅降低的可能性的有效性试验成功的网站上的多台服务器。

的ETag格式的Apache 1.3和2.x的是inode上尺寸时间戳。虽然某一文件可能居住在同一个目录中的多个服务器，并具有同样的文件大小，权限，时间戳等，其inode上是不同的从一台服务器的下一个。

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

最终的结果是ETags产生的Apache和IIS的完全相同部分将不符合从一台服务器到另一台。如果ETags不匹配，用户不会收到小型，快速反应， 304人设计的ETags ;相反，他们会得到一个正常的200回应以及所有的数据的组成部分。如果您代管您的网站上只有一个服务器，这不是一个问题。但是，如果你有多个服务器托管您的网站，您使用的Apache或IIS的预设ETag配置，您的用户越来越慢的网页，您的服务器具有更高的负载，你消耗更多的带宽，代理aren '您的内容吨缓存效率。即使您的组件有一个遥远的未来Expires头，有条件的GET请求仍然取得每当用户点击刷新或重新整理。

如果你不利用灵活的验证模型， ETags提供，最好只是删除ETag完全。最后修改标题验证基于组件的时间戳。并删除ETag减少的规模都在HTTP标头的反应和随后的请求。此 Microsoft支持文章介绍如何删除ETags 。在Apache中，做到这一点，只需加入下面这行，你的Apache配置文件：

使阿贾克斯缓存

一个引用好处阿贾克斯是，它提供即时的反馈给用户，因为它要求的信息异步从后端Web服务器。然而，使用Ajax也不能保证用户不会 twiddling大拇指等待这些异步JavaScript和XML响应返回。在许多应用中，无论用户是等待取决于如何使用Ajax的。例如，在一个基于 Web的电子邮件客户端的用户将继续等待的结果，一个AJAX请求，找到所有的邮件符合他们的搜索标准。重要的是要记住， “异步”并不意味着“即时” 。

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

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

让我们看看一个例子。一种基于Web 2.0电子邮件客户端可能使用AJAX下载用户的地址簿里的autocompletion 。如果用户还没有修改，因为她的地址簿，她最后一次使用的电子邮件网络应用，前通讯录反应可以读取缓存如果阿贾克斯响应了缓存与未来届满或Cache - Control标题。该浏览器时，必须通知使用以前缓存的地址簿的反应与要求新的。这可以通过增加一个时间戳的通讯录阿贾克斯网址显示最后一次修改的用户的地址簿，例如，电话电报= 1190241612 。如果通讯录尚未修改自上次下载，时间戳将同和地址簿都将读取器的缓存消除额外的HTTP往返。如果用户修改了她的地址簿，时间戳，确保新的URL不符合缓存响应，浏览器会要求更新通讯簿条目。

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

早期刷新缓冲区

当用户请求一个网页，它可以随时随地从200到500ms的后端服务器缝合在一起的HTML页面。在此期间，浏览器处于闲置状态，因为它等待数据到达。你在PHP的功能冲水（）。它允许你发送你的部分准备的HTML响应浏览器，这样浏览器就可以开始抓取您的后端组件，而正忙于与其他网页。的好处，主要是看到忙碌的后端或轻前端。

一个很好的考虑是正确的冲洗后的头，因为在HTML的头部通常是比较容易产生，它让您可以包含任何CSS和JavaScript文件的浏览器开始引进并行而后端仍在处理。

例如：

...

...

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

使用拿到AJAX请求

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

一个有趣的副作用影响是该职位实际上并没有公布任何数据的行为一样了。基于的HTTP规范，获取的目的是获取信息，所以才有意义（语义）使用的GET当你只是要求数据，而不是把数据存储服务器端。

后负荷组件

您可以仔细看看您的网页，并问自己： “什么是绝对必要的，以便使最初的页面？ ” 。其余的内容和组成部分可以等待。

JavaScript是一个理想的候选人分裂之前和之后的onload事件。例如，如果您有JavaScript代码和图书馆做拖放和动画，是可以等待的，因为拖在网页上的内容后，最初的渲染。其他地方寻找候选人后载入中包括隐藏的内容（内容，出现在用户的行动）和图像低于倍。

工具，以帮助您在您的努力：语言无图像装载机可以拖延倍以下的图像和语言无获取效用是一个简单的方法，包括爵士和CSS的飞行。对于一个例子在野外看看在Yahoo ！主页萤火虫的净小组打开。

这是良好的业绩目标是内嵌与其他Web开发的最佳做法。在这种情况下，想法告诉我们逐步提高了JavaScript ，当支持，可以改善用户体验，但你必须确保该网页作品即使没有了JavaScript 。因此，在您的网页，确保能正常工作，您可以加强它与一些后加载脚本，让您更花俏如拖放和动画。

预紧组件

预紧可能看起来像对面的后负荷，但实际上具有不同的目标。由预元件可以利用浏览器的时间处于闲置状态，并要求组成部分（如图像，样式和脚本），您需要在未来。这样当用户访问下一页，您可以拥有大部分部件已经在高速缓存和您的网页会加载更快的用户。

其实有几种类型的堆载预压：
•无条件预-尽快调用火灾，你先取一些额外的组件。检查google.com的例子形象如何雪碧要求调用。这雪碧的形象并不需要对google.com的网页，但它需要对连续搜索结果页。
•有条件预-根据用户的动作做出的猜测，用户下次领导和预因此。 search.yahoo.com你就可以看到一些额外的组件，请在您开始输入的输入框。
•预期预-预事先发起一个重新设计。它常常发生后，重新设计，你听到： “新网站是很酷，但它的速度比以往任何时候。 ”问题的部分原因可能是用户访问您的旧网站的全面缓存，但新一始终是清空缓存的经验。您可以减轻这种副作用的预一些部件，然后再甚至推出了重新设计。您的旧网站可以使用浏览器的时间处于闲置状态，并要求图像和脚本，将使用新的网站
减少的DOM元素

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

数量较多的DOM元素可以是一个症状，还有一些应该改进的标记的网页，而不必移除内容。您使用的是嵌套表布局目的？你扔在更
只有解决布局的问题？也许有一个更好和更语义正确的方式做您的标记。

有很大的帮助与布局的语言无的CSS公用事业： grids.css可以帮助您的总体布局， fonts.css和reset.css可以帮助您去除浏览器的默认格式。这是一个机会，重新开始思考你的标记，例如使用
只有当它在语义上有意义，而不是因为它使一个新行。

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

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

斯普利特组件跨域

分割的组成部分，您可以最大限度地发挥平行下载。确保您使用的是不超过2-4域由于DNS查找死刑。例如，您可以保存您的HTML和动态内容的 www.example.org和分裂静态组件之间static1.example.org和static2.example.org

欲了解更多信息选中“最大化并行下载在合伙用车中巷”的Tenni Theurer和Patty池。

尽量减少内置页框

内置页框允许一个HTML文件中插入原文件。重要的是要了解如何内置页框的工作，以便他们能够有效地加以利用。

标记利弊：
•帮助缓慢第三方内容和广告，像徽章
•安全客栈
•下载脚本并行
iframe tag cons:
•昂贵即使空白
•块页面调用
•非语义
没有404s

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

一些网站已经很有帮助404s “您是不是要找X上吗？ ” ，这是非常有利于用户体验，而且还浪费服务器资源（如数据库等）。尤其糟糕的是当链接到一个外部JavaScript是错误的，其结果是404 。第一，这将阻止平行下载下载。下一步的浏览器可能会尝试解析404回应机构，就好像它是JavaScript代码，试图找到一些可用它。

减少的Cookie大小

的HTTP cookie用于由于各种原因，如身份验证和个性化。有关Cookie的信息交换中的HTTP标头之间的网络服务器和浏览器。重要的是要保持规模的Cookie尽可能低的水平，以尽量减少对用户的响应时间。

欲了解更多信息选中“当Cookie崩溃”的Tenni Theurer和Patty池。该带回家本研究：
•消除不必要的cookies
•保持的Cookie大小尽可能低的水平，以尽量减少对用户的响应时间
•注意设置的Cookie在适当的域级别，以便其他子域没有受到影响
•设定一个适当的到期日期。较早的到期日期或没有删除的Cookie越早，提高用户响应时间
使用Cookie的域组件

当浏览器发出请求的静态图片和发送的Cookie连同请求，服务器没有使用这些饼干。因此，他们只会造成网络流量没有很好的理由。您应该确保静态部分，请与cookie的自由的要求。创建一个子域和主机所有的静态要素。

如果您的域名是www.example.org ，您可以保存您的静态元件static.example.org 。然而，如果您已经设定Cookie的顶级域example.org而不是www.example.org ，然后所有的要求static.example.org将包括饼干。在这种情况下，你可以购买一个全新的网域，主机的静态部分，并保持此域名Cookie 的自由。的Yahoo ！使用yimg.com ， YouTube使用ytimg.com ，亚马逊使用图像， amazon.com等。

另一个好处静态部分的一个Cookie的域的是，一些代理人可能拒绝缓存组件，请与cookies 。在一个相关的注意，如果您想知道您是否应该使用example.org或www.example.org为您的主页，考虑的Cookie影响。省略的 WWW离开你别无选择，只能写cookie来*. example.org ，因此为了提高性能，最好使用www子域名和写入cookie来该子网域。

最小化的DOM访问

访问的DOM元素的JavaScript是缓慢的，是为了有一个更加适应网页，您应该：
•缓存引用访问内容
•更新节点“离线” ，然后将其添加到树
•避免固定的布局与JavaScript
欲了解更多信息查询语言无剧院的“高性能Ajax应用”的朱利安排。

开发智能事件句柄

有时感觉不到网页的反应，因为太多的事件处理程序附加到不同内容的DOM树，然后执行往往。这就是为什么使用事件代表团是一种好方法。如果您有 10个按钮内的股利，附加只有一个事件处理程序的股利包装，而不是一个处理器为每个按钮。泡沫事件，以便您可以捕捉事件，弄清这些按钮它源于。

您也不必等待onload事件，以便开始做一些与DOM树。通常你需要的是内容要获得可在树上。您不必等待所有图片下载。 DOMContentLoaded的活动可以考虑使用不是调用，但直到它的适用于所有浏览器，您可以使用语言无事件实用工具，其中有一个 onAvailable方法。

欲了解更多信息查询语言无剧院的“高性能Ajax应用”的朱利安排。

选择链接标记超过@进口

一个之前的最佳做法的国家的CSS应在顶部，以便逐步渲染。

在IE @进口行为一样使用LINK标记在页面的底部，所以最好不要使用它。

避免过滤器

IE浏览器专有AlphaImageLoader筛选器的目的是解决问题的半透明本色PNGs版本IE中的“样式= ”字型粗细：粗体; “ ”优化图像

经过设计师完成创建的图像为您的网页，还有一些您可以尝试在您的FTP这些图片到您的Web服务器。
•您可以检查图像，看看他们使用的是调色板大小相应的数目，颜色的图像。使用imagemagick很容易检查是否使用了确定，详细image.gif
•当你看到的图像使用4种颜色和256色“槽”中的调色板，还有改进的余地。
•尝试转换图像，以PNGs ，看看是否有一个节省。更多的，往往不是存在。开发者经常毫不犹豫地使用PNGs由于有限的支持在浏览器中，但现在是过去的事情。唯一真正的问题是α -透明度本色PNGs ，但随后再次， Gifs是不正确的颜色和不支持可变透明度的。所以任何的GIF可以做，调色板巴布亚新几内亚（ PNG8 ）可以做太（除动画）。这个简单的imagemagick命令的结果完全安全使用PNGs ：
转换image.gif image.png
“我们要说的是：给平一个机会！ ”
•运行pngcrush （或任何其他格式优化工具）对所有的PNGs 。例如：
pngcrush image.png ，物权尔阿拉降低，野蛮result.png
•运行jpegtran对所有的JPEG文件。此工具无损JPEG格式的操作，如旋转，也可以被用来优化和删除无用的意见和其他信息（如EXIF信息）由您的图片。
jpegtran拷贝没有优化完美src.jpg dest.jpg

优化的CSS精灵
•安排图像雪碧横向而不是纵向的结果通常在一个较小的文件大小。
•结合在一个类似的颜色可以帮助您雪碧的颜色计数低，最好根据256种颜色，以适合在PNG8 。
• “是移动友好”的，不离开大图像之间的差距在雪碧。这并不影响文件的大小了，但需要较少的内存，用户代理，以解压缩图片的像素图。 100x100图片是10万像素，在1000x1000 100万像素
不要量表中的图像的HTML

不要使用较大的图片比您需要的，因为你可以设置宽度和高度的HTML 。如果您需要“宽度= ” 100 “高= ” 100 “ src中= ” mycat.jpg “按ALT = ”我的猫“ ”
然后您的图片（ mycat.jpg ）应100x100px而非缩减500x500px形象。

然后您的图片（ mycat.jpg ）应100x100px而非缩减500x500px形象。

使favicon.ico小和缓存

该favicon.ico是一个形象，留在你的根服务器。这是一种必要的邪恶，因为即使你不关心它的浏览器将仍然要求，所以最好不要回应了404 找不到。还因为它在同一台服务器上， Cookie是每次发出的要求。这形象，也干扰了下载序列，例如，在IE浏览器当您要求额外的组件调用，该图标下载之前将这些额外的组件。

因此，要减轻的缺点有favicon.ico确保：
•这是小，最好在1000 。
•设定Expires头与你感觉很舒服（因为你不能将它重命名如果您决定要改变它）。或许您可以安全地设置Expires头几个月的未来。您可以检查的最后修改日期您当前favicon.ico作出明智的决定。
Imagemagick可以帮助您创建的小网站图示

保持部件25,000

这种限制是与这样一个事实，即iPhone将不缓存组件大于25K型。请注意，这是未压缩的大小。这是缩小是重要的，因为修改的就可能是不够的。

欲了解更多信息选中“性能的研究，第5部分： iPhone手机Cacheability -这棒”的韦恩谢和Tenni Theurer 。

包的内容纳入多重文件

包装的组成部分纳入多重文件就像是一封电子邮件，附件，它可以帮助你获取的若干组成部分之一的HTTP请求（请记住： HTTP请求是昂贵的）。当您使用此方法，首先检查用户代理支持它（ iPhone手机不）。

此内容来自雅虎。

China help

Tuesday, December 30, 2008

加快您的网站

Monday, December 29, 2008

网站计划yoursite.com

Followers

Blog Archive

About Me