溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了瀏覽器不優(yōu)化DOM操作性能的示例分析，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
知乎上有人提問：
現(xiàn)在前端這么繁榮，為什么大家在扎堆在 JS 上做文章，搞什么 TypeScript，Deno 什么的。DOM 操作不是開銷最大的么，為什么大家不把精力放到優(yōu)化瀏覽器交互而是 JS 技術的革新上？
瀏覽器一直在優(yōu)化 DOM 的性能啊。
框架的目標是提高開發(fā)效率，而非運行效率。況且 DOM 的性能（或者延伸到瀏覽器的性能）這個確實不是由社區(qū)驅動的，雖然主流幾大瀏覽器都是開源的，但這些瀏覽器的開發(fā)者幾乎都是商業(yè)公司。
相比 JS 而言，開發(fā)者們對于瀏覽器布局和渲染的關注更少。畢竟大家對 JavaScript 的關注比較多，但是對于 CSS(3) 的性能關注就比較少了。
例如 V8 的新 JS 編譯器 Turbofan 以及新的解釋器 Ignition 很多開發(fā)者都聽說過，甚至 QuickJS，Hermes 的發(fā)布都引起了開發(fā)者們的強烈關注。但是對于 DOM 操作或者 CSS 引擎則很少有開發(fā)者關注。
其實瀏覽器一直在努力。如果你不信，你可以下載一個 2 年前的 Chrome 來訪問一下當前頁面 。
2005 年 HTML 規(guī)范大概 100 頁。
2020 年 HTML 規(guī)范大概 800 頁。
貼一張動圖來看看 Chrome 對 DOM 重繪的改進。
當 Chrome 準備在屏幕上繪制像素時，它必須首先確定頁面上的哪些元素需要重繪，哪些可以從上一幀的緩存中復制。在具有頻繁 DOM 更改的動態(tài)頁面上，會導致嚴重的性能問題。
Chrome 怎么改進的呢？Chrome 為每個元素生成繪制命令，通過跟蹤分析這些繪制命令，以此來識別視覺上不重疊的子集。如果未修改其中一個子集，則可以直接從緩存中復制整個塊，而無需進行任何其他工作。這就顯著了提升了 DOM 改變后的重繪性能。
上述內容就是瀏覽器不優(yōu)化DOM操作性能的示例分析，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
