Best Practices for Speeding Up Your Web Site(4)
2011-07-07 00:00
246 查看
十四、
Make Ajax Cacheable
tag: content
使Ajax可缓存
标签：内容
Ajax的显著好处之一是对于用户来说它提供了瞬间的反馈，因为它通过异步方式从后端服务器请求信息。然而，使用Ajax也不能保证用户不翘起拇指来等待这些异步返回的Javascript和XML。在许多站点中，用户是否要等待取决于Ajax的使用方式。例如，在一个基于web的邮件客户端中，用户会持续等待Ajax的请求结果来找到匹配其查询条件所有邮件信息。重要的是要记住"异步"并不代表"瞬间"。
为了提高性能，优化这些Ajax请求是很重要的。提高Ajax性能的最重要的方式是使响应可缓存的，正如在 Add an Expires or a Cache-Control Header所说的那样。
一些其它的原则同样适用于Ajax：
Gzip Components
Reduce DNS Lookups
Minify JavaScript
Avoid Redirects
Configure ETags
让我们看一个例子，Web2.0的邮件客户端可能使用Ajax来下载用户的地址簿。如果在上次使用该web邮件应用时，用户没有编辑地址簿，之前的地址响应可以从缓存中被读出来，只要Ajax响应通过 Expires 或者 Cache-Control 头设置为可缓存的。相对于之前缓存过的地址簿，当用户要使用新的地址簿时，必须显示的通知浏览器。这可以通过在请求地址簿信息的Ajax的URL后加一个时间戳指示用户上次编辑地址簿的时间来完成。例如&t=1190241612。如果地址簿从上次下载后就没有编辑过，时间戳会是相同的并且地址簿会从浏览器缓存中读出，从而消除了额外的HTTP环回过程。如果用户已经编辑了他的地址簿，时间戳会保证新的URL不会匹配已经缓存的响应信息，之后浏览器会请求更新后的地址簿实体。
尽管在Ajax响应是动态创建的，并且只能被用于单一用户，它们仍旧可以被缓存。做这些会加速你的Web2.0应用。
十五、
Flush the Buffer Early
tag: server
尽早清除缓存
标签：服务器
当用户请求一个页面时，服务器可能会花费200-500毫秒来组装HTML页面。在这段时间内，浏览器是处于空闲状态因为它在等待数据的到来。在PHP里存在flush()函数。它允许你发送部分已经准备好的HTML响应到浏览器中以便浏览器能够获取组件，而服务器此时正在忙于准备剩下的HTML页面。这些好处常被当称作是忙碌的后端或者是轻前端。
HEAD标签后被认为是是清除缓存的好的地方，因为HTML的head通常是容易准备的，并且允许浏览器并发下载HEADer中包含的任何CSS和Javascript文件，而此时后台仍旧忙于处理的过程中。
例子：
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->
Yahoo! search 先前的研究和实际用户的测试证明了使用这项技术的好处。
十六、
Use GET for AJAX Requests
tag: server
在AJAX请求中使用GET
标签：服务器
Yahoo! Mail的团队发现在使用XMLHttpRequest时，浏览器通过两步处理来实现POST方法：首先发送请求头，然后发送数据。所以最好使用GET方法，该方法只会发送一个TCP包（除非你有许多的cookies）。IE中URL的最大长度是2K，所以如果你要发送超过2K的数据时你可能不能再用GET方法。
一个有趣的负面效果是不带有任何数据的POST方法的行为就像GET一样。基于HTTP详细说明书，GET方法是为了取回信息，所以当你真的只是请求数据时，使用GET是有有意义（语义上）的，相反的是发送数据到服务器端去存储是无意义（语义上）的。
十七、
Post-load Components
tag: content
延迟加载组件
标签：内容
当你进一步观察你的页面时，你问自己："在最初渲染页面时，到底什么是必须？"其它的内容和组件是可以等待的。
Javascript是理想的候选者，可以分散在加载事件之前或者之后。例如如果你有用于拖拽，拖放和动画的Javascript代码和库，这些都是可等待的，以为拖拽页面上的元素是在初始渲染之后才能实施的。其它可选的可延迟加载的内容包括隐藏内容（在用户动作之后才出现的内容）和折叠组件下的图片。
可以帮助你省事的工具： YUI Image Loader允许你延迟加载折叠组件下的图片，YUI Get utility 是联机加载Javascript和CSS的好方法。作为一个实例你可以在开启Firebug网络面板的情况下查看原生的Yahoo! Home Page来进行验证。
当性能目标和其它的最佳实践方式保持一致时是好的。在这种情况下，逐步增强的想法告诉我们，在支持的情况下，Javascript可以提高用户的体验但是你也必须保证在没有Javascript的情况下页面也能正常工作。所以在你确定页面已经正常工作之后，你可以通过延迟加载的脚本来给你添加更多的花样如拖拽，拖放和动画。
十八、
Preload Components
tag: content
预加载组件
标签：内容
预加载可能看起来与延迟加载是对立的，但实际上它是针对不同的目标的。通过预加载组件你可以充分利用浏览器的空闲时间来请求你不久将要的组件（如图片，样式，脚本）。这样当用户浏览下一个页面时，你可能已经缓存了多数的组件，对于用户来说你的页面将加载的更快。
以下有几种预加载的方式：
无条件预加载—只要onload事件触发，你就会前去抓取额外的组件。例如检查google.com来了解一个精灵图片是如何在onload中被请求的。 google.com并不需要该精灵图片，但是在接下来连续不断的搜索结果页面中却是需要该图片的。
有条件预加载—基于用户动作你会对用户接下来要去哪做一个有根据的猜测，从而进行相应的预加载。在search.yahoo.com你会发现在你在输入框中输入文字后， 一些额外的组件是如何被请求的。
按期望的预加载————在再设计之前提前预加载。在再设计之后你经常会听到"新的站点很cool，但是比之前的站点要慢"。问题的一部分可能是 用户之前是在一个全缓存状态下浏览你的旧站点，但在空缓存状态下浏览你的新站点。你可以在重新加载新页面之前预加载其组件来缓解该副作用。 你的旧站点可以利用浏览器的空闲时间请求一些你的新站点会用到的一些图片，脚本。
十九、
Reduce the Number of DOM Elements
tag: content
家少DOM元素的数量
标签：内容
复杂的页面意味着要下载更多的字节并且同样会降低Javascript访问DOM的速度。例如，一次通过500个DOM元素添加一个事件和一次通过5000元素添加一个事件处理，这之间是有很大差别的。
大量的DOM元素可能预示着在不去除必要内容的前提下，一些页面内容应该得到改善。你正在使用嵌套的表格作为布局用途吗？你正在加入更多的<div>标签而仅是为了修复布局问题吗？可能存在更好的且更加语义化的方式来处理你的标签。
YUI CSS utilities提供好的布局帮助：grid.css可以帮助你进行总体布局，font.css和reset.css可以帮助你去除浏览器的格式设置。重新开始考虑你的标签存在着挑战，例如只有在有语义时才使用<div>，而不是把它渲染为一个新行。
DOM的数量可以很容易的进行测试，只要在Firebug的console下键入：
document.getElementsByTagName('*').length。
至于DOM的数量为多少时才能算多？检查一下类似的有较好标签设计的页面即可。例如 Yahoo! Home Page是一个复杂的页面但仍旧只有少于700个的HTML元素（HTML 标签）
二十、
Split Components Across Domains
tag: content
跨域分隔组件
标签：内容
分隔组件让你能够最大化并行下载。确保你使用的域名不要超过2-4个，由于DNS查询也会有损耗。例如，你在www.example.org 提供你的HTML和动态的内容，并且在static1.example.org 和 static2.example.org之间分隔你的静态内容。
要获取更多的信息，查看由 Tenni Theurer 和 Patty Chi.发表的 "
Maximizing Parallel Downloads in the Carpool Lane"。
二十一、
Minimize the Number of iframes
tag: content
减小iframes的数量
标签：内容
iframes允许HTML文档插入到它的父文档中。理解iframes的工作方式是十分重要的，只有这样我们才能更高效的利用iframes。
<iframe> pros:
帮助减少类似于徽章和广告这样的第三方内容
安全沙盒
并发下载脚本
<iframe> cons:
尽管空白，但都是花费昂贵的。
阻碍页面加载
非语义化Non-semantic
二十二、
No 404s
tag: content
拒绝404s
标签：内容
HTTP请求是宝贵的，所以产生一个HTTP请求然后获得一个无用的响应（例如：404没有找到）是完全不必要的并且这将在没有任何益处的情况下降低用户体验。
所以站点拥有一个有用的404s"Did you mean X?"，对于用户体验来说是极好的，但同时也浪费了服务器资源（如数据库，等等）。尤其糟糕的是当链接到外部Javascript的“链接“（link）坏掉，返回的结果是404。首先，这个下载会阻塞并发下载。紧接着浏览器可能尝试着解析404响应体就好像它（响应体）是正常的Javascript代码一样，并尝试发现响应体中有用的部分。
二十三、
Reduce Cookie Size
tag: cookie
减小Cookie的大小
标签：cookie
HTTP Cookie用于多种原因例如认证和个性化。在Web服务器和浏览器之间，关于cookie的信息是在HTTP头部中进行交换的。保持cookies的大小尽可能小是很重要这是为了降低对用户响应时间的影响。
要获取更多信息，请查看Tenni Theurer 和 Patty Chi发表的 "
When the Cookie Crumbles" 。该研究的精要是：
消除不必要的cookies
保持cookies的体积尽可能小，以降低对用户响应时间的影响
记住要在合适的域名级别下设置cookies，以避免对子域的影响。
设置一个合适的失效日期。过早的失效日期或者是马上消除cookies会提高用户的响应时间。
Make Ajax Cacheable
tag: content
使Ajax可缓存
标签：内容
Ajax的显著好处之一是对于用户来说它提供了瞬间的反馈，因为它通过异步方式从后端服务器请求信息。然而，使用Ajax也不能保证用户不翘起拇指来等待这些异步返回的Javascript和XML。在许多站点中，用户是否要等待取决于Ajax的使用方式。例如，在一个基于web的邮件客户端中，用户会持续等待Ajax的请求结果来找到匹配其查询条件所有邮件信息。重要的是要记住"异步"并不代表"瞬间"。
为了提高性能，优化这些Ajax请求是很重要的。提高Ajax性能的最重要的方式是使响应可缓存的，正如在 Add an Expires or a Cache-Control Header所说的那样。
一些其它的原则同样适用于Ajax：
Gzip Components
Reduce DNS Lookups
Minify JavaScript
Avoid Redirects
Configure ETags
让我们看一个例子，Web2.0的邮件客户端可能使用Ajax来下载用户的地址簿。如果在上次使用该web邮件应用时，用户没有编辑地址簿，之前的地址响应可以从缓存中被读出来，只要Ajax响应通过 Expires 或者 Cache-Control 头设置为可缓存的。相对于之前缓存过的地址簿，当用户要使用新的地址簿时，必须显示的通知浏览器。这可以通过在请求地址簿信息的Ajax的URL后加一个时间戳指示用户上次编辑地址簿的时间来完成。例如&t=1190241612。如果地址簿从上次下载后就没有编辑过，时间戳会是相同的并且地址簿会从浏览器缓存中读出，从而消除了额外的HTTP环回过程。如果用户已经编辑了他的地址簿，时间戳会保证新的URL不会匹配已经缓存的响应信息，之后浏览器会请求更新后的地址簿实体。
尽管在Ajax响应是动态创建的，并且只能被用于单一用户，它们仍旧可以被缓存。做这些会加速你的Web2.0应用。
十五、
Flush the Buffer Early
tag: server
尽早清除缓存
标签：服务器
当用户请求一个页面时，服务器可能会花费200-500毫秒来组装HTML页面。在这段时间内，浏览器是处于空闲状态因为它在等待数据的到来。在PHP里存在flush()函数。它允许你发送部分已经准备好的HTML响应到浏览器中以便浏览器能够获取组件，而服务器此时正在忙于准备剩下的HTML页面。这些好处常被当称作是忙碌的后端或者是轻前端。
HEAD标签后被认为是是清除缓存的好的地方，因为HTML的head通常是容易准备的，并且允许浏览器并发下载HEADer中包含的任何CSS和Javascript文件，而此时后台仍旧忙于处理的过程中。
例子：
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->
Yahoo! search 先前的研究和实际用户的测试证明了使用这项技术的好处。
十六、
Use GET for AJAX Requests
tag: server
在AJAX请求中使用GET
标签：服务器
Yahoo! Mail的团队发现在使用XMLHttpRequest时，浏览器通过两步处理来实现POST方法：首先发送请求头，然后发送数据。所以最好使用GET方法，该方法只会发送一个TCP包（除非你有许多的cookies）。IE中URL的最大长度是2K，所以如果你要发送超过2K的数据时你可能不能再用GET方法。
一个有趣的负面效果是不带有任何数据的POST方法的行为就像GET一样。基于HTTP详细说明书，GET方法是为了取回信息，所以当你真的只是请求数据时，使用GET是有有意义（语义上）的，相反的是发送数据到服务器端去存储是无意义（语义上）的。
十七、
Post-load Components
tag: content
延迟加载组件
标签：内容
当你进一步观察你的页面时，你问自己："在最初渲染页面时，到底什么是必须？"其它的内容和组件是可以等待的。
Javascript是理想的候选者，可以分散在加载事件之前或者之后。例如如果你有用于拖拽，拖放和动画的Javascript代码和库，这些都是可等待的，以为拖拽页面上的元素是在初始渲染之后才能实施的。其它可选的可延迟加载的内容包括隐藏内容（在用户动作之后才出现的内容）和折叠组件下的图片。
可以帮助你省事的工具： YUI Image Loader允许你延迟加载折叠组件下的图片，YUI Get utility 是联机加载Javascript和CSS的好方法。作为一个实例你可以在开启Firebug网络面板的情况下查看原生的Yahoo! Home Page来进行验证。
当性能目标和其它的最佳实践方式保持一致时是好的。在这种情况下，逐步增强的想法告诉我们，在支持的情况下，Javascript可以提高用户的体验但是你也必须保证在没有Javascript的情况下页面也能正常工作。所以在你确定页面已经正常工作之后，你可以通过延迟加载的脚本来给你添加更多的花样如拖拽，拖放和动画。
十八、
Preload Components
tag: content
预加载组件
标签：内容
预加载可能看起来与延迟加载是对立的，但实际上它是针对不同的目标的。通过预加载组件你可以充分利用浏览器的空闲时间来请求你不久将要的组件（如图片，样式，脚本）。这样当用户浏览下一个页面时，你可能已经缓存了多数的组件，对于用户来说你的页面将加载的更快。
以下有几种预加载的方式：
无条件预加载—只要onload事件触发，你就会前去抓取额外的组件。例如检查google.com来了解一个精灵图片是如何在onload中被请求的。 google.com并不需要该精灵图片，但是在接下来连续不断的搜索结果页面中却是需要该图片的。
有条件预加载—基于用户动作你会对用户接下来要去哪做一个有根据的猜测，从而进行相应的预加载。在search.yahoo.com你会发现在你在输入框中输入文字后， 一些额外的组件是如何被请求的。
按期望的预加载————在再设计之前提前预加载。在再设计之后你经常会听到"新的站点很cool，但是比之前的站点要慢"。问题的一部分可能是 用户之前是在一个全缓存状态下浏览你的旧站点，但在空缓存状态下浏览你的新站点。你可以在重新加载新页面之前预加载其组件来缓解该副作用。 你的旧站点可以利用浏览器的空闲时间请求一些你的新站点会用到的一些图片，脚本。
十九、
Reduce the Number of DOM Elements
tag: content
家少DOM元素的数量
标签：内容
复杂的页面意味着要下载更多的字节并且同样会降低Javascript访问DOM的速度。例如，一次通过500个DOM元素添加一个事件和一次通过5000元素添加一个事件处理，这之间是有很大差别的。
大量的DOM元素可能预示着在不去除必要内容的前提下，一些页面内容应该得到改善。你正在使用嵌套的表格作为布局用途吗？你正在加入更多的<div>标签而仅是为了修复布局问题吗？可能存在更好的且更加语义化的方式来处理你的标签。
YUI CSS utilities提供好的布局帮助：grid.css可以帮助你进行总体布局，font.css和reset.css可以帮助你去除浏览器的格式设置。重新开始考虑你的标签存在着挑战，例如只有在有语义时才使用<div>，而不是把它渲染为一个新行。
DOM的数量可以很容易的进行测试，只要在Firebug的console下键入：
document.getElementsByTagName('*').length。
至于DOM的数量为多少时才能算多？检查一下类似的有较好标签设计的页面即可。例如 Yahoo! Home Page是一个复杂的页面但仍旧只有少于700个的HTML元素（HTML 标签）
二十、
Split Components Across Domains
tag: content
跨域分隔组件
标签：内容
分隔组件让你能够最大化并行下载。确保你使用的域名不要超过2-4个，由于DNS查询也会有损耗。例如，你在www.example.org 提供你的HTML和动态的内容，并且在static1.example.org 和 static2.example.org之间分隔你的静态内容。
要获取更多的信息，查看由 Tenni Theurer 和 Patty Chi.发表的 "
Maximizing Parallel Downloads in the Carpool Lane"。
二十一、
Minimize the Number of iframes
tag: content
减小iframes的数量
标签：内容
iframes允许HTML文档插入到它的父文档中。理解iframes的工作方式是十分重要的，只有这样我们才能更高效的利用iframes。
<iframe> pros:
帮助减少类似于徽章和广告这样的第三方内容
安全沙盒
并发下载脚本
<iframe> cons:
尽管空白，但都是花费昂贵的。
阻碍页面加载
非语义化Non-semantic
二十二、
No 404s
tag: content
拒绝404s
标签：内容
HTTP请求是宝贵的，所以产生一个HTTP请求然后获得一个无用的响应（例如：404没有找到）是完全不必要的并且这将在没有任何益处的情况下降低用户体验。
所以站点拥有一个有用的404s"Did you mean X?"，对于用户体验来说是极好的，但同时也浪费了服务器资源（如数据库，等等）。尤其糟糕的是当链接到外部Javascript的“链接“（link）坏掉，返回的结果是404。首先，这个下载会阻塞并发下载。紧接着浏览器可能尝试着解析404响应体就好像它（响应体）是正常的Javascript代码一样，并尝试发现响应体中有用的部分。
二十三、
Reduce Cookie Size
tag: cookie
减小Cookie的大小
标签：cookie
HTTP Cookie用于多种原因例如认证和个性化。在Web服务器和浏览器之间，关于cookie的信息是在HTTP头部中进行交换的。保持cookies的大小尽可能小是很重要这是为了降低对用户响应时间的影响。
要获取更多信息，请查看Tenni Theurer 和 Patty Chi发表的 "
When the Cookie Crumbles" 。该研究的精要是：
消除不必要的cookies
保持cookies的体积尽可能小，以降低对用户响应时间的影响
记住要在合适的域名级别下设置cookies，以避免对子域的影响。
设置一个合适的失效日期。过早的失效日期或者是马上消除cookies会提高用户的响应时间。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Best Practices for Speeding Up Your Web Site（转）
- [转]Best Practices for Speeding Up Your Web Site
- Best Practices for Speeding Up Your Web Site
- Best Practices for Speeding Up Your Web Site
- Best Practices for Speeding Up Your Web Site -- yahoo
- Best Practices for Speeding Up Your Web Site网页优化
- Best Practices for Speeding Up Your Web Site（一）
- Best Practices for Speeding Up Your Web Site（网站优化）
- Best Practices for Speeding Up Your Web Site
- Exceptional Performance : Best Practices for Speeding Up Your Web Site
- Best Practices for Speeding Up Your Web Site(6)
- Best Practices for Speeding Up Your Web Site--如何加速你的网站访问性能
- Best Practices for Speeding Up Your Web Site(2)
- 网站提速的最佳实践-Best Practices for Speeding Up Your Web Site，来自雅虎开发者网络
- Best Practices for Speeding Up Your Web Site(1)
- Best Practices for Speeding Up Your Web Site
- Best Practices for Speeding Up Your Web Site
- 【转载】Best Practices for Speeding Up Your Web Site
- Best Practices for Speeding Up Your Web Site
- Best Practices for Speeding Up Your Web Site