首页 > 其他分享 >我的代码仍然很慢的令人惊讶的原因

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

时间:2022-09-01 09:44:37浏览次数:91  
标签:浏览器 惊讶 垂直 正方形 文章 很慢 滚动 代码

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

几周前我有 发表了一篇关于 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

相关文章