瀏覽器載入頁面原理
通常在文件初次載入時，瀏覽器引擎會解析html文件來構建dom樹，之後根據dom元素的幾何屬性構建一棵用於渲染的樹。渲染樹的每個節點都有大小和邊距等屬性，類似於 盒子模型 （由於隱藏元素不需要顯示，渲染樹中並不包含dom樹中隱藏的元素）。當渲染樹構建完成後，瀏覽器就可以將元素放置到正確的位置了，再根據渲染樹節點的樣式屬性繪製出頁面。由於瀏覽器的 流布局，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內部元素除外，它可能需要多次計算才能確定好其在渲程式設計客棧染樹中節點的屬性，通常要花3倍於同等元素的時間。這也是為什麼我們要避免使用table做布局的乙個原因。
重繪重繪是乙個元素 外觀的改變 所觸發的瀏覽器行為，例如改變vidibility、outline、背景色等屬性。瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新布局，並不一定伴隨重排。瀏覽器在進行重繪和重排的時候是要付出高昂的效能代價的。
重排重排是更明顯的一種改變，可以理解為渲染樹需要重新計算。下面是常見的觸發重排的操作：
例如節點的增減、移動等.
獲取某些屬性。
當獲取一些屬性時，瀏覽器為取得正確的值也會觸發重排。這樣就使得瀏覽器的優化失效了。這些屬性包括：offsettop、offsetleft、 offsetwidth、offsetheight、scrolltop、scrollleft、scrollwidth、scrollheight、clienttop、clientleft、clientwidth、clientheight、getcomputedstyle() (currentstyle in ie)。所以，在多次使用這些值時應進行快取。
此外，改變元素的一些樣式，調整瀏覽器視窗大小，滾動條出現等等也都將觸發重排。
減少重排次數和重排影響範圍
1、將多次改變樣式屬性的操作合併成一次操作。例如，
js:var changediv = document.getelementbyid(『changediv』);
changediv.style.color = 『#093′;
changediv.style.background = 『#eee';
changediv.style.www.cppcns.comheight = 『200px';
可以合併為：
css:
div.changediv
js: document.getelementbyid(『changediv』).classname = 『changediv';
2、 將需要多次重排的元素，position屬性設為absolute或fixed，這樣此元素就脫離了文件流，它的變化不會影響到其他元素。例如有動畫效果的元素就最好設定為絕對定位。
3、 在記憶體中多次操作節點，完成後再新增到文件中去。例如要非同步獲取**資料，渲染到頁面。可以先取得資料後在記憶體中構建整個**的html片段，再一次性新增到文件中去，而不是迴圈添www.cppcns.com加每一行。
4、 由於display屬性為none的元素不在渲染樹中，對隱藏的元素操作不會引發其他元素的重排。如果要對乙個元素進www.cppcns.com行複雜的操作時，可以先隱藏它，操作完成後再顯示。這樣只在隱藏和顯示時觸發2次重排。
5、 在需要經常取那些引起瀏覽器重排的屬性值時，要快取到變數
本文標題: css重繪與重排的方法
本文位址: /web/css/24388.html
重繪與重排
重繪就是重新繪製 repaint 重排就是重新排列 reflow dom發生改變的時候觸發重排，使dom重新排列，重繪不一定會重排，但是重排一定發生重繪，重繪和重排都會耗費瀏覽器的效能，盡量避免解析html繪製dom樹 解析css繪製css樹 生成render tree 渲染樹 flow排列，將渲染...
重排與重繪
重排和重繪作為前端必須要掌握的知識點，在面試 現的機率通常都是較高的 定義 重排，又可以叫回流，英文名reflow 屬於瀏覽器渲染機制的乙個過程 通常在第一次載入頁面觸發 在dom結構當中，每個元素都有只屬於自己的盒子 模型 這些都需要瀏覽器各種樣式來計算並根據計算結果將元素放到它該出現的位置，這就...
重繪與重排
重繪是乙個元素外觀的改變所觸發的瀏覽器行為。例如改變outline 背景色等屬性，瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀，重繪不會帶來重新布局，所以不一定伴隨重排。需要注意的是 重繪是以圖層為單位，如果圖層中某個元素需要重繪，那麼整個圖層都需要重繪，例如乙個圖層包含很多節點，其中有個g...