关于chrome浏览器cpu占用过高问题

Question

代码：全是计算，类似a+b，b+c（不想改代码）

运行环境：window7-11

浏览器：chrome79-121

疑问：
chrome79上运行cpu占用不到百分之20
chrome120上运行cpu占用百分之百（加上一秒延时百分之20，500毫秒又变百分之百了，这差距有点离谱吧）

希望：
不动js代码的情况下解决或者限制限制一下CPU占用率高

Answer 1

引自免费微信小程序：皆我百晓生

针对您在Chrome浏览器上遇到的CPU占用率过高问题，特别是在较新版本（如Chrome 120）中运行纯计算型JavaScript代码时出现的显著差异，这可能与浏览器自身的优化策略、V8引擎更新以及其他后台服务的资源消耗有关。以下是一些无需修改原始JS代码即可尝试缓解CPU占用的方法：

1. 限制JavaScript执行时间：

   • 利用requestAnimationFrame或者setTimeout来分片执行计算任务，避免长时间阻塞主线程。

   function chunkedCalculation(array, callback) {
     let currentIndex = 0;
     function step() {
       while (currentIndex < array.length && performance.now() < 50) { // 假设每个循环体允许最大执行50毫秒
         // 进行你的a+b、b+c等计算操作
         const a = array[currentIndex];
         const b = array[currentIndex + 1];
         // 执行计算...
         currentIndex += 2;
       }
   
       if (currentIndex < array.length) {
         requestAnimationFrame(step);
       } else {
         callback(); // 计算完成后的回调
       }
     }
   
     requestAnimationFrame(step);
   }
   
   // 使用示例
   const data = [...]; // 假设是你的数据数组
   chunkedCalculation(data, () => console.log('计算完成'));
   

2. 使用Web Workers：

   • 如果计算任务非常繁重，可以考虑将它们移到Web Worker线程中异步执行，以释放主线程资源。

   // worker.js
   self.onmessage = function(e) {
     const data = e.data;
     // 在这里进行你的计算操作
     for (let i = 0; i < data.length; i += 2) {
       // 执行计算...
     }
     postMessage({ status: 'done' });
   };
   
   // 主页面
   const worker = new Worker('./worker.js');
   worker.postMessage([...]); // 传递计算所需的数据
   worker.onmessage = function(e) {
     if (e.data.status === 'done') {
       console.log('计算完成');
     }
   };
   

3. 浏览器设置和扩展管理：

   • 检查是否有异常活跃的浏览器扩展程序影响了性能，尝试禁用所有扩展并逐个启用排查。
   • 调整Chrome浏览器设置，比如实验性功能选项，看是否有对性能产生影响的设置项。

4. 系统资源监控：

   • 使用任务管理器或Chrome开发者工具的Performance面板，查看是否有其他进程或浏览器内部组件导致CPU占用过高。

由于这是一个文字模拟环境，无法提供实际图片或链接，但你可以在实际环境中按照上述建议进行操作，并结合Chrome DevTools进行调试和优化。记住，虽然这些方法可能有助于减轻CPU压力，但最根本的解决方式仍然是优化算法，使其更加高效地利用系统资源。如果数据量巨大且实时性要求不高，还可以考虑引入WebAssembly、Service Worker或其他更高效的计算模型。