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

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

摘要：常見的引起重繪的屬性回流回流是布局或者幾何屬性需要改變就稱為回流。回流必定會發(fā)生重繪，重繪不一定會引發(fā)回流。局部范圍對渲染樹的某部分或某一個(gè)渲染對象進(jìn)行重新布局

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

瀏覽器渲染一共有五步

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

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

將 DOM 與 CSSOM 合并成一個(gè)渲染樹

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

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

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

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

重繪（Repaint）

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

常見的引起重繪的屬性:

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

回流（Reflow）

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

回流必定會發(fā)生重繪，重繪不一定會引發(fā)回流。回流所需的成本比重繪高的多，改變深層次的節(jié)點(diǎn)很可能導(dǎo)致父節(jié)點(diǎn)的一系列回流

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

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

回流影響的范圍

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/100992.html

相關(guān)文章

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

摘要：斯坦福宣布使用作為計(jì)算機(jī)課程的首選語言近日，某位有年教學(xué)經(jīng)驗(yàn)的斯坦福教授決定放棄，而使用作為計(jì)算機(jī)入門課程的教學(xué)語言。斯坦福官方站點(diǎn)將它們新的課程描述為是最流行的構(gòu)建交互式的開發(fā)語言，本課程會用講解中的實(shí)例。前端每周清單第 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 進(jìn)階系列（三）之Render函數(shù)原理及實(shí)現(xiàn)

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

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

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

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

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

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

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

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