關於回流和重繪，需要先了解瀏覽器渲染頁面的過程。
解析html，生成dom樹，解析css，生成cssom樣式結構體
將dom樹和cssom結合，生成渲染樹(render tree)
layout(回流):根據生成的渲染樹，進行回流(layout)，得到節點的幾何資訊（位置，大小）
painting(重繪):根據渲染樹以及回流得到的幾何資訊，得到節點的絕對畫素
display:將畫素傳送給gpu，展示在頁面上。
當渲染樹中的一部分（或全部）因為元素的規模尺寸，布局，隱藏等改變而需要重新構建的過程叫回流（改變大小、布局）。
當渲染樹中的一部分元素需要更新屬性，如改變元素的外觀、風格，而不影響布局的重新渲染的過程叫重繪（改變樣式）。
注意：
當頁面布局和幾何屬性改變時，如以下：
1、新增或者刪除可見的dom元素；
2、元素位置改變；
3、元素尺寸改變——邊距、填充、邊框、寬度和高度
4、內容改變——比如文字改變或者大小改變而引起的計算值寬度和高度改變；
5、頁面渲染初始化；
6、瀏覽器視窗尺寸改變——resize事件發生時；
元素的屬性或樣式發生改變，如background-color改變等。
回流的開銷很大，如果每次操作都進行回流和重繪，消耗相當大，那麼如何進行效能優化？
大多數瀏覽器都會通過佇列化修改並批量執行來優化重排過程。
瀏覽器會把所有會引起回流、重繪的操作都放入乙個佇列，等過一定的時間或者操作達到了一定的閾值，瀏覽器就會flush佇列，進行乙個批處理。這樣讓多次的回流和重繪變成一次回流重繪。
但是，當獲取布局資訊操作的時候，會強制瀏覽器提前flush佇列，觸發回流重繪返回資訊，這種情況下，瀏覽器的優化就不起作用了。比如以下屬性或方法：
那麼，除了瀏覽器的優化，我們還有什麼方法可以來減少回流和重繪達到效能優化？
1. 通過合併多次dom樣式的修改，來減少回流和重繪的發生次數。
利用classname修改元素的class
const el = document.getelementbyid(『test』);利用csstext合併樣式修改操作el.classname += 』 active』;
const el = document.getelementbyid(『test』);2. 批量修改dom使用文件片段(document fragment)在當前dom之外構建乙個子樹，進行快取操作，再把它拷貝回文件，這樣引發一次回流和重繪；el.style.csstext += 『border-left: 1px; border-right: 2px; padding: 5px;』;
先利用display:none隱藏元素，進行應用修改之後，再重新顯示，這樣就只引發兩次回流和重繪；
3. 避免引起瀏覽器強制flush佇列
如使用以上瀏覽器優化提到的屬性或方法。
4. 對於有動畫效果的元素，使用絕對定位讓其脫離文件流，如position屬性設為absolute或fixed
分享一下今天的面試題
悲催的又要開始找工作了。從今天開始，遇到好的面試題就記下來給大家分享一下。今天的收穫還是不錯的，雖然杯具了，但那公司的面試題目有點意思。其實很多都是基礎，抽象類啊，繼承過載啊，可是以前都不怎麼重視。現在開始，不懂的面試題都要記下來，回來後找解決方法。1 題目要求差不多是這樣 完成下面的方法，要求返回...
華為的面試題 ，大家看一下
typedef int pint define pint int 那麼 const pint p p不可更改，但p指向的內容可更改 const pint p p可更改，但是p指向的內容不可更改。上面說的對嗎？答案const pint p1 p1不可更改，但p1指向的內容可更改 const pint ...
面試官 說一下NIO和BIO的區別
bio，面向流，只能讀或者只能寫，阻塞io nio，面向緩衝區，可以同時進行讀寫，非阻塞io 整個bio的繼承關係如上圖，每種流只能寫或者讀，整個bio流的設計用了裝飾者模式，如果你不清楚的話，可以看 面試官 說一下裝飾者模式的作用，以及哪些地方用到了裝飾者模式吧 本文不再介紹 nio涉及到的api...