网站压力测试

[Dream4ever]

需求描述

因业务需要，需对考试系统进行压力测试。

方案调研

流量分析

• 查看浏览器前端加载页面的请求数量，各个请求的大小。
• 查看后端服务器渲染页面的方式。
• 查看数据库查询语句。
• 研究前后端每个具体环节可优化的方向。
• 参考资料：https://github.com/Dream4ever/Coding-Life/blob/master/Front-End/Front-End Resource Collection.md#性能优化

压力测试

• 选出一款用于对网站进行压力测试的工具。
• 对网站进行压测，查看前端、后端优化前后网站性能差异。

入选方案

以列表形式记录入选的方案。

• Apache JMeter：功能强大的压测工具。

应用过程

阅读资料

先把 https://github.com/Dream4ever/Coding-Life/blob/master/Front-End/Front-End Resource Collection.md#性能优化 这里收集的资料过一遍。

• 看了 前端妹子跟我抱怨她们的页面加载很慢的时候，如何在她面前优雅地装逼？ 最高票回答，对页面性能分析的要点有了大致的了解。
• 上面回答内容的最后提到了 mmTrix 这家网站，可免费进行性能分析。对页面进行了性能分析，分析完成后，所导出的 PDF 版本的评测报告给出的建议很具体，看这个就行，在线的评测结果只有图表，没有像 PDF 报告那样给出建议，不用看。
• 然后看了 打造亚秒级页面加载速度网店实践经验，文中给出的性能分析思路更全面、更系统，并且对于 关键呈现路径（Critical Rendering Path，CRP） 的优化，提到了用于剖析、优化的工具，值得参考。
• 接着又看了 如何打造一个全满分网站，介绍了网站性能测试的工具，以及可优化的方面。
• 网页性能优化，缓存优化、加载时优化、动画优化，这篇文章介绍的都是可具体实操的细节，也很有价值。
• 如何做好H5性能优化？：给出了前端性能优化的具体细节，并且介绍了如何用 Chrome 的开发者工具进行性能分析。

一系列的文章读完了，下面就该把这些文章综合起来，列出所有可优化的点，然后按照重要性依次优化。

要点汇总

推后。

性能分析

先在电脑上查看服务器往客户端发送数据的情况。

• 在 Chrome 的隐身模式下，访问指定页面。
• 访问首个页面之前，要开启开发者工具的“禁用缓存”选项，并清除浏览器缓存，保证首次访问页面的效果。
• 首个页面加载成功之后，将浏览器完整截图，然后清空请求信息，并开启“保留日志”选项。之后每加载完成一个页面并截图之后，就都要清空请求信息，这样就能完整保留下一个页面的请求。
• 首个页面加载成功之后，取消“禁用缓存”选项，这样后面的页面就可以正常使用缓存了。

整套流程下来，服务端对浏览器的响应就都记下来了。将服务器返回的文件按类型分类（比如分为 PHP/CSS/JS/图片 这四类），以 PHP 文件为例，表格格式如下所示：

文件名称	体积	优化方案	实施难度	优先级
exercise	219K	前后端分离	高	高
exam	91K	同上	同上	中
result	31K	同上	同上	低

接着在手机上研究客户端往服务器发送数据的情况。

• 让手机和电脑连上同一个 WiFi，配置手机 WiFi 的 HTTP 代理为电脑端 Charles 中设置的端口号，IP 当然是用电脑的 IP 了。
• 手机只需要查看向服务器发送的数据包的尺寸。用各个页面测试，请求的 Header 部分普遍在 600~800B 之间，Body 的话，只在提交答案时才有实际意义，自主练习时，20 道选择题加 20 道判断题，Body 的尺寸为 719 字节；自我检测和模拟考试是 80 道选择题加 40 道判断题，Body 的尺寸为 2.11KB。
  • 每道题提交数据格式为： QuestionA123456=B ，一共 17 字节
  • 多道题提交数据格式为： **&**&** ，N 道题的总字节数为 18 * N - 1

统计完上面两方面的数据之后，又根据前面在 Chrome 中截的图，统计了每个页面加载完毕时，所发送的请求数（不含已缓存资源）以及所加载文件的总体积（同样不含已缓存资源），之后可优先对总体积明显偏大的或请求数过多的页面进行优化。

压力测试

待完成。

要点总结

• 待补充。