JavaScript使用performance实现查看内存
作者：卓卓不是桌桌
这篇文章主要为大家详细介绍了JavaScript如何使用performance实现查看内存,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
正常情况下我们可以在控制台中查看当前页面或应用程序的内存使用情况
浏览器环境中，你可以使用浏览器的开发者工具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查看内存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！