2017年第5期 信息通信2017 (总第 173 期）INFORMATION&COMMUNICATIONS(Sum.No173)基于W e b前端的性能优化方案研究及应用 梁义涛，马青松，张猛，李永刚
(河南工业大学信息科学与工程学院，河南郑州450001)
摘要：针对Web前端性能低下的问题，通过分析Web的工作机制，分析影响前端性能优化的因素，并提出一个通用性强 的Web前端性能优化解决方案。结合案例“新型生猪养殖系统”进行性能优化实践，瓦面加载时间从优化前37.65s降低 到9.02s，页面加载时间减少76.04%，提升了用户体验。 关键词:Web前端；性能测试;Timeline；优化实践
中图分类号:TP302.7 文献标识码:A文章编号：1673-1131(2017)05-0103-02
〇引言
随着Web2.0概念的提出，Web不仅承载着信息发布平台的 角,Web技术逐渐转换为应用开发平台。研究表明，在网页加 载时间大于4s的情况下,25%用户会选择关闭网页，加载时间多 Is将导致页面访问量下降7%，顾客满意度降低16%[1]。调查机 构研究表明：网页加载速度影响用户消费體，若电商网站每
天 可盈利10万美元，那么Is延迟将导致网站每年利润下降250万 美元[a,Web前端性能影响用户体验及网站在同行业的竞争力。
国外互联网公司充分认识Web前端优化的重要性，投入 资源进行研究及实践。例如：Yahoo提出Yahoo性能优化34 条黄金法则，SteveSouders为Web开发者提供了提升Web系 统性能的方案和实践参考G oogle自主研发了 V8引擎来提 升Web性能，并开发了 Page Speed、Speed Tracer等性能分析 工具来衡量网页性能。国内在Web有效性和协议本身进行了 研究，性能优化研究较少。Web前端性能测试和诊断工具很 多，但方案大多立足于Web性能优化的特定领域，缺乏系统性 和通用性测试。本文以“新型生猪养殖系统”首页为例进行性 能测试i平价，并从不同角度进行优化。
1W e b性能优化相关理论
1.1 W eb工作机制
浏览器请求服务器的流程如下:①用户输入访问网址;② 客户端D N S服务器返回域名所指向网站IP地址;③P C客户 端向目标服务器发送HTTP请求;④服务器收到并解析HTTP 请求，根据U RL将目标文件及资源，生成HTML文档并发送 浏览器;⑤浏览器接受和解析服务器返回的HTML文档;⑥服 务器接收到浏览器请求资源文件的H TTP请求;⑦浏览器根 据请求的资源文件，进行repaints和reflows。
1.2减少H TTP请求
浏览器和服务器之间通过HTTP协议进行通信,HTTP请 求中包含大量的头部信息，减少HTTP请求的数量可以有效 的优化Web性能'使用CSS Sprites技术将小图片包含到一 张图片中[5]，以达到有效减少网页的HTTP请求，并且能够减 少图片字节，减少网页加载时间。
1.3 HTML优化
(l)HTML文档优化。通过HTMLTidy减少HTML文件大 小，去除多余空格。使用“DIV+CSS”布局方式，代码量小，语义 清晰，使用HTML5的header、nav、section和footer等语义化标签。
⑵设置Cookie。浏览器请求服务器时，在相同域名下,HTTP 请求会发送相同域名有关的Cookie数据，应尽可能地减少 Cookie的大小，减少Cookie对页面响应时间的影响。
1.4 C S S优化
(l)CSS精简。通过 Chrome的 Collect CSS Selector Profile 进行代码检查，去除无效c s s代码。根据C S S规范写法，样
式系统匹配规则从右边选择符向左边选择符匹配，C SS代码
中应避免属性选择器、通配符、相邻兄弟选择器、后代及子选
择器等低效的选择方式，考虑使用类选择符或ID选择符等直
接定位元素。在浏览器窗口改变、页面滚动和鼠标移动事件
等情况下都会触发CSS表达式求值，带来严重的性能问题，因
此避免使用C S S表达式。
(3)外联CSS。通常在页面中引用CSS、JavaScript或其他
文件来使页面更加生动丰富。H T M L页面可以通过内嵌式、
内联式和外联式引用C S S文件。采用C S S外联方式有利于
组件化和文件维护，由于C S S加载影响页面渲染，在head标
签中放置样式表，浏览器解析body标签内容时，加载C S S即
能呈现页面效果。
1.5 JavaScript优化
(1) JavaScript置于底部。JavaScript脚本会阻塞浏览器的 下载，阻止HTML文档及相关资源的加载，把JavaScript脚本
放到HTML文档底部能避免阻塞页面呈现和资源加载，提高
页面加载速度和呈现效果。
采用无阻塞的JavaScript，通过A jax请求加载资源后，通
过JavaScript中eval或创建script的DOM元素，通过Java
Script动态创建 script的 DOM元素，并设置其 src并附加到 HTML DOM树上。
(2) 压缩JavaScript。JSmin工具可以对JavaScript文件进 行处理，删除脚本中的无用空格及注释，减少JavaScript文件
大小，可以通过混淆将JavaScript文件函数和变量转换成较短
的字符串，大大减少代码的大小。
(3) 减少DOM操作。任何对渲染树的修改可能会触发浏 览器进行repaints和reflows，部分操作容易触
发repaints和ref-lows，比如：增加修改DOM节点样式；用户修改浏览器窗口大
小、页面滚动;DOM节点删除和增加操作;display:none能触发 repaints和 reflows，visibility:hidden只触发 reflows。可以通过 classname定义修改属性，对DOM节点的操作可以通过修改 clone节点，然后替换原节点等方式可以减少repaints和reflows。
1.6服务器优化
(1) 使用CDN技术。CDN技术能分担源网站50%-70%的 重复访问数据量，通过CDN技术能在本地完成数据访问,CDN
技术能有效减低用户二次加载网页的等待时间，有效提高用户
体验。目前CDN技术运用比较广泛，主要将HTML、C SS和 JavaScript等Web静态资源放到CDN缓存中，客户端判断静
态资源是否发生改变，当静态资源发生改变时，会主动从远程
服务器中加载新资源，未发生改变时，直接从CDN中读取资源。
防屏蔽(2) 设置缓存。浏览器客户端与服务器之间设置Etag、Ex-
103
pires 、Cache -control 、inod _expires 头部信息来设置缓存•使用
缓存可以减少HTTP 请朵的大小、减少服务器压力。
2基于案例的Web 性能优化实践 2.1新型生猪养殖系统
结合我国生猪养殖现状，开发了基于HTML 5的新型生猪 养殖系统，此方案通过客户端与系统服务器进行交互，可以增 强养殖户、兽医和检测机构的联系，提升养殖能力和效率。2.2性能优化切入点
“新型生猪养殖系统”的首页进行测试，图1显示了优化 前通过Fiddler 和Chrome 系统调试工具显示首次加载的Time > line 。表2列出系统首页首次加载测试现象与结果分析，针对 以上问题采取一定的性能优化措施对用户体验很重要。
图1首页首次加载的Timeline
表2首页首次加载的Timeline 的结果与分析
图2设置缓存的Timeline
(2) HTML 优化、CSS 优化、JavaScript 组件优化。使用
HTMLTidy 、JSmin 等压缩整理工具进行代码压缩，去除冗余字
符，页面大小减少了 2.2KB ，页面加载时间缩短了 0.7s 。从首 页的Timeline 可以看出C SS 中newslistcss 和indexxss 文件
比较小，分别为5.5KB 、7KB ，考虑将两个CSS 文件合并，合并 后CSS 文件大小为11.3KB ，减少1个HTTP 请求，页面加载 时间减少了 〇.7s 。
[1]
王成，李少元，郑黎晓，纖曾梅琴》刘慧敏• Web 前端性能优
化方案与实践[J ]•计算机应用与软件》2014，(12):89-95+147.[2] Kiss Metrics . How L oading IM e A ffects Your B ottom L ine[EB /OL ]. http : / /blog , kissmetrics . ctm i /loading -tim e /? wide = 1.[3] Steve Sounder . High Performance Web Site [M ].2007:1-170[4] 辆晨.WEB 系能优化湖南鮮313.[5] 郑宇航•移动图片社交Web 前端性能优化及应用[D ]■北
京邮电大学,2015.
基金项目：国家自然科学基金(No .31171775)，河南省教育厅高 等学校重点科研项目计划(NO .17A 510008)作者筒介：梁义涛(1972-)，男，博士研究生，教授，研究方向为 光电信息检测及图像处理，计算机应用技术；通讯作者：马青
松(1991-)，男，硕士研究生，研究方向为嵌入式系统，计算机应 用技术；张猛(1967-)，男，本科，研究方向为计算机应用；李永 刚(1973-)，男，研究方向为计算机应用。
! Q j
V mofa.liflcry
、m o •■州柯
图3图片压缩后页面的
Timeline 2.4优化前后对比
从表3首页优化前后的数据分析中可以看出，从多方面 对首页进行优化，优化后页面加载时间、页面空白时间大幅度 减少，改善了用户体验。
表3首页优化前后的数据分析
分析对》
优化前
优化后
性能提升
轮播图平均加轵时N
11.85s 3.74s 6S.4%XH R iff 求时间
6.57s 5.21s 20.7%页面空白时间
15 s 0.15s 99%萸面加载时间
37.65s
小型排风扇9.02s
76.04%
结论
用户体验改#明M
3结语
(3)图片优化。首页图片较多，其中轮播图图片较大，采 用图片压缩后，项目图片大小由474K B 压缩调整到188KB , 图片大小缩减了 61%。图3为页面进行图片压缩后图片的 Timeline 〇
Rr^i
AM XHt A CSS
2.3性能优化实践
(1)服务器优化。通过设置缓存后的二次加载的Timeline
本文研究Web 前端的相关理论，并对影响Web 前端性能 的各因素进行分析，结合“新型生猪养殖系统”首页进行优化
和测试，优化前后的对比结果显示性能明显提升。本文提出 整体性(HTMUCSS JavaScript 、图片和服务器方面)Web 前端 性能优化方案，避免了项目的特殊性，从而提高了性能优化方 案通用性和真实性，对其他相似Web 系统优化实践有一定地 参考意义。
参考文献：
信息通信
梁义涛等：基于Web 前端的性能优化方案研究及应用
炭化
分折对软如栽时问结果分析
31面釦躱对阐37.65s Fiddler S 3E 馒M 遭情S •下jft 匾体验®
页■面5白对间
16s 揭本加《H 1寒页1泔染
X H R 请求时问
6.57s 求接口9次，请求敗摒f t 较人
脚本文
柴油抗磨剂件如软
miii .Tnin.js
13.S 2s
脚表文件大小不合里
)
qu 〇5,. S »q >crSHde .2.1J .js
3.10s 轮潘明
杌载
adbanner ] .png
14.35s f f l f r 大小不合理，a 片未犄定扰化
a <fiMnfm :2.pDg
10.70s 4iilhann «r 3.png
10•物
K I I I L m N D I r l I E E o l t M
I i r r B V j
l —a .«7H 3说州
川f i t 7*l o a .*i 期l K B J J
o n U J J J l u I J t K B t l i J J
I 'l l
如抓 242S 3S有机溶剂回收
奶财t l t "w n 一
=1 =
1l
l u x t t n l n e K f t g 战期 g K O w 200m l w x e
nmda受体拮抗剂
104
