頁(yè)面重構(gòu)
（個(gè)人觀點(diǎn)）頁(yè)面任何的變化都可以稱(chēng)為頁(yè)面重構(gòu)：完全重構(gòu)、細(xì)節(jié)調(diào)整。
- 注意：
簡(jiǎn)單的外部組件、測(cè)試工具的使用、預(yù)留空間（未來(lái)的更新）、編程語(yǔ)言、開(kāi)發(fā)環(huán)境、版本控制工具（本人使用GIT）、新與穩(wěn)定技術(shù)的選擇、編碼標(biāo)準(zhǔn)統(tǒng)一、資源合并（自動(dòng)化工具（本人使用gulp），提高HTTP傳輸效率）動(dòng)態(tài)編譯、資源存儲(chǔ)（減少cookies，增加本地存儲(chǔ)、數(shù)據(jù)連接池等的使用）、響應(yīng)式布局、其他最佳實(shí)踐......
文章摘自 前端重構(gòu)相關(guān)細(xì)節(jié)貼士
瀏覽器重繪
- 瀏覽器加載文檔
瀏覽器從下載文檔到顯示頁(yè)面的過(guò)程是個(gè)復(fù)雜的過(guò)程，這里包含了重繪和重排。各家瀏覽器引擎的工作原理略有差別，但也有一定規(guī)則。簡(jiǎn)單講，通常在文檔初次加載時(shí)，瀏覽器引擎會(huì)解析HTML文檔來(lái)構(gòu)建DOM樹(shù)，之后根據(jù)DOM元素的幾何屬性構(gòu)建一棵用于渲染的樹(shù)。渲染樹(shù)的每個(gè)節(jié)點(diǎn)都有大小和邊距等屬性，類(lèi)似于盒子模型（由于隱藏元素不需要顯示，渲染樹(shù)中并不包含DOM樹(shù)中隱藏的元素）。當(dāng)渲染樹(shù)構(gòu)建完成后，瀏覽器就可以將元素放置到正確的位置了，再根據(jù)渲染樹(shù)節(jié)點(diǎn)的樣式屬性繪制出頁(yè)面。由于瀏覽器的流布局，對(duì)渲染樹(shù)的計(jì)算通常只需要遍歷一次就可以完成。但table及其內(nèi)部元素除外，它可能需要多次計(jì)算才能確定好其在渲染樹(shù)中節(jié)點(diǎn)的屬性，通常要花3倍于同等元素的時(shí)間。這也是為什么我們要避免使用table做布局的一個(gè)原因。
重繪是一個(gè) **元素外觀 ** 的改變所觸發(fā)的瀏覽器行為，例如改變visibility、outline、背景色等屬性。瀏覽器會(huì)根據(jù)元素的新屬性重新繪制，使元素呈現(xiàn)新的外觀。重繪不會(huì)帶來(lái)重新布局，并不一定伴隨重排。
瀏覽器重排（回流）
重排是更明顯的一種改變，可以理解為渲染樹(shù)需要重新計(jì)算。下面是常見(jiàn)的觸發(fā)重排的操作：
- DOM元素的幾何屬性變化
當(dāng)DOM元素的幾何屬性變化時(shí)，渲染樹(shù)中的相關(guān)節(jié)點(diǎn)就會(huì)失效，瀏覽器會(huì)根據(jù)DOM元素的變化重新構(gòu)建渲染樹(shù)中失效的節(jié)點(diǎn).
重排一定會(huì)引起瀏覽器的重繪，一個(gè)元素的重排通常會(huì)帶來(lái)一系列的反應(yīng)，甚至觸發(fā)整個(gè)文檔的重排和重繪，性能代價(jià)是高昂的。 - DOM樹(shù)的結(jié)構(gòu)變化
當(dāng)DOM樹(shù)的結(jié)構(gòu)變化時(shí)，例如節(jié)點(diǎn)的增減、移動(dòng)等，也會(huì)觸發(fā)重排。瀏覽器引擎布局的過(guò)程，類(lèi)似于樹(shù)的前序遍歷，是一個(gè)從上到下從左到右的過(guò)程。通常在這個(gè)過(guò)程中，當(dāng)前元素不會(huì)再影響其前面已經(jīng)遍歷過(guò)的元素。所以，如果在body最前面插入一個(gè)元素，會(huì)導(dǎo)致整個(gè)文檔的重新渲染，而在其后插入一個(gè)元素，則不會(huì)影響到前面的元素。 - 獲取某些屬性
瀏覽器引擎可能會(huì)針對(duì)重排做了優(yōu)化。比如Opera，它會(huì)等到有足夠數(shù)量的變化發(fā)生，或者等到一定的時(shí)間，或者等一個(gè)線(xiàn)程結(jié)束，再一起處理，這樣就只發(fā)生一次重排。但除了渲染樹(shù)的直接變化，當(dāng)獲取一些屬性時(shí)，瀏覽器為取得正確的值也會(huì)觸發(fā)重排。這樣就使得瀏覽器的優(yōu)化失效了。這些屬性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用這些值時(shí)應(yīng)進(jìn)行緩存。 - 其他
改變?yōu)g覽器窗口大小、改變一些元素的樣式
- 解決重排：（部分方法）
合并多次改變樣式屬性的操作；使需要多次改變的元素脫離文檔流；在內(nèi)存中多次操作節(jié)點(diǎn)，完成后再添加到文檔中去（有動(dòng)畫(huà)效果時(shí)）；由于display屬性為none的元素不在渲染樹(shù)中，對(duì)隱藏的元素操作不會(huì)引發(fā)其他元素的重排；在需要經(jīng)常獲取那些引起瀏覽器重排的屬性值時(shí)，要緩存到變量。
文章摘自瀏覽器重構(gòu)與重排
