基于前端的Web性能优化

彭玲玲+李诗莹+冯爽

摘 要

互联网的高速发展极大增强了用户与页面的交互，网站性能逐渐成为Web产品市场成败和评测网站用户体验的重要指标。文中基于Web前端，提出一种前端优化方案，在保持后台的代码及数据库不变的前提上，极大程度提升了Web站点的性能。

【关键词】前端 Web HTTP 性能优化

1 前言

信息技术的快速发展极大提高了用户对网站的期望值。对于用户而言，如何从站点中以最快速度获取所需内容是其评价Web前端性能的重要指标；对于网站提供者，如何在同一时间允许多用户访问并获得良好的用户体验是其工作中的一大痛点。因此，Web前端性能优化是一个重要研究课题。国外雅虎、微软、Google等公司对Web的优化都有不同的见解。国内腾讯、阿里巴巴等企业在这方面做了相关研究，比如网络协议本身的研究与优化及应用系统性能优化的研究。针对Web站点的性能优化，分为前端优化以及优化。本文提出了一种基于Web前端性能的优化方案，包括页面元素优化、缓存优化、以及HTTP请求优化。

2 优化方案

2.1 HTTP的请求优化

减少页面的HTTP请求数目是HTTP的优化核心内容，其基本思想是以减少站点与服务器的连接次数为代价来降低网页相应的延迟。CSS、JavaScript及背景图片等外部文件，是构成一个设计良好的网页不可或缺的因素。丰富多彩的网页内容能够吸引更多的用户，同时良好的用户体验和交互性更能增加用户的粘性。由于HTTP协议的无状态性，用户每访问一次站点，客户端都将重新向服务器请求所有的文件。而每个组件都须向服务器重新发送一次HTTP请求才能保证呈现整个网页页面，如此大量的HTTP重复请求极大程度影响了网站速度。减少HTTP的请求次数可以增加网页的稳定性，提高网页的加载速度。

通过CSS Sprites技术的改进来减少页面HTPP的请求次数。网页中加载的50%资源是图片，CSS Sprites技术是一种网页图片应用处理方式，其基本思想是将一个页面所涉及到的所有零散图片都包含在一幅大图中，从而将许多零散图片所对应的HTTP请求转变成一个大图所对应的HTTP请求。这种方法极大程度减少了页面的HTTP请求数量，当用户访问页面时，载入的图片会按照一幅大图集中呈现，而不再像以前那样一幅一幅地缓慢呈现，视觉效果极佳。

2.2 Web缓存优化

当用户第一次访问某Web页面时，每个组件都会向服务器发送HTTP请求以下载整个页面。但实际情况是，用户在一定时间内可能重复访问某页面，反复从服务器下载组件极大影响网站速度。试想如果在访问某页面时将下载的组件全部缓存起来，在后续第二次至更多次的访问时，浏览器直接从缓存数据中读取。从而避免不必要的HTTP请求，提升网页的响应速度。比如京东首页的加载，当第二次加载首页时，加载时间将会有50%的提升，这是因为网页中的一些资源被客户端缓存，在网页二次加载的时候可直接应用客户端缓存数据，而不需重新从远程服务器请求资源。

缓存优化旨在提高系统的利用率，是一种处于用户和Web服务器间的缓存机制。其基本内容是在现有的网络架构中增加一层，即将用户访问频次高的信息或内容放到附近或者是本地，在后续地访问中用户就可通过就近获取相关信息，从而直接向本地服务器获取网络资源。Web缓存通过信息的本地化来加快网页的浏览速度，极大程度上节省了网络带宽，减轻了服务器的负荷量，进一步加快了网页的浏览速度。

2.3 页面元素的优化

在对站点进行访问的时候，用户总是期待浏览器以最快的显示所内容，快速实现可视化反馈。组件的下载顺序通常是依照它们在文档中的顺序，而对于页面中极其重要的组件，如样式表和脚本等，合理优化这些页面元素将直接影响页面内容呈现的速度。页面元素的优化其中包括HTML优化，内嵌的CSS优化以及JavaScript的优化。

HTML优化包括：标签语义化，删除不必要的HTTP协议头，删除元素多余的默認属性等。CSS优化包括：将CSS文件放在文档head标签中以提升页面逐步渲染速度，编写高校的CSS选择符。JavaScript代码的优化包括：管理作用域，高校的数据存取，流控制，字符串优化。

3 小结

伴随着互联网的快速发展，网站的性能越来越受到重视。本文结合Web前端的构成，分别从HTTP请求、Web缓存、页面元素这三个角度详细论述了优化移动Web前端性能的方案，一定程度上提高了前端页面的性能。

参考文献

[1]Poggi，N，Carra，D，Gavalda，R，et al.A Methodology for the Evaluation of High Response Time on E-Commerce Users and Sales.Information Systems Frontiers，2014，16（05）：867-885.

[2]杨敏等译.Andrew B.King.Web站点优化[M].北京：机械工业出版社，2009.

[3]Huisong W，Jun W，Qun D.et al.A new approach to construing CSS codes based on factor graphs.Information Sciences，2007，178（07）：1893-1902.

[4]Barish G，Obraczke K.World wide web caching：Trends and techniques.Communicaiton Magazine，2000，38（05）：178-184.

[5]余以胜.移动终端Web页面的优化处理研究[J].计算机技术与应用，2014，40（07）：126-129.

作者单位

重庆文理学院软件工程学院 重庆市 402160endprint