為什麼要減少操作DOM

為什麼要減少操作dom？

下面將按照以下布局同時操作div1和div2；然後在控制台列印出所需的時間，對時間盡心對比；

以下是布局：

lang="en">
charset="utf-8">
titletitle>
head>
id="div1">
div>
id="div2">
div>
//這裡寫**
script>
body>
html>

console.time("interval1");

var odiv = document.getelementbyid("div1");
for (var i = 0, str = ""; i < 5000; i++) 
console.timeend("interva11");

對div2的操作如下：

console.time("interval2");

var odiv2 = document.getelementbyid("div2");
for (var i = 0, str = ""; i < 5000; i++) 
odiv2.innerhtml = str;
console.timeend("interval2");

那麼分別用了多久呢？

interva1: 1502944900429.3262ms 

interval2: 0.5830078125ms

也是為什麼很多效能優化的書籍中說要減少dom操作額

以下是完整**：

lang="en">
charset="utf-8">
titletitle>
head>
id="div1">
div>
id="div2">
div>
window.onload = function
()         console.timeend("interva1");
console.time("interval2");
var odiv2 = document.getelementbyid("div2");
for (var i = 0, str = ""; i < 5000; i++) 
odiv2.innerhtml = str;
console.timeend("interval2");
}script>
body>
html>

為什麼要減少HTTP請求

http請求頭的資料量 每次請求都會帶上一些額外的資訊進行傳輸，當請求的資源很小，比如1個不到1k的圖示，可能request帶的資料比實際圖示的資料量還大。所以當請求越多的時候，在網路上傳輸的資料自然就多，傳輸速度自然就慢了。其實request自帶的資料量還是小問題，畢竟request能帶的資料量還...

減少操作DOM原因

為什麼不支援操作dom節點原因 個人覺得 在瀏覽器生成網頁時要經過 解析html 生成dom樹 解析css 生成css規則樹 合併dom樹和css樹生成render規則樹 開始渲染頁面 布局render樹對各元素尺寸,位置進行計算，得到每個節點的幾何資訊計算網 頁每個標籤布局距離 顏色 屬性 觸發簡...

虛擬DOM也是操作DOM,為什麼說它快？

虛擬dom 不會進行排版和重繪操作。虛擬dom 進行頻繁修改，然後一次性比較並修改真實dom 中需要改的部分，最後在真實dom 中進行排版與重繪，減少過多dom節點排版與重繪損耗 真實dom 頻繁排版與重繪的效率是相當低的 虛擬dom有效降低大面積 真實dom節點 的重繪月排版，因為最終與真實dom...