頁面重構(gòu)
（個人觀點）頁面任何的變化都可以稱為頁面重構(gòu)：完全重構(gòu)、細節(jié)調(diào)整逞频。
- 注意：
簡單的外部組件、測試工具的使用栋齿、預(yù)留空間（未來的更新）苗胀、編程語言、開發(fā)環(huán)境瓦堵、版本控制工具（本人使用GIT）基协、新與穩(wěn)定技術(shù)的選擇、編碼標(biāo)準統(tǒng)一菇用、資源合并（自動化工具（本人使用gulp）澜驮，提高HTTP傳輸效率）動態(tài)編譯、資源存儲（減少cookies惋鸥，增加本地存儲杂穷、數(shù)據(jù)連接池等的使用）、響應(yīng)式布局卦绣、其他最佳實踐......
文章摘自 前端重構(gòu)相關(guān)細節(jié)貼士
瀏覽器重繪
- 瀏覽器加載文檔
瀏覽器從下載文檔到顯示頁面的過程是個復(fù)雜的過程耐量，這里包含了重繪和重排。各家瀏覽器引擎的工作原理略有差別滤港，但也有一定規(guī)則廊蜒。簡單講，通常在文檔初次加載時溅漾，瀏覽器引擎會解析HTML文檔來構(gòu)建DOM樹山叮，之后根據(jù)DOM元素的幾何屬性構(gòu)建一棵用于渲染的樹。渲染樹的每個節(jié)點都有大小和邊距等屬性添履，類似于盒子模型（由于隱藏元素不需要顯示屁倔，渲染樹中并不包含DOM樹中隱藏的元素）。當(dāng)渲染樹構(gòu)建完成后缝龄，瀏覽器就可以將元素放置到正確的位置了汰现，再根據(jù)渲染樹節(jié)點的樣式屬性繪制出頁面挂谍。由于瀏覽器的流布局，對渲染樹的計算通常只需要遍歷一次就可以完成瞎饲。但table及其內(nèi)部元素除外口叙，它可能需要多次計算才能確定好其在渲染樹中節(jié)點的屬性，通常要花3倍于同等元素的時間嗅战。這也是為什么我們要避免使用table做布局的一個原因妄田。
重繪是一個 **元素外觀 ** 的改變所觸發(fā)的瀏覽器行為，例如改變visibility驮捍、outline疟呐、背景色等屬性。瀏覽器會根據(jù)元素的新屬性重新繪制东且，使元素呈現(xiàn)新的外觀启具。重繪不會帶來重新布局，并不一定伴隨重排珊泳。
瀏覽器重排（回流）
重排是更明顯的一種改變鲁冯，可以理解為渲染樹需要重新計算。下面是常見的觸發(fā)重排的操作：
- DOM元素的幾何屬性變化
當(dāng)DOM元素的幾何屬性變化時色查，渲染樹中的相關(guān)節(jié)點就會失效薯演，瀏覽器會根據(jù)DOM元素的變化重新構(gòu)建渲染樹中失效的節(jié)點.
重排一定會引起瀏覽器的重繪，一個元素的重排通常會帶來一系列的反應(yīng)秧了，甚至觸發(fā)整個文檔的重排和重繪跨扮，性能代價是高昂的。 - DOM樹的結(jié)構(gòu)變化
當(dāng)DOM樹的結(jié)構(gòu)變化時验毡，例如節(jié)點的增減衡创、移動等，也會觸發(fā)重排米罚。瀏覽器引擎布局的過程钧汹，類似于樹的前序遍歷，是一個從上到下從左到右的過程录择。通常在這個過程中拔莱，當(dāng)前元素不會再影響其前面已經(jīng)遍歷過的元素。所以隘竭，如果在body最前面插入一個元素塘秦，會導(dǎo)致整個文檔的重新渲染，而在其后插入一個元素动看，則不會影響到前面的元素尊剔。 - 獲取某些屬性
瀏覽器引擎可能會針對重排做了優(yōu)化。比如Opera菱皆，它會等到有足夠數(shù)量的變化發(fā)生须误，或者等到一定的時間挨稿，或者等一個線程結(jié)束，再一起處理京痢，這樣就只發(fā)生一次重排奶甘。但除了渲染樹的直接變化，當(dāng)獲取一些屬性時祭椰，瀏覽器為取得正確的值也會觸發(fā)重排臭家。這樣就使得瀏覽器的優(yōu)化失效了。這些屬性包括：offsetTop方淤、offsetLeft钉赁、 offsetWidth、offsetHeight携茂、scrollTop你踩、scrollLeft、scrollWidth讳苦、scrollHeight姓蜂、clientTop、clientLeft医吊、clientWidth、clientHeight逮京、getComputedStyle() (currentStyle in IE)卿堂。所以，在多次使用這些值時應(yīng)進行緩存懒棉。 - 其他
改變?yōu)g覽器窗口大小草描、改變一些元素的樣式
- 解決重排：（部分方法）
合并多次改變樣式屬性的操作；使需要多次改變的元素脫離文檔流策严；在內(nèi)存中多次操作節(jié)點穗慕，完成后再添加到文檔中去（有動畫效果時）；由于display屬性為none的元素不在渲染樹中妻导，對隱藏的元素操作不會引發(fā)其他元素的重排逛绵；在需要經(jīng)常獲取那些引起瀏覽器重排的屬性值時，要緩存到變量倔韭。
文章摘自瀏覽器重構(gòu)與重排
