电子商务系统前端性能优化的研究与实现 陈韵晴 - 图文

图4-10

在浏览器中运行（图4-11），显示效果与优化前是一模一样的，加载请求所需的全部时间为1.2s（onload 2.03s），共发送29个HTTP请求，比优化前少一个，因为只合并两个图片，优化的效果并不是很明显，另外加载时间也受到网速变化的一些影响。

图4-11

4.2.2 缓存优化

本系统开发所用的MyEclipse自带的Tomcat配置默认使用缓存，可以跟Apache使用的Mod_expire模块那样对http头信息进行设置，首次访问见图4-12。

图4-12

Tomcat服务器通过“Etag”和“Last-Modified”头信息使浏览器缓存资源。

图4-13

图4-13再次访问时浏览器通过“If-Modified-Since”和“If-None-Match”头信息发送给服务器进行缓存版本的判断。

如果服务器不是默认缓存，也可以通过ExpiresFilter来设置响应的Expires头信息20。

4.2.3 压缩优化

我们到Chrome去测试压缩的前后变化。优化前如图4-14，共传输784KB数据量，其中HTML是29.2KB，CSS是34.7KB和11.5KB，JS文件459KB、94.3KB、2.3KB，还有图片压缩等等。

图4-14

到Tomcat根目录下找到server.xml配置文件，开启压缩。找到，加上后面3行代码（图4-15）来控制压缩的支持。这里对CSS文件、HTML文件、JS文件开启了压缩，图片因为压缩量较小，暂不开启。

图4-15

优化后如图4-16，通过“Accept-Encoding”使用资源相应的压缩版本。共传输316KB数据量，节省了超过原来数据量的一半（316KB ：784KB），其中HTML是3.4KB，CSS是8.5KB和2.4KB，JS文件113KB 、33.4KB、1KB，还有图片压缩等等。

图4-16

4.2.4 页面元素优化

到Chrome测试页面元素优化的前后变化。优化前如图4-17，CSS和JS文件在最后才加载，页面显示明显迟缓。