为什么网页消耗恒定 18% 的 CPU答案

【问题标题】：Why web page consumes a constant 18% of the CPU为什么网页消耗恒定 18% 的 CPU
【发布时间】：2020-10-02 12:43:50
【问题描述】：

我正在为我兄弟的新网站制作登录页面，但遇到了一个我不知道如何解决的有线问题。

在 Windows 10 机器上，机器上没有任何其他操作，页面消耗超过 15% 的 CPU（Core i 7 3.4 GH）。

下面是 Windows 任务管理器中 CPU 使用率的更详细显示。它徘徊在 18% 左右，有时高达 25%。除了 Chrome 本身，这台计算机除了显示页面外什么也没做。我什至没有滚动页面。

Chrome 浏览器有自己的任务管理器（汉堡菜单 -> 更多工具 -> 任务管理器），显示“页面”选项卡占用了 39% 的处理器。

任何想法是什么导致了问题？

【问题讨论】：

【解决方案1】：

您可以转到使处理器过载的页面，使用 Inspect 进行检查，并从源、性能和内存中查看为什么它会消耗这么多。

【讨论】：

【解决方案2】：

检查使用了多少

也就是说，百分比告诉你的很少，因为它与那台机器有关。

如果一个空的 index.html 使用例如 15% 到 18%，那么您的页面实际上并没有使用太多，而是计算机运行缓慢（缓慢或因间谍软件而负担过重，或内存瓶颈或其他原因，或者可能是您有很多扩展），只是浏览器本身正在“重载”它。

过去，您的问题没有足够的信息，仅通过屏幕截图无法确定。正如其他人所建议的那样，开发工具是进行此类检查、选项卡性能的地方。

编辑：哦，现在我注意到了链接。是的，那些动画:')

这里有一个关于如何优化的有条理的想法：

删除所有动画。（将它们注释掉。）如果差别不大，中止，问题出在其他地方。
如果至少有一些显着差异，请多次分析，例如平均刷新 3 次和/或关闭浏览器（如果在 Mac 上硬退出）。为了获得最纯粹的结果，请确保没有其他选项卡正在运行，包括扩展程序、隐藏的 chrome 窗口等。如果您特别认真，请同时在多个浏览器上进行配置，如果没有，至少检查 Firefox 或其他什么，也许它只在 Chrome 上。（这是有价值的信息。也许是内存瓶颈，所以你的处理器需要更频繁地写入和输出。不确定。不要猜测。）
注意你的环境。如果您为生产而构建，请检查问题是否仍然存在。（如果您正在使用此类步骤。）
注意制作动画的方式。 Javascript？查看最佳实践，很容易搞砸。查询？有更多的安全保障，但仍然要检查最佳实践。 CSS？做动画的最佳场所。（我有提到最佳做法吗？）
在单个动画中逐个注释。找到最高的罪犯（最大的差异）。看看你能不能先把最高犯改写得更好。
查看是否可以对动画进行分组，即。重写情侣。看看你是否为不同的地方定义了几个动画，但可以重构它，使它成为一个多用途的动画。
如果仍然存在问题，请开始裁剪动画，权衡性能成本最高的动画与您认为对您的设计最重要的动画。

祝你好运

【讨论】：