一、前端性能测试背景
Why Performance Test:
Google Performance提到性能的四个价值：
Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。网站的加载速度严重影响了用户体验，也决定了这个网站的生死存亡。
Why Front-End Performance Test：
对于为什么要重点在前端性能的测试，可以总结为以下一些点，首先前端优化相对比后端的优化容易得多，其次前端响应事件所占比例更多更重，再次用户80%~90%的时间都花在了下载和渲染展示页面组件上了，最后，对于后端慢而难的巨大工程量的优化，前端优化更为高效。
另外，对于一些有独特性的工具，本身在前端的处理更多。
二、3D设计工具的前端特性
对于一个3D设计工具，作为与模型操作打交道的设计工具，
除去本身web前端的一些特性，方案、画布、模型、绘制的交互特点更为重要。
3D设计工具前端对于交互&操作性能要求更高！基于此，可以把3D设计工具的一些前端关注点进行梳理划分：
三、基于RAIL模型及工具特性的前端性能测试
Google RAIL模型
Rail模型的核心：
- 以用户为中心；最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意。
- 立即响应用户；在 100 毫秒以内确认用户输入。
- 设置动画或滚动时，在 10 毫秒以内生成帧。
- 最大程度增加主线程的空闲时间。
- 持续吸引用户；在 1000 毫秒以内呈现交互内容。
基于RAIL模型Animation的测试方案思考：
四、基于Chrome DevTool的性能测试分析
Chrome的DevTool提供了强大的前端性能测试分析手段，我们利用它可以做测试及分析定位。
1、Test By Chrome DevTool
对于性能测试，比如对FPS的测试，devtool的rendering模块提供了良好的FPS测试界面。
2、Analyze By Chrome DevTool
对于性能的分析，比如分析某个操作行为的流畅度体验，可以利用Performance Record进行
针对帧率过低/耗时过高的帧时刻，可以进行call stack定位
具体函数耗时定位
五、基于LightHouse的方案Speed Test
对于一个3D设计工具来说，工具方案的载入速度是提升用户体验的第一步，Lighthouse提供了比较直观的方案载入性能分析。
针对其中某项资源消耗分析
六、性能埋点监控
没有监控的性能测试是不完整的。
关注我们
酷家乐质量效能团队热衷于技术的成长和分享，几乎每个月都会举办技术分享活动（海星日），每半年举办一次技术专题竞赛分享（火星日），并将优秀内容写成技术文章。
我们尽可能保障分享到社区的内容，是我们用心编写、精心挑选的优质文章。如果您想更全面地阅读我们的文章，请您关注我们的微信公众号"酷家乐技术质量"。
