如何在网页上释放系统资源/CPU 使用率？答案

【问题标题】：How to free system resources/CPU usage on webpage?如何在网页上释放系统资源/CPU 使用率？
【发布时间】：2018-10-15 22:16:53
【问题描述】：

我正在使用这个 HTML 模板：http://volar.makwan.net/index02.html

我的许多用户在查看该网站时在他们的笔记本电脑和上网本上遇到了高 CPU 使用率，当他们在网站上停留超过几分钟时，Safari 也会发出此消息：“此网页正在消耗大量能量。关闭它可能会提高 Mac 的响应能力。”

我第一次尝试释放资源是在用户使用以下代码从主屏幕滚动时摆脱平面着色器效果：

window.onscroll = function() {
  let home = document.getElementById('home-section');
  let effect = document.getElementById('fss');
  if(!isElementInViewport(home) && isVisible) {
    effect.style.display = "none"
    console.log("effects disabled in order conserve resources");
    isVisible = false;

  } else if(isElementInViewport(home) && !isVisible){
    effect.style.display = "block";
    isVisible = true;
  }

};

这工作得很好，但页面中的其他元素仍然占用大量资源。

有没有人对如何在网站上一段时间的活动后禁用效果/禁用效果有任何建议？

【问题讨论】：

可能存在内存泄漏。请参阅调试器的«性能/内存选项卡»。照顾全局变量，不使用时为空变量。 «使用严格» 可以提供帮助。您必须看到垃圾收集器在运行。我让你这样搜索。当然也可能是别的东西，比如永不结束的循环，或者 setIntervals 等。祝你好运！
我会在几秒钟后禁用顶部的效果。它不是那么好，所以我希望它以 100% 运行我的 CPU :)
@OndraŽižka - 我使用上面发布的 JavaScript 做到了这一点，但它仍然需要大量资源。
是否有接近 0 % 不透明度的过滤器？也许在不需要时删除它们。

标签： javascript html css performance effects

【解决方案1】：

这就是你在fssinit.js 中所做的事情。 requestAnimationFrame 以 60fps 渲染。花哨的图形，但它也是资源密集型的。

尝试使用setTimeout 减慢requestionAnimationFrame 的速度，看看是否有帮助。如果是这样，那么这就是你的问题的根源。在fssinit.js尝试做

function animate() {
  now = Date.now() - start;
  update();
  render();
  setTimeout(() => requestAnimationFrame(animate), 500);
}

如果这让事情变得更好，那么这就是你的问题，应该考虑永久保留 setTimeout 并降低延迟或更改你正在进行的一些计算

【讨论】：

【解决方案2】：

首先，打开任务管理器查看 CPU。关闭其他资源密集型应用以查看清晰画面；在打开页面之前，您的 CPU 使用率应尽可能保持平稳。

现在打开它。繁荣！，它上升到，比如，50%。（我的实际上跳到了 95%）

在您的页面顶部，有一个红色的大动画区域。它占据了整个屏幕。现在右键单击它周围的某个位置，然后从菜单中选择“检查元素”。您现在会看到源代码，它被称为 "home-section"，这是

标记的 id。在源中右键单击它，然后选择“删除”。（我通常只是先把它们隐藏起来，看看它是否只是一个渲染的东西；这个不是。）

所以，删除元素。

啊，CPU又开始呼吸了！

所以这就是你的罪魁祸首。你可以继续测试它，看看它是否只有一部分负责整个事情，我只是在这里说明这个概念。通常，一些删除可以很清楚地显示问题所在。基本上你的问题出在头脑的某个地方，我的 nr1 怀疑是到处都跟随鼠标的多边形过渡效果。

不管怎样，祝你检查愉快！

【讨论】：