高并发网站的前端优化技术研究*

郑逸凡

(福州外语外贸学院,福建 福州 350202)

高并发网站的前端优化技术研究*

郑逸凡

(福州外语外贸学院,福建 福州 350202)

随着web开发技术的提高，高并发网站已经越来越多了，如何给用户的客户端即浏览器更好的访问体验、更快的访问速度是一个重要的技术问题.该文从影响高并发网站访问速度的因素、前端优化的技术原理和手段等方面阐述了高并发网站的前端优化技术特点，以及常用的几种前端优化手段.

高并发网站；前端优化

1 网站优化的重要性

网站的访问速度对于一个高并发网站来说非常重要，如果网站的页面加载速度非常快、对于用户的操作可以及时响应，那么该网站的用户体验将会极大地提升.图1显示了页面加载速度对于用户体验的影响.

图1 页面加载速度对于用户体验的影响

高并发网站因为同一时间内有大量用户进行访问，为了给用户更好的访问体验，在设计网站的时候不但要做到布局合理、图片美观、人性化设计，而且要解决的一个关键问题就是：如何使网站的加载速度变快，如果网站加载速度太慢，页面设计得再漂亮，最终用户也会流失.

2 影响网站访问速度的因素

不管网站的大小如何，其最终的载体是计算机，而计算机的本质是计算和存储，计算主要由CPU负责，存储介质主要有内存和硬盘.对于网站而言，网络也是存储介质的一种，网络传输速度的快慢直接影响到整个网站的并发速度.

网站的业务逻辑比较简单，但是随着网站规模的扩大，业务模式越来越丰富，此时网站在某些业务环节不可避免地变得复杂，假如这些复杂的业务又需要实时地反应给用户，那么CPU不能快速完成业务计算就成为影响网站效率问题的根源，例如海量数据的计算操作就是这样的场景之一.

对于海量的数据，网站静态化技术中的ESI技术是解决存储效率问题的有效方法，其基本原理是：通过CPU将结果提前计算出来，然后将结果存储在效率更高的存储设备，例如内存，当用户请求操作这个业务计算时只需要直接读取缓存中的计算结果就行了，这样就避免了计算，同时计算结果存储在效率高效的缓存中，用户获得响应的速度也会更快.

相比计算和存储，高并发网站的网络传输效率就差多了，图2显示了某网站的网络请求的方法、状态、内容大小和时间延迟等信息.

图2 网络请求信息

因此，前端优化技术大部分都是围绕如何解决网络传输效率来进行的，因为它是高并发网站访问速度最大的短板，只有解决了这个短板，再去解决其他因素的效率问题，才能发挥其作用.

3 前端优化的技术原理

网站的传输技术是构建在HTTP协议上，HTTP协议作为一种REST架构风格的架构实例，基于REST的架构的过程视图如图3.

图3 基于REST的架构的HTTP传输过程视图

HTTP协议底层通讯手段使用的是TCP/IP协议，但是TCP传输协议在建立连接和断开连接这两个动作上是非常消耗传输性能的，这主要是因为TCP/IP协议在连接建立时的三次握手机制和断开连接时的四次挥手机制所致.

可以通过使用多个连接进行并行加载，由于早期浏览器在HTTP1.0和HTTP1.1连接数的差异[1]，某些网站例如维基百科这样的网站，它的静态资源特别多，为了充分发挥并发的优势，它将存放这些静态资源的服务器采用HTTP1.0协议，这样就能并行加载更多的静态资源，因为这个并行加载的总体效率提升相比TCP/IP握手和挥手的损失要高得多.对主域名下的请求资源类型加以控制，把能迁移到单独服务器上的静态资源进行迁移，尽量让主域名下处理的请求都是包含业务逻辑的请求，这样就可以有效提升系统资源的使用率.

4 前端优化的主要手段

4.1 减少HTTP请求数

减少HTTP报文的数据大小可以提升网站对宽带的利用率，是一种节约网站运营成本的重要手段.用来压缩HTTP请求数据大小的手段很多，例如使用Gzip压缩HTTP请求、压缩图片，如图4所示.

图4 用Gzip压缩HTTP请求

压缩HTTP请求的另外一种方法是减少cookie存储数据的大小，cookie信息除了保存在浏览器端[2]，它还会包含在HTTP报文头里，每个HTTP请求响应都会带着cookie信息进行传递，所以cookie既可以被客户端操作，也能被服务端操作.如果滥用cookie，当cookie信息数据增加，意味着每次请求响应的数据量会增加，而这些信息可能大部分都不会被使用.因此，在网站架构的初始阶段，要提前设计cookie使用规范，在一定程度上规避cookie不合理使用导致的HTTP数据量变大的问题.

4.2 利用CDN技术

一般情况下，网站前端的数据都是从web服务器中获取，如果用户的客户端与网站的服务器端物理距离比较远，那么网站的访问速度就会变慢，主要影响因素有：传输距离、运营商、带宽等.可以通过使用CDN技术，将CDN节点分布在各地，当客户端发送请求到服务器端时，服务器会根据用户的地理区域信息，为用户分配最近的CDN服务器.一个典型的CDN网站架构如图5所示.

图5 利用CDN架构网站

通过CDN技术，利用本地缓存加速，提高了网站的访问速度和稳定性，消除了不同运营商之间互相通信的瓶颈问题，实现了跨运营商的网络访问，提高用户访问的质量.地理位置比较远的用户根据DNS负载均衡技术，智能选择距离最近的Cache服务器，加快远程访问的速度.通过生成服务器的Mirror(镜像)Cache服务器，远程客户端访问网站时，直接从镜像Cache服务器上读取数据，减少远程访问的带宽、减轻网络流量和原站点web服务器负载等功能.另外，CDN节点分布比较广，节点之间采取智能冗余机制，有效地降低了黑客入侵的风险和各种D.D.o.S攻击对服务器的影响.

4.3 添加Cache control和Expire

随着网站开发规模的扩大，越来越多的素材和资源被嵌入到网站页面中，其中包括文字、图片、javascript脚本、CSS样式表、flash动画等，所以，当客户端发送请求到服务器端时，由于资源的增加，从而造成请求次数的增加.可以通过设置Cache control来缓存这些资源文件，还可以设置Expire来指定特定类型的文件在浏览器中的缓存时间[3-4].一般情况下，在用户向服务器发送请求后的一段时间内，网站中的图片、CSS、flash等资源是不需要修改的.有了Cache以后,如果浏览器再次访问同一个地址，就不需要再从服务器下载这些文件，而是直接从Cache中读取，这样访问页面的速度会大大加快.一个典型的HTTP 1.1协议返回的HTTP报头信息如下.

HTTP/1.1 200 OK

Content-Type: image/webp

Content-Length: 3988

Date: Sun, 24 May 2015 16:01:32 GMT

Last-Modified: Thu, 21 May 2015 09:30:56 GMT

Expires: Wed, 21 May 2025 16:01:32 GMT

Cache-Control: max-age=315360000

可以在服务器端设置Cache control和Expire的值，例如，设置缓存30天过期的代码如下：

pHeader("Cache-Control: must-revalidate"); $offset = 60 * 60 * 24 * 30; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; Header($ExpStr);

4.4 减少DNS查询

网络传输大部分都是基于TCP/IP，IP地址是TCP/IP协议中的基础，但人们并不是直接通过IP地址来访问网站的，而是通过特定的域名来访问.DNS是一个域名系统，用户在访问网站时，在浏览地址栏中输入的网址就是一个域名，浏览器把域名交给DNS服务器，DNS服务器在接到请求后会返回给客户端一个IP地址，用户计算机再通过这个IP地址访问网站.

一次DNS查询的过程会消耗20～120毫秒的时间,在DNS查询的过程中，浏览器不会下载该域名下的任何文件，所以减少DNS查询，可以加快页面的加载速度.

4.5 对JS和CSS进行压缩

对页面的javascript和CSS代码进行压缩可以减少页面的字节数，从而提高页面的加载速度，另外，压缩JS和CSS还可以起到一定的保护作用.常用的压缩工具有Saltstorm出品的ESC、Rob Seiler的packer、Cruncher-Compressor等.另外还有一些网站提供了在线压缩的工具，比如：http://tool.oschina.net/jscompress.

当然，JS和CSS压缩带来的一个问题就是代码的可读性变差，因此，一般情况下，高并发网站采取的做法是在服务器端对JS和CSS进行压缩，这样开发人员就可以很方便地维护自己的代码.

5 小结

对于高并发网站来说，前端优化的很多技术和原理都是从如何提高网络的传输效率的角度提出的，但是这些技术在使用的时候还是有很多细节在里面，如果开发人员不能深入理解这些优化技术背后所隐藏的原理，很有可能顾此失彼，没有达到最佳的优化效果.本文通过分析影响网站加载速度的因素、前端优化的技术原理，提出了几点前端优化的实现手段，希望通过分析这些细节问题，能给其他开发人员一个启迪，更好地理解这些优化技术背后的原理，最终能更好地运用这些技术.

[1]阮晓龙.高校门户建设中Web前端技术[J].中国科技信息,2015(02):80-83.

[2]万虎,徐远超,孙凤芸,闫俊峰.面向大数据应用的众核处理器缓存结构设计[J].计算机工程与科学,2015(01):28-35.

[3]罗贵章.一种面向高负载Sakai系统的性能优化方案[J].计算机与现代化,2015(02):101-105.

[4]谢健.基于PHP的负载均衡技术的研究与改进[D].上海:华东理工大学,2015.

10.13877/j.cnki.cn22-1284.2015.08.002

2015-05-15

2014年福建省大学生创新训练项目“基于PC和移动终端的校园生活服务网站和APP设计”(201413762044)

郑逸凡，福建仙游人，讲师.

TP393

A

1008-7974(2015)04-0004-03