基于Web前端的性能优化方案研究及应用

信息通信

2017(Sum.

INFORMATION & COMMUNICATIONS No 173)

基于Web前端的性能优化方案研究及应用

(河南工业大学信息科学与工程学院，河南郑州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系 统性能的方案和实践参考Google自主研发了 V8引擎来提 升Web性能，并开发了 Page Speed、Speed Tracer等性能分析 工具来衡量网页性能。国内在Web有效性和协议本身进行了 研究，性能优化研究较少。Web前端性能测试和诊断工具很 多，但方案大多立足于Web性能优化的特定领域，缺乏系统性 和通用性测试。本文以“新型生猪养殖系统”首页为例进行性 能测试i平价，并从不同角度进行优化。1 Web性能优化相关理论 1.1 Web工作机制

浏览器请求服务器的流程如下:①用户输入访问网址;② 客户端DNS服务器返回域名所指向网站IP地址;③PC客户 端向目标服务器发送HTTP请求;④服务器收到并解析HTTP 请求，根据URL将目标文件及资源，生成HTML文档并发送 浏览器;⑤浏览器接受和解析服务器返回的HTML文档;⑥服 务器接收到浏览器请求资源文件的HTTP请求;⑦浏览器根 据请求的资源文件，进行repaints和reflows。1.2减少HTTP请求

浏览器和服务器之间通过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 CSS优化

(l)CSS 精简。通过 Chrome 的 Collect CSS Selector Profile

进行代码检查，去除无效css代码。根据CSS规范写法，样 式系统匹配规则从右边选择符向左边选择符匹配，CSS代码 中应避免属性选择器、通配符、相邻兄弟选择器、后代及子选

择器等低效的选择方式,考虑使用类选择符或ID选择符等直 接定位元素。在浏览器窗口改变、页面滚动和鼠标移动事件 等情况下都会触发CSS表达式求值,带来严重的性能问题，因 此避免使用CSS表达式。

(3)外联CSS。通常在页面中引用CSS、JavaScript或其他 文件来使页面更加生动丰富。HTML页面可以通过内嵌式、 内联式和外联式引用CSS文件。采用CSS外联方式有利于 组件化和文件维护，由于CSS加载影响页面渲染，在head标 签中放置样式表，浏览器解析body标签内容时，加载CSS即 能呈现页面效果。1.5 JavaScript 优化

(1)

JavaScript置于底部。JavaScript脚本会阻塞浏览器的

下载，阻止HTML文档及相关资源的加载，把JavaScript脚本 放到HTML文档底部能避免阻塞页面呈现和资源加载，提高 页面加载速度和呈现效果。

采用无阻塞的JavaScript,通过Ajax请求加载资源后，通 过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、CSS和 JavaScript等Web静态资源放到CDN缓存中，客户端判断静 态资源是否发生改变，当静态资源发生改变时，会主动从远程 服务器中加载新资源，未发生改变时,直接从CDN中读取资源。

(2) 设置缓存。浏览器客户端与服务器之间设置Etag、Ex103

-信息通信

pires、Cache-control、inod_expires头部信息来设置缓存•使用

缓存可以减少HTTP请朵的大小、减少服务器压力。

2基于案例的Web性能优化实践 2.1新型生猪养殖系统

结合我国生猪养殖现状，开发了基于HTML5的新型生猪 养殖系统，此方案通过客户端与系统服务器进行交互，可以增 强养殖户、兽医和检测机构的联系，提升养殖能力和效率。2.2性能优化切入点

“新型生猪养殖系统”的首页进行测试，图1显示了优化 前通过Fiddler和Chrome系统调试工具显示首次加载的Time> line。表2列出系统首页首次加载测试现象与结果分析，针对 以上问题采取一定的性能优化措施对用户体验很重要。

图1首页首次加载的Timeline

表2首页首次加载的Timeline的结果与分析

分折对软如栽时问结果分析

31面釦躱对阐37.65sFiddler S3E馒M遭情S•下jft匾体验®

页■面5白对间

16s揭本加《H1寒页1泔染

XHR请求时问

6.57s求接口9次，请求敗摒ft较人

脚本文

miii .Tnin.js

13.S2s

脚表文件大小不合里

件如软

)qu〇5,. S»q>crSHde.2.1J .js

3.10sadbanner] .png

14.35s轮潘明

a10.70sfflfr大小不合理，a片未犄定扰化

杌载

4iilhann«r3.png

10•物

2.3性能优化实践

(1)服务器优化。通过设置缓存后的二次加载的Timeline

图2设置缓存的Timeline

(2) HTML优化、CSS优化、JavaScript组件优化。使用

HTMLTidy、JSmin等压缩整理工具进行代码压缩，去除冗余字

符，页面大小减少了 2.2KB，页面加载时间缩短了 0.7s。从首 页的Timeline可以看出CSS中newslistcss和indexxss文件

比较小，分别为5.5KB、7KB，考虑将两个CSS文件合并，合并 后CSS文件大小为11.3KB，减少1个HTTP请求，页面加载 时间减少了 〇.7s。

104

梁义涛等:基于Web前端的性能优化方案研究及应用

(3)图片优化。首页图片较多，其中轮播图图片较大，采 用图片压缩后，项目图片大小由474KB压缩调整到188KB, 图片大小缩减了 61%。图3为页面进行图片压缩后图片的 Timeline 〇

Rr^i

AM XHt A CSS

l

一

j

luI'll

xttlKBlKInl如J抓IIL2 neJ

—a.m! Qj

K= 4oV mofa.liflcry

gft2Un«7H3NDI、mo•■州柯

战 S期13Jg SJ说rl州

I

Jlu川fit7EwKO=

奶IE财*looltttlJa.*iM

Im200\"tKBilwwtl期rxe

nJiJrBV图3图片压缩后页面的

1

Timeline 2.4优化前后对比

从表3首页优化前后的数据分析中可以看出，从多方面 对首页进行优化，优化后页面加载时间、页面空白时间大幅度 减少，改善了用户体验。

表3首页优化前后的数据分析

分析对》

优化前

优化后

性能提升

轮播图平均加轵时N

11.85s3.74s6S.4%XHRiff求时间

6.57s5.21s20.7%页面空白时间

15 s0.15s99%萸面加载时间

37.65s

9.02s

76.04%

结论

用户体验改#明M

3结语

本文研究Web前端的相关理论，并对影响Web前端性能 的各因素进行分析，结合“新型生猪养殖系统”首页进行优化

和测试，优化前后的对比结果显示性能明显提升。本文提出 整体性(HTMUCSS JavaScript、图片和服务器方面)Web前端 性能优化方案，避免了项目的特殊性，从而提高了性能优化方 案通用性和真实性，对其他相似Web系统优化实践有一定地 参考意义。

参考文献：

[1]

王成，李少元，郑黎晓，纖曾梅琴》刘慧敏• Web前端性能优

化方案与实践[J]•计算机应用与软件》2014，(12):89-95+147.[2] Kiss Metrics. How Loading IMe Affects Your Bottom Line[EB /OL]. http: / /blog, kissmetrics. ctmi/loading-time/? wide = 1.[3] Steve Sounder. High Performance Web Site[M].2007:1-170[4] 辆晨.WEB系能优化湖南鮮313.[5] 郑宇航•移动图片社交Web前端性能优化及应用[D]■北

京邮电大学,2015.

基金项目:国家自然科学基金(No.31171775),河南省教育厅高 等学校重点科研项目计划(NO.17A510008)作者筒介:梁义涛(1972-),男，博士研究生，教授，研究方向为 光电信息检测及图像处理，计算机应用技术;通讯作者：马青

松(1991-),男，硕士研究生，研究方向为嵌入式系统，计算机应 用技术;张猛(1967-)，男，本科，研究方向为计算机应用;李永 刚(1973-)，男，研究方向为计算机应用。