Web工程前端性能优化

李晓峰

(昆明船舶设备研究试验中心人力资源部，云南昆明 650000)

随着互联网技术的发展，越来越多的企业和政府搭建了门户网站。Web应用为了提升页面利用率和用户交互性体验，网页容量不断被加大，并在网页中应用大量JavaScript代码及其框架技术［1］。这种变化，一方面使网页的表现力更强，层次更丰富。但另一方面，复杂的实现、漂亮的界面背后隐藏的是增加客户端流量、影响到网页在浏览器中的解析效率、直接延迟了网页加载时间，给客户端性能带来了压力的同时，且破坏了用户的整体体验［2］。针对这一问题，本文从HTTP请求数目及网页元素两个方面着手，对Web工程的前端性能提出了若干优化方法，希望能对网站搭建的相关从业人员有所帮助。

1 Web前端优化相关原理

客户端完成通信通常需要HTTP协议和TCP协议。HTTP协议是Web应用层协议，其是Web的核心。通过对HTTP协议进行的一些研究［3－4］分析，提出了一些修改方法以降低检索的延时，但在检索延时对加载速度影响较小的情况下，实际应用价值则较小。但HTTP本身依然决定着Web的通信形式，影响着Web前端的行为。HTTP协议一般由两部分程序实现:一个客户机程序和一个服务器程序，其分别运行在不同端的系统中，通过HTTP报文的交换来进行会话，HTTP协议规定了这些报文的格式以及客户机和服务器的交换行为。TCP作为HTTP的底层传输协议［5］，当HTTP客户端发起一个与服务器的TCP连接，建立连接时，浏览器和服务器进程便可通过套接字访问TCP。TCP为HTTP提供了一个可靠的数据传输服务，所以一个客户端进程发出的每个HTTP请求报文最终均能完整的到达服务器。同样，服务器发出的每个HTTP响应报文也能完整到达客户端。

HTTP协议的客户端/服务器请求响应机制程序，包含下面几个步骤:

(1)发起请求。客户端向服务器发起HTTP请求，如打开一个URL地址。

(2)建立连接。客户端对URL地址进行域名解析后找到服务器IP，并与服务器建立TCP连接。浏览器通过发送一个TCP包，要求服务器打开连接，服务器也通过发送一个包来应答用户的浏览器，告知浏览器连接已打开。

(3)发送请求。打开连接后，客户端发送请求信息到服务器端的相应端口上，完成请求动作提交。

(4)发送响应。服务器在处理完客户端请求之后，向客户端发送响应消息。

(5)关闭连接。结束TCP/IP对话是通过客户端和服务器端关闭套接字来实现的。

由图1所示，用户在获取一个页面时，分别经历的等待时间是:域名解析时间，即客户端解析域名寻找服务器IP所需的时间;TCP建立连接时间，客户端服务器建立连接时TCP3次连接时间;HTTP请求响应时间，HTTP请求发送与服务器对该请求的响应时间;响应传送时间，服务器响应了请求后，将所请求的内容下载到客户端的时间;客户端解析和响应时间，客户端得到响应后解析显示出的时间。本文主要从服务器响应传送时间与客户端解析的响应时间两方面着手，分析介绍了一些Web工程前端的优化方法。

图1 HTTP协议的客户端/服务器请求响应流图

2 Web前端优化方法

2.1 HTTP请求优化

HTTP请求优化是指减少页面的HTTP请求数目，即通过减少与服务器的连接次数来降低网页响应延迟。通常一个功能完善的网页需引入JavaScript、CSS、背景图片等［6］大量的外部文件。但由于HTTP协议不具备状态性，每一次访问均需要客户端重新发送请求至服务器。要呈现整个页面，页面上的每个组件均要向服务器重新发送一次HTTP请求，这些组件所产生的大量请求累加是影响网站速度的主要原因。减少网页元素是一个行之有效降低请求数目的方法，但在网页内容丰富的今天，通过削减网页元素带来的网页功能性下降是不可接受的。于是就出现了两种网页元素合并方法，分别是样式表(CSS)、脚本JavaScript合并压缩技术与CSSSprites技术。

2.1.1 样式表和脚本合并压缩

样式表CSS和脚本JavaScript是Web网页的表现和行为，其共同决定着网页表现样式、网页效果及网页的交互特征，这是网页中必不可少的元素。随着Web系统架构的复杂化，Web前台系统开发也日益复杂。Web前台架构也逐渐的呈现出分层思想，将CSS与JavaScript分为3 层结构［7］，分别是 base层、common 层和page层。其中，base层位于最底层，负责封装不同浏览器对于CSS与JavaScript解析的差异，提供统一的接口，并扩展底层接口，为common层和page层提供易用的接口。common层使用base层提供的接口，为page层提供可复用的组件。page层位于3层的最顶端，与页面的具体需求相关联。随着Web前端架构的发展，复杂化的Web前端架构使Web前端工程师的分工更加明显，同时减少了不必要的重复性代码。但同时，网页需引入的CSS与JavaScript文件个数却增加了，即增加了HTTP请求数目。

Google公司与 Yahoo公司分别开发了 Google Closure Compiler与YUI Compiler工具用于样式和脚本的压缩。这两个工具均是基于java的jar包。一般情况下，用Google Closure Compiler压缩JavaScript脚本，用YUI Compiler压缩样式表CSS。

压缩样式表和脚本文件可减少其大小，合并样式表和脚本文件可有效减少HTTP请求数目从而减少网页下载时间。合并压缩方式在CSS与JS资源越复杂的情况下，能得到显著的优化效果。

2.1.2 CSSSprites技术

CSSSprites技术是一种网页图片应用处理方式［8］，是将一个页面涉及到的所有零星图片均包含到一张大图中去，将诸多零星图片对应的众多HTTP请求变成一个大图所对应的一个HTTP请求。该方法有效降低了页面的HTTP请求数目，且在页面被访问时，载入的图片不会像以前那样每幅缓慢的显示，视觉效果更优。

2.2 网页元素优化

通常，Web统用80%以上的时间来加载页面组件［9］，而对于个体页面，在这80%以上的时间中又只用了10% ～20%的时间来下载HTML文档，剩下的时间均用于下载网页中的其他元素，如大量的图片、JavaScript文件等。但HTML文档与网页元素是相辅相成的，如何在不改变网页本身设计，不降低网页质量的情况下，对网页进行合理优化来加快网页的下载速度。针对这一问题，网页元素优化被提出，其主要包括Web工程中HTML的优化，JavaScript的优化和CSS样式表的优化。

2.2.1 HTML优化

在前端的构成中，HTML是必不可少的一部分，且是真正的展示“前端”。HTML文档包括用于组织网页结构的HTML代码，引入或内嵌的CSS及JavaScript代码等［10］。则对于HTML优化的主要方法有:

(1)标签语义化。现如今 Web标准均被称做“DIV+CSS”或“层布局”，标准的主导思想是使用样式表CSS来控制网页中各元素的表现形式，包括位置、颜色、大小等。这种布局一定程度上弱化了标签的布局能力，将布局完全放到了样式中进行控制。这同时使网页布局陷入大量的使用＜DIV＞标签作为结构元素的误区。这是一种样式表CSS的滥用。

HTML提供了相当丰富的标签，各标签均有各自的含义。应充分利用并遵守各标签的“语义”。如表格形式的数据应仍用TABLE布局，大段的文字内容应由＜P＞进行分段而不是＜BR/＞，列表项应放在UL或OL或DL中。这样做的原因是保证在用户去掉CSS显示的情况下，网页能尽量有效地将内容的结构层次显示出来。若全部用＜DIV＞，当去掉CSS后，整个网页就失去了层次，只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。“DIV+CSS”布局方式具有代码量少、结构精简、语义清晰等优点，标签语义化则对搜索引擎更加友好。

(2)CSS与JavaScript文件外链。在HTML页面中通常引用CSS、JavaScript代码或文件来使页面更生动丰富。HTML页面引用CSS或JavaScript代码有3种方式:内嵌式、内联式和外链式。内嵌式、内联式是将相关代码写入HTML文件中，外链式通过将CSS或JavaScript代码打包后在相关网页中引用。一般HTML文档在页面加载时总是会重新刷新，页面中的内容均会重新加载，内嵌式、内联式写入的内容也一同重新加载。而当CSS与JavaScript文件外链后，便可对该组件进行缓存，页面再次加载时会大幅减少下载组件时间。文件外联对页面的优化是显然易见的，甚至前文中介绍到的压缩等方式均要求组件内外链式。

2.2.2 JavaScript优化

与CSS样式表类似，页面在加载脚本时，所有位于脚本后的内容均会被阻塞。如今，网页使用的HTTP协议为HTTP1.1，其规定浏览器在下载脚本时，并行下载是被禁止的。这表示页面在下载脚本时是依次下载的，会占用相对多的时间，当脚本处于页面顶部时，加载脚本所带来的效果是页面会停止渲染，出现渲染空白。将脚本放在网页底部比置于页面顶部的效果好，且脚本较多时效果更佳。

2.2.3 CSS优化

CSS样式表决定了网页的展现方式，定义了网页中元素的位置，大小与效果，对呈现良好视觉的网页有重要作用。CSS优化的主要方法有:

(1)将CSS放到页面顶部。网页中的诸多元素，如图片、脚本等是网页下载中必须的，而CSS样式表为网页中的组件提供了其表现样式、位置和格式信息。网页在加载页面内容时一般情况下是顺序解释执行的，即网页元素是按照其在网页中的顺序下载的。而理论上若将样式表放到页面的最后位置，则网页中的其他组件便可优先下载，这可使得除了网页样式外的其他元素尽早展现给用户。但若将样式表放在底部后，会导致浏览器组织网页内容的逐步呈现，为了避免样式变化时浏览器重绘页面，浏览器会阻塞内容的逐步呈现。在用户的视觉回馈中，样式表放在底部响应要比样式表放在顶部慢。所以一般情况下，样式表CSS应放到页面顶部。

(2)避免CSS表达式。CSS表达式是一种使用动态设置CSS属性的方式。但CSS表达式所带来的严重性能问题:为了确保有效性，CSS表达式会进行频繁的求值，改变窗口大小、滚动页面甚至移动鼠标均会触发表达式进行求值，如此频繁的求值会导致浏览器的性能受到严重影响。CSS表达式虽强大，但会给浏览器带来严重的性能问题，拖慢网页的加载速度，在可能的前提下，应尽量避免使用CSS表达式。

3 结束语

介绍了Web工程前端优化的相关原理，主要从服务器响应传送时间与客户端解析的响应时间两方面着手，分别从HTTP请求优化，网页元素优化两个方面，介绍了几种实用的Web前端优化方法，并分析了各方法在具体工程中使用应注意的事项。在不改变后台数据及网页本身的情况下，提高了Web系统进行性能。

［1］中国互联网络信息中心.第34次中国互联网络发展状况统计报告［R］.北京:中国互联网络信息中心，2014.

［2］Zona Research.The economic impacts of unacceptable web －site download speeds［R/OE］.(2011－12－11)［2014－10－05］http://www.motc.gov.tw/service.

［3］Mogul J C.The case for persistent－connection HTTP［C］.Boston:Proceedings of the ACM Sigcomm Conference，1995.

［4］Padmanabhan V N，Mogul J C.Improving world wide web latency［M］.California:Computer Science Division，1995.

［5］Kurose JF，Ross K W.计算机网络［M］.陈鸣，译.北京:机械工业出版社，2009.

［7］曹刘阳.编写高质量代码Web前端开发修炼之道［M］.北京:机械工业出版社，2010.

［6］Souders S.High performance web sites:essential knowledge for front－end engineers［M］.America:O'Reilly Media，2007.

［8］Huisong W，Jun W，Qun D，et al.A new approach to constructing CSScodes based on factor graphs［J］.Information Sciences，2007，178(7):1893 －1902.

［9］King A B.Website optimization:speed，search engine ＆ conversion rate secrets［M］.America:O'Reilly Media，2008.

［10］桑德斯，刘彦博.高性能网站建设指南［M］.北京:电子工业出版社，2008.