iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
1
Modern Web

認識 Chrome 開發者工具系列 第 25

記憶體面版 - 記憶體堆快照 1

今天我們要開始一起來討論記憶體面版 (Memory panel),這個面版的主要功能就是讓你做網站的記憶體體檢,像是記憶體洩漏、記憶體膨脹和頻繁的垃圾回收都可以透過這個面版來做檢測。這個面版牽扯到很多記憶體相關的術語,很多我也不是很熟悉,如果你想要深入的了解這個主題,我強烈建議大家可以在看完這個幾天的文章後,再到官方文件 把記憶體這個區塊看完,如果你只是想要了解開發者工具如何檢測網站的記憶體使用狀況,那讀完這幾天的文章後,我相信你會有個基本的了解。

接下來這幾天我們的進展速度也會比較慢一點,效能面版 (Performance panel) 我們可能是沒有機會詳細介紹了冏,但是希望在討論記憶體檢測時,我們可以至少看一下如何透過它來幫助我們檢測。

使用記憶體面版

請先打開 Chrome 開發者工具然後切換到記憶體面版 (Memory panel),一進來之後你會看到幾個選項:

  • Take heap snapshot
  • Record allocation profile
  • Record allocation timeline

記憶體面版介面擷圖
圖 1 : 記憶體面版介面

我們今天先從 Take heap snapshot 開始介紹,這邊的 heap snapshot 官方翻成 堆快照,我們今天及接下來幾天使用的範例都是官方文件給的範例,為了方便大家操作,我把這幾個範例都放在 Codepen.io 上,今天使用的範例在這裡

在開始之前,我們先來看一下我們這個範例在做什麼:

JavaScript


var detachedNodes;

function create() {
  var ul = document.createElement('ul');
  for (var i = 0; i < 10; i++) {
    var li = document.createElement('li');
    ul.appendChild(li);
  }
  detachedTree = ul;
}

document.getElementById('create').addEventListener('click', create);

HTML

<button id="create">Create detached List</button>

從上面的範例程式可以看到,在 JavaScript 裡我們用了一個 create 方法來創造 10 個 li 並把它 append 到一個 ul 裡成為一組新的清單,最後我們把它綁到一個 button 元素上,所以每一次只要按下這個按鈕,它就會產生一組 DOM 清單。但在看完程式後有沒有發現其實這些產生出來的清單並沒有真的 append 到 DOM 樹裡,它只有把它創造出來,然後指到 detachedTree 這個變數裡。

好,會這樣做的原因是因為接下來我們要做的是檢測 DOM 樹裡的已分離節點 Detached nodes, 而我們上面的程式就會產生所謂的已分離節點,這些節點已經從 DOM 樹中被分離,但是仍然被 JavaScript 引用,所以會造成記憶體洩漏 (Memory leaks)。

小結

我們今天就先停在這裡,明天我們會使用開發者工具來檢測這些已分離節點。在這裡也想先跟大家說明,記憶體檢測及除錯已經算是蠻困難的除錯技巧,問題可能很容易找到,但是修正它是有一定的難度,所以如果沒辦法修好也不要太難過XD,這需要時間練習。好,不多說廢話XD,今天就先這樣子啦!


上一篇
審查面版
下一篇
記憶體面版 - 記憶體堆快照 2
系列文
認識 Chrome 開發者工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言