這兩天一直在看瀏覽器渲染頁面的原理和過程，看完以後在這裡做個小結。
瀏覽器渲染頁面可以分為五個步驟：
1.DNS解析
2.TCP建立連線
3.HTTP發起請求和響應
4.伺服器響應
5.客戶端渲染頁面
先來說第一點：DNS解析就是DNS進行域名解析，然後查詢IP地址,最終找到主機，也就是找到了伺服器；
第二點：TCP建立連線，我們通常所知道的三次握手就是發生在這個階段；
第三點：HTTP發起請求就是我們在瀏覽器中輸入網址以後，然後HTTP開始向伺服器請求關鍵資源；
第四點：伺服器接收到請求後，就給HTTP傳送資源；
第五點：客戶端接受到資源之後就開始渲染頁面了；
在這裡我想要重點說一下客戶端渲染頁面的過程：這個過程我分為三大點來理解：
1).css渲染
2）js渲染
3）DOM渲染
這三點按照優先順序依次開始渲染，要渲染一個頁面的時候，常常會遇到css阻塞渲染，因為css的優先級別高於DOM,所以在DOM渲染的過程中，遇到,DOM會停下來，去把css的資源載入完畢之後再繼續渲染，同理，遇到script也一樣，需要停下來，這樣就會造成阻塞渲染，影響效能和速度，導致使用者體驗特別糟，所以要優化效能，可以從阻塞渲染這個方面入手如:css阻塞渲染可以在中新增media指定在什麼情況下引用，在中新增defer表示可以延遲載入，不影響DOM的渲染，加async 屬性表示非同步執行引入的 JavaScript，與 defer 的區別在於，如果已經載入好，就會開始執行——無論此刻是 HTML 解析階段還是 DOMContentLoaded 觸發之後。需要注意的是，這種方式載入的 JavaScript 依然會阻塞 load 事件。換句話說，async-script 可能在 DOMContentLoaded 觸發之前或之後執行，但一定在 load 觸發之前執行。

當css和DOM渲染完後就要將DOM和css組合起來，這就是渲染DOM樹了，然後根據DOM樹來佈局，計算座標，這裡還有repaint和reflow兩塊內容，後續更新。