前端優(yōu)化系列之瀏覽器渲染

cyixlq 發(fā)布于2019-08-23 14:41 / 886人閱讀

摘要：常見的引起重繪的屬性回流回流是布局或者幾何屬性需要改變就稱為回流?；亓鞅囟〞l(fā)生重繪，重繪不一定會引發(fā)回流。局部范圍對渲染樹的某部分或某一個渲染對象進行重新布局

瀏覽器的渲染：過程與原理

瀏覽器渲染一共有五步

處理 HTML 并構(gòu)建 DOM 樹

處理 CSS構(gòu)建 CSSOM 樹

將 DOM 與 CSSOM 合并成一個渲染樹

根據(jù)渲染樹來布局，計算每個節(jié)點的位置

調(diào)用 GPU 繪制，合成圖層，顯示在屏幕上

第四步和第五步是最耗時的部分，這兩步合起來，就是我們通常所說的渲染

重繪和回流是渲染步驟中的一小節(jié)，但是這兩個步驟對于性能影響很大

重繪（Repaint）

重繪是當節(jié)點需要更改外觀而不會影響布局的，比如改變 color 就叫稱為重繪。

常見的引起重繪的屬性:

color
border-style
visibility
background
text-decoration
outline
box-shadow

回流（Reflow）

回流是布局或者幾何屬性需要改變就稱為回流。

回流必定會發(fā)生重繪，重繪不一定會引發(fā)回流?；亓魉璧某杀颈戎乩L高的多，改變深層次的節(jié)點很可能導(dǎo)致父節(jié)點的一系列回流

常見引起回流屬性和方法:

添加或者刪除可見的DOM元素；
元素尺寸改變——邊距、填充、邊框、寬度和高度
內(nèi)容變化，比如用戶在input框中輸入文字
瀏覽器窗口尺寸改變——resize事件發(fā)生時
計算 offsetWidth 和 offsetHeight 屬性
設(shè)置 style 屬性的值

回流影響的范圍

全局范圍：從根節(jié)點html開始對整個渲染樹進行重新布局。
局部范圍：對渲染樹的某部分或某一個渲染對象進行重新布局

云服務(wù)器 GPU云服務(wù)器系列之系列之二架構(gòu)之坑系列 jsp 瀏覽器渲染

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/100992.html

相關(guān)文章

前端每周清單第 11 期：Angular 4.1支持TypeScript 2.3，Vue 2.3優(yōu)化

摘要：斯坦福宣布使用作為計算機課程的首選語言近日，某位有年教學(xué)經(jīng)驗的斯坦福教授決定放棄，而使用作為計算機入門課程的教學(xué)語言。斯坦福官方站點將它們新的課程描述為是最流行的構(gòu)建交互式的開發(fā)語言，本課程會用講解中的實例。前端每周清單第 11 期：Angular 4.1支持TypeScript 2.3，Vue 2.3優(yōu)化服務(wù)端渲染，優(yōu)秀React界面框架合集為InfoQ中文站特供稿件，首發(fā)地址為...

warkiz 2019-08-20 16:15 評論0 收藏0
Vue 進階系列（三）之Render函數(shù)原理及實現(xiàn)

摘要：進階系列一之響應(yīng)式原理及實現(xiàn)進階系列二之插件原理及實現(xiàn)進階系列三之函數(shù)原理及實現(xiàn)函數(shù)原理根據(jù)第一篇文章介紹的響應(yīng)式原理，如下圖所示。在初始化階段，本質(zhì)上發(fā)生在函數(shù)中，然后通過函數(shù)生成，根據(jù)生成。負責(zé)收集依賴，清除依賴和通知依賴。（關(guān)注福利，關(guān)注本公眾號回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實戰(zhàn)、面試指導(dǎo)）showImg(https://segmentfa...

geekidentity 2019-08-23 12:55 評論0 收藏0
前端每周清單半年盤點之 React 與 ReactNative 篇

摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開發(fā)者的討論。前端每周清單半年盤點之 React 與 ReactNative 篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為...

Barry_Ng 2019-08-22 10:54 評論0 收藏0
前端每周清單第 48 期：Slack Webpack 構(gòu)建優(yōu)化，CSS 命名規(guī)范與用戶追蹤，Vue.

摘要：發(fā)布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標準。本周正式發(fā)布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協(xié)議等特性變化。新特性介紹日前發(fā)布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

sean 2019-08-22 13:57 評論0 收藏0
前端每周清單第 50 期: AngularJS and Long Term Support, Web

摘要：在該版本發(fā)布之后，開發(fā)團隊并不會繼續(xù)發(fā)布新的特性，而會著眼于進行重大的錯誤修復(fù)。發(fā)布每六個星期，團隊就會創(chuàng)建新的分支作為發(fā)布通道，本文即是對新近發(fā)布的版本進行簡要介紹。 showImg(https://segmentfault.com/img/remote/1460000013229009); 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱...

DobbyKim 2019-08-26 11:38 評論0 收藏0