性能优化之事件响应与相交算法

为了解决用户使用过程中的体验问题,我们团队进行了走访用户调研,在调研过程中发现:在一些配置较差的机器上存在拖动模型异常卡顿的情况。

从以上的交互动图中可以观察发现,在已经实现的功能中,家具拖动过程中包含有几种交互:

一个命名引发的性能问题

我最近主要在定位、解决当前项目中的一些性能相关问题。

在反馈的问题中,比较严重的问题之一是在户型预览编辑过程,电脑的 CPU 占用率高,及时什么都不做的情况下,CPU 占用也非常的高。

同样的,利用 Chrome 提供的 Performance 录制 ⏺ 了无任何操作的 JavaScript 调用火焰图,发现 Pixi 内部会利用浏览器的requestAnimationFrame接口,执行自身的 render 方法进行 2D 场景的绘制渲染。

Pixi 1px线段性能优化

随着图满意项目的不断迭代,功能的不断叠加,时不时会有一些用户反馈卡顿,甚至页面崩溃的情况出现。

为了解决和定位问题,我们特意做了用户调研,以及尝试做一些性能监控捕获异常。在调研过程中,我们发现在用户配置较低的电脑上对于 2D 下的一些缩放事件会出现明显的卡顿现象,帧率大概下降到 20fps。

在 2D 界面中,有一个背景网格一直在页面中显示。它的交互要求是:不论界面如何缩放,网格的线段粗细始终保持不变,否则将会出现非常不好看的粗线条以及细线条等。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×