雅虎的工程师团队给出的35个web开发最佳实践

最小化的HTTP请求

标签：内容

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

在网页中的组件数量减少的一种方法是简化页面的设计。但是，有一种方法来建立更丰富的内容的网页，同时也实现了快速的响应时间？这里有一些减少HTTP请求数，同时还支持丰富的网页设计技术。

联合文件是所有脚本合并成一个单一的脚本，同样所有的CSS结合成一个单一的样式表的方式来减少HTTP请求数。合并文件时更具挑战性的脚本和样式从页面不同，但使得这部分的释放过程缩短响应时间。

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

影像地图结合成一个单一的图像的多个图像。的整体尺寸大约是相同的，但数量减少了页面的HTTP请求的速度。影像地图只工作，如果图像是连续的，如在页面的导航栏。定义图像映射的坐标可以是乏味且容易出错。使用图像导航地图是无法访问过，所以不建议。

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

在你的页面的HTTP请求数减少开始的地方。这是最重要的准则，首次访问者提高性能。所描述的网球场。陶依尔的博客文章浏览器缓存使用-裸露！ 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请求，在随后的页面访问量。Expires头部是最常用的图像，但他们应该使用的所有组件，包括脚本，样式表和Flash组件。

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

      到期：4月15日（星期四）2010 20:00:00 GMT

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

ExpiresDefault“访问加10年”

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

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

Gzip已组件

标签：服务器

在整个网络中传送的HTTP请求和响应所花费的时间可以显着地减少由前端工程师作出的决定。这是真的，最终用户的带宽速度，互联网服务提供商，接近对等交换点等方面都超出了开发团队的控制。但也有其他变量会影响响应时间。压缩缩短了响应时间减少HTTP响应的大小。

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

      接受编码：gzip，放气

 

如果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：“不同的是，[LINK]只能出现在文档的HEAD部分，虽然它可能会出现任意次数。” 无论空白屏幕的替代品，或无样式内容的闪光灯，是值得冒这个险。最佳的解决办法是遵循HTML规范，并加载你的样式表文件中的头。

顶部 | 讨论这条规则

将在底部的脚本

标签：javascript的

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

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

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

顶部 | 讨论这条规则

避免CSS表达式

标签：CSS

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

      背景颜色：表达式（（新日期（））。和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作为外部文件来部署。其中，内联是最好的唯一的例外是，如雅虎的头版和我的雅虎主页。主页有几个（也许只有一个）页面视图每个会话可能会发现，在最终用户的响应时间更快，内嵌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记录保持在其自己的高速缓存，它不打扰操作系统备案的请求。

IE浏览器缓存DNS查找，预设为30分钟，所指定的 注册表设置DnsCacheTimeout。Firefox的缓存DNS查找1分钟，控制由network.dnsCacheExpiration的配置设置。（Fasterfox改变至1小时。）

当客户端的DNS高速缓存为空时（浏览器和操作系统），DNS查找的数目等于在web页面中的唯一主机名的数量。这包括在页面的URL中使用的主机名，图像，脚本文件，样式表，Flash对象，唯一的主机数目减少的数量减少DNS查找。

唯一主机名的数量减少，有可能减少发生在页面中的并行下载量。避免DNS查找，降低响应时间，但减少并行下载，可能会增加响应时间。我的宗旨是分裂跨越至少两个，但这些组件不超过4个主机名。这样的结果之间的良好折衷减少DNS查找，并允许高度并行下载。

顶部 | 讨论这条规则

缩小JavaScript和CSS

标签：JAVASCRIPT，CSS

微小的做法是删除不必要的字符代码，从而减少它的大小，从而改善加载时间。往上代码时，所有评论都删除，以及不必要的空白字符（空格，换行符和制表符）。在JavaScript的情况下，提高响应时间的性能降低，因为所下载的文件的大小。挡土墙JavaScript代码的两个流行的工具是JSMIN和YUI压缩机。YUI压缩机也可以缩小CSS。

模糊处理是一种替代的，可以应用的源代码的优化。这是更复杂的微小的，因此作为模糊化步骤本身的结果可能会产生错误。美国十大网站在一项调查中，微小的尺寸达到了21％，25％，减少与混淆。虽然混淆具有较高的尺寸缩小，挡土墙JavaScript的风险较小。

此外挡土墙外部脚本和样式，内嵌的<script>和<STYLE>块可以，而且也应该作压缩。即使你gzip压缩脚本和样式，挡土墙，他们仍然会减少5％或以上的大小。由于使用JavaScript和CSS增加和大小，所以将节约的，挡土墙代码。

顶部 | 讨论这条规则

避免重定向

标签：内容

重定向使用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文档延迟。

其中最浪费的重定向频繁发生和网页开发者一般都没有意识到这一点。它发生时，尾随的斜线（/）缺少一个网址，否则应该有一个。例如，去到http://astrology.yahoo.com/astrology结果中301响应重定向到http://astrology.yahoo.com/astrology/的“（注意添加尾随斜线）。这是由使 ​​用别名或mod_rewrite的，或的DirectorySlash指令的，如果你使用的是Apache处理程序固定在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标签。

      如何得到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 OK
      最后修改：星期二，2006年12月12日3时03分59秒GMT
      ETag的：“10c24bc的4AB 457e1c1f的”
      内容长度：12195

 

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

      GET / I / yahoo.gif的HTTP/1.1
      主持人：us.yimg.com
      如果修改日期：2006年12月12日（周二）3时03分59秒GMT
      如果 - 无 - 匹配：“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的。ETag的IIS上的格式是changeNumber的Filetimestamp。 changeNumber的是一个计数器，用来跟踪更改IIS的配置。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的所引用的好处之一是，它提供瞬时反馈给用户，因为它从后端的Web服务器异步请求信息。但是，使用Ajax是没有保证用户不会等待那些异步JavaScript和XML响应返回摆弄他的拇指。在许多应用中，不论是否用户等待取决于Ajax如何使用的。例如，在一个基于Web的电子邮件客户端，用户将可以继续等待一个Ajax请求，找到所有的电子邮件，他们的搜索条件相匹配的结果。重要的是要记住，“异步”并不意味着“瞬间”。

为了提高性能，重要的是要优化这些Ajax响应。提高Ajax的性能最重要的途径是使可缓存的响应，讨论了添加一个Expires或Cache-Control头。一些其他的规则也适用于阿贾克斯：

 

 

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

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

顶部 | 讨论这条规则

早期刷新缓冲区

标签：服务器

当用户请求一个页面，它可以在任何地方从200到500毫秒的后端服务器缝合在一起的HTML页面。在此期间，浏览器是空闲的，因为它要等待数据到达。在PHP中的函数调用flush（） 。它允许您发送您的部分准备的HTML的浏览器，这样浏览器就可以开始获取您的后端组件，同时忙于与其他的HTML页面。这样做的好处主要见于繁忙的后端或光的前端。

考虑冲洗的好地方，因为HTML的头部右后头部通常是更容易产生，它可以让你有任何CSS和JavaScript文件浏览器而后端可以仍然在处理并行开始获取。

例如：

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

 

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

顶部

使用GET AJAX请求

标签：服务器

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

一个有趣的影响是居然没有发布任何数据的行为，比如GET，POST。基于HTTP规范，得到的是检索信息的意思，所以它使得使用GET，当你只请求数据，而不是将数据发送到服务器端存储的意义（语义）。

 

顶部

后负荷组件

标签：内容

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

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

工具来帮助你在你的努力：YUI图像加载器允许您延迟倍和YUI获取实用程序是一个简单的方法，包括JS和CSS上飞下面的图片。在野外举一个例子来看看雅虎 转身与Firebug的净面板首页上。

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

顶部

预紧组件

标签：内容

预紧相反的负荷后，可能看起来像，但实际上有不同的目标。通过预装组件，你可以利用浏览器处于闲置状态，并要求组件（如图像，样式和脚本），你将需​​要在未来的时间。这样当用户访问下一个页面时，您可能有大部分组件已经在缓存中，并为用户页面加载快得多。

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

  • 无条件预紧-尽快的onload火灾，你先走，并获取一些额外的组件。检查google.com精灵的形象是如何被请求的onload的一个例子。此sprite图像不需要google.com的网页，但它需要连续搜索结果页面上。
  • 有条件的预紧力-基于用户操作使用户走向下一个相应的预紧一个受过教育的猜测。在search.yahoo.com你可以看到一些额外的组件后，请您在输入框中开始输入。
  • 预计预压-之前提前推出重新设计的预紧力。它经常发生的重新设计后，你听到：“新网站是凉爽，但它比以前慢”。问题的部分原因可能是一个完整的缓存用户访问您的旧网站，但新一总是空缓存经验。通过预加载一些组件之前，你甚至推出了重新设计，可以减轻这种副作用。你的旧网站，可以使用浏览器处于闲置状态时，要求图像和脚本，将使用新的网站

顶部

DOM元素数量减少

标签：内容

一个复杂的页面意味着更多的字节来下载，这也意味着在JavaScript访问DOM慢。它使一个区别，如果你当你想添加一个事件处理程序，例如通过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

欲了解更多信息，请检查“ 最大化并行下载共乘车道 “网球场。陶依尔和帕蒂驰。

顶部

最小化iframe的数

标签：内容

内部框架允许父文档中插入一个HTML文档。重要的是要了解如何工作，使他们能够有效地使用内置页框。

<IFRAME>优点：

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

<IFRAME>利弊：

  • 即使不惜血本空白
  • 块页的onload
  • 非语义

顶部

没有404

标签：内容

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

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

顶部

标签：饼干

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

欲了解更多信息，请检查 “曲奇碎”网球场。陶依尔和帕蒂驰。带回家的这项研究：

 

  • 消除不必要的cookies
  • 保持尽可能低的饼干大小，以尽量减少对用户的响应时间的影响
  • 考虑在适当的域级别，所以不影响其他子域设置cookie
  • 设置一个Expires日期适当的。较早的到期日期或没有删除Cookie，关口前移，提高了用户的响应时间

顶部

标签：饼干

当浏览器发出请求一个静态图像和饼干一起发送的请求，服务器没有任何使用这些cookie。所以，他们只创建网络流量没有很好的理由。您应该确保静态组件请求饼干请求。创建一个子域和主机上的所有静态组件。

如果您的域名是www.example.org，你可以承载你的静态组件在static.example.org。但是，如果你已经上设置Cookie的顶级域名 example.org反对www.example.org，那么所有的请求 static.example.org的将包括这些饼干。在这种情况下，你可以买一个全新的领域，在那里举办静态组件，并保持这个域的cookie。雅虎使用yimg.com的，YouTube使用ytimg.com，亚马逊使用图像amazon.com等。

cookie的免费域名托管静电元件的另一个好处是，有些代理服务器可能会拒绝缓存请求的组件与饼干。在一个相关的说明，如果你不知道你是否应该使用example.org或www.example.org为您的家庭，考虑的cookie影响。省略WWW离开你别无选择，而是写饼干*。example.org，出于性能原因，最好使用www子域和饼干写入到该子域。

顶部

最小化DOM访问

标签：javascript的

使用JavaScript访问DOM元素的速度很慢，所以为了有一个更加敏感的页面，你应该：

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

欲了解更多信息，检查YUI剧院的 “高性能Ajax应用程序” 朱利安·勒孔特。

顶部

开发智能事件处理程序

标签：javascript的

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

你也不必等待中的onload事件，以启动与DOM树做的事情。通常情况下，你需要的是您要访问的元素在树中。您不必等待所有要下载影像。 DOMContentLoaded是你可能会考虑使用代替的onload事件，但直到它在所有浏览器中，你可以使用YUI事件工具，其中有一个onAvailable的方法。

欲了解更多信息，检查YUI剧院的 “高性能Ajax应用程序” 朱利安·勒孔特。

顶部

标签：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透明度，但话又说回来，GIF的是不是真实的色彩，不支持可变透明度。因此，任何一个GIF可以做，调色板PNG（PNG8）也可以做（除动画）。这个简单的ImageMagick命令的结果完全安全的，使用PNG格式转换Image.gif的image.png“我们要说的是：给平安一个机会！”   
  • 运行pngcrush（或任何其他PNG优化工具），在所有你的PNG。例如： pngcrush image.png雷姆ALLA减少蛮力result.png的
  • 运行jpegtran在所有的JPEG文件。此工具无损JPEG旋转等操作，也可以用于优化和删除注释等无用信息（如EXIF信息）从您的图片。 jpegtran复制优化完美src.jpg dest.jpg

顶部

优化CSS精灵

标签：图像

  • 安排精灵中的图像水平而不是垂直通常会导致一个更小的文件大小。
  • 结合相似的颜色在一个精灵，帮助你保持低色数，理想情况下的256色，所以适合在一个PNG8。
  • “移动友好”，不留下一个精灵中的图像之间的差距大。这不会影响尽可能多的文件的大小，但需要较少的存储器，用于解压缩的图像的像素映射到用户代理。100x100的图像是10万像素，1000×1000是100万像素

顶部

不要在HTML中缩放图像

标签：图像

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

顶部

的favicon.ico小和可缓存

标签：图像

的favicon.ico的是一个形象，留在你的服务器的根。这是一个必要的邪恶，因为即使你不关心它，浏览器将仍然要求它，所以它最好不要回应与404未找到。也因为它是在同一服务器上，饼干每次发送的要求。这也干扰了图像下载顺序，例如在IE浏览器中的onload当您请求额外的组件，把favicon将被下载之前，这些额外的组件。

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

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

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

顶部

25K下保持组件

标签：手机

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

欲了解更多信息，请检查“ 的性能研究，第5部分：iPhone的缓冲能力-它坚持 “韦恩Shea和网球场。陶依尔。

顶部

Pack组件成多部分文件

标签：手机

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

避免空图像的src

标签：服务器

图片空字符串的src属性发生一个以上的期望。这两种形式出现：

  1. 直接的HTML
    <img src="">的
  2. JAVASCRIPT
    VAR IMG =新的Image（）;  img.src =“”;

 

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

  • IE浏览器请求页面所在的目录。
  • 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属性的值必须是空字符串。

希望，浏览器将在未来不会有这个问题。不幸的是，有没有这样的条款如何src=""> <link href="">请。也许还有时间作出这样的调整，以确保浏览器不小心实施这种行为。

 

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

posted @ 2013-05-29 11:45  lhyterry  阅读(1290)  评论(1)  编辑  收藏  举报