转 Web程序优化的最佳实践（网站内容篇）

四、可缓存的 AJAX

Ajax 常常被说起的一个好处就是因为其从后台服务器传输信息的异步性而为用户带来 的反馈的即时性。可是，使用 Ajax 并不能保证用户不会在等待异步的 JavaScript 和 XML 响应上花费时间。在不少应用中，用户是否须要等待响应取决于 Ajax 如何来使用。例 如，在一个基于 Web 的 Email 客户端中，用户必须等待 Ajax 返回符合他们条件的邮件

查询结果。记住一点，"异步"并不异味着"即时"，这很重要。

为了提升性能，优化Ajax响应是很重要的。提升Ajxa性能的措施中最重要的方法就是使 响应具备可缓存性，具体的讨论能够查看Add an Expires or a Cache-Control Header。 其它的几条规则也一样适用于Ajax： Gizp压缩文件，减小DNS查找次数，精简JavaScript，避免跳转，配置ETags

让咱们来看一个例子：一个 Web2.0 的 Email 客户端会使用 Ajax 来自动完成对用户地址 薄的下载。若是用户在上次使用过 Email web 应用程序后没有对地址薄做任何的修改， 并且 Ajax 响应经过 Expire 或者 Cacke-Control 头来实现缓存，那么就能够直接从上一 次的缓存中读取地址薄了。

必须告知浏览器是使用缓存中的地址薄仍是发送一个新的请 求。这能够经过为读取地址薄的 Ajax URL 增长一个含有上次编辑时间的时间戳来实现， 例如，&t=11900241612 等。若是地址薄在上次下载后没有被编辑过，时间戳就不变，则从浏览器的缓存中加载从而减小了一次 HTTP 请求过程。若是用户修改过地址薄，时间 戳就会用来肯定新的 URL 和缓存响应并不匹配，浏览器就会重要请求更新地址薄。 即便你的 Ajxa 响应是动态生成的，哪怕它只适用于一个用户，那么它也应该被缓存起 来。这样作可使你的 Web2.0 应用程序更加快捷。

五、推迟加载内容

你能够仔细看一下你的网页，问问本身"哪些内容是页面呈现时所必需首先加载的？哪 些内容和结构能够稍后再加载？ 把整个过程按照onload事件分隔成两部分，JavaScript是一个理想的选择。例如，若是 你有用于实现拖放和动画的JavaScript，那么它就以等待稍后加载，由于页面上的拖放 元素是在初始化呈现以后才发生的。其它的例如隐藏部分的内容（用户操做以后才显现 的内容）和处于折叠部分的图像也能够推迟加载

工具能够节省你的工做量：YUI Image Loader能够帮你推迟加载折叠部分的图片，YUI Get utility是包含JS和 CSS的便捷方法。好比你能够打开Firebug的Net选项卡看一下Yahoo 的首页。

当性能目标和其它网站开发实践一致时就会相得益彰。这种状况下，经过程序提升网站 性能的方法告诉咱们，在支持JavaScript的状况下，能够先去除用户体验，不过这要保 证你的网站在没有JavaScript也能够正常运行。在肯定页面运行正常后，再加载脚原本

实现如拖放和动画等更加花哨的效果。

六、预加载

预加载和后加载看起来彷佛偏偏相反，但实际上预加载是为了实现另一种目标。预加 载是在浏览器空闲时请求未来可能会用到的页面内容（如图像、样式表和脚本）。使用 这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因 此能够大大改善访问速度。

下面提供了几种预加载方法：

无条件加载：触发 onload 事件时，直接加载额外的页面内容。以 Google.com 为例，你 能够看一下它的 spirit image 图像是怎样在 onload 中加载的。这个 spirit image 图 像在 google.com 主页中是不须要的，可是却能够在搜索结果页面中用到它。

有条件加载：根据用户的操做来有根据地判断用户下面可能去往的页面并相应的预加载 页面内容。在 search.yahoo.com 中你能够看到如何在你输入内容时加载额外的页面内容。

有预期的加载：载入从新设计过的页面时使用预加载。这种状况常常出如今页面通过重 新设计后用户抱怨"新的页面看起来很酷，可是却比之前慢"。问题可能出在用户对于 你的旧站点创建了完整的缓存，而对于新站点却没有任何缓存内容。所以你能够在访问 新站以前就加载一部内容来避免这种结果的出现。在你的旧站中利用浏览器的空余时间

加载新站中用到的图像的和脚原本提升访问速度。

七、减小DOM元素数量

一个复杂的页面意味着须要下载更多数据，同时也意味着JavaScript遍历DOM的效率越 慢。好比当你增长一个事件句柄时在 500 和 5000 个DOM元素中循环效果确定是不同的。

大量的DOM元素的存在乎味着页面中有能够不用移除内容只须要替换元素标签就能够精 简的部分。你在页面布局中使用表格了吗？你有没有仅仅为了布局而引入更多的<div> 元素呢？也许会存在一个适合或者在语意是更贴切的标签能够供你使用。

YUI CSS utilities能够给你的布局带来巨大帮助：grids.css能够帮你实现总体布局， font.css和reset.css能够帮助你移除浏览器默认格式。它提供了一个从新审视你页面 中标签的机会，好比只有在语意上有意义时才使用<div>，而不是由于它具备换行效果 才使用它。

DOM元素数量很容易计算出来，只须要在Firebug的控制台内输入：

document.getElementsByTagName('*').length

那么多少个DOM元素算是多呢？这能够对照有很好标记使用的相似页面。好比Yahoo!主 页是一个内容很是多的页面，可是它只使用了 700 个元素（HTML标签）。

八、根据域名划分页面内容

把页面内容划分红若干部分可使你最大限度地实现平行下载。因为DNS查找带来的影 响你首先要确保你使用的域名数量在 2 个到 4 个之间。例如，你能够把用到的HTML内容和动态内容放在www.example.org上，而把页面各类组件（图片、脚本、CSS)分别存放 在statics1.example.org和statics.example.org上。

你可在Tenni Theurer和Patty Chi合写的文章Maximizing Parallel Downloads in the

Carpool Lane找到更多相关信息。

九、使 iframe 的数量最小

ifrmae 元素能够在父文档中插入一个新的 HTML 文档。了解 iframe 的工做理而后才能更 加有效地使用它，这一点很重要。

<iframe>优势：

 

• 解决加载缓慢的第三方内容如图标和广告等的加载问题

• Security sandbox

• 并行加载脚本

<iframe>的缺点：

• 即时内容为空，加载也须要时间

• 会阻止页面加载

• 没有语意

十、不要出现 404 错误

HTTP 请求时间消耗是很大的，所以使用 HTTP 请求来得到一个没有用处的响应（例如 404 没有找到页面）是彻底没有必要的，它只会下降用户体验而不会有一点好处。

有些站点把 404 错误响应页面改成"你是否是要找***"，这虽然改进了用户体验可是 一样也会浪费服务器资源（如数据库等）。最糟糕的状况是指向外部 JavaScript 的链 接出现问题并返回 404 代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在

返回的 404 响应内容中找到可能有用的部分看成 JavaScript 代码来执行。