值得学习的web性能优化案例（文末有彩蛋）

Posted 2021-04-30 web前端爱好者社区

1 指尖点餐系统

指尖点餐系统是信息化移动生活中, 将智能平板联合html5 技术的发展用到点餐流程中, 节约了餐厅的人力, 提高餐厅的工作效率､经营收益和顾客满意度｡该点餐项目基于Web 新技术HTML5 搭建, 取代本地应用, 缩短开发周期, 更新周期短, 维护成本低, 硬件配置低等优点｡但其面临性能优化问题, 在网速较慢的情况下, 网页加载速度很慢, 极大制约了该系统的使用和降低了顾客的满意度, 这也是普遍HTML5 应用相对于本地应用的弱势之一｡

---

2 性能检测工具及测试环境

1)网络层面上性能检测工具

(1) 采用各个浏览器的开发工具( 如firebug) 查看代码､元素､加载情况以及清除缓存等｡

(2) 利用YSLow ､pagespeed 等工具查看网络层面上的性能缺陷｡

(3) 利用Webkit 浏览器内置开发工具查看网络network ､Timeline ｡

(4) 利用Fidder2 来限制网速, 以及查看HTTP 请求信息､请求汇总报告｡

2)浏览器层面上性能检测工具

(1) 利用Webkit 浏览器内置开发工具的profiles 监测cpu ､页面渲染､javascript 执行､CSS 利用率等｡

(2) 利用SpeedTracer 浏览器性能监测工具来监测浏览器UI 线程､渲染重排､布局板面以及JavaScript 执行效率代码进行级别优化等｡

(3) 使用Spirent 测试工具, 采用平均事务响应时间､待测系统资源利用率和每秒事务数作为主要测试指标, 综合评测Web 应用的软硬件性能, 并快速定位Web 应用系统的性能

瓶颈｡

3)测试环境

(1) 清空浏览器缓存｡

(2) 清空DNS 缓存(ipconfig/flushdns) ｡

(3) 慢网速下测试( 使用Fiddler 工具设置512KB 带宽),10M 网速下测UIThread ｡

(4) 关闭不相关网页, 开启监测工具(SpeedTracer) ｡

---

3 性能评测系统设计与实现｡

(1)Web应用评测过程

在Web 应用评测中, 每进行一轮测试时, 需针对测试目标设计测试场景, 通过Spirent 实施一次负载测试, 统计分析各项指标, 生成测试报告, 根据需要分析查找系统性能瓶颈, 对相关瓶颈进行优化, 如下图所示｡根据需要和代价选择测试､优化的迭代次数, 选择符合用户需求的最佳迭代方案｡

(2)测试场景设计和选择

性能测试应该是一个全面的测试, 测试目标系统各项能力､发现系统的问题､定位系统瓶颈｡如何设计测试用例, 实现以最少的测试用例, 最大发现系统的性能瓶颈, 为优化提供指导｡因此, 既要从事务中的选取具有业务代表性的事件进行单独测试, 又要对综合业务进行测试, 防止因综合业务间事务或数据的相关性发生读写锁等待, 并且设计测试用例时应尽量减少用例间的重叠, 同时又无遗漏｡

在指尖点餐系统中, 最复杂的页面为点餐页面, 该页面使用最频繁, 结构最复杂, 页面操作多,UI 交互多等特点｡因此对该页面进行优化实践, 对该系统最具现实意义｡下图为该点餐系统的点餐页面截图｡

 (3)负载测试流程设计

Spirent 负载测试主要流程如下图所示, 其核心是如何配置参数使测试能完成测试目标和对测试日志的分析, 找出系统的瓶颈; 负载由Spirent 工具自动生成｡

 

---

4 寻找性能优化瓶颈

采用HTML5 点餐应用项目中的点餐页面进行的测试。

上图为点餐页面采用Fiddler 和SpeedTracer 所检测到的Timeline 和UIThread 拼合的测试数据｡从该图中可以看出的问题如下表所示｡所以针对页面渲染采取一定的性能优化措施尤为重要｡

---

5 性能优化

(1)服务器端优化

设置缓存后的二次加载后的二次加载下图所示｡

开启Gzip 压缩后的首次加载Timeline 如下图所示｡

开启Gzip 后加载时间较少了约54%, 总资源大小减少了约42%,HTML/JS/CSS 等文件减少了70% 左右｡

(2)JavaScript优化

针对该项目进行的JavaScript 优化, 主要精简代码, 去除jQuery 依赖｡使得JavaScript 文件大小从82.9KB 变到3.8KB ｡加载时间从22s 提高到11s, 减少了50% 的加载时间; 脚本的执行时间从296ms 变为132ms, 减少了54.5% ｡同时通过优化DOM 操作使页面渲染Paint 减少了34%(19ms),DOM 事件响应时间减少了71.5%(10ms) ｡相应ParseHTML 增加了12ms, 这是由于采用innerHTML 添加元素需要解析成DOM 导致的｡但是整体来说UI 线程减少了20ms

左右｡下图为进行JavaScript优化后的测试结果图｡

(3)JavaScript､HTML､CSS组件优化

从项目之前的Timeline 可以看出CSS 的三个文件大小都比较小, 分别为1 ､1.4 ､2.6KB ｡因此考虑将三个CSS 小文件合并, 以减少HTTP 请求, 提高加载资源速度｡合并后的大小为3.9KB ｡文件大小减少了1.1KB, 同时减少了2 个HTTP 请求, 页面加载时间减少了约1 秒｡对JavaScript ､HTML ､CSS 组件进行代码级别压缩, 去除可以去掉的字符以及对JavaScript 进行混淆｡页面大小减少了1.8KB 左右, 页面加载时间缩短了约0.5 秒,下图 为操作后的效果图｡

(4)图片优化

图片优化采取无损压缩, 无损压缩后总体图片的大小减少了8.8KB, 缩减了5% ｡各个图片的无损压缩效果不一, 比如sp.png 压缩缩减了26%, 其余均为3% 左右｡页面整体加载速度提升了40ms 左右｡相对于不同图片以及图片很多时, 进行无损压缩可能带来意想不到的效果, 不过对于本网页来说效果一般｡下图为图片进行无损压缩后页面的Timeline ｡

调整尺寸后, 图片总量减少了124.1KB, 缩减了81% ｡网页加载速度提高了接近2s ｡如下图为优化图片尺寸后的TimeLine, 由此可见适当的时机对图片的尺寸进行优化, 有利于提高网页性能, 提高加载速度, 避免加载过大资源造成浪费｡

(5)细节调整

从上图的Timeline 中可以看出, 页面中含有一个错误请求｡该错误请求为favicon ｡Favicon 可以让浏览器的收藏夹中､页面上方除显示相应的标题外, 还以图标的方式区别不同的网站, 很多网站并没有添加favicon, 因此造成了错误请求, 浪费了资源｡

---

6 优化前后对比

从下表点餐页面优化前后的对比数据分析中可以看出, 加载时间的减少､页面渲染时间的减少极大提高了应用页面的呈现速度, 页面脚本执行时间的降低提高了该应用的响应速度和整体性能｡

---

讲个笑话

一个人弯着腰低着头， 走进一家店铺， 

他对老板说， 我想把您的烂水果和臭鸡蛋全部买去。

老板问：

你是打算去迎接中国篮球队回来吧？

买主四处看了看， 悄声说， 我是李楠。

---

点击“在看”

让更多的人与你一起涨知识