js中為什麼dom操作消耗效能

本文教程操作環境：windows7系統、jquery3.2.1版本，DELL G3電腦。

1、js中為什麼dom操作消耗效能？

JavaScript中js引擎和渲染引擎（瀏覽器核心）是獨立實現的。使用js 去操作 DOM 時，本質上是 JS 引擎和渲染引擎之間進行了“跨界交流”。每操作一次 DOM，都要跨界一次。跨界的次數一多，就會產生比較明顯的效能問題。

2、渲染引擎工作介紹：

解析HTML程式碼，生產DOM tree

解析CSS樣式，結合DOM tree生產Render tree（display: none;的結點不會存在Render tree上，最後不會被paint）

計算Render tree各個節點的佈局資訊，比如box的位置、尺寸、顏色、外形等

根據計算後的佈局資訊，呼叫瀏覽器的UI引擎進行渲染。

而操作dom會產生幾種動作，重繪和重排極大的影響渲染的效率。

3、最佳化方法：透過設定DOM元素的display樣式為none來隱藏元素

var myElement = document.getElementById('myElement');
myElement.style.display = 'none';
// 一些基於myElement的大量DOM操作
...
myElement.style.display = 'block';

以上就是JavaScript中dom消耗效能的原因及最佳化方法，希望能解決你的問題哦~更多JavaScript學習推薦：。