Question

我正在使用以下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;
  }

};

效果很好，但是页面中的其他元素仍然占用大量资源。

在网站上活动了一段时间后，如果没有查看/禁用效果，是否有人对如何禁用效果有任何建议？

Answer 1

这就是您在fssinit.js中所做的事情。 requestAnimationFrame以60fps的速度渲染。精美的图形，但它也占用大量资源。

尝试使用requestionAnimationFrame降低setTimeout的速度，看看是否有帮助。如果是这样，那就是问题的根源。在fssinit.js中尝试

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

如果这会使情况变得更好，那就是您的问题，应考虑将setTimeout永久保留在较低的延迟范围内，或者更改您所做的某些计算

Answer 2

首先，打开任务管理器以查看CPU。关闭其他需要大量资源的应用程序以查看清晰的图片；您的CPU使用率应与打开页面之前保持一致。

现在打开它。 Boom !，最多上升到50％。（实际上，我的跳高了95％）

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

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

因此，删除元素。

Aaand，CPU再次呼吸！

所以有你的罪魁祸首。您可以继续对其进行测试，以查看它是否仅一部分负责全部工作，我只是在此处说明概念。通常，进行一些清除会很清楚地表明问题出在哪里。基本上，您的问题出在头部的某个地方，我的nr1怀疑是鼠标随处可见的多边形过渡效果。

无论如何，祝您检查愉快！

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

2 个答案: