成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端性能優(yōu)化——回流與重繪

Michael_Lin / 2335人閱讀

摘要：前言最近在研究，接著就研究回顧起回流與重繪了?；亓髋c重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。注意回流必將引起重繪，而重繪不一定會引起回流。

前言

最近在研究virtual dom，接著就研究回顧起回流（reflow）與重繪（repaint）了。

回流與重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。下面我是我稍做的整理：

瀏覽器渲染流程

在理解這兩個概念之前，我們先來看看瀏覽器渲染的工作流程。這里以webkit渲染引擎為例

瀏覽器請求到html文檔后，將html解析成dom Tree

css被解析成css style rules

解析完成后，將結(jié)合dom Tree和style rules構(gòu)造render tree

瀏覽器計算render tree中每個渲染對象的位置和大小，即布局（layout）

最后進行繪制（painting）

回流與重繪

回流（reflow）

當元素的規(guī)模尺寸、布局、隱藏等改變，而導致render tree的一部分(或全部)重新構(gòu)建，即稱為回流。每個頁面至少進過一次回流，就在頁面第一次加載的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。

重繪（repaint）

當render tree中的一些元素需要更新屬性，這些屬性只影響元素的外觀，風格，而不會影響元素尺寸、布局、隱藏的，比如background-color，就叫重繪。

注意：回流必將引起重繪，而重繪不一定會引起回流。

回流的發(fā)生

可見元素尺寸的改變，如width、height、margin、padding等屬性改變引起尺寸的變化

window resize事件的觸發(fā)

元素display屬性的改變

元素位置的改變

等等

性能優(yōu)化

回流與重繪非常影響web性能，因為每一次html和css的重新解析然后再構(gòu)建成render tree，都需要經(jīng)過大量的計算，這個過程是很耗時間耗性能的。如何減少呢？建議

頁面元素適當定高，如img的夾在在文檔流中占據(jù)的空間從0到完全加載，會產(chǎn)生頻繁的重繪

減少dom的深度，可以減少解析器耗時

盡量簡化css

復雜的動畫，可以使其元素脫離文檔流，使用position:absolute或者position:fixed，以減少對父元素的影響

當然，這里列舉的并不是全部的方法，若你有更好的建議，也希望一起分享出來

參考文檔

https://kb.cnblogs.com/page/1...
https://www.html5rocks.com/zh...

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

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

相關(guān)文章

  • 前端性能優(yōu)化——回流與重繪

    摘要：前言最近在研究，接著就研究回顧起回流與重繪了?；亓髋c重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。注意回流必將引起重繪，而重繪不一定會引起回流。 前言 最近在研究virtual dom，接著就研究回顧起回流（reflow）與重繪（repaint）了。 回流與重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。下面我是我稍做的整理： 瀏覽器渲染流程 在理解這...

    endiat 評論0 收藏0

  • 前端性能之回流與重繪(reflow && repaint)

    摘要：寫在金三銀四之際。一個節(jié)點觸發(fā)了，瀏覽器會檢查中其他所有節(jié)點的顯示方式一個節(jié)點觸發(fā)了會導致它的祖先節(jié)點，后代節(jié)點以及在它之后的節(jié)點全部。對性能的影響大于。解決方式控制我們無力去改變，對性能損害的程度，我們能做的只有減少它們發(fā)生的次數(shù)。 寫在金三銀四之際。 因為種種原因想要謀求新的發(fā)展，不得已翻起了塵封已久的高程書；寫起了各種經(jīng)典CSS布局；回顧起記憶略顯模糊的幾個項目。感慨著太多太多...

    ytwman 評論0 收藏0

  • JavaScript：回流（重排）與重繪

    摘要：回流也被稱為重排，其實從字面上來看，重排更容易讓人形象易懂即重新排版整個頁面。重繪當頁面元素樣式改變不影響元素在文檔流中的位置時如，，，瀏覽器只會將新樣式賦予元素并進行重新繪制操作。你真的了解回流和重繪嗎 簡單先了解一下瀏覽器的渲染過程（圖片來自于網(wǎng)絡） showImg(https://segmentfault.com/img/bVbaC2e?w=624&h=289); 瀏覽器生成渲染...

    Jioby 評論0 收藏0

  • 求索：GSAP的動畫快于jQuery嗎？/ 續(xù) V1.1

    摘要：本文是求索的動畫快于嗎為何的續(xù)文。沒有集中繪制，每個都在一個事件回調(diào)函數(shù)上下文中處理，有多少個就有多少個上下文有集中繪制。測試過程中為了比較好的效果用了隨機數(shù)。 本文是求索：GSAP的動畫快于jQuery嗎？為何？ 的續(xù)文。GSAP是一個js動畫插件，它聲稱20x faster than jQuery，是什么讓它這么快呢？ 每當有這樣的問題的時候，我們可以通過以下步驟來...

    Tecode 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<