快捷導(dǎo)航

JavaScript使用performance實現(xiàn)查看內(nèi)存

更新時間：2024年03月22日 09:51:11 作者：卓卓不是桌桌

這篇文章主要為大家詳細介紹了JavaScript如何使用performance實現(xiàn)查看內(nèi)存,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

查看頁面內(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（保護源站免受攻擊）\n Cross-Origin-Embedder-Policy 設(shè)置為 require-corp（保護源站免受侵害）'
  );
}
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 是否啟用了跨域隔離未配置：會在控制臺提示你未開啟

怎么開啟呢 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 });

正確開啟后如圖

到此這篇關(guān)于JavaScript使用performance實現(xiàn)查看內(nèi)存的文章就介紹到這了,更多相關(guān)JavaScript performance查看內(nèi)存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: