英文原文:http://developer.yahoo.com/performance/rules.html 
以下为机器自动翻译  

最小化的 HTTP 请求

标记: 内容

这是更快的页的关键。

以下是一些技术 HTTP 的请求的数目减少同时仍然支持丰富的页面设计。

结合文件是更多的挑战,当在脚本和样式表各有不同的页,但制作您发布过程的这一部分提高了响应时间。

将您的背景图像合并为单个图像并使用 CSS 背景图像背景位置 要显示所需的图像段的属性。

使用图像映射为导航不是可访问太,因此不建议使用。

跨所有主要的浏览器还不支持内联图像。

使您的页快,这些第一次访客是更好的用户体验的关键。

讨论此规则

使用内容的传递网络

标记: 服务器

但是,其中应启动呢?

尝试减少用户与您的内容之间的距离可能由,延迟或不能通过此应用程序体系结构的步骤。

这不仅能达到大减少响应时间,但内容分发网络更容易感谢。

为例是选择用最少的网络 hops 服务器或服务器的最快的响应时间。

切换到一个 CDN 是一种相对比较简单的代码更改,将会大大改善您的网站上的速度。

讨论此规则

添加一个过期或一个 cache-control 标头

标记: 服务器

有此规则两件事:

  • 为静态的组件: 通过设置远的将来实现永不过期策略 过期 标头
  • 动态组件: 使用一个适当 Cache-Control 获得帮助浏览器的条件请求标头

过期标头最常与图像,一起使用,但他们应可以用于包括脚本、 样式表和闪速组件的 所有 组件。

这是告诉浏览器此响应不到 2010 年 4 月 15 陈旧的远未来的 Expires 标题。

15 四月 2010年过期: 四 20: 00: 00 GMT

 

此示例 ExpiresDefault 指令的设置 Expires 日期出 10 年从请求的时间。

 

我们谨此陈 Yahoo! 在经常作出的生成过程的这一步一部分:,例如 yahoo_2.0.6.js 的组件的文件名中嵌入一个版本号。

利用远未来的 Expires 标题您增加组件由浏览器缓存和重新使用对后续页视图不通过用户的 Internet 连接发送单个字节。

讨论此规则

Gzip 组件

标记: 服务器

压缩减少响应时间通过减少 HTTP 响应的大小。

Web 客户端从 HTTP/1.1 开始表示支持 HTTP 请求中 Accept-Encoding 头压缩。

接受-编码: gzip,deflate

Web 服务器通知这 Web 客户的端通过在响应中的内容编码标头。

内容编码: gzip

只其他压缩格式您可能看到是 deflate,但也是较有效和使用率较低。

mod_deflate

Apache 模块帮助自动添加适当的 Vary 响应标头。

试图 gzip 他们不仅废物 CPU,而且可能可以增加文件大小。

Gzipping 尽可能多的文件类型是容易途径减轻页重量和加快用户体验。

讨论此规则

将样式表放在该置顶

标记: css

这是因为样式表放在 HEAD 允许页面逐步呈现。

这可以提高整体的用户体验。

用户被粘滞查看空白页。

最佳的解决方案是按照 HTML 规范,并加载您 HEAD 文档中的样式表。

讨论此规则

放在底部的脚本

标记: javascript

而脚本正在下载,但是,浏览器不会启动任何其他下载甚至上不同的主机名。

在很多的情况下有方法替代方法,这些情况。

这会使你的网页加载速度更快。

讨论此规则

避免 CSS 表达式

标记: css

为例,背景颜色可能被交替使用 CSS 表达式每小时的设置。

 

表达 因此,对于跨浏览器中创建一致的体验所需的 Internet Explorer 中设置属性非常有用,其他的浏览器忽略方法。

移动页面周围鼠标可以轻松地生成一万多评估。

如果使用必须 CSS 表达式请记住他们可能会评估的数以千计的时间,并可能会影响您的页面的性能。

讨论此规则

使 CSS 和 JavaScript 外部

标记: javascript,css

但是,这些考虑因素出现之前你应该问一个更基本的问题: 应该 JavaScript 和 CSS 是包含在外部的文件或内联页本身中?

在另一方面如果 CSS 和 JavaScript 由浏览器缓存的外部文件中,不会增加的 HTTP 请求数被减小 HTML 文档的大小。

如果您的网站上的用户有每个会话的多个页视图,您的页面的许多重复使用相同的脚本和样式表,有缓存的外部文件一更大的潜在好处。

有几个 (可能只有一个) 页查看每个会话的主页可能会发现内联 JavaScript 和 CSS 导致更快的最终用户响应时间。

后续页会引用应该已经在浏览器的缓存中的外部文件。

讨论此规则

减少 DNS 查找

标记: 内容

浏览器不能下载任何从此主机名直到完成 DNS 查找。

只要浏览器保持其自己的缓存中的 DNS 记录,它不会打扰带有记录的请求的操作系统。

(Fasterfox 更改这为 1 小时)。

唯一的主机名的数目减少减少 DNS 查找的数量。

这将导致降低 DNS 查找并允许高度的并行下载的好折衷。

讨论此规则

minify JavaScript 和 CSS

标记: javascript,css

YUI 压缩机,也可以 minify CSS。

虽然模糊处理高大小减少但风险更低削减 JavaScript。

如使用和 JavaScript 和 CSS 增加的大小,也将节省所得削减您的代码。

讨论此规则

避免重定向

标记: 内容

以下是在 301 响应 HTTP 头的示例:

HTTP/1.1 301 Moved 永久位置: http://example.com/newuri 内容类型: text/html

 

刷新元标记和 JavaScript 是其他方法直接到不同的 URL 的用户,但如果你必须重定向首选的技术是使用标准 3xx HTTP 状态代码,主要以确保正常工作的后退按钮。

插入 HTML 文档延迟与用户重定向中由于并不在页可以呈现页并没有组件的所有内容可以开始直至到达 HTML 文档被下载。

这被修复的 Apache 中的使用 别名mod_rewriteDirectorySlash 如果使用 Apache 处理程序的指令。

如果域的名称更改使用重定向的原因的替代方法是在联合中创建 CNAME (指向一个别名创建从一个域名到另一个 DNS 记录) 别名mod_rewrite.

讨论此规则

删除重复的脚本

标记: javascript

时发生重复的脚本将损害通过创建不必要的 HTTP 请求和浪费的 JavaScript 执行的性能。

即使脚本是缓存,额外的 HTTP 请求发生时,用户重新加载页。

此冗余的 JavaScript 执行的脚本是否缓存无论发生 Firefox 和 Internet Explorer 中,。

在典型的方式包括一个脚本就在你的 HTML 页中使用 SCRIPT 标记。

在 PHP 中的替代方法就是创建一个称为函数 insertScript.

在同一个脚本防止被插入多次,此函数能处理脚本的其他问题,如依赖项检查,并将版本号添加到支持远的未来的脚本文件名过期标头。

讨论此规则

配置 ETags

标记: 服务器

原服务器指定组件的 ETag 使用, ETag 响应标头。

 

如果在 ETags 匹配,304 状态代码由返回减少响应 12195 字节,对于此示例。

 

默认情况下,Apache 和 IIS 都在大大减少了成功在与多个服务器的网站上的有效性测试的赔率的 ETag 中嵌入数据。

虽然给定的文件可能驻留在同一目录中跨多个服务器,和有相同的文件大小、 权限、 时间戳、 等,及其 inode 有到下一台服务器不同。

这是不可能,在 ChangeNumber 是相同的跨 Web 网站背后的所有 IIS 服务器。

即使您的组件具有远的未来 过期 标头,一个条件 GET 请求仍付款时,用户点击 Reload 或刷新。

在 Apache 下,这是通过只需添加到您的 Apache 配置文件的以下行:

FileETag none

讨论此规则

使 Ajax Cacheable

标记: 内容

一些其他规则也适用于 Ajax:

如果用户已修改她的通讯簿,时间戳可确保新的 URL 不匹配,缓存的响应,并在浏览器将请求更新的地址簿条目。

这样做会更快地使您的 Web 2.0 应用程序。

讨论此规则

早刷新缓冲区

标记: 服务器

上忙的后端或光 frontends 可见主要到效益。

因为头 HTML 通常要容易产生,它使您可以包括任何 CSS 和 JavaScript 的文件,开始时在后端仍在处理中并行的提取浏览器的右后,HEAD 考虑冲厕的好地方。

示例:

 < 吗? php flush() ;? > <body>...了解 <!---> 的内容

Yahoo! 搜索 率先研究和测试,以证明使用此技术的优点的真实用户。

返回页首

将 GET 用于 AJAX 请求

标记: 服务器

最大的 URL 长度,在 IE 中是 2 K,所以,如果您发送超过 2 K 数据你可能不应该能够使用 GET。

HTTP 规格 ,GET 是为了检索信息,所以使用 GET,你只请求数据,有别于发送的数据会存储的服务器端时 (语义) 有意义。

 

返回页首

后的组件

标记: 内容

其余的内容和组件可以等待。

其它地方寻找 post-loading 候选人包括隐藏的内容 (用户操作后出现的内容) 和图像,褶皱下面。

Yahoo! 主页 Firebug 的网络与示例打开。

所以您做出确保后该页正常工作,您可以提高一些给你更多的点缀如拖动,并将的 post-loaded 的脚本和动画。

返回页首

预加载组件

标记: 内容

当用户访问下一页这种你能有大部分的组成部分已在缓存中,您的页面将为用户加载快得多。

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

  • 于字词网页上,此 Sprite 图像不需要,但它需要连续的搜索结果页上。
  • search.yahoo.com 上可以看到一些额外的组件如何被请求后你开始在输入框中键入。
  • 您的旧网站可以使用浏览器处于空闲状态的时间,并请求图像和将由新的网站使用的脚本

返回页首

减少 DOM 元素的数目

标记: 内容

如果您依次通过页上的 500 或 5000 DOM 元素,当您要添加事件处理程序,例如,它使不同。

也许还有一个更好,并更多语义更正您的标记的方法。

这是启动新鲜和想想你的标记,例如使用一次机会 <div>s 只时语义上,有意义,并不是因为它呈现一个新行。

document.getElementsByTagName('*').length

Yahoo! 主页 是一个很忙的页和仍下 700 元素 (HTML 标记)。

返回页首

跨域拆分组件

标记: 内容

您可以为例上承载您的 HTML 和动态内容 www.example.org 和拆分之间的静态组件 static1.example.orgstatic2.example.org

返回页首

最小化 iframes 的数

标记: 内容

很重要,了解如何 iframes 工作以便他们可以有效地使用。

<iframe> IT 专业人员:

  • 帮助解决慢的第三方内容 (如徽章和广告
  • 安全沙盒
  • 下载中并行的脚本

<iframe> 缺点:

  • Costly 即使空白
  • 砌块页 onload
  • 无语义

返回页首

否 404s

标记: 内容

HTTP 请求是昂贵的如此发出一个 HTTP 请求和获取无用的响应 (即 404 找不到) 是完全不必要的而且会降低没有任何利益的用户体验。

下一步浏览器可能会尝试分析 404 响应正文,如同它是想找的东西可用的 JavaScript 代码。

返回页首

减少 Cookie 大小

标记: Cookie

很重要保持 Cookie 的大小以尽量减低对用户的响应时间的影响尽可能低。

这项研究,以主页:

  • 消除不必要的 Cookie
  • 保持 Cookie 大小以尽量减低对用户响应时间的影响尽可能低
  • 会注意到在相应的域级设置 Cookie,因此其它子域不受影响
  • 更早的 Expires 日期或不删除该 Cookie 越早,提高用户响应时间

返回页首

为组件使用无 Cookie 的域

标记: Cookie

创建一个子域和主机所有静态组件那里。

Yahoo! 用途 yimg.comYouTube,使用 ytimg.comAmazon 使用 图像 amazon.com 等等。

省略 www 离开你无奈写入到 Cookie * * example.org那么的性能原因,最好使用 www 子域和写入该子域的 Cookie。

返回页首

最小化 DOM Access

标记: javascript

访问 DOM 元素使用 JavaScript 是慢,因此要一个响应更快的页,你应该:

  • 访问元素的缓存提
  • 避免使用 JavaScript 固定布局

返回页首

发展智能事件处理程序

标记: javascript

事件冒泡了等,这样您就能够捕获事件,并找出它来自哪个按钮。

onAvailable 方法。

返回页首

选择 <link> 上 @ 导入

标记: css

以前的最佳实践之一明 CSS 应在顶部以便允许进步的呈现。

在 IE 中 @ 导入 行为相同,使用 <link> 在页的底部,因此最好不使用它。

返回页首

避免筛选器

标记: css

它也增加内存消耗,并因此问题乘以每个元素,不是每图像,应用。

如果绝对需要 AlphaImageLoader使用下划线黑客 _filter 以不惩罚你 IE7 + 用户。

返回页首

优化图像

标记: 图像

设计器通过创建您的网页,图像完成后,仍有一些可以尝试在你面前的东西 FTP 这些到您的 Web 服务器的图像。

  • 在看到一个图像掉电 4 颜色与调色板中角子机的 256 色时有空间改进。
  • pngcrush image.png-rem alla-减少-迫法 result.png
  • jpegtran-复制没有-优化-完善 src.jpg dest.jpg

返回页首

优化 CSS 子画面

标记: 图像

  • 安排中水平相对于垂直通常较小的文件大小中的结果 Sprite 图像。
  • 结合类似中您保持低的颜色计数一 Sprite 帮助,以适合在一个 PNG8 理想情况下根据 256 色的颜色。
  • 100 x 100 图像是 10 千像素,1000 x 1000 所在 1 万像素

返回页首

不要在 HTML 中缩放图像

标记: 图像

然后您的映像 (mycat.jpg) 应 100x100px 而非一个规模下 500x500px 图像。

返回页首

使 favicon.ico 及缓存

标记: 图像

此图像也干扰,下载序列的例如的 IE 请求中,onload 额外组件时,该图标将下载前这些额外的组件。

因此,以减轻有确保一个 favicon.ico 的缺点:

  • 最好是根据 1K 很小。
  • 您可以检查作出知情的决定您当前的 favicon.ico 的最后修改的日期。

Imagemagick 可以帮助您创建小 favicons

返回页首

保持组件下 25 K

标记: 移动

这是缩小所在重要因为 gzip 独自可能不足够。

返回页首

组件打包到一个由多部分组成的文档

标记: 移动

在使用此技术时首先检查是否用户代理支持它 (iPhone 不)。

相关文章:

  • 2021-09-17
  • 2022-01-20
  • 2021-12-26
  • 2022-12-23
  • 2021-07-07
  • 2021-07-17
  • 2022-01-20
猜你喜欢
  • 2021-07-30
  • 2021-12-05
相关资源
相似解决方案