1.BFC
BFC全稱為塊格式化上下文 (Block Formatting Context) 英古，是 Web 頁面中盒模型布局的 CSS 渲染模式，指一個獨(dú)立的渲染區(qū)域或者說是一個隔離的獨(dú)立容器灯帮。
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions）逻住，以及 overflow 值不為visiable 的塊級盒子施流，都會為他們的內(nèi)容創(chuàng)建新的 BFC（塊級格式上下文）。
在 BFC 中鄙信，盒子從頂端開始垂直的一個接一個排列，兩個盒子之間的垂直間距由他們的 margin 值決定忿晕，在同一個 BFC 中装诡，兩個相鄰塊級盒子的垂直外邊距會產(chǎn)生折疊。
在 BFC 中，每一個盒子的左外邊緣會觸碰到容器的左邊緣鸦采，對于從右到左的格式來說宾巍，則觸碰到右邊緣。即使在浮動里也是這樣的（盡管一個盒子的 line boxes 會因為浮動而收縮）渔伯，除非這個盒子的內(nèi)部創(chuàng)建了一個新的 BFC（由于浮動顶霞，在這種情況下盒子本身將會變得更窄）
2.盒模型
標(biāo)準(zhǔn)盒模型：box-sizing:content-box
IE盒模型：box-sizing:border-box
3.重排和重繪
頁面渲染的流程：解析HTML繪制dom數(shù)，解析Css繪制css樹锣吼，dom和css組合渲染选浑，計算節(jié)點(diǎn)渲染到屏幕上，當(dāng)dom 結(jié)構(gòu)發(fā)生改變時會觸發(fā)重排玄叠，重排一定會觸發(fā)重繪古徒。
當(dāng)一個元素的外觀改變出發(fā)重繪，當(dāng)元素的大小位置發(fā)生改變時觸發(fā)重排读恃。
重排和重繪都會消耗瀏覽器性能隧膘，盡量避免。
避免一條一條修改dom樣式
避免dom 節(jié)點(diǎn)屬性循環(huán)里當(dāng)變量
避免大量元素使用hover
分離讀寫操作
避免使用table布局
避免多層內(nèi)聯(lián)樣式
避免布局信息改變時查詢布局信息
當(dāng)需要對DOM元素進(jìn)行一系列的操作時寺惫，可以先使元素脫離文檔流疹吃，再對其進(jìn)行一些列操作，然后再把元素帶回文檔中
脫離文檔流方法：
隱藏元素西雀，施加修改萨驶，重新顯示
使用document fragment在當(dāng)前DOM之外構(gòu)建一個子樹，再把它拷貝回文檔
將元素元素拷貝到另一個脫離文檔的節(jié)點(diǎn)中蒋搜，修改副本篡撵，完成后再替換原始元素
