JS 如何使用 performance 查看内存

正常情况下我们可以在控制台中查看当前页面或应用程序的内存使用情况

浏览器环境中,你可以使用浏览器的开发者工具Memory来查看内存信息

如果你想在 JavaScript 中获取内存信息并打印到控制台,你可以使用性能 API 中的 memory 或者 measureUserAgentSpecificMemory 属性

查看页面内存占用情况

js 复制代码
console.log(performance.memory);
{
    jsHeapSizeLimit: 4294705152
    totalJSHeapSize: 102883888
    usedJSHeapSize: 87997796
}

jsHeapSizeLimit:JavaScript 堆的大小限制。 totalJSHeapSize:JavaScript 堆的总大小。 usedJSHeapSize:JavaScript 堆的使用大小。

查看特定对象的占用情况

在这里我已经简单给大家封装了一遍

js 复制代码
// 创建一个对象,用于测量其内存消耗
var myObj = { data: 'some data' };

// 在对象上执行一些操作,增加内存消耗
for (var i = 0; i < 100000; i++) {
    myObj['property' + i] = 'value' + i;
}
if (crossOriginIsolated) {
    runMemoryMeasurements(myObj)
} else {
  console.error(
        crossOriginIsolated + ' crossOriginIsolated\n Cross-Origin-Opener-Policy 设置为 same-origin(保护源站免受攻击)\n Cross-Origin-Embedder-Policy 设置为 require-corp(保护源站免受侵害)'
  );
}
function runMemoryMeasurements(obj) {
    const interval = 5000;
    console.log(`下一次测量5 秒.`);
    setTimeout(this.measureMemory(obj), interval);
}

function measureMemory(obj) {
    // 测量对象的内存消耗
    window.performance
     .measureUserAgentSpecificMemory(obj)
     .then(function (bytes) {
       console.log('内存占用:', getFileSize(bytes.bytes));
       runMemoryMeasurements(obj)
     });
}

function getFileSize(size) {
   //把字节转换成正常文件大小
   if (!size) return '';
   var num = 1024.0; //byte
   if (size < num) return size + 'B';
   if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + 'KB'; //kb
   if (size < Math.pow(num, 3))
     return (size / Math.pow(num, 2)).toFixed(2) + 'MB'; //M
   if (size < Math.pow(num, 4))
     return (size / Math.pow(num, 3)).toFixed(2) + 'G'; //G
   return (size / Math.pow(num, 4)).toFixed(2) + 'T'; //T
}

可以把vconsole打开,方便移动端查看

注意⚠️浏览器需要校验crossOriginIsolated: 是一个新的安全特性,用于表示一个页面或者一个 Worker 是否启用了跨域隔离 未配置:会在控制台提示你未开启

怎么开启呢 nginx.conf路由配置模块添加

js 复制代码
  location /origin1 {
      add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
      add_header 'Cross-Origin-Opener-Policy' 'same-origin';   
      ......
  }

woker 中:

js 复制代码
const worker = new Worker('your-worker.js', { crossOriginIsolated: true });
  • 正确开启后如图

这里有个demo可以看(我不维护,看不见了就是我删了) 链接

相关推荐
ElasticPDF-新国产PDF编辑器1 小时前
Vue 项目使用 pdf.js 及 Elasticpdf 教程
javascript·vue.js·pdf
勘察加熊人3 小时前
vue记忆卡牌游戏
javascript·vue.js·游戏
yanyu-yaya3 小时前
第三章 react redux的学习之redux和react-redux,@reduxjs/toolkit依赖结合使用
javascript·学习·react.js
江城开朗的豌豆3 小时前
使用Plotly.js创建炫酷红外轮廓热力图 - Vue组件封装实战
前端·javascript·vue.js
牧野星辰3 小时前
学会了一个小功能,我们庆祝一下【高德API-输入提示和POI搜索】
javascript·vue.js
打野赵怀真4 小时前
react组件间的通信有哪些?
前端·javascript
哟哟耶耶4 小时前
React-02初学hello_react(JSX,创建React根节点,引入对应React库,render渲染DOM)
前端·javascript·react.js
Enddme4 小时前
《面试官冷笑:箭头函数能当构造函数吗?答错直接挂!》
前端·javascript·面试
lbh4 小时前
React + PDF.js 实战:构建一个带打印/下载功能的 PDF 查看器
javascript·react.js
三小河5 小时前
自定义VITE插件,生成可修改配置项,用于不同项目部署
前端·javascript·react.js