我的代码仍然很慢的令人惊讶的原因
我的代码仍然很慢的令人惊讶的原因
几周前我有 发表了一篇关于 React 误用导致的性能问题的文章 .
一些读者引起了我的注意，即使在我添加到声称修复它们的文章中的演示中，问题仍然存在！ ♂️
好吧，成为成年人的一部分就是承认自己的错误。在这篇文章中，我将尝试弥补。
我们原谅你。那么，那是什么？也许是浏览器版本的差异？
经过简短的调查，我得出结论，这是一个性能问题。重现它的一个非常简单的方法是限制浏览器的性能。只需打开 Chrome 的开发工具，您就可以从那里限制浏览器。
不要忘记以后改回来！
但是以防万一您使用的是超级计算机并且 6 倍减速不起作用，我从上一篇文章中克隆了我最简单的修复并添加了手动同步减速。
抓住滚动条并尽可能快地上下滚动！
好的。现在我们已经平衡了比赛场地——我们都可以看到圆周运动。因此，我的解决方案似乎存在一个根本问题。让我们分解当前解决方案的工作原理：
用户垂直滚动➡方块垂直移动➡滚动事件触发➡ 剩下 设置css属性➡正方形水平移动
由于 是 轴分别从 X 轴，根据定义，水平运动发生在垂直运动之后，因为 X axis 依赖于 JavaScript，它甚至更慢。
现在让我们看一下正方形的原始规格：
一个简单的正方形，当您向下滚动 div 的内容时，它需要沿对角线穿过屏幕。
规范中没有任何地方提到正方形在 div 内。让我们将两者分开，并按百分比计算垂直和水平位置
抓住滚动条并尽可能快地上下滚动！
你去吧。一个更直接的解决方案，它不依赖于滚动来实际进行定位。
希望这能弥补我的错误！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
