溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了js中dom操作消耗性能的原因，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。 3.JavaScript具有跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行。
本文教程操作環境：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';感謝你能夠認真閱讀完這篇文章，希望小編分享的“js中dom操作消耗性能的原因”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
