摘要：發(fā)現(xiàn)內(nèi)存泄漏打開的任務(wù)管理器，確保列有顯示。如果線圖不停的上升，就說(shuō)明出現(xiàn)了內(nèi)存泄漏。定位內(nèi)存泄漏在開發(fā)者工具的面板中，我們可以選擇，記錄一個(gè)當(dāng)前頁(yè)面具體內(nèi)存使用情況的快照。如果該對(duì)象的增長(zhǎng)了，說(shuō)明確實(shí)出現(xiàn)了內(nèi)存泄漏。

隨著網(wǎng)頁(yè)的加載，每個(gè)HTTP請(qǐng)求都會(huì)是瀑布流中的一條。第一條都是文件document的加載，當(dāng)文件被解析，隨后通常是CSS文件的加載。和寫在HTML文件中的標(biāo)簽中的順序是一樣的。但瀏覽器會(huì)做一些優(yōu)化，比如會(huì)降低圖片的優(yōu)先度，提升CSS文件的優(yōu)先度等。

在瀑布流下方的表格中，我們可以看到請(qǐng)求的Name，Status，Type等信息。Initiator列的意思是，什么文件需求加載了這一行的文件。按住Shift點(diǎn)擊表格的一行，調(diào)用該行文件的相應(yīng)文件會(huì)變綠(who called it?)，該行文件調(diào)用的相應(yīng)行會(huì)變紅(who does it called?)。

白色 隊(duì)列中。不常見(jiàn)。HTTP1中，瀏覽器一次性只能進(jìn)行6個(gè)TCP連接，比如我們有7個(gè)CSS文件，那么其中的一個(gè)就會(huì)在隊(duì)列中。

灰色 一個(gè)請(qǐng)求能發(fā)送前的各種停滯反應(yīng)時(shí)間。

淺灰色 在Proxy代理服務(wù)器消耗的時(shí)間

深綠色 DNS查找的時(shí)間

橙色 建立連接時(shí)間。包括TCP握手時(shí)間和建立SSL連接時(shí)間。

棕色 SSL連接時(shí)間

綠色 等待回復(fù)的時(shí)間。也就是等待獲得第一個(gè)字節(jié)的時(shí)間。如果綠色很長(zhǎng)說(shuō)明應(yīng)用服務(wù)器很慢。

藍(lán)色 下載回復(fù)內(nèi)容的時(shí)間。和文件大小有關(guān)系。

如果我們點(diǎn)擊Capture Screenshot按鈕，重新加載頁(yè)面， 就可以看到網(wǎng)頁(yè)的每次repaint，也就是網(wǎng)頁(yè)是如何加載的。

使用這個(gè)功能，我們可以知道在慢速網(wǎng)絡(luò)下，網(wǎng)頁(yè)是如何呈現(xiàn)出來(lái)的。

Network面板中，我們可以點(diǎn)擊文件類型來(lái)查看特定類型的文件。左側(cè)有個(gè)輸入框也可以輸入特定條件。比如larger-than:200px，就可以觀察大于200px的圖片請(qǐng)求。

Disable Cache，Offline，Preserve Log三個(gè)按鈕的功能是顯而易見(jiàn)的。

開發(fā)者性能測(cè)試是在開發(fā)環(huán)境中做性能測(cè)試，但是用戶端是在真實(shí)用戶使用的情況下記錄測(cè)試數(shù)據(jù)。以前是這么做的：

const start = new Date().getTime();

const end = new Date().getTime();

const time = end - start;

這樣我們就可以記錄下用戶作出一個(gè)操作的時(shí)間，然后將數(shù)據(jù)post回來(lái)。

后來(lái)有了Performance API:

performance.mark("start")

performance.mark("end);

performance.measure("Our Measurement,"start","end");

performance.getEntriesByType("measure")

一般圖片過(guò)大的解決方法：

resize圖片

刪除圖片的meta data

在服務(wù)器端使用gzip，brotli, zopfli等工具。

還有一個(gè)HTML API要知道，srcset
可以在不同窗口大小的時(shí)候加載指定的圖片。

但是為了瀏覽器兼容性，我們總是應(yīng)該給默認(rèn)的src attribute留一個(gè)URL。

現(xiàn)代大多數(shù)屏幕刷新率都是60幀每秒。1秒/60 = 16.66毫秒。所以我們的一個(gè)畫面更新的處理時(shí)間如果超過(guò)了16毫秒，就感覺(jué)卡。

有一種卡的原因是因?yàn)椋馕鯦avascript的時(shí)間過(guò)長(zhǎng)。V8引擎渲染頁(yè)面的時(shí)候，需要編譯Javascript，生成AST(Abstract Syntax Tree)。當(dāng)客戶端的處理性能很差的時(shí)候，就要等很久。

還有一種卡的原因是因?yàn)椋琇ayout thrashing，反復(fù)布局，又稱布局抖動(dòng)。

//Read
const h1 = element.clientHeight;
//Write
element1.style.height = (h1 * 2) + "px";
//Read
const h2 = element2.clientHeight;
//Write
element2.sytle.height = (h2 * 2) + "px";

當(dāng)我們反復(fù)進(jìn)行這種DOM讀寫操作的時(shí)候，就會(huì)造成布局抖動(dòng)。

如果我們可以將讀和寫完全分開，一次性操作所有讀，一次性操作所有寫，就不會(huì)有這種情況，但是這是不現(xiàn)實(shí)的。這就是使用window.requestAnimationFrame()的原因。

簡(jiǎn)單說(shuō)requestAnimationFrame將讀寫操作和屏幕刷新率匹配起來(lái)，當(dāng)瀏覽器準(zhǔn)備好更新下一幀時(shí)，做想做的操作，減少性能浪費(fèi)，避免跳幀。關(guān)于這個(gè)話題有很多寫Event Loop的文章里也有寫，這里不多寫。

在開發(fā)者工具中，我們?cè)诟喙ぞ咧锌梢哉业絉endering的選項(xiàng)。

打開這個(gè)選項(xiàng)，頁(yè)面每次repaint的地方都會(huì)變成綠色，幫助開發(fā)者觀察是否一些沒(méi)必要重繪的地方在不停的被重繪，浪費(fèi)性能。

我們點(diǎn)擊錄制按鈕，在頁(yè)面上做一些操作，比如Scroll。Performance面板中就會(huì)有一些數(shù)據(jù)。

最下方有一個(gè)餅狀圖是一個(gè)概括總結(jié)。

展開Main行，X軸代表處理時(shí)間，Y軸是Call Stack。Y軸高沒(méi)關(guān)系，只是函數(shù)之間不斷的調(diào)用，但是如果有色塊很寬的話就說(shuō)明處理時(shí)間很長(zhǎng)。

我們可以使用WASD來(lái)操作。按W Zoom In可以看到具體信息。

找到一個(gè)很寬的色塊，看之前是哪個(gè)色塊調(diào)用了這個(gè)色塊，然后我們就可以在下方Summary面板中找到具體文件名，點(diǎn)擊去Sources面板看代碼。

當(dāng)一些內(nèi)存沒(méi)有按開發(fā)者的意愿被釋放的時(shí)候，就出現(xiàn)了內(nèi)存泄漏。

意外添加的全局變量

function foo() {
  bar = "Hi"
}

當(dāng)foo被調(diào)用的時(shí)候，因?yàn)閎ar沒(méi)有變量聲明關(guān)鍵詞const， var， let。JS就會(huì)一直向上找這個(gè)變量到全局作用域，然后會(huì)為你創(chuàng)建一個(gè)全局變量bar。當(dāng)這個(gè)函數(shù)結(jié)束的時(shí)候，你以為這個(gè)bar會(huì)被回收，但其實(shí)它一直留在全局。設(shè)想如果這個(gè)bar不是“Hi”而是一個(gè)擁有很多元素的array，它留在了全局作用域，這并不是我們想要的情況。

沒(méi)有取消的計(jì)時(shí)器

顧名思義，計(jì)時(shí)器沒(méi)有被取消或移除。

多余的DOM元素變量

const button = document.getElementById("button);

document.body.removeChild(
  document.getElementById("button)
);
}

這里我們?cè)贒OM中移除了這個(gè)button，但是之前指向這個(gè)元素的reference還在，就是變量button。所以這個(gè)reference就留在了內(nèi)存中。

打開Chrome的任務(wù)管理器，確保Javascript Memory列有顯示。我們可以看到每個(gè)標(biāo)簽頁(yè)的內(nèi)存使用情況。如果有一個(gè)標(biāo)簽頁(yè)的內(nèi)存使用不穩(wěn)定，一直在上升，說(shuō)明出現(xiàn)了內(nèi)存泄漏。

在Performance面板記錄下的數(shù)據(jù)中，如果我們打勾Memory選項(xiàng)，我們就可以看到Memory行。如果線圖不停的上升，就說(shuō)明出現(xiàn)了內(nèi)存泄漏。

在開發(fā)者工具的Memory面板中，我們可以選擇Heap Snapshot，記錄一個(gè)當(dāng)前頁(yè)面具體內(nèi)存使用情況的快照。注意Shallow Size列和Retained Size列。

Shallow Size是對(duì)象自身占用內(nèi)存的大小，而Retained Size是指我們移除Object后能獲得多少空間，也就是將對(duì)象本身和連同的相關(guān)對(duì)象一起刪除后釋放的內(nèi)存大小。比如一個(gè)變量指向一個(gè)很大的Object，這個(gè)變量本身是個(gè)reference很小（Shallow Size很小），但是移除這個(gè)變量以后，我們就可以獲得很大的空間（Retained Size很大)。

我們可以根據(jù)Shallow Size給Heap Snapshot排序，找到占用內(nèi)存最多的對(duì)象，如果不確認(rèn)是否是內(nèi)存泄漏，可以再記錄一個(gè)Heap Snapshot做對(duì)比。如果該對(duì)象的Shallow Size增長(zhǎng)了，說(shuō)明確實(shí)出現(xiàn)了內(nèi)存泄漏。我們可以根據(jù)工具給的提示信息，找到開發(fā)代碼片段做修改。

現(xiàn)在的Audit面板整合了谷歌的Lighthouse服務(wù)。網(wǎng)上還有一些其他不錯(cuò)的第三方服務(wù)如webpagetest， sonarwhal。

官方文檔
Chrome Developer Tool