一、前端性能测试背景
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提供了比较直观的方案载入性能分析。
针对其中某项资源消耗分析：
六、性能埋点监控
没有监控的性能测试是不完整的。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
