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