3D设计工具的前端性能测试

by 云岚

一、前端性能测试背景

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提供了比较直观的方案载入性能分析。

针对其中某项资源消耗分析

六、性能埋点监控

没有监控的性能测试是不完整的。

关注我们

酷家乐质量效能团队热衷于技术的成长和分享，几乎每个月都会举办技术分享活动（海星日），每半年举办一次技术专题竞赛分享（火星日），并将优秀内容写成技术文章。

我们尽可能保障分享到社区的内容，是我们用心编写、精心挑选的优质文章。如果您想更全面地阅读我们的文章，请您关注我们的微信公众号"酷家乐技术质量"。