[IT 鐵人賽] 大型資料載入實例與狀況 Large of DOMs Day 26

昨天提到大量資料的事件綁定,今天再來聊一下關於 DOM 這件事情。不知道大家對於 Google Chrome DevTools 熟不熟悉,我們除了用他來看人家原始碼以外,也會使用他來觀察畫面的效能。

推薦大家可以追一下 Paul Irish 的推特。


關於效能問題

Advanced performance tooling in Chrome DevTools - Paul Irish @ Velocity 2014
Chrome Perf Tooling
How to Use Chrome Dev Tools to Find Performance Bottlenecks
Front-End Performance Optimization with Accelerated Compositing Part 1
Front-End Performance Optimization with Accelerated Compositing Part 2

大抵上,我們會使用 DevTools 來追蹤這些效能狀況,然後再來想辦法優化。然後對於大量個 DOM 我們多數會關心繪製效能分析( Paint Profiler )的狀況,歐對了,新版本的 Google Chrome 沒有這個東西,他被整合到效能( Performance )的設定裡面了,官方文件有提到,他改名字叫做 Enable advanced paint instrumentation

所以我說那個大量的 DOM 呢?

就實務上來說,這件事情跟一次要綁定 2000 個事件,其實大同小異。就如同我昨天提到的,你使用自串操作,一口氣 innerHTML 放入 2000 個 DOM 搞不好會比迴圈慢慢跑要來得快。根據昨天的例子,那種簡單的 DOM 說真的你看不出什麼效能瓶頸。大概就花上 250ms 就能寫好 2000 個 div 外加 @click 事件。

如果你察看效能的部分,事實上他還是做了相當多的事情,你會看到相當零碎的建立 DOM 物件之類的操作:

事實上,這還只是單純的 1 數到 2000 的例子而已。如果比較 FP( First Paint )的時間差,我們從 API 拿 2000 筆資料,差異大概是 500ms 上下。

主要差異在於,當你拿到資料後,丟到 v-for 裡面,基本上跟跑 for 迴圈差不多,但每次都需要做一次 createComponent 的動作,加上,他會呼叫 父元件 的部分生命週期,例如 updated ,所以,你也會在效能觀察的地方看到不少 Watcher 被呼叫。


那麼你說字串呢?

16ms 就做完了。當然這是比較極端的例子,因為我們的操作相對少。而且這還是利用前端組合的速度,如果 API 回傳已經將字傳組合好。那麼平均的速度大概就會壓在 10ms 左右。不過,由於資料數量基本上不會那麼誇張的大,所以也不用太追求這種事情就是。


小結

DevTools 我不熟,有問題的話我也不知道該怎麼辦其實(笑)。

ITHome 鐵人賽同步刊登 大型資料載入實例與狀況 Large of DOMs Day 26

Hina Chen
偏執與強迫症的患者,算不上是無可救藥,只是我已經遇上我的良醫了。
Taipei