如何提高页面响应速度？

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

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

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

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

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

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

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

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

让网站响应便快的方法

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

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

页面中尽可能少的包含其他外部引用，减少文档之间的依赖。（可以将多个脚本放入一个脚本文件，用CSS的sprite技巧将多个小图片合并为一个大图，这样就只需要加载一次）
确保你没有从外部服务器上引用第三方的内容：用一个脚本将远程的RSS源缓存在本地。这样不仅可以避免DNS解析所造成的延时，而且也不会因为外部服务器的宕机影响你的服务。

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

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

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

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

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

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

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

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

解决页面加载的问题

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

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

解析HTML代码装载外部脚本