加快您的网站的最佳实践

最小化的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 Technologies公司，EdgeCast，或Level3的成本效益。对于刚成立的公司和私人网站，可以是一个CDN服务的成本望而却步，但作为你的目标受众的增长变得更加全球，CDN是必要的，以实现快速的响应时间。在雅虎，搬到了他们的应用程序的Web服务器的属性，静态内容到一个CDN（包括第三方的上述以及雅虎自己的CDN）最终用户的响应时间提高20％以上。切换到一个CDN是一个相对简单的代码的变化，这将大大提高您的网站的速度。

顶部 | 讨论这个规则

添加一个Expires或Cache-Control头

标签：服务器

此规则有两个方面：

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

 

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

浏览器（和代理）使用缓存来减少HTTP请求的数量和大小，使网页加载更快。Web服务器在HTTP响应中使用Expires头告诉客户端组件可以缓存多久。这是远的将来，Expires头，告诉浏览器的响应，这不会是，直到2010年4月15日，陈旧。

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

 

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

      ExpiresDefault“访问加10年”

 

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

不远的将来使用Expires头影响只有在一个用户已经访问您的网站页面浏览量。当用户首次访问您的网站和浏览器的缓存是空的，它没有对HTTP请求的数量的影响。因此，这种性能改善的影响取决于用户经常打一个引缓存你的页面。（一个“引缓存”已经包含在页面中的所有组件。），我们在雅虎测量，发现与引缓存的页面访问量为75-85％。通过使用一个遥远的未来到期的头，你浏览器缓存和重新使用在随后的页面访问量超过用户的互联网连接，而不发送单字节的组成部分，是增加数量。

顶部 | 讨论这个规则

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中使用mod_gzip，而Apache 2.x的使用mod_deflate模块。

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

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

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

顶部 | 讨论这个规则

置于顶端的样式表

标签：CSS

虽然研究在雅虎的表现，我们发现，移动到文件的头部的样式使网页出现加载更快。这是因为把样式的头部，使页面逐步呈现。

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

把该文件的底部附近的样式的问题是，它禁止在许多浏览器进行渲染，包括Internet Explorer。这些浏览器阻止渲染，以避免重绘页面元素，如果他们的风格改变。用户观看一个空白页被套牢。

HTML规范中明确指出，样式是在页面的HEAD包括：“与A，[链接]可能只出现在文档的HEAD部分，虽然它可能会出现任意次数。” 没有替代品，空白屏幕或无样式内容的闪烁，是值得冒这个险。最佳的解决方案是按照HTML规范和加载你的样式表在文件头。

顶部 | 讨论这个规则

在底部放脚本

标签：JavaScript的

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

在某些情况下它是不容易移动脚本的底部。例如，如果脚本使用文件撰写插入页的内容的一部分，它可以不会被移到在页面低。还可能有范围的问题。在许多情况下，有办法要解决这些情况。

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

顶部 | 讨论这个规则

避免CSS表达式

标签：CSS

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

      getHours背景色：表达式（（新的Date（））（）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
      的Content-Type：text / html的

 

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

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

其中一个最浪费的重定向经常发生，Web开发人员一般都没有意识到这一点。它发生时应该有一个从URL中缺少一个斜线（/）。例如，到http://astrology.yahoo.com/astrology结果中包含重定向到一个301响应http://astrology.yahoo.com/astrology/~~V（注意添加结尾的斜线）。这是固定在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”）>

 

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

顶部 | 讨论这个规则

配置ETag的

标签：服务器

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

      HTTP/1.1 200确定
      最后修改：12月12日星期二，2006年3时03分59秒GMT
      ETag的：“4AB-457e1c1f的10c24bc”
      内容长度：12195

 

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

      GET / I / yahoo.gif HTTP/1.1的
      主持人：us.yimg.com
      如果修改的日期：12月12日星期二，2006年3时03分59秒GMT
      如果没有匹配：“4AB-457e1c1f的10c24bc的”
      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的格式是Filetimestamp的：的changenumber。一个是用来追踪IIS配置变化的changenumber计数器。它不太可能的的changenumber是同一个网站背后的所有IIS服务器。

最终的结果是完全相同的组件Apache和IIS生成ETag的不匹配，从一个服务器到另一个。如果ETag的不匹配，用户不会收到小，速度快的304响应，ETag的设计，相反，他们会得到一个正常的200响应组件的所有数据。如果你只有一台服务器上托管你的网站，这不是一个问题。但如果你有多个服务器托管您的网站，你使用Apache或IIS默认的ETag配置，你的用户是越来越慢的网页，您的服务器具有更高的负载，你消耗更大的带宽，代理不是ţ缓存你的内容有效。即使您的组件有一个遥远的未来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：

 

 

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

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

顶部 | 讨论这个规则

及早刷新缓冲区

标签：服务器

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

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

例如：

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

 

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

顶部

Ajax请求使用GET

标签：服务器

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

一个有趣的侧面影响，实际上不张贴任何数据的行为，如GET POST。的HTTP规范的基础上，得到的是信息检索的含义，所以它才有意义（语义）当你只要求数据发送到服务器端存储的数据，而不是使用。

 

顶部

后负荷组件

标签：内容

你可以仔细看看在您的网页，并问自己：“什么是绝对需要以最初呈现页面吗？”。其余的内容和组件可以等待。

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

工具来帮助你的努力：锐图像装载机，让你延缓倍及以下锐获取实用程序是一个简单的方法，包括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>小号只有当它是有意义的语义，而不是因为它呈现一个新行。

DOM元素数量很容易测试，只是在Firebug的控制台类型：document.getElementsByTagName（'*'）长度

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

顶部

跨域分裂成分

标签：内容

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

欲了解更多信息，检查“ 最大化共乘车道的并行下载 “Tenni陶依尔和侯佩岑智。

顶部

尽量减少iframe的数量

标签：内容

IFRAMES允许在父文档中插入一个HTML文档。了解IFRAMES的工作，使他们能够有效地利用这一点很重要。

<IFRAME>优点：

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

<IFRAME>的利弊：

  • 昂贵的，即使空白
  • 阻止页面的onload
  • 非语义

顶部

没有404

标签：内容

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

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

顶部

标签：饼干

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

欲了解更多信息检查 “，当饼干粉碎” Tenni陶依尔和侯佩岑智。本研究带回家：

 

  • 消除不必要的cookies
  • 保持尽可能低的饼干大小，以尽量减少对用户的响应时间的影响
  • 要注意，所以不影响其他子域的Cookie设置在适当的域级别
  • 设置一个Expires日期适当。较早到期日期或没有删除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访问

标签：JavaScript的

使用JavaScript访问DOM元素是缓慢的，因此，为了有更敏感的页面，你应该：

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

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

顶部

开发智能事件处理程序

标签：JavaScript的

网页有时觉得不太敏感，因为太多的事件处理程序附加到DOM树中的不同元素，然后执行往往。这就是为什么使用事件代表团是一个好方法。如果你有10个按钮的div里面，只有一个事件处理程序附加到div的包装，而不是为每个按钮的处理程序。事件冒泡，你就可以捕获事件，并找出它起源于哪个按钮。

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

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

顶部

标签：CSS

以前的最佳实践之一规定的CSS应该是在顶部，以便逐步呈现。

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

顶部

避免过滤器

标签：CSS

IE专有AlphaImageLoader的过滤器，旨在修复与真彩色的PNG半透明<7的IE版本中存在的问题。与此过滤器的问题是，它阻止渲染和冻结浏览器，而图像被下载。这也增加了内存消耗，并且每个元素的应用，而不是每幅图像，这样的问题，乘以。

最好的办法是完全避免AlphaImageLoader的正常使用有辱人格的PNG8代替，这是在IE浏览器的罚款 。如果你绝对需要AlphaImageLoader的，使用下划线黑客_Filter不惩罚你的IE 7 +用户。

顶部

优化图片

标签：图像

创建您的网页的图像设计师后，仍然有一些事情你可以尝试到Web服务器之前，你的FTP这些图像。

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

顶部

优化CSS精灵

标签：图像

  • 在雪碧水平垂直通常在一个较小的文件大小的结果，而不是安排的图像。
  • 结合类似的色彩精灵，帮助你理想下保持低色数256色，所以适合在1 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未找到回应。也因为它是在同一台服务器上，饼干送到每一个它要求的时间。此图片也下载序列的干扰，例如在IE浏览器在onload当您要求额外的组件，把favicon将之前下载这些额外的组件。

因此，要减轻的favicon.ico确保弊端：

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

ImageMagick的可以帮助你创建小Favicons的

顶部

保持在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版本解决了这个问题[BUG 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="">。也许还有时间作出这样的调整，以确保浏览器不小心执行此行为。

posted @ 2012-04-22 01:07  microsoftzhcn  阅读(366)  评论(0)  编辑  收藏  举报