正常情况下我们可以在控制台中查看当前页面或应用程序的内存使用情况
浏览器环境中,你可以使用浏览器的开发者工具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查看内存内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!
发表评论