們來講一下頁面的重排和重繪。

重排, 顧名思義就是重新排列元素重繪, 顧名思義就是重新繪制元素也許這樣解釋，你還是不能理解，為了幫助我們記憶, 通過這個例子先來看一下頁面展示在瀏覽器上的過程

在準備好的Rearrange-redraw.html文件中，定義div和p兩個元素，在頭部添加style標簽，作為內部樣式表使用。

定義選擇器 div ，聲明樣式 width: 200px; height: 200px; background-color: orange;

定義選擇器 p 聲明樣式 width: 300px;height: 300px;background-color: skyblue;

打開頁面我們看到內容顯示了。

那么我們寫的 html 和 css 是如何被呈現在頁面上的呢？

其實, 首先瀏覽器會捕獲到 html 結構, 生成一個 html樹結構, 這個結構內的所有標簽是沒有樣式出現的, 只是標明了 標簽和標簽之間的父子關系而已

接下來, 瀏覽器還會拿到你寫的 css 樣式, 解析以后生成一個 css 樹結構, 這個結構是沒有和 html 結合, 只是一個 css 樣式說明的樹狀結構

再來, 瀏覽器就會把拿到的 html樹 和 css樹 相結合, 將兩個樹慢慢融合在一起, 組成一個 rander樹, 這里面就會把 標簽和樣式 結合在一起, 呈現出頁面中的效果

最后, 就是由瀏覽器來把這個 rander樹 一筆一筆的 “畫” 在頁面上, 我們看到的頁面就出現了。

知道了頁面展示在瀏覽器上的過程過程, 我們再來聊一下重排和重繪

當我們通過后期的操作, 讓頁面中的節點發生了尺寸變化, 那么會因為一個元素的改變而導致整個頁面發生變化, 可能后續的元素位置都會發生改變, 那么這個時候, 就會重新排列所有元素, 也就是說會觸發重排, 也就是重新用 html樹 和 css樹 結合，去生成新的 rander 樹，來進行新一次的繪制

當我們通過后期的操作, 讓頁面中的節點發生一些外觀上的變化, 比如改變背景顏色, 文字顏色, 邊框顏色 的時候, 不會導致頁面排列元素的變化, 只是當前一個節點發生變化, 對其他節點沒有影響, 那么這個時候不需要重新排列元素, 只需要重新繪制當前這個節點即可, 這個行為叫做重繪

言

在Web開發領域，JavaScript（簡稱JS）作為一門強大的客戶端腳本語言，其重要性不言而喻。JS賦予了網頁生命，使其能夠響應用戶的操作，實現動態內容的加載和展示。而這一切的核心，離不開文檔對象模型（DOM）的節點操作。本文旨在探索JS與DOM節點操作的奧秘，通過實踐示例和理論解析，幫助你掌握這一前端開發的必備技能。

技術概述

DOM簡介

DOM是一種標準，用于表示和修改HTML或XML文檔的結構。它將文檔解析成樹狀結構，每個節點代表一個元素或屬性，允許JS通過編程方式訪問和修改這些節點。

核心特性與優勢

• 動態性：JS可以實時修改DOM，響應用戶事件，如點擊、輸入等。
• 選擇器：提供靈活的節點選擇方式，如getElementById, getElementsByClassName, querySelector等。
• 節點操作：添加、刪除、移動和修改節點及其屬性，使得頁面內容的動態更新變得簡單。

示例代碼

// 創建一個新的列表項
const li=document.createElement('li');
li.textContent='New Item';
document.querySelector('ul').appendChild(li);

技術細節

工作原理

當JS執行DOM操作時，它會查找、創建、修改或刪除DOM樹中的節點。這種操作會觸發瀏覽器重新計算頁面的布局和樣式，即重排（reflow）和重繪（repaint）。

難點分析

• 性能問題：頻繁的DOM操作可能導致頁面性能下降，特別是在大型應用中。
• 選擇器效率：某些選擇器比其他的選擇器更耗時，如getElementsByTagName。

實戰應用

場景描述

假設我們需要一個簡單的計數器組件，每當用戶點擊按鈕時，頁面上顯示的計數就會增加。

代碼示例

let count=0;
const counter=document.getElementById('counter');
const incrementBtn=document.getElementById('increment');

incrementBtn.addEventListener('click', ()=> {
  count++;
  counter.textContent=count;
});

優化與改進

性能瓶頸

• 減少DOM操作：盡量減少直接的DOM操作次數，比如使用字符串拼接后一次性更新。
• 虛擬DOM：借鑒React等框架的虛擬DOM技術，先在內存中操作，最后批量更新真實DOM。

代碼示例

let fragment=document.createDocumentFragment();
for (let i=0; i < 1000; i++) {
  const div=document.createElement('div');
  div.textContent='Item ' + i;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

常見問題

• Q: 如何高效地遍歷DOM節點？
• A: 使用NodeList.forEach或轉換為數組后再使用Array.prototype.forEach。

總結與展望

DOM節點操作是前端開發中不可或缺的一部分，它讓JS能夠直接與網頁內容進行交互，實現復雜的動態功能。然而，為了保證良好的用戶體驗，開發者需要關注DOM操作的性能和效率，采取適當的優化策略。隨著Web技術的發展，未來的DOM操作將更加高效、智能，為Web應用帶來無限可能。

希望本文能夠為你在前端開發旅程中提供堅實的理論基礎和實用的操作技巧，讓我們一起期待JS與DOM在未來的表現，繼續探索和創新，推動Web開發向前發展。