chrome 的開(kāi)發(fā)者工具中提供了很多高效工具方便我們對(duì)頁(yè)面進(jìn)行性能分析虎韵。performance面板中記錄和分析了頁(yè)面在運(yùn)行時(shí)的所有活動(dòng)
準(zhǔn)備工作
- 進(jìn)入隱身模式，避免瀏覽器插件的干擾
- 官方示例 打開(kāi)performance面板
- 打開(kāi)CPU節(jié)流，模擬低性能CPU的運(yùn)行情況（模擬移動(dòng)端）
- 勾選
screenshot將記錄運(yùn)行過(guò)程中每一幀的截圖 - 勾選
Memory可以看到占用內(nèi)存的不同組成部分迷扇、大致的垃圾回收的周期,以及有無(wú)明顯的內(nèi)存泄漏的情況
圖中各部的信息的含義:
-
FPS (Analyze frames per second)幀率（每秒幀數(shù)）薯酝。綠色豎線越高盐茎，F(xiàn)PS 越高瞻润。 FPS 圖表上的紅色塊表示長(zhǎng)時(shí)間幀店乐，很可能會(huì)出現(xiàn)卡頓 -
CPUCPU 資源喉童。此面積圖指示消耗 CPU 資源的事件類型
CPU與下方的Summary Tab是一致的撇寞，這部分的顏色也是一一對(duì)應(yīng)。占比越大的部分意味著消耗CPU資源也越多 -
NET每條彩色橫杠表示一種資源堂氯。橫杠越長(zhǎng)蔑担，檢索資源所需的時(shí)間越長(zhǎng)。 每個(gè)橫杠的淺色部分表示等待時(shí)間（從請(qǐng)求資源到第一個(gè)字節(jié)下載完成的時(shí)間） -
Screenshots展示每個(gè)時(shí)間點(diǎn)的屏幕快照 -
HEAP堆內(nèi)存占用
（js中的內(nèi)存垃圾回收機(jī)制：垃圾回收器會(huì)定期掃描內(nèi)存咽白，當(dāng)某個(gè)內(nèi)存中的值被引用為零時(shí)就會(huì)將其回收啤握。） -
Frames鼠標(biāo)移上去可以看到當(dāng)前的幀率；（Dropped Frame ：當(dāng) GPU 很忙的時(shí)候晶框，GPU 在渲染別的東西排抬，比如上一幀還沒(méi)渲染完的情況下合成器會(huì)跳過(guò)、丟棄（drop）某些幀） -
Main代表主線程授段，也是我們需要重點(diǎn)關(guān)注的部分蹲蒲，這一部分的圖像官方稱為flame chart (火焰圖)
火焰圖x軸的一段橫條代表執(zhí)行一個(gè)事件(函數(shù))，長(zhǎng)度越長(zhǎng)侵贵，花費(fèi)的時(shí)間越多届搁；y軸代表調(diào)用棧，如果幾個(gè)事件(函數(shù))在y軸上堆疊在一起，這意味著上方的事件(函數(shù))調(diào)用了下方的事件(函數(shù))卡睦。如果在這些橫條中右上角是紅色的就表示在該段代碼執(zhí)行過(guò)程中可能存在性能問(wèn)題.
面板下方與Summary Tab 同級(jí)的幾個(gè)tab
-
Bottom-Up事件時(shí)長(zhǎng)排序 -
Call Tree表示瀏覽器基本操作(事件執(zhí)行,繪制...)的事件調(diào)用順序和占用時(shí)間 -
Event Log事件發(fā)生的先后順序及占用時(shí)間
性能優(yōu)化
Avoid forced synchronous layouts
瀏覽器渲染每一幀通常是按以下步驟進(jìn)行：首先運(yùn)行JavaScript --> Recalculate Style --> Layout --> Paint --> Composite layers宴胧，但是某些js語(yǔ)句可能使瀏覽器在js運(yùn)行完成之前先進(jìn)行l(wèi)ayout，這被稱為forced synchronous layout表锻。
舉個(gè)栗子：
// Schedule our function to run at the start of the frame.
requestAnimationFrame(logBoxHeight);
function logBoxHeight() {
// Gets the height of the box in pixels and logs it out.
console.log(box.offsetHeight);
}
下面改一下logBoxHeight的代碼恕齐，在獲取box的高度前改變它的樣式
function logBoxHeight() {
box.classList.add('super-big');
// Gets the height of the box in pixels
// and logs it out.
console.log(box.offsetHeight);
}
這時(shí)，為了獲取準(zhǔn)確的高度瞬逊，瀏覽器必須先將新的樣式應(yīng)用于box显歧，然后執(zhí)行l(wèi)ayout。這一操作可能會(huì)非常耗時(shí)码耐，并且在大部分情況下也不是必須的追迟，比如我們使用上一幀的高度也是完全可以的
function logBoxHeight() {
console.log(box.offsetHeight);
box.classList.add('super-big');
}
