少妇的诱惑k8,美腿人妻系列,麻豆uV视频

原文鏈接 http://blog.poetries.top/2018/12/22/browser-render

關(guān)注公眾號獲取更多資訊

一、瀏覽器如何渲染網(wǎng)頁

概述：瀏覽器渲染一共有五步

處理 HTML 并構(gòu)建 DOM 樹。
處理 CSS構(gòu)建 CSSOM 樹。
將 DOM 與 CSSOM 合并成一個渲染樹。
根據(jù)渲染樹來布局，計算每個節(jié)點的位置。
調(diào)用 GPU 繪制，合成圖層，顯示在屏幕上

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

具體如下圖過程如下圖所示

image.png

渲染

網(wǎng)頁生成的時候，至少會渲染一次
在用戶訪問的過程中，還會不斷重新渲染

重新渲染需要重復(fù)之前的第四步(重新生成布局)+第五步(重新繪制)或者只有第五個步(重新繪制)

在構(gòu)建 CSSOM 樹時，會阻塞渲染，直至 CSSOM樹構(gòu)建完成。并且構(gòu)建 CSSOM 樹是一個十分消耗性能的過程，所以應(yīng)該盡量保證層級扁平，減少過度層疊，越是具體的 CSS 選擇器，執(zhí)行速度越慢
當 HTML 解析到 script 標簽時，會暫停構(gòu)建 DOM，完成后才會從暫停的地方重新開始。也就是說，如果你想首屏渲染的越快，就越不應(yīng)該在首屏就加載 JS 文件。并且CSS也會影響 JS 的執(zhí)行，只有當解析完樣式表才會執(zhí)行 JS，所以也可以認為這種情況下，CSS 也會暫停構(gòu)建 DOM

二、瀏覽器渲染五個階段

2.1 第一步：解析HTML標簽，構(gòu)建DOM樹

在這個階段，引擎開始解析html，解析出來的結(jié)果會成為一棵dom樹
dom的目的至少有2個

作為下個階段渲染樹狀圖的輸入
成為網(wǎng)頁和腳本的交互界面。(最常用的就是getElementById等等)

當解析器到達script標簽的時候，發(fā)生下面四件事情

html解析器停止解析,
如果是外部腳本，就從外部網(wǎng)絡(luò)獲取腳本代碼
將控制權(quán)交給js引擎，執(zhí)行js代碼
恢復(fù)html解析器的控制權(quán)

由此可以得到第一個結(jié)論1

由于<script>標簽是阻塞解析的，將腳本放在網(wǎng)頁尾部會加速代碼渲染。
defer和async屬性也能有助于加載外部腳本。
defer使得腳本會在dom完整構(gòu)建之后執(zhí)行；
async標簽使得腳本只有在完全available才執(zhí)行，并且是以非阻塞的方式進行的

2.2 第二步：解析CSS標簽，構(gòu)建CSSOM樹

我們已經(jīng)看到html解析器碰到腳本后會做的事情，接下來我們看下html解析器碰到樣式表會發(fā)生的情況
js會阻塞解析，因為它會修改文檔(document)。css不會修改文檔的結(jié)構(gòu)，如果這樣的話，似乎看起來css樣式不會阻塞瀏覽器html解析。但是事實上 css樣式表是阻塞的。阻塞是指當cssom樹建立好之后才會進行下一步的解析渲染

通過以下手段可以減輕cssom帶來的影響

將script腳本放在頁面底部
盡可能快的加載css樣式表
將樣式表按照media type和media query區(qū)分，這樣有助于我們將css資源標記成非阻塞渲染的資源。
非阻塞的資源還是會被瀏覽器下載，只是優(yōu)先級較低

2.3 第三步：把DOM和CSSOM組合成渲染樹（render tree）

image.png

2.4 第四步：在渲染樹的基礎(chǔ)上進行布局，計算每個節(jié)點的幾何結(jié)構(gòu)

布局(layout)：定位坐標和大小，是否換行，各種position, overflow, z-index屬性

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

將渲染樹的各個節(jié)點繪制到屏幕上，這一步被稱為繪制painting

三、渲染優(yōu)化相關(guān)

3.1 Load 和 DOMContentLoaded 區(qū)別

Load 事件觸發(fā)代表頁面中的 DOM，CSS，JS，圖片已經(jīng)全部加載完畢。
DOMContentLoaded 事件觸發(fā)代表初始的 HTML 被完全加載和解析，不需要等待 CSS，JS，圖片加載

3.2 圖層

一般來說，可以把普通文檔流看成一個圖層。特定的屬性可以生成一個新的圖層。不同的圖層渲染互不影響，所以對于某些頻繁需要渲染的建議單獨生成一個新圖層，提高性能。但也不能生成過多的圖層，會引起反作用。

通過以下幾個常用屬性可以生成新圖層

3D 變換：translate3d、translateZ
will-change
video、iframe 標簽
通過動畫實現(xiàn)的 opacity 動畫轉(zhuǎn)換
position: fixed

3.3 重繪（Repaint）和回流（Reflow）

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

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

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

以下幾個動作可能會導(dǎo)致性能問題

改變 window 大小
改變字體
添加或刪除樣式
文字改變
定位或者浮動
盒模型

很多人不知道的是，重繪和回流其實和 Event loop 有關(guān)

當 Event loop 執(zhí)行完Microtasks 后，會判斷 document 是否需要更新。因為瀏覽器是 60Hz 的刷新率，每 16ms 才會更新一次。
然后判斷是否有 resize 或者 scroll ，有的話會去觸發(fā)事件，所以 resize 和 scroll 事件也是至少 16ms才會觸發(fā)一次，并且自帶節(jié)流功能。
判斷是否觸發(fā)了 media query
更新動畫并且發(fā)送事件
判斷是否有全屏操作事件
執(zhí)行 requestAnimationFrame 回調(diào)
執(zhí)行 IntersectionObserver 回調(diào)，該方法用于判斷元素是否可見，可以用于懶加載上，但是兼容性不好
更新界面
以上就是一幀中可能會做的事情。如果在一幀中有空閑時間，就會去執(zhí)行 requestIdleCallback 回調(diào)

常見的引起重繪的屬性

color
border-style
visibility
background
text-decoration
background-image
background-position
background-repeat
outline-color
outline
outline-style
border-radius
outline-width
box-shadow
background-size

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

任何會改變元素幾何信息(元素的位置和尺寸大小)的操作，都會觸發(fā)重排，下面列一些栗子

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

回流影響的范圍

由于瀏覽器渲染界面是基于流失布局模型的，所以觸發(fā)重排時會對周圍DOM重新排列，影響的范圍有兩種

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

全局范圍回流

<body>
  <div class="hello">
    <h4>hello</h4>
    <p><strong>Name:</strong>BDing</p>
    <h5>male</h5>
    <ol>
      <li>coding</li>
      <li>loving</li>
    </ol>
  </div>
</body>

當p節(jié)點上發(fā)生reflow時，hello和body也會重新渲染，甚至h5和ol都會收到影響

局部范圍回流

用局部布局來解釋這種現(xiàn)象：把一個dom的寬高之類的幾何信息定死，然后在dom內(nèi)部觸發(fā)重排，就只會重新渲染該dom內(nèi)部的元素，而不會影響到外界

3.5 減少重繪和回流

使用 translate 替代 top

<div class="test"></div>
<style>
    .test {
        position: absolute;
        top: 10px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<script>
    setTimeout(() => {
        // 引起回流
        document.querySelector('.test').style.top = '100px'
    }, 1000)
</script>

使用 visibility 替換 display: none ，因為前者只會引起重繪，后者會引發(fā)回流（改變了布局）
把 DOM 離線后修改，比如：先把 DOM 給 display:none (有一次 Reflow)，然后你修改100次，然后再把它顯示出來
不要把 DOM 結(jié)點的屬性值放在一個循環(huán)里當成循環(huán)里的變量

for(let i = 0; i < 1000; i++) {
    // 獲取 offsetTop 會導(dǎo)致回流，因為需要去獲取正確的值
    console.log(document.querySelector('.test').style.offsetTop)
}

不要使用 table 布局，可能很小的一個小改動會造成整個 table 的重新布局
動畫實現(xiàn)的速度的選擇，動畫速度越快，回流次數(shù)越多，也可以選擇使用 requestAnimationFrame
CSS選擇符從右往左匹配查找，避免 DOM深度過深
將頻繁運行的動畫變?yōu)閳D層，圖層能夠阻止該節(jié)點回流影響別的元素。比如對于 video標簽，瀏覽器會自動將該節(jié)點變?yōu)閳D層。

image.png

重繪與回流 http://blog.poetries.top/2018/01/12/fed-performance-optimization/#%E5%85%AD%E3%80%81%E9%87%8D%E7%BB%98%E4%B8%8E%E5%9B%9E%E6%B5%81

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

瀏覽器渲染原理

瀏覽器渲染原理

一、瀏覽器如何渲染網(wǎng)頁

二、瀏覽器渲染五個階段

2.1 第一步：解析HTML標簽，構(gòu)建DOM樹

2.2 第二步：解析CSS標簽，構(gòu)建CSSOM樹

2.3 第三步：把DOM和CSSOM組合成渲染樹（render tree）

2.4 第四步：在渲染樹的基礎(chǔ)上進行布局，計算每個節(jié)點的幾何結(jié)構(gòu)

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

三、渲染優(yōu)化相關(guān)

3.1 Load 和 DOMContentLoaded 區(qū)別

3.2 圖層

3.3 重繪（Repaint）和回流（Reflow）

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

3.5 減少重繪和回流

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

瀏覽器渲染原理

一、瀏覽器如何渲染網(wǎng)頁

二、瀏覽器渲染五個階段

2.1 第一步：解析HTML標簽，構(gòu)建DOM樹

2.2 第二步：解析CSS標簽，構(gòu)建CSSOM樹

2.3 第三步：把DOM和CSSOM組合成渲染樹（render tree）

2.4 第四步：在渲染樹的基礎(chǔ)上進行布局，計算每個節(jié)點的幾何結(jié)構(gòu)

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

三、渲染優(yōu)化相關(guān)

3.1 Load 和 DOMContentLoaded 區(qū)別

3.2 圖層

3.3 重繪（Repaint）和回流（Reflow）

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

3.5 減少重繪和回流

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、瀏覽器如何渲染網(wǎng)頁

二、瀏覽器渲染五個階段

2.1 第一步：解析HTML標簽，構(gòu)建DOM樹

2.2 第二步：解析CSS標簽，構(gòu)建CSSOM樹

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

三、渲染優(yōu)化相關(guān)