91九色国产porny,爽爽精品dvd蜜桃成熟时电影院,一本大道久久东京热av

国产69囗曝吞精在线视频,肥臀浪妇太爽了快点再快点,亚洲欧洲成人a∨在线观看,狠狠色丁香久久综合 ,国精一二二产品无人区免费应用,亚洲精品久久久久中文字幕,四虎一区二区成人免费影院网址 ,无码三级中文字幕在线观看

你真的了解重排和重繪嗎？

2020-4-11 前端達(dá)人

做過(guò)前端開(kāi)發(fā)的小伙伴就算不是非常理解重排與重繪，但是肯定都聽(tīng)過(guò)這兩個(gè)詞。那為什么這兩個(gè)東西這么重要？因?yàn)樗c我們的頁(yè)面性能息息相關(guān)，今天，我們就來(lái)好好研究一下這兩個(gè)東西。

瀏覽器的渲染流程

在講解重排和重繪之前，我們有必要說(shuō)一下瀏覽器的渲染流程。下面是瀏覽器渲染過(guò)程中最關(guān)鍵的幾個(gè)部分。如果想了解完整的瀏覽器渲染流程，推薦大家去閱讀李兵老師的瀏覽器工作原理實(shí)踐，需要付費(fèi)閱讀。后期我也會(huì)整理一下再出一篇博客詳細(xì)介紹瀏覽器的渲染過(guò)程。

JavaScript：一般來(lái)說(shuō)，我們會(huì)使用 JavaScript 來(lái)實(shí)現(xiàn)一些視覺(jué)變化的效果。比如用 jQuery 的 animate 函數(shù)做一個(gè)動(dòng)畫(huà)、對(duì)一個(gè)數(shù)據(jù)集進(jìn)行排序或者往頁(yè)面里添加一些 DOM 元素等。當(dāng)然，除了 JavaScript，還有其他一些常用方法也可以實(shí)現(xiàn)視覺(jué)變化效果，比如：CSS Animations、Transitions 和 Web Animation API。
樣式計(jì)算：此過(guò)程是根據(jù)匹配選擇器（例如 .headline 或 .nav > .nav__item）計(jì)算出哪些元素應(yīng)用哪些 CSS 規(guī)則的過(guò)程。從中知道規(guī)則之后，將應(yīng)用規(guī)則并計(jì)算每個(gè)元素的最終樣式。
布局：在知道對(duì)一個(gè)元素應(yīng)用哪些規(guī)則之后，瀏覽器即可開(kāi)始計(jì)算它要占據(jù)的空間大小及其在屏幕的位置。網(wǎng)頁(yè)的布局模式意味著一個(gè)元素可能影響其他元素，例如元素的寬度一般會(huì)影響其子元素的寬度以及樹(shù)中各處的節(jié)點(diǎn)，因此對(duì)于瀏覽器來(lái)說(shuō)，布局過(guò)程是經(jīng)常發(fā)生的。
繪制：繪制是填充像素的過(guò)程。它涉及繪出文本、顏色、圖像、邊框和陰影，基本上包括元素的每個(gè)可視部分。繪制一般是在多個(gè)表面（通常稱為層）上完成的。
合成：由于頁(yè)面的各部分可能被繪制到多層，由此它們需要按正確順序繪制到屏幕上，以便正確渲染頁(yè)面。對(duì)于與另一元素重疊的元素來(lái)說(shuō)，這點(diǎn)特別重要，因?yàn)橐粋€(gè)錯(cuò)誤可能使一個(gè)元素錯(cuò)誤地出現(xiàn)在另一個(gè)元素的上層。
其中，重排和重繪影響的就是其中的布局和繪制過(guò)程。

什么是重排和重繪制
重排：當(dāng)DOM的變化引發(fā)了元素幾何屬性的變化，比如改變?cè)氐膶捀撸氐奈恢茫瑢?dǎo)致瀏覽器不得不重新計(jì)算元素的幾何屬性，并重新構(gòu)建渲染樹(shù)，這個(gè)過(guò)程稱為“重排”。
重繪：完成重排后，要將重新構(gòu)建的渲染樹(shù)渲染到屏幕上，這個(gè)過(guò)程就是“重繪”。
簡(jiǎn)單來(lái)說(shuō)，涉及元素的幾何更新時(shí)，叫重排。而只涉及樣式更新而不涉及幾何更新時(shí)，叫重繪。對(duì)于兩者來(lái)說(shuō)，重排必定引起重繪，但是重繪并不一定引起重排。所以，當(dāng)涉及重排時(shí)，瀏覽器會(huì)將上述的步驟再次執(zhí)行一遍。當(dāng)只涉及重繪時(shí)，瀏覽器會(huì)跳過(guò)Layout步驟，即：

而如果既不需要重排，也不需要重繪，那么就是下面這樣：

瀏覽器會(huì)直接跳到合成階段。顯然，對(duì)于頁(yè)面性能來(lái)說(shuō)，不重排也不重繪 > 重繪 > 重排。

什么操作會(huì)引起重排和重繪
顯然，觸發(fā)重排的一般都是幾何因素，這是比較好理解的：

頁(yè)面第一次渲染在頁(yè)面發(fā)生首次渲染的時(shí)候，所有組件都要進(jìn)行首次布局，這是開(kāi)銷(xiāo)最大的一次重排
瀏覽器窗口尺寸改變
元素位置和尺寸發(fā)生改變的時(shí)候
新增和刪除可見(jiàn)元素
內(nèi)容發(fā)生改變（文字?jǐn)?shù)量或圖片大小等等）
元素字體大小變化
還有其他一些操作也可能引發(fā)重排

查詢某些屬性或調(diào)用某些方法
offset(Top|Left|Width|Height)
scroll(Top|Left|Width|Height)
client(Top|Left|Width|Height)
getComputedStyle()
我們可能不太理解為什么這些操作也能引起重排，這里我先簡(jiǎn)單解釋一下。因?yàn)楝F(xiàn)在的瀏覽器已經(jīng)非常完善了，會(huì)自動(dòng)幫我們做一些優(yōu)化。當(dāng)我們用js操作DOM的時(shí)候，瀏覽器并不是立馬執(zhí)行的，而是將操作存儲(chǔ)在一個(gè)隊(duì)列中。當(dāng)達(dá)到一定數(shù)量或者經(jīng)過(guò)一定時(shí)間以后瀏覽器再統(tǒng)一的去執(zhí)行隊(duì)列中的操作。那么回到我們剛才的問(wèn)題，為什么查詢這些屬性也會(huì)導(dǎo)致重排？因?yàn)楫?dāng)你查詢這些屬性時(shí)，瀏覽器就會(huì)強(qiáng)制刷新隊(duì)列，因?yàn)槿绻涣ⅠR執(zhí)行隊(duì)列中的操作，有可能得到的結(jié)果就是錯(cuò)誤的。所以相當(dāng)于你強(qiáng)制打斷了瀏覽器的優(yōu)化流程，引發(fā)了重排。下面我們通過(guò)一些小例子來(lái)進(jìn)一步理解這段話：

首先我們來(lái)一個(gè)顯然會(huì)引發(fā)重排的操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #test {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="test">

  </div>
  <button onclick="reflow()">click</button>
  <script>
    function reflow() {
      var div = document.querySelector("#test");
      div.style.left = '200px';
    }
  </script>
</body>
</html>

把時(shí)間軸往后拉，可以看到這幾個(gè)過(guò)程，先簡(jiǎn)單介紹一些這些名詞代表的含義：

Recalculate Style：這個(gè)過(guò)程就是生成CSSOM的過(guò)程
Layout：這就是布局階段，即重排的過(guò)程
Update Layer Tree：這個(gè)階段是更新層樹(shù)的過(guò)程
Paint：該階段是為每一層準(zhǔn)備繪制列表的過(guò)程
Composite Layers：該階段是利用繪制列表來(lái)生成相應(yīng)圖層的位圖了，還涉及到合成線程和光柵化，performence面板中的Raster就是光柵化線程池。
這里只做一個(gè)簡(jiǎn)單的介紹，對(duì)其中內(nèi)容不太明白的同學(xué)可以參考李兵老師的文章或者在我的下一篇介紹瀏覽器渲染過(guò)程的文章中會(huì)詳細(xì)解釋。

那通過(guò)這個(gè)圖我們可以看到，我們改變了div的left之后就觸發(fā)了Layout，即重排的過(guò)程。下面我們僅改變div的背景顏色，給大家一個(gè)對(duì)比。

即不重排也不重繪
說(shuō)完了重排和重繪，不要忘記我們最開(kāi)始提到的，最的方式就是跳過(guò)重排和重繪階段。你可能會(huì)想，什么情況下可以做到這一點(diǎn)?其實(shí)這就是我們平時(shí)說(shuō)的GPU加速，具體是如何實(shí)現(xiàn)呢？在開(kāi)發(fā)過(guò)程中，如果我們使用了某些屬性，瀏覽器會(huì)幫助我們將使用了該屬性的div提升到一個(gè)單獨(dú)的合成層，而在后面的渲染中，提升到該層的div將跳過(guò)重排和重繪的操作，直接到合成階段。在stack overflow上有問(wèn)題提到了這塊內(nèi)容。我們翻譯一下就是：
下面幾個(gè)屬性能讓瀏覽器幫助我們將div提升到一個(gè)單獨(dú)的合成層：

圖層具有3D或透視變換CSS屬性
使用加速視頻解碼的 video 元素
擁有 3D（WebGL）上下文或者加速 2D 上下文的 canvas 元素
混合插件（Flash)
對(duì)自己的 opacity 做 CSS 動(dòng)畫(huà)或使用一個(gè)動(dòng)畫(huà) webkit 變換的元素
圖層使用加速的CSS過(guò)濾器
層具有作為合成層的后代
圖層具有較低z索引的同級(jí)元素，該同級(jí)元素具有合成層（換句話說(shuō)，該層在合成層的頂部渲染）
css will-change屬性
最后一點(diǎn)是我加上去的，同時(shí)根據(jù)文中的內(nèi)容我們可以知道，css3硬件加速是瀏覽器的行為，所以在不同瀏覽器下可能會(huì)有不同的表現(xiàn)形式。下面我們用一個(gè)例子來(lái)理解一下。這是李兵老師在他的專欄中提出的一個(gè)例子，我拿過(guò)來(lái)借用一下，注意box中的will-change屬性：

<html>

  <head>
      <title>觀察will-change</title>
      <style>
          .box {
              will-change: transform, opacity;
              display: block;
              float: left;
              width: 40px;
              height: 40px;
              margin: 15px;
              padding: 10px;
              border: 1px solid rgb(136, 136, 136);
              background: rgb(187, 177, 37);
              border-radius: 30px;
              transition: border-radius 1s ease-out;
          }

          body {
              font-family: Arial;
          }
      </style>
  </head>

  <body>
      <div id="controls">
          <button id="start">start</button>
          <button id="stop">stop</button>
      </div>
      <div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
          <div class="box">旋轉(zhuǎn)盒子</div>
      </div>
      <script>

          let boxes = document.querySelectorAll('.box');
          let boxes1 = document.querySelectorAll('.box1');
          let start = document.getElementById('start');
          let stop = document.getElementById('stop');
          let stop_flag = false

          start.addEventListener('click', function () {
              stop_flag = false
              requestAnimationFrame(render);
          })

          stop.addEventListener('click', function () {
              stop_flag = true
          })

          let rotate_ = 0
          let opacity_ = 0
          function render() {
              if (stop_flag)
                  return 0
              rotate_ = rotate_ + 6
              if (opacity_ > 1)
                  opacity_ = 0
              opacity_ = opacity_ + 0.01
              let command = 'rotate(' + rotate_ + 'deg)';
              for (let index = 0; index < boxes.length; index++) {
                  boxes[index].style.transform = command
                  boxes[index].style.opacity = opacity_
              }
              requestAnimationFrame(render);
          }
      </script>
  </body>

  </html>

————————————————
版權(quán)聲明：本文為CSDN博主「溪寧」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38164763/article/details/105406580

« 深入理解vue中的slot與slot-scope 【CSS基礎(chǔ)學(xué)習(xí)】復(fù)雜選擇器 »

分類(lèi)

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.izc.net.cn

存檔