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

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 渲染。花哨的图形，但它也是资源密集型的。

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

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

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

Answer 2

首先，打开任务管理器查看CPU。关闭其他资源匮乏的应用程序以查看清晰的图片;在打开页面之前，您的 CPU 使用率应尽可能平稳。

现在打开它。 轰！，它上升到，比如，50%。(我的实际上跳到了95%(

在页面顶部，有一个大的红色动画区域。它占据了整个屏幕。现在右键单击它周围的某个地方，然后从菜单中选择"检查元素"。您现在会看到源，它称为"主页部分">，这是<部分>标签的 ID。在源中右键单击它，然后选择"删除"。(我通常只是先隐藏它们，看看它是否只是一个渲染的东西;这个不是。

因此，删除元素。

啊，CPU又在呼吸了！

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

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