3D设计工具的前端性能测试
source link: https://tech.kujiale.com/3dshe-ji-gong-ju-de-qian-duan-xing-neng-ce-shi/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
一、前端性能测试背景
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提供了比较直观的方案载入性能分析。
针对其中某项资源消耗分析
六、性能埋点监控
没有监控的性能测试是不完整的。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK