如何提高页面响应速度

访问速度缓慢的互联网已经成为过去,但页面能瞬时呈现也只是未来才会发生的事情。 Christian heilmann 的一些技巧，现在就可以令你的网站访问起来更为流畅。

页面首次访问时的延时是网站和 Web 应用设计中遇到的一个很重要的问题。用户总是感觉页面相应的不够快。

 
为什么用户会有这样的感觉？也许用户还保留多年前那种按分钟计费的接入网方式的使用习惯（现在的饭店或机场还保持那种接入方式）；也许是因为用户觉得 页面要有足够快的响应才能称得上所谓的信息高速路。但在我看来这是好莱坞的责任。在每部好莱坞的动作大片中：敲击一下键盘的同时，电脑屏幕上就会出现超高分辨率，有着密密麻麻数据显示的精美网站操作界面；而且网站上读取一部百科全书也不过短短几毫秒就可以完成。

但在现实生活中却完全不是这么回事,因为无论你如何尽量简化你的页面,延迟还是存在的。而且为了使页面更绚丽，通常会使用 flash，但如果滥用 flash 会严重影响页面的响应速度。作为网络应用，还必须保证页面元素的加载顺序，不会因为页面上未完全加载的元素被用户访问而造成异常。


哪些因素造成网站响应缓慢？

当谈到提高网站响应速度，最通常的做法就是尽可能的减少网站文件的尺寸。(这也导致针对 JavaScript 库文件大小的无休止的讨论，但最终也没什么结果。）实际上,有许多因素会影响到网页初次访问的响应速度:

HTML 文档的大小。  
页面中嵌入的脚本、图像、多媒体元素文档的大小。
HTML 页面的复杂程度。(浏览器可以很快的展现简单的页面)
用户的接入速度
会被页面访问的第三方内容所在服务器的访问速度。
网站域名及其页面包含的外部域名的 DNS 解析速度。
用户计算机的性能。(浏览器会因为系统消耗过多的资源在其他任务上而变得响应缓慢)。
服务器的相应速度。

除了以上的技术上的因素会导致网站响应变慢以外，还有一些人为设计上的因素。例如：为了避免页面加载过程中出现的页面区域错乱和无图像显示；页面被设计为需要页面内容完全加载完毕后才一起显示。

让网站响应更快的方法

经过实践，以下经验对于解决由于技术和人为因素造成网站响应变慢的问题会有所帮助。

在不影响页面显示质量的前提下，尽可能的优化 HTML 代码。（这包括在发布页面时，去掉 HTML 文档中的注释以及冗余的换行标记。但为了保证页面的可读性，这些代码还应当保留在源代码中）

页面中尽可能少的包含其他外部引用，减少文档之间的依赖。（可以将多个脚本放入一个脚本文件，用 CSS 的 sprite 技巧将多个小图片合并为一个大图，这样就只需要加载一次）

确保你没有从外部服务器上引用第三方的内容：用一个脚本将远程的 RSS 源缓存在本地。这样不仅可以避免 DNS 解析所造成的延时，而且也不会因为外部服务器的宕机影响你的服务。

尽可能的制定图片及包含图片的元素的尺寸。这样可以避免页面展现时由于图片陆续加载而造成页面元素跳动的现象。

在页面的末端加载大的脚本，这样页面的可以在大的脚本加载完成前展示出来。如果把大的脚本在页面头元素中加载，则浏览器会等到脚本完全加载完成后才显示页面内容。

web开发准则与提高响应速度

可惜上文提到的这些计巧与我们通常认为的 web 开发的准则有冲突。例如减少页面包含文件数量会造成产品的可维护性变差。为了使网站的不用页面（首页， 文章页，存档页）保持不同的页面风格最简单的方法是不同类型的页面的特殊的样式存放在他们各自的样式文件中。一个页面可以有一个最基本的样式文件，然后根 据页面的不同类型再包含该类型页面的指定的样式文件。

脚本的存放也可以用相同的方法，将功能相近的脚本放到一个文件中。这样有助于代码的维护。你不用察看所有的脚本代码就可以很快的找到你需要的函数。此外，将脚本加入到页面的主体部分通常被认为是不良的编码习惯，因为他将用户的行为控制逻辑嵌入的页面的结构中。

幸好有技术方案可以解决这些问题。

用一个包含来引用多个样式或脚本。

爱德华艾略特提出的解决方法是用一个 PHP 的脚本将多个 CSS 样式或脚本整理成单一的档案。这个脚本对于 javascript 还可以调用 Douglas Crockford’s 的 JSmin 进行压缩。这个脚本使用很简单，而且可以缓存归并后的文件，直到这些被归并的文件被修改。这就意味着当你修改被归并的某个文件后，脚本会自动重新打包缓存。这样就很简单的解决了代码维护和页面响应速度间的矛盾。

解决页面加载的问题

另一个棘手的问题是，嵌入在页面头元素的脚本，必要要等页面加载完成后才能被调用。这样就会有些延时 ，而且还会产生问题。

延时是由于浏览器加载，解析和展现文档的方式造成的。当你用 window的onload 事件加载脚本时，浏览器的处理顺序是这样的：

解析 HTML 代码装载外部脚本和样式表
执行被解析后的脚本

建立 HTML 的 DOM 树
装载图片和其它外部引用内容
页面装载完毕

在大多数情况下这样的加载会比较慢，而有些步骤需要提前。许多聪明的程序员致力于解决这个问题，不时的会有新的解决方案出现。大多数的 javascript 脚本都会有针对 onAvailable 或 onDocumentReady 的事件处理。这类事件会在部分文档装载完成后就会被触发，而 不用等到大量图片被加载。但通过实践和反复测试，针对旧的浏览器和操作系统并没有无懈可击的解决方案。但我相信只要我们继续努力，再加上那么点运气一定会 找到最终的解决方案的。

对于 web 应用由于调用未加载完成的元素而导致异常是很致命的问题。如果这类问题时发生在页面美化部分，则会有一些解决方法。

为了解决一次加载过多内容的问题，可以采按需分别加载内容。

为了更好的装饰页面一次载入大量的内容，往往会产生问题。大量的内容有可能是每个标签中都包含过多的文字或者是一个有四级的导航栏。运用 javacript 脚本可以很轻松的动态展示这些内容。但是如果脚本被禁用，则这些动态内容就会失去样式而被打乱，无法正确地展示，这当然不是一个好主 意。页面也没有必要一次将所有的动态展示内容都一次加载，这样会增加页面载入的负载。

解决方法是当用户触发标签时再用 javascript 动态的加载显示的内容。当用户关闭脚本后也会显示一个基本的静态文本。

用什么方法来加载额外的内容取决于你需要引用的是什么。最简单的方法是动态的生成脚本标签。这是一个很早就有的方法，被用来引入大量的 javascript 数据集或在页面加载后再引入脚本。

 

JavaScript代码

function pull(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'largeJavaScriptBlock.js';
document.getElementsByTagName('head')[0].appendChild(s);
}
window.onload = pull;

del.icio.us 页面就到这种方法来引入由 json 返回的数据。由于 json 返回的不过是一堆 javascript 代码，你可以在页面装载完成 后，生成 javascript 脚本标签包含这些代码；然后执行这些代码原来替换页面中某个元素的内容。Dishy 作为封装了 json 的对象可以让你很轻松 的完成这些。另一个列子是不太显眼的 Flickr 头像，Flickr 用 json 输出显示你最新相片，当用户禁用脚本，哪个位置显示的只是一个链接。

如果你要引入的是非 javascript 的内容，你可以使用 Ajax 或者 AHAH 或者 Hijax 或者其他不包含 xml 的 ajax（你愿意把称作什么名称都可以）。例如，一个用 ajax 实现的导航，它甚至可以根据用户需要可选择的加载更为复杂的界面。

 

Imaging trickery 图像显示技巧

最后一个方法的渊源会追溯到可能你还没开始接触网站开发时。那时浏览器大战中最为ie的竞争对手苦命的Netscape（但在我看来那时还是不错的） 浏览器支持一个自定义的 HTML 属性 ‘lowsrc’，这个属性可以指定一个小图片提前加载作为大图载入时的替代显示图片。这样即使用户的接入速度很慢， 也可以看到即将呈现图片的一个预览。

你可以重用这一想法，当页面加载时不要嵌入过大的图片而是载入更为规范化的小图片；等页面加载完成后再用大图片进行替换。你甚至可以简化到开始只载入背景色，然后等页面载入完成再用 javascript 或者 DOM 加载原图进行覆盖。

这种方法还适用于你需要从多个服务器取得许多不能被缓存的图片。（例如 gravatars）通常可以先载入一个占位的图片，等页面加载完成后再动态取得分散在其他服务器上的小图片。