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

csseffectshtmljavascriptperformance

How to free system resources/CPU usage on webpage?

我正在使用以下HTML模板：http：//volar.makwan.net/index02.html

我的许多用户在查看网站时笔记本电脑和上网本上的CPU使用率很高，当他们在网站上停留超过几分钟时，Safari也会显示此消息："此网页耗费了大量精力。关闭它可以提高Mac的响应速度。"

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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;
}

};

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

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

相关讨论

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

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

1
2
3
4
5
6

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

如果这会使情况变得更好，那么这就是您的问题，应该考虑以较低的延迟永久保留该setTimeout或更改您正在执行的某些计算

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

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

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

标记的ID。在源代码中右键单击它，然后选择" Delete "。 (我通常通常先将它们隐藏起来，以查看它是否仅是渲染的东西；而这不是。)

因此，删除元素。

Aaand，CPU再次呼吸！

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

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