這是面試時,被一家公司的技術長問到的問題,當被問到時不太懂題目在問什麼,因為這個「很慢」感覺起來實在有點抽象。不過具體來說,猜測是在考量Jquery操作DOM執行的時間,主要的想問的應該還是網頁的效能(performance)的問題。
JavaScript直譯器不會直接改變網頁原始的HTML、CSS檔案,而是在瀏覽器的記憶體裡改變網頁頁面的DOM表示,而每改變一次DOM就會重新渲染一次網頁,這樣的一個來回傳送的過程,造成DOM很慢。
DOM操作過程:
- 使用者觸發點擊按鈕
→2.JavaScript監聽到點擊事件(Click Event)
→3.JavaScript直譯器改變網頁頁面的DOM表示,網頁重新排列、重新渲染樣式(Layout)
→4.使用者看到網頁內容的改變
在這樣的操作過程中,每一次DOM的改變,都會重新渲染一次網頁內容,需要重排DOM樹節點之間的父子關係與兄弟關係(新增、刪除、移動位置)、重繪網頁的樣式屬性,如尺寸。
這些都會使用到瀏覽器的記憶體,而造成會有「慢」的感覺。
當瀏覽器載入網頁時,發生的事: