发布时间 : 星期一 文章电子商务系统前端性能优化的研究与实现 陈韵晴 - 图文更新完毕开始阅读
图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配置文件，开启压缩。找到
图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文件在最后才加载，页面显示明显迟缓。