Chrome開發者工具不徹底指南：（3、性能篇）

時間 2019-12-08

原文原文鏈接

　　滷煮在前面已經向你們介紹了Chrome開發者工具的一些功能面板，其中包括Elements、Network、Resources基礎功能部分和Sources進階功能部分，對於通常的網站項目來講，其實就是須要這幾個面板功能就能夠了（再加上console面板這個萬精油）。它們的做用大多數狀況下是幫助你進行功能開發的。然而在你開發應用級別的網站項目的時候，隨着代碼的增長，功能的增長，性能會逐漸成爲你須要關注的部分。那麼網站的性能問題具體是指什麼呢？在滷煮看來，一個網站的性能主要關乎兩項，一是加載性能、二是執行性能。第一項能夠利用Network來分析，我之後會再次寫一篇關於它的文章分享滷煮的提升加載速度的經驗，不過在此以前，我強烈推薦你去閱讀《web高性能開發指南》這本書中的十四條黃金建議，這是我閱讀過的最精華的書籍之一，雖然只有短短的一百多頁，但對你的幫助確實沒法估量的。而第二項性能問題就體如今內存泄露上，這也是咱們這篇文章探討的問題——經過Timeline來分析你的網站內存泄露。javascript

　　雖然瀏覽器突飛猛進，每一次網站版本的更新就意味着JavaScript、css的速度更加快速，然而做爲一名前端人員，是頗有必要去發現項目中的性能的雞肋的。在衆多性能優化中，內存泄露相比於其餘性能缺陷（網絡加載）不容易發現和解決，由於內存泄露設計到瀏覽器處理內存的一些機制而且同時涉及到到你的編寫的代碼質量。在一些小的項目中，當內存泄露還不足以讓你重視，但隨着項目複雜度的增長，內存問題就會暴露出來。首先內存佔有過多致使你的網站響應速度（非ajax）變得慢，就感受本身的網頁卡死了同樣；而後你會看到任務管理器的內存佔用率飆升；到最後電腦感受死了機同樣。這種狀況在小內存的設備上狀況會更加嚴重。因此，找到內存泄露而且解決它是處理這類問題的關鍵。css

　　在本文中，滷煮會經過我的和官方的例子，幫助諸位理解Timeline的使用方法和分析數據的方法。首先咱們依然爲該面板區分爲四個區域，而後對它們裏面的各個功能進行逐一介紹:html

　　雖然Timeline在執行它的任務時會顯得花花綠綠讓人眼花繚亂，不過不用擔憂，滷煮用一句話歸納它的功能就是：描述你的網站在某些時候作的事情和呈現出的狀態。咱們看下區域1中的功能先：前端

　　在區域1主題是一個從左到右的時間軸，在運行時它裏面會呈現出各類顏色塊（下文中會介紹）。頂部有一條工具欄，從左到右，一次表示：java

　　一、開始運行Timeline檢測網頁。點亮圓點，Timline開始監聽工做，在此熄滅圓點，Timeline展現出監聽階段網站的執行狀態。node

　　二、清除全部的監聽信息。將Timeline復原。web

　　三、查找和過濾監控信息。點擊會彈出一個小框框，裏面能夠搜索或者顯示隱藏你要找的信息。ajax

　　四、手動回收你網站內內存垃圾。chrome

　　五、View：監控信息的展現方式，目前有兩種，柱狀圖和條狀圖，在展現的事例中，滷煮默認選擇條狀圖。瀏覽器

　　六、在偵聽過程當中但願抓取的信息，js堆棧、內存、繪圖等。。。。

　　區域2是區域1的徹底版，雖然他們都是展現的信息視圖，在在區域2種，圖示會變得更加詳細，更加精準。通常咱們查看監控視圖都在區域2種進行。

　　區域3是展現的是一些內存信息，總共會有四條曲線的變化。它們對應表示以下圖所示:

　　區域4中展現的是在區域2種某種行爲的詳細信息和圖表信息。

　　在對功能作了簡單的介紹以後咱們用一個測試用例來了解一下Timeline的具體用法。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{
			height: 20px;
			widows: 20px;
			font-size: 26px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div id="div1">
		HELLO WORLD0
	</div>
	<div id="div2">
		HELLO WORLD2
	</div>
	<div id="div3">
		HELLO WORLD3
	</div>
	<div id="div4">
		HELLO WORLD4
	</div>
	<div id="div5">
		HELLO WORLD5
	</div>
	<div id="div6">
		HELLO WORLD6
	</div>
	<div id="div7">
		HELLO WORLD7
	</div>
	<button id="btn">click me</button>
	<script type="text/javascript">
		var k = 0;
		function x() {
			if(k >= 7) return;
			document.getElementById('div'+(++k)).innerHTML = 'hello world'
		}
		document.getElementById('btn').addEventListener('click', x);
	
	</script>
</body>
</html>

　　新建一個html項目，而後再Chrome中打開它，接着按F12切換到開發者模式，選擇Timeline面板，點亮區域1左上角的那個小圓圈，你能夠看到它變成了紅色，而後開始操做界面。連續按下button執行咱們的js程序，等待全部div的內容都變成hello world的時候再次點擊小圓圈，熄滅它，這時候你就能夠看到Timeline中的圖表信息了，以下圖所示:

　　在區域1中，左下角有一組數字2.0MB-2.1MB,它的意思是在你剛剛操做界面這段時間內，內存增加了0.1MB。底部那塊淺藍色的區域是內存變化的示意圖。從左到右，咱們能夠看到剛剛瀏覽器監聽了4000ms左右的行爲動做，從0~4000ms內區域1中列出了全部的狀態。接下來咱們來仔細分析一下這些狀態的具體信息。在區域2種，滾動鼠標的滾輪，你會看到時間軸會放大縮小，如今咱們隨着滾輪不斷縮小時間軸的範圍，咱們能夠看到一些各個顏色的橫條:

　　在操做界面時，咱們點擊了一次button，它耗費了大約1ms的時間完成了從響應事件到重繪節目的一些列動做，上圖就是在789.6ms-790.6ms中完成的此次click事件所發生的瀏覽器行爲,其餘的事件行爲你一樣能夠經過滑動滑輪縮小區域來觀察他們的狀況。在區域2種，每一種顏色的橫條其實都表明了它本身的獨特的意義:

　　每次點擊都回到了上面的圖同樣執行若干事件，因此咱們操做界面時發生的事情能夠作一個大體的瞭解,咱們滑動滾輪把時間軸恢復到原始尺寸作個整體分析:

　　能夠看到，每一次點擊事件都伴隨着一些列的變化：html的從新渲染，界面從新佈局，視圖重繪。不少狀況下，每一個事件的發生都會引發一系列的變化。在區域2種，咱們能夠經過點擊某一個橫條，而後在區域4種更加詳細地觀察它的具體信息。咱們以執行函數x爲例觀察它的執行期的狀態。

　　隨着在事件發生的，除了dom的渲染和繪製等事件的發生以外，相應地內存也會發生變化，而這種變化咱們能夠從區域3種看到：

　　在上文中已經向你們作過區域3的介紹，咱們能夠看到js堆在視圖中不斷地再增加，這時由於由事件致使的界面繪製和dom從新渲染會致使內存的增長，因此每一次點擊，致使了內存相應地增加。一樣的，若是區域3種其餘曲線的變化會引發藍色線條的變化，這是由於其餘（綠色表明的dom節點數、黃色表明的事件數）也會佔有內存。所以，你能夠經過藍色曲線的變化形勢來肯定其餘個數的變化，固然最直觀的方式就是觀察括號中的數字變化。js內存的變化曲線是比較複雜的，裏面參雜了不少因素。咱們所列出來的例子其實是很簡單的。目前相信你對Timeline的使用有了必定的認識，下面咱們經過一些Google瀏覽器官方的實例來更好的瞭解它的做用（由於觀看示例都必須FQ，因此滷煮把js代碼copy出來，至於簡單的html代碼你能夠本身寫。若是能夠FQ的同窗就無所謂了！）

　　（官方測試用例一）查看內存增加，代碼以下：

var x = [];

function createSomeNodes() {
    var div,
        i = 100,
        frag = document.createDocumentFragment();
    for (;i > 0; i--) {
        div = document.createElement("div");
        div.appendChild(document.createTextNode(i + " - "+ new Date().toTimeString()));
        frag.appendChild(div);
    }
    document.getElementById("nodes").appendChild(frag);
}
function grow() {
    x.push(new Array(1000000).join('x'));
    createSomeNodes();//不停地在界面建立div元素
    setTimeout(grow,1000);
}

　　經過屢次執行grow函數，咱們在Timeline中看到了一張內存變化的圖:

　　經過上圖能夠看出js堆隨着dom節點增長而增加，經過點擊區域1中頂部的垃圾箱，能夠手動回收一些內存。正常的內存分析圖示鋸齒形狀（高低起伏，最終迴歸於初始階段的水平位置）而不是像上圖那樣階梯式增加，若是你看到藍色線條沒有回落的狀況，而且DOM節點數沒有返回到開始時的數目，你就能夠懷疑有內存泄露了。

　　下面是一個用異常手段展現的正常例子，說明了內存被建立了又如何被回收。你能夠看到曲線是鋸齒型的上下起伏狀態，在最後js內存回到了初始的狀態。（官方示例二） js代碼以下:

var intervalId = null, params;

function createChunks() {
    var div, foo, i, str;
    for (i = 0; i < 20; i++) {
        div = document.createElement("div");
        str = new Array(1000000).join('x');
        foo = {
            str: str,
            div: div
        };
        div.foo = foo;
    }
}

function start() {
    if (intervalId) {
        return;
    }
    intervalId = setInterval(createChunks, 1000);
}

function stop() {
    if (intervalId) {
        clearInterval(intervalId);
    }
    intervalId = null;
}

　　執行start函數若干次，而後執行stop函數，能夠生成一張內存劇烈變化的圖:

　　還有不少官方實例，你能夠經過它們來觀察各類狀況下內存的變化曲線，在這裏咱們不一一列出。在這裏滷煮選擇試圖的形式是條狀圖，你能夠在區域1中選擇其餘的顯示方式，這個全靠我的的愛好了。總而言之，Timeline能夠幫助咱們分析內存變化狀態（Timeline直譯就是時間軸的意思吧），經過對它的觀察來肯定個人項目是否存在着內存泄露以及是什麼地方引發的泄露。圖表在展現上雖然很直觀可是缺乏數字的精確，經過示圖曲線的變化咱們能夠了解瀏覽器上發生的事件，最主要的是瞭解內存變化的趨勢。而若是你但願進一步分析這些內存狀態，那麼接下來你就能夠打開Profiles來幹活了。這將是咱們這個系列的下一篇文章要介紹的。