Web性能优化前端方案研究

摘要：分析了某地区设施葡萄害虫诊断与防治专家系统在Web性能方面存在的问题，对一般Web页面请求原理和过程进行了分析，提出了从输入URL到页面呈现需要的5个步骤，并且对这5个步骤进行了剖析，指出了导致网页响应变慢的环节，简要总结了Web前台的性能优化方案，并给出了相应建议。

关键词：Web性能优化；响应时间；页面请求原理；Web前台

中图分类号：TP393 文献标识码：A 文章编号：1672-7800（2013）005-0116-02

0、引言

徐州地区设施葡萄害虫诊断与防治专家系统是通过Internet向广大用户提供专家的分析诊断服务。该系统运行后不久，用户反映系统的打开速度很慢，这里首先排除网络带宽和服务器硬件性能方面的因素，到底是什么原因造成的呢？为缩短页面的响应时间，改进用户体验，笔者首先使用工具查看了系统页面加载时间情况，如图1所示。

对图1进行分析，可以看到，加载HTML文档只占了总响应时间的5%，其它95%响应时间用来下载JavaS-cript、CSS和图片等组件。所以本专家系统Web前端方面有很大的优化空间，因此，笔者将从Web的前端优化方面给出Web的性能优化方案。

1、页面请求原理和过程分析

从输入URL到页面呈现需要如下5个步骤：①输入URL地址或者点击URL的一个链接；②浏览器根据URL地址，结合DNS解析出URL对应的IP地址；③发送HTTP请求；④开始连接请求的服务器并且请求相关的内容；⑤浏览器解析从服务器端返回的内容，并且把页面显现出来。

上述基本上就是一个页面从请求到实现的基本过程，下面来剖析这个过程。

当输入URL之后，浏览器就要知道这个URL对应的IP是什么，只有知道了IP地址，浏览器才能准确把请求发送到指定的服务器的具体IP和端口号上面。浏览器的DNS解析器负责把URL解析为正确的IP地址。这个解析的工作是要花时间的，而且在这个解析的时间段内，浏览器不能从服务器那里下载到任何东西。浏览器和操纵系统提供了DNS解析缓存支持。

当获得了IP地址之后，浏览器就向服务器发送HT—TP的请求，过程如下：①浏览器通过发送一个TCP的包，要求服务器打开连接；②服务器也通过发送一个包来应答客户端的浏览器，告诉浏览器连接打开了；③浏览器发送一个HTTP的GET请求，这个请求包含了很多的东西，例如我们常见的Cookie和其它的head头信息。这样，一个请求就算是发过去了。

请求发送去之后，服务器端的程序把最后的结果发送到客户端。

其实首先到达浏览器的就是HTML文档，是纯粹的HTML代码，不包含图片、脚本、CSS等，也就是页面的HTML结构，因为此时返回的只是页面的HTML结构。这个HTML文档发送到浏览器的时间极短，一般只占整个响应时间的10%左右。

之后，页面的基本框架就在浏览器中，下一步为浏览器解析页面的过程，一步步从上到下解析HTML的框架。

如果此时在HTML文档中，遇到了img标签，那么浏览器就会发送HTTP请求到这个img响应的URL地址去获取图片，然后呈现出来。如果在HTML文档中有很多的图片、flash，那么浏览器就会一个个地请求，然后呈现，如果每个图片都要请求，那么就要进行之前所说的那些步骤：解析URL、打开TCP连接等。打开连接也需要消耗资源，就像在进行数据库访问一样，也需尽可能少开数据库连接，多用连接池中的连接。道理一样，TCP连接也是可以重用的。HTTP 1.1提出了持久连接（PersistentConnection）的概念，也就是说同一条HTTP连接可以同时处理多个请求，减少TCP连接。

当页面的HTML框架载入之后，浏览器就开始解析页面中的标签，从上到下开始解析。

首先是head标签的解析，如果发现在head中有要引用的JavaScript脚本，那么浏览器此时就开始请求脚本，此时整个页面的解析过程即停止下来，一直到JavaScript请求完毕。之后页面接着向下解析，如解析body标签，如果在body中有img标签，那么浏览器就会请求img的src对应的资源，如果有多个img标签，那么浏览器就一个个解析，解析不会像JavaScript那样等待，会并发下载。

2、Web前台优化规则

2.1 尽量减少HTTP请求

有几种常见的方法能切实减少HTTP请求：①合并脚本和样式文件，如可以把多个CSS文件合成一个，把多个JavaScript文件合成一个；②CSS Sprites利用CSSbackground相关元素进行背景图绝对定位，把多个图片合成一个图片。

2.2 使用浏览器缓存

在用户浏览网站的不同页面时，很多内容是重复的，比如相同的JavaScript、CSS、图片等。如果能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。

根据服务器端的响应header，一个文件对浏览器而言，有几级不同的缓存状态：①服务器端告诉浏览器不要缓存此文件，每次都到服务器上更新文件；②服务器端没有给浏览器任何指示；③在上次传输中，服务器给浏览器发送了Last-Modified或Etag数据，再次浏览时浏览器将提交这些数据到服务器，验证本地版本是否最新，如果为最新则服务器返回304代码，告诉浏览器直接使用本地版本，否则下载新版本。一般来说，有且只有静态文件，服务器端才会给出这些数据；④强制要求浏览器缓存文件，并设置了过期时间。在缓存未到期之前，浏览器将直接使用本地缓存文件，不会与服务器端产生任何通信。我们要做的是尽量强制浏览器到第4种状态，特别是对于JavaS-cript、CSS、图片等变动较少的文件。

2.3 使用压缩组件

IE和Firefox浏览器都支持客户端GZIP。传输之前，先使用GZIP压缩再传输给客户端，客户端接收之后由浏览器解压，这样虽然稍微占用了一些服务器和客户端的CPU，但是换来的是更高的带宽利用率。对于纯文本来讲，压缩率是相当可观的。如果每个用户节约50%的带宽，就可以服务多一倍的客户，并且缩短了数据的传输时间。

2.4 图片、JavaScript的预载入

预载入图像最简单的方法是在JavaScript中实例化一个新Image（）对象，然后将需要载入的图像的URL作为参数传人。同时可以在登录页面预载入JavaScript和图片（见图2）。

2.5 将脚本放在底部

脚本放在顶部会带来如下问题：①使用脚本时，对于位于脚本以下的内容，逐步呈现将被阻塞；②在下载脚本时会阻塞并行下载。

放在底部可能会出现JavaScript错误问题，当脚本没加载进来，用户就触发脚本事件。所以要综合考虑各种可能情况。

2.6 将样式文件放在页面顶部

如果样式表任意加载，构建呈现树就是一种浪费，样式文件放在页面底部可能会出现两种情况：①白屏；②样式内容的闪烁。

2.7 使用外部的JavaScript和CSS

将内联的JavaScript和CSS做成外部的JavaScript、CSS。减少重复下载内联的JavaScript和CSS。

2.8 精简JavaScript

可以做到两个级别：①精简：从代码中移除不必要的字符以减少其大小；②混淆：在精简的同时，还会改写代码，函数、变量名被转换成更短的字符串。可以使用ShrinkSafe来精简JavaScript。

2.9 精简CSS

从代码中移除不必要的字符以减少其大小，可以使用CSS Compressor。

2.10 精简图片、flash

对大图片、flash，要在效果和大小之间做出平衡。

3、结语

本文总结的Web前端优化技术适用于绝大多数Web应用，本专家系统在进行相应的前台优化后，页面打开速度显著提高。Web技术是一项综合性技术，包括前台、后台（服务器）、数据库、硬件和网络等多方面，因此Web性能优化包括的内容也必然变得复杂。后台程序的优化和数据库的优化这里暂不讨论，笔者在《浅谈.Net Framework下的高性能Web开发》一文中进行了分析，感兴趣的读者可以查看。