当前位置: 代码网 > it编程>编程语言>Javascript > JavaScript使用performance实现查看内存

JavaScript使用performance实现查看内存

2024年05月18日 Javascript 我要评论
正常情况下我们可以在控制台中查看当前页面或应用程序的内存使用情况浏览器环境中,你可以使用浏览器的开发者工具memory来查看内存信息如果你想在 javascript 中获取内存信息并打印到控制台,你可

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

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

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

查看页面内存占用情况

console.log(performance.memory);
{
    jsheapsizelimit: 4294705152
    totaljsheapsize: 102883888
    usedjsheapsize: 87997796
}

jsheapsizelimit:javascript 堆的大小限制。

totaljsheapsize:javascript 堆的总大小。

usedjsheapsize:javascript 堆的使用大小。

查看特定对象的占用情况

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

// 创建一个对象,用于测量其内存消耗
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路由配置模块添加

  location /origin1 {
      add_header 'cross-origin-embedder-policy' 'require-corp';
      add_header 'cross-origin-opener-policy' 'same-origin';   
      ......
  }

woker 中:

const worker = new worker('your-worker.js', { crossoriginisolated: true });

正确开启后如图

到此这篇关于javascript使用performance实现查看内存的文章就介绍到这了,更多相关javascript performance查看内存内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com