溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下前端瀏覽器渲染的5大步驟分別是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
瀏覽器渲染一共有五步
處理 HTML 并構建 DOM 樹
處理 CSS構建 CSSOM 樹
將 DOM 與 CSSOM 合并成一個渲染樹
根據渲染樹來布局，計算每個節點的位置
調用 GPU 繪制，合成圖層，顯示在屏幕上
第四步和第五步是最耗時的部分，這兩步合起來，就是我們通常所說的渲染
重繪和回流是渲染步驟中的一小節，但是這兩個步驟對于性能影響很大
重繪（Repaint）
重繪是當節點需要更改外觀而不會影響布局的，比如改變 color 就叫稱為重繪。
常見的引起重繪的屬性:
color border-style visibility background text-decoration outline box-shadow
回流（Reflow）
回流是布局或者幾何屬性需要改變就稱為回流。
回流必定會發生重繪，重繪不一定會引發回流。回流所需的成本比重繪高的多，改變深層次的節點很可能導致父節點的一系列回流
常見引起回流屬性和方法:
添加或者刪除可見的DOM元素；
元素尺寸改變——邊距、填充、邊框、寬度和高度
內容變化，比如用戶在input框中輸入文字
瀏覽器窗口尺寸改變——resize事件發生時
計算 offsetWidth 和 offsetHeight 屬性
設置 style 屬性的值
全局范圍：從根節點html開始對整個渲染樹進行重新布局。
局部范圍：對渲染樹的某部分或某一個渲染對象進行重新布局
以上是“前端瀏覽器渲染的5大步驟分別是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
