正常情況下我們可以在控制臺中查看當(dāng)前頁面或應(yīng)用程序的內(nèi)存使用情況
瀏覽器環(huán)境中，你可以使用瀏覽器的開發(fā)者工具Memory來查看內(nèi)存信息
如果你想在 JavaScript 中獲取內(nèi)存信息并打印到控制臺杀狡，你可以使用性能 API 中的 memory 屬性
查看頁面內(nèi)存占用情況
console.log(performance.memory);
{
jsHeapSizeLimit: 4294705152
totalJSHeapSize: 102883888
usedJSHeapSize: 87997796
}
jsHeapSizeLimit：JavaScript 堆的大小限制拆撼。
totalJSHeapSize：JavaScript 堆的總大小摸吠。
usedJSHeapSize：JavaScript 堆的使用大小骗随。
查看特定對象的占用情況
在這里我已經(jīng)簡單給大家封裝了一遍
// 創(chuàng)建一個對象般码，用于測量其內(nèi)存消耗
var myObj = { data: 'some data' };
// 在對象上執(zhí)行一些操作舷礼，增加內(nèi)存消耗
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 設(shè)置為 same-origin（保護(hù)源站免受攻擊）\n Cross-Origin-Embedder-Policy 設(shè)置為 require-corp（保護(hù)源站免受侵害）'
);
}
function runMemoryMeasurements(obj) {
const interval = 5000;
console.log(`下一次測量5 秒.`);
setTimeout(this.measureMemory(obj), interval);
}
function measureMemory(obj) {
// 測量對象的內(nèi)存消耗
window.performance
.measureUserAgentSpecificMemory(obj)
.then(function (bytes) {
console.log('內(nèi)存占用:', getFileSize(bytes.bytes));
runMemoryMeasurements(obj)
});
}
function getFileSize(size) {
//把字節(jié)轉(zhuǎn)換成正常文件大小
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 是否啟用了跨域隔離
未配置：會在控制臺提示你未開啟
25489d5cc658ff915c4d38308.jpg
怎么開啟呢
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 });
-
正確開啟后如圖
d44537fa249eb30797276ee00.jpg
這里有個demo可以看（需要特定瀏覽器筒占，我不維護(hù)，看不見了就是我刪了）
鏈接
