性能分析要寫什麼內容

一、時間性能的分析

時間性能的分析是性能優化中最常見的一種分析，可以從如下幾個方面進行分析：

1. 哪些代碼影響了性能？

function foo() {
    for (var i = 0; i < 1000000; i++) {
        // ...
    }
}

console.time('foo');
foo();
console.timeEnd('foo');

可以使用console.time()和console.timeEnd()來計算出一個函數的執行時間，然後通過比較各個函數的執行時間，找出哪些函數對性能影響較大。

2. 哪些API調用影響了性能？

console.time('querySelectorAll');
document.querySelectorAll('.some-class');
console.timeEnd('querySelecterAll');

可以同樣使用console.time()和console.timeEnd()來計算各個API函數的執行時間，找出哪些API調用對性能影響較大。

3. 如何捕獲JavaScript性能數據？

if (window.performance.timing) {
    var time = window.performance.timing;
    console.log('頁面載入時間：' + (time.loadEventEnd - time.navigationStart) + 'ms');
}

使用window.performance.timing可以獲得很多有用的頁面性能數據，如頁面載入時間、DNS查詢時間、TCP連接時間、DOM生成時間等等。

二、內存性能的分析

除了時間性能分析，還有一種非常重要的性能分析就是內存性能的分析。可以從如下幾個方面進行分析：

1. 哪些對象佔用了較多的內存？

var obj = {data: new Array(10000)};
console.profile();
for(var i = 0; i < 10000; i++) {
    obj.data[i] = new Object();
}
console.profileEnd();

使用console.profile()和console.profileEnd()可以記錄下一段時間內瀏覽器執行的函數調用棧，然後通過Chrome開發者工具中的Profiles面板可以查看每個函數調用的CPU時間、內存使用情況等等。

2. 哪些事件監聽器沒有被正確釋放？

var btn = document.getElementById('my-button');
function handleClick() {
    // ...
}
btn.addEventListener('click', handleClick);

// ...

btn.removeEventListener('click', handleClick);

可以使用事件監聽器來檢測是否有事件監聽器沒有被正確釋放，這種情況會造成內存泄漏。

3. 如何快速找到內存泄漏問題？

window.setInterval(function() {
    var mem = window.performance.memory.usedJSHeapSize / 1024 / 1024;
    console.log('當前內存使用情況：' + mem + 'MB');
}, 1000);

可以使用內存監控工具來監控JavaScript內存使用情況，如果發現內存使用量逐漸增加但未能及時釋放，則有可能存在內存泄漏問題。

三、網路性能的分析

網路性能的分析可以從如下幾個方面進行：

1. 哪些資源載入較慢？

console.time('image');
var img = new Image();
img.onload = function() {
    console.timeEnd('image');
}
img.src = 'http://example.com/image.png';

使用console.time()和console.timeEnd()可以監控各種網路資源的載入時間。

2. 如何優化對第三方API的調用？

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        console.log('完成API調用，狀態碼為：' + xhr.status);
    }
}
xhr.open('GET', 'http://example.com/api', true);
xhr.send();

盡量減少第三方API調用的次數，例如將多個API調用合併成一個，減少HTTP請求次數。

3. 如何快速檢測DNS查詢時間？

console.time('DNS');
var img = new Image();
img.onload = function() {
    console.timeEnd('DNS');
}
img.src = 'http://example.com/logo.png';

可以使用一個簡單的技巧來檢測DNS查詢時間，使用Image對象載入一個不存在的圖片，然後通過監控其onload事件的時間來判斷DNS查詢時間。