国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

重繪 、回流

CoreDump / 3054人閱讀

摘要：重繪回流首先了解頁(yè)面的呈現(xiàn)流程瀏覽器把獲取到的代碼解析成一個(gè)樹，中的每個(gè)都是樹的個(gè)節(jié)點(diǎn)，根節(jié)點(diǎn)就是對(duì)象。重繪與回流的特征當(dāng)中的一些元素的外觀風(fēng)格等不會(huì)影響布局的屬性改變，比如，這就稱為重繪。注重繪不一定會(huì)引起回流，回流一定引起重繪。

重繪 、回流 首先了解頁(yè)面的呈現(xiàn)流程

瀏覽器把獲取到的HTML代碼解析成一個(gè)DOM樹，HTML中的每個(gè)tag都是DOM樹的1個(gè)節(jié)點(diǎn)，根節(jié)點(diǎn)就是document對(duì)象（html tag）。用firebug或者IE Develop Toolbar等工具可看到DOM樹，包括display:none隱藏，還有js動(dòng)態(tài)添加的元素；

瀏覽器把所有樣式（主要包括css和瀏覽器的樣式設(shè)置）解析成樣式結(jié)構(gòu)體。在解析過(guò)程中會(huì)去掉瀏覽器不能識(shí)別的樣式，比如IE會(huì)去掉-moz開頭的樣式，Firefox會(huì)去掉_開頭的樣式；

DOM tree 和樣式結(jié)構(gòu)體結(jié)合后構(gòu)建呈現(xiàn)樹（render tree）。render tree中每個(gè)node都有自己的style，而render tree不包含隱藏的節(jié)點(diǎn)（比如display:none的節(jié)點(diǎn)，還有head節(jié)點(diǎn)），這些節(jié)點(diǎn)不會(huì)用于呈現(xiàn)，也不影響呈現(xiàn)，所以就不會(huì)包含在render tree中。（visibility:hidden隱藏的元素還會(huì)包含在render tree中，因?yàn)闀?huì)影響布局（layout），會(huì)占有空間。根據(jù)CSS2的標(biāo)準(zhǔn)，render tree中的每個(gè)節(jié)點(diǎn)都稱為box（Box dimensions），box的所有屬性：width,height,margin,padding,left,top,border等；

render tree構(gòu)建完畢后，瀏覽器根據(jù)render tree來(lái)繪制頁(yè)面。

重繪與回流的特征

當(dāng)render tree中的一些元素的外觀、風(fēng)格等不會(huì)影響布局的屬性改變，比如bachground-color，這就稱為重繪。

當(dāng)render tree中的一部分（或全部）因?yàn)樵氐囊?guī)模尺寸、布局、隱藏等改變而需要重新構(gòu)建，這就稱為回流。每個(gè)頁(yè)面在第一次加載的時(shí)候就回流了一次。

注：重繪不一定會(huì)引起回流，回流一定引起重繪。任何對(duì)render tree中元素的操作都會(huì)引起回流或重繪。
如何減少回流、重繪

當(dāng)元素的幾個(gè)樣式同時(shí)改變時(shí)定義一個(gè)新的className，不要一個(gè)一個(gè)改變?cè)氐臉邮綄傩裕?/p>

使用documentfragment或div等元素進(jìn)行緩存操作；

先display:none隱藏元素，然后對(duì)元素進(jìn)行所有操作，最后再顯示該元素；

不要經(jīng)常訪問(wèn)會(huì)引起瀏覽器flush隊(duì)列的屬性，如果想要訪問(wèn)先讀取到變量中進(jìn)行緩存；

會(huì)引起瀏覽器flush隊(duì)列的屬性：

offsetTop, offsetLeft, offsetWidth, offsetHeight  
 scrollTop/Left/Width/Height   
 clientTop/Left/Width/Height  
 width,height  
 請(qǐng)求了getComputedStyle(), 或者 ie的 currentStyle

讓元素脫離動(dòng)畫流，減少回流的render tree的規(guī)模；

  $("#block1").animate({left:50});  
  $("#block2").animate({marginLeft:50});

盡可能在DOM樹的最末端改變class（可限制回流的范圍）；

避免設(shè)置多層內(nèi)聯(lián)樣式（將樣式合并在一個(gè)外部類，僅產(chǎn)生一次回流）；

動(dòng)畫效果應(yīng)用到position屬性為absolute或flex的元素上；

避免使用table數(shù)據(jù)；

避免使用CSS的JavaScript表達(dá)式。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/101114.html

相關(guān)文章

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

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

    hearaway 評(píng)論0 收藏0

  • 頁(yè)面重構(gòu)和回流

    摘要：回流當(dāng)元素的布局大小規(guī)模和顯示方式發(fā)生改變時(shí)，觸發(fā)的瀏覽器行為叫回流。而且，每個(gè)頁(yè)面都會(huì)在第一次加載時(shí)觸發(fā)回流。注意回流必將引起重繪，而重繪不一定伴隨回流。重繪回流對(duì)的操作對(duì)不同的屬性操作，影響不一樣。 在了解什么是重構(gòu)和回流之前，我們應(yīng)該先看看瀏覽器是怎么渲染的？ 瀏覽器的渲染過(guò)程： 1.處理HTML腳本，生成DOM樹（DOM樹里包含所有的HTML標(biāo)簽，包括display:none和...

    leejan97 評(píng)論0 收藏0

  • 頁(yè)面重構(gòu)和回流

    摘要：回流當(dāng)元素的布局大小規(guī)模和顯示方式發(fā)生改變時(shí)，觸發(fā)的瀏覽器行為叫回流。而且，每個(gè)頁(yè)面都會(huì)在第一次加載時(shí)觸發(fā)回流。注意回流必將引起重繪，而重繪不一定伴隨回流。重繪回流對(duì)的操作對(duì)不同的屬性操作，影響不一樣。 在了解什么是重構(gòu)和回流之前，我們應(yīng)該先看看瀏覽器是怎么渲染的？ 瀏覽器的渲染過(guò)程： 1.處理HTML腳本，生成DOM樹（DOM樹里包含所有的HTML標(biāo)簽，包括display:none和...

    zeyu 評(píng)論0 收藏0

  • 頁(yè)面渲染性能控制-重繪與回流

    摘要：重繪只涉及樣式的改變，不涉及到布局。當(dāng)獲取一些屬性時(shí)，瀏覽器為了獲得正確的值也會(huì)觸發(fā)回流。避免多次讀取等屬性。將復(fù)雜的元素絕對(duì)定位或固定定位，使它脫離文檔流。 瀏覽器解析代碼過(guò)程 頁(yè)面的顯示過(guò)程分為以下幾個(gè)階段： 生成DOM樹(包括display:none的節(jié)點(diǎn)) 在DOM樹的基礎(chǔ)上根據(jù)節(jié)點(diǎn)的集合屬性(margin,padding,width,height等)生成render樹(不包...

    Noodles 評(píng)論0 收藏0

  • 頁(yè)面渲染性能控制-重繪與回流

    摘要：重繪只涉及樣式的改變，不涉及到布局。當(dāng)獲取一些屬性時(shí)，瀏覽器為了獲得正確的值也會(huì)觸發(fā)回流。避免多次讀取等屬性。將復(fù)雜的元素絕對(duì)定位或固定定位，使它脫離文檔流。 瀏覽器解析代碼過(guò)程 頁(yè)面的顯示過(guò)程分為以下幾個(gè)階段： 生成DOM樹(包括display:none的節(jié)點(diǎn)) 在DOM樹的基礎(chǔ)上根據(jù)節(jié)點(diǎn)的集合屬性(margin,padding,width,height等)生成render樹(不包...

    cooxer 評(píng)論0 收藏0

  • 一次性弄懂回流和重繪

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

    JerryWangSAP 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<