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

Posted 2020-06-22 麒麟阁

4、可缓存的 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 应用程序更加快捷。

5、推迟加载内容

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

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

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

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

6、预加载

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

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

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

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

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

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

7、减少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标签）。

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

把页面内容划分成若干部分可以使你最大限度地实现平行下载。由于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找到更多相关信息。

9、使 iframe 的数量最小

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

<iframe>优点：

 

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

• Security sandbox

• 并行加载脚本

<iframe>的缺点：

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

• 会阻止页面加载

• 没有语意

10、不要出现 404 错误

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

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

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