操作DOM為什麼會很慢?

York Chen
2 min readApr 5, 2019

--

這是面試時,被一家公司的技術長問到的問題,當被問到時不太懂題目在問什麼,因為這個「很慢」感覺起來實在有點抽象。不過具體來說,猜測是在考量Jquery操作DOM執行的時間,主要的想問的應該還是網頁的效能(performance)的問題。

JavaScript直譯器不會直接改變網頁原始的HTML、CSS檔案,而是在瀏覽器的記憶體裡改變網頁頁面的DOM表示,而每改變一次DOM就會重新渲染一次網頁,這樣的一個來回傳送的過程,造成DOM很慢。

DOM操作過程:

  1. 使用者觸發點擊按鈕

→2.JavaScript監聽到點擊事件(Click Event)

→3.JavaScript直譯器改變網頁頁面的DOM表示,網頁重新排列、重新渲染樣式(Layout)

→4.使用者看到網頁內容的改變

在這樣的操作過程中,每一次DOM的改變,都會重新渲染一次網頁內容,需要重排DOM樹節點之間的父子關係與兄弟關係(新增、刪除、移動位置)、重繪網頁的樣式屬性,如尺寸。

這些都會使用到瀏覽器的記憶體,而造成會有「慢」的感覺。

當瀏覽器載入網頁時,發生的事:

圖片來源: How browsers work

參考資源

重新認識 JavaScript: Day 12 透過 DOM API 查找節點

How browsers work

--

--

York Chen
York Chen

Written by York Chen

Cooking is an indispensable part of life. It is a taste that can’t be forgotten.

No responses yet