---恢復內容開始---
最近看一些前端的面試題，發現很多公司都會問到瀏覽器載入，解析，渲染相關的問題。
這篇隨筆整理一下這些知識，便於理解瀏覽器是怎麼工作的。
首先，前端在大多數開發過程中並沒有用到這些知識，那我們為什麼還要去理解瀏覽器的執行過程？
事實上，對瀏覽器的理解能幫助前端開發者更好的實現最佳頁面。
比如，瀏覽器渲染引擎在湖區內容後的基本渲染流程：
解析html以構建dom樹->構建render樹->布局render樹->繪製render樹
當瀏覽器活的乙個html檔案是，會自上而下載入，並在載入過程中進行渲染。
解析：2.講css解析成css rule tree；
3.根據dom樹和css rule 樹來構造render tree 。
4.有了render tree ，瀏覽器已經知道網頁中有哪些節點，各個節點的css定義以及他們的從屬關係。下一步操作成為layout，就是計算出每個節點在螢幕中的位置；
5.最後就是繪製，即遍歷render樹，並使用ui後端層繪製每個節點。
每解析一部分內容，就顯示一部分內容。
回流：瀏覽器需要花時間去渲染，當它發現某個部分發生了變化影響了布局，就倒回去重新渲染；
重繪：不影響布局的屬性（顏色），就只會觸發重繪，重畫某一部分；
reflow原因：
1.頁面初始化；
2.操作dom；
3.某些元素的尺寸變化；
4.css屬性變化影響布局。
減少reflow和repaint
1.不要一條一條修改dom的樣式，先預定好css的class，然後修改dom的classname；
2.不要把dom節點的屬性是放在乙個迴圈裡面當成迴圈變數；
3.為動畫的thml元素使用fixed或absolute的position，這樣修改他們的css是不會reflow的；
4.不要使用table布局，因為乙個曉得改動會造成整個table的重新布局。
瀏覽器的載入 解析 渲染
1.瀏覽器在載入外部css檔案和檔案時是同步載入還是非同步載入？2.瀏覽器的載入和渲染時同時進行的還是先載入完成再渲染？下面的是我查到的一些資料和自己的一些理解 瀏覽器載入和解析html頁面過程 1.使用者輸入url，瀏覽器向伺服器發出請求，伺服器返回html檔案 2.瀏覽器開始載入html 發現標...
瀏覽器載入 渲染和解析過程的黑箱分析
測試頁面 loadtime test.html 22 13 32.947 html start 22 13 32.947 normal inline script run time 22 13 34.904 normal external script run time 22 13 35.775 b...
瀏覽器載入 渲染和解析過程黑箱簡析
很明顯，順序從上到下，文件流中先出現的資源先 在 ie8,safari,chrome 等瀏覽器下也類似。firefox 對 順序做了優化 firefox 會將 js,css 提前 而將等資源延遲到後面 對於渲染，利用 fiddler 將網速調慢，可以看到 css 後會馬上渲染到頁面，渲染和 同步進行...