我的代码仍然很慢的令人惊讶的原因

我的代码仍然很慢的令人惊讶的原因

几周前我有 发表了一篇关于 React 误用导致的性能问题的文章 .

一些读者引起了我的注意，即使在我添加到声称修复它们的文章中的演示中，问题仍然存在！ ‍♂️

好吧，成为成年人的一部分就是承认自己的错误。在这篇文章中，我将尝试弥补。

我们原谅你。那么，那是什么？也许是浏览器版本的差异？

经过简短的调查，我得出结论，这是一个性能问题。重现它的一个非常简单的方法是限制浏览器的性能。只需打开 Chrome 的开发工具，您就可以从那里限制浏览器。

不要忘记以后改回来！

但是以防万一您使用的是超级计算机并且 6 倍减速不起作用，我从上一篇文章中克隆了我最简单的修复并添加了手动同步减速。

抓住滚动条并尽可能快地上下滚动！

好的。现在我们已经平衡了比赛场地——我们都可以看到圆周运动。因此，我的解决方案似乎存在一个根本问题。让我们分解当前解决方案的工作原理：

用户垂直滚动➡方块垂直移动➡滚动事件触发➡ 剩下 设置css属性➡正方形水平移动

由于 是 轴分别从 X 轴，根据定义，水平运动发生在垂直运动之后，因为 X axis 依赖于 JavaScript，它甚至更慢。

现在让我们看一下正方形的原始规格：

一个简单的正方形，当您向下滚动 div 的内容时，它需要沿对角线穿过屏幕。

规范中没有任何地方提到正方形在 div 内。让我们将两者分开，并按百分比计算垂直和水平位置

抓住滚动条并尽可能快地上下滚动！

你去吧。一个更直接的解决方案，它不依赖于滚动来实际进行定位。

希望这能弥补我的错误！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/7728/39280109