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

一、前端性能测试背景

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

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

六、性能埋点监控

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

关注我们

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

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