瀏覽器相關
瀏覽器內核
瀏覽器內核分爲兩部分：一是渲染引擎，其主要負責結構與樣式，即網頁的內容（HTML，XML，圖像等），以及計算網頁顯示方式，而後輸出到打印機；而JS引擎主要是負責解析JavaScript，實現頁面交互效果；一個負責搭建靜態結構，一個用來展示動態效果；後來js引擎愈來愈獨立，瀏覽器內核便更加傾向於指渲染引擎。css
目前常見瀏覽器及其內核
IE瀏覽器：ie11以前用Trident內核，後來的Edge採用了新內核（EdgeHTML）
火狐瀏覽器：使用Gecko內核（開源）
Safari：使用Webkit內核；並且Webkit最早是由蘋果開發的
Chrome瀏覽器：Chrome內核➡Webkit內核➡Blink內核；另外谷歌後來還研發了本身的JavaScript引擎：V8，極大地提升了JavaScript運行速度
Opera：最初是本身研發的Presto，後來同谷歌同樣用了Webkit，如今也是Blink內核
國內瀏覽器大多數是雙核模式：標準模式下爲chrome內核，兼容模式下爲IE內核html
瀏覽器渲染引擎的工做原理
先了解一下瀏覽器的主要組成部分：用戶界面，瀏覽器引擎，渲染引擎，網絡請求模塊，JS引擎，用戶界面後端，數據層。
各部分的做用爲：chrome
- 用戶界面：包括如地址欄，書籤欄等內容構成了瀏覽器的用戶界面，用來實現與用戶之間的交互
- 瀏覽器引擎：用於在渲染引擎和用戶界面之間傳遞命令
- 渲染引擎：當獲取到請求的頁面資源後，瀏覽器先解析HTML文檔構建「結構樹」，而後解析CSS文件，爲「結構樹」添加樣式造成」渲染樹「，接下來就是佈局過程，爲「渲染樹」分配屏幕的位置座標，最後進入繪製階段，利用UI後端繪製出「渲染樹」的每個節點；另外，爲了更好用戶體驗，瀏覽器引擎不會等到全部html解析完成後再去構建和佈局render樹。它是完成解析完一部份內容就顯示一部份內容，於此同時還可能經過網絡下載相關內容
- 網絡請求模塊：實現網絡請求以及數據接收
- JS引擎：負責解析JS代碼
- UI後端：負責繪製基本的部件，在底層與操做系統進行交互
- 數據存儲：負責存儲數據
瀏覽器頁面渲染過程（及儘可能避免重繪迴流的操做）
1 用戶輸入網址（假設是HTML頁面，第一次訪問，無緩存） 瀏覽器想服務器發出HTTP請求，服務器返回HTML文件（善用緩存，減小HTTP請求，減輕服務器壓力）express
- 瀏覽器載入HTML代碼，獲取CSS文件（CSS文件合併，減小HTTP請求）
- 載入
<body>，開始渲染頁面（CSS文件放在最上面，避免重複渲染 ） - 瀏覽器發現一個
<img>，向服務器發出請求，此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的代碼（圖片文件合併，減小HTTP請求） - 服務器返回圖片文件，因爲圖片面積，影響界面中其餘元素的排版，此時，瀏覽器須要從新渲染這部分代碼（最好圖片都設置尺寸，避免從新渲染）
- 瀏覽器發現一個包含js代碼的
<script>標籤，會當即運行該js代碼（script最好放在頁面最下面） - js執行命令：隱藏掉代碼中某個div元素，此時瀏覽器不得不從新渲染這部分代碼（頁面初始化樣式不要使用js控制）
- 若是某時刻，用戶經過點擊某個按鈕修個這個頁面樣式（如換膚），請求新的CSS文件，此時發生迴流，從新渲染頁面
關於reflow和repaint
reflow：某個樣式發生改變影響頁面的佈局，發生迴流；reflow幾乎沒法避免，如樹目錄的摺疊展開效果都會引發reflow
repaint：改變某個元素的背景色，文字或邊框顏色等不影響佈局的屬性，成爲repaint；
reflow的成本比repaint高；後端
引發reflow的狀況（標準流內的元素髮生形態上的改變）
- 改變窗囗大小
- 改變文字大小
- 添加/刪除樣式表
- 內容的改變，如用戶在輸入框中敲字
- 激活僞類，如:hover (IE裏是一個兄弟結點的僞類被激活)
- 操做class屬性
- 腳本操做DOM
- 計算offsetWidth和offsetHeight
- 設置style屬性
reflow是不可避免的，只能將reflow對性能的影響減到最小。
- 儘量限制reflow的影響範圍。須要改變元素的樣式，不要經過父級元素影響子元素。最好直接加在子元素上。
- 經過設置style屬性改變結點樣式的話，每設置一次都會致使一次reflow。因此最好經過設置class的方式。
- 實現元素的動畫，它的position屬性應當設爲fixed或absolute，這樣不會影響其它元素的佈局。
- 權衡速度的平滑。好比實現一個動畫，以1個像素爲單位移動這樣最平滑，但reflow就會過於頻繁，CPU很快就會被徹底佔用。若是以3個像素爲單位移動就會好不少。
- 不要用tables佈局的另外一個緣由就是tables中某個元素一旦觸發reflow就會致使table裏全部的其它元素reflow。在適合用table的場合，能夠設置table-layout爲auto或fixed，這樣可讓table一行一行的渲染，這種作法也是爲了限制reflow的影響範圍。
- 不少狀況下都會觸發reflow，若是css裏有expression，每次都會從新計算一遍。
- 減小沒必要要的 DOM 層級（DOM depth）。改變 DOM 樹中的一級會致使全部層級的改變，上至根部，下至被改變節點的子節點。這致使大量時間耗費在執行 reflow 上面。
- 避免沒必要要的複雜的 CSS 選擇器，尤爲是後代選擇器（descendant selectors），由於爲了匹配選擇器將耗費更多的 CPU