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

資訊專欄INFORMATION COLUMN

JavaScript：回流（重排）與重繪

Jioby / 3334人閱讀

摘要：回流也被稱為重排，其實從字面上來看，重排更容易讓人形象易懂即重新排版整個頁面。重繪當頁面元素樣式改變不影響元素在文檔流中的位置時如，，，瀏覽器只會將新樣式賦予元素并進行重新繪制操作。你真的了解回流和重繪嗎

簡單先了解一下瀏覽器的渲染過程（圖片來自于網(wǎng)絡(luò)）

瀏覽器生成渲染樹的過程（圖片來自于網(wǎng)絡(luò)）

回流

回流當render tree中的一部分或全部因為元素的規(guī)模尺寸、布局、隱藏等改變時，瀏覽器重新渲染部分DOM或全部DOM的過程?；亓饕脖环Q為重排，其實從字面上來看，重排更容易讓人形象易懂（即重新排版整個頁面）。

重繪

當頁面元素樣式改變不影響元素在文檔流中的位置時（如background-color，border-color，visibility），瀏覽器只會將新樣式賦予元素并進行重新繪制操作。

什么時候會觸發(fā)回流或重繪？

有大量的用戶行為以及潛在的DHTML改變會觸發(fā)回流。例如，改變?yōu)g覽器窗口的大小，使用一些JavaScript方法，包括計算樣式，對DOM進行元素的添加或刪除，或是改變元素的class等。

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

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

如何減少回流、重繪？ 一、 CSS中避免回流、重繪

1.盡可能在DOM樹的最末端改變class
2.避免設(shè)置多層內(nèi)聯(lián)樣式
3.動畫效果應(yīng)用到position屬性為absolute或fixed的元素上
4.避免使用table布局
5.使用css3硬件加速，可以讓transform、opacity、filters等動畫效果不會引起回流重繪

二、 JS操作避免回流、重繪

1.避免使用JS一個樣式修改完接著改下一個樣式，最好一次性更改CSS樣式，或者將樣式列表定義為class的名稱
2.避免頻繁操作DOM，使用文檔片段創(chuàng)建一個子樹，然后再拷貝到文檔中
3.先隱藏元素，進行修改后再顯示該元素，因為display:none上的DOM操作不會引發(fā)回流和重繪
4.避免循環(huán)讀取offsetLeft等屬性，在循環(huán)之前把它們存起來
5.對于復雜動畫效果,使用絕對定位讓其脫離文檔流，否則會引起父元素及后續(xù)元素大量的回流

總結(jié)：

回流在瀏覽器中屬于一種用戶主導的操作，所以知道如何去改進回流時間以及知道各種文檔屬性（DOM節(jié)點深度，css的渲染效率，各種各樣的樣式改變）對回流時間的影響對于前端開發(fā)來講是很有幫助的。有時即便是回流一個單一的元素，也可能要求它的父元素以及任何跟隨它的元素也產(chǎn)生回流。例如需要改變某個元素的背景，這就不涉及該元素的屬性，所以只發(fā)生重繪。

寫這篇文章，也看了很多相關(guān)的blog和文章，這篇文章寫得不是很具體只是大概的內(nèi)容。想深入了解的話可以看下面這篇文章，既有例子又有深度。
你真的了解回流和重繪嗎

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

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

相關(guān)文章

  • 【前端工程師手冊】學習回流和重繪（reflow和repaint）

    摘要：重繪元素做了一些不影響排版的改變，比如背景色下劃線等等，只需要重新繪制的過程，叫做重繪。顯然回流帶來的代價大于重繪，因為重繪僅僅是重新畫一遍元素而已，但是重繪是重新計算重新畫。不然這會導致大量地讀寫這個結(jié)點的屬性。 瀏覽器的大概工作流程 以普通的HTML頁面為例： 解析HTML文檔，生成dom樹 解析css產(chǎn)生css規(guī)則樹 解析JavaScript，通過DOM-API來操作dom樹和...

    liuyix 評論0 收藏0

  • 【前端工程師手冊】學習回流和重繪（reflow和repaint）

    摘要：重繪元素做了一些不影響排版的改變，比如背景色下劃線等等，只需要重新繪制的過程，叫做重繪。顯然回流帶來的代價大于重繪，因為重繪僅僅是重新畫一遍元素而已，但是重繪是重新計算重新畫。不然這會導致大量地讀寫這個結(jié)點的屬性。 瀏覽器的大概工作流程 以普通的HTML頁面為例： 解析HTML文檔，生成dom樹 解析css產(chǎn)生css規(guī)則樹 解析JavaScript，通過DOM-API來操作dom樹和...

    fish 評論0 收藏0

  • 瀏覽器的回流和重繪及其優(yōu)化方式

    摘要：何時發(fā)生有大量的用戶行為以及潛在的改變會觸發(fā)回流。這樣就會讓多次的回流重繪變成一次回流重繪。因為上的操作不會引發(fā)回流和重繪。參考文章回流與重繪性能讓變慢參考文章瀏覽器的重繪與重排 推薦了解的知識：基本的HTML，基本的JavaScript，以及一些css工作原理方面的知識 瀏覽器的渲染原理 css的加載和解析不會阻塞html文檔的解析 css的解析會阻塞js的執(zhí)行，必須等到CSSOM...

    hearaway 評論0 收藏0

  • 一次性弄懂回流和重繪

    摘要：所以由此來看重繪不一定導致回流，回流一定會導致重繪前面我們說回流和重繪是會對進行修改，會消耗性能，所以我們要盡可能減少回流和重繪的次數(shù)。瀏覽器自己也清楚，如果每次操作都即時地反饋一次回流或重繪，那么性能上來說是扛不住的。 回流（Reflow）重繪（Repaint） 什么時候會觸發(fā)回流或重繪呢？ 當我們對dom 進行修改當時候會引發(fā)它外觀（樣式）上的改變時，就會觸發(fā)回流或重繪。這個過程本...

    JerryWangSAP 評論0 收藏0

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

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

    endiat 評論0 收藏0

發(fā)表評論

0條評論

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