關於瀏覽器如何渲染html界面一直不太清晰，所以現在理一理。由於本身對前深入的東西不太清晰，這篇博客更多的是在記錄。
參考：https://www.cnblogs.com/dojo-lzz/p/3983335.html
一、渲染步驟
瀏覽器在接收到html文件后，會分幾個步驟html文件轉化成界面，這個過程就是渲染。
1、解析html
2、構建dom樹
3、dom樹結合css文件，構建呈現樹
4、布局
5、繪制
先整體描述一下我的理解：
1、解析html和構建dom樹是同步進行的，這個過程就是逐行解析代碼，包括html標簽和js動態生成的標簽，最終生成dom樹。
2、構建呈現樹，就是把css文件和style標簽的中的內容，結合dom樹的模型，構建一個呈現樹，寫到內存，等待進一步生成界面。呈現樹一定依賴dom樹，呈現節點一定會有對應的dom節點，但是dom節點不一定會有對應的呈現節點，比如，被隱藏的一個div。
3、布局，這一步就是結合呈現樹，把dom節點的大小、位置計算出來。雖然呈現節點已經附着在都沒節點上，會有對元素大小、位置的定義，但是瀏覽器還需要根據實際窗口大小進行計算，比如對auto的處理。
4、繪制，把css中有關顏色的設置，背景、字體顏色等呈現出來。
二、html解析和dom樹構建
關於渲染的過程，dom樹的構建對與一些后端人員還是比較重要的，它關系到js代碼能否正確的被執行。
html的解析，遵循以下規則：
1、按順序解析。
html的代碼，是從上到下一行行執行的，也就是說如果js代碼寫在head頭里，且沒有用加在$().ready(function)方法里，那么他是無法讀取到body里的標簽的。之所以加在$().ready(function)里可以執行，是因為，$().ready(function)里的函數會在dom樹加載之后執行，當然執行之久dom可能還會改變。
2、link標簽的加載，阻塞后續代碼執行，但不阻塞后續外部文件（link、script）加載。
html的代碼是按順序解析，那么在遇到link標簽后，會在link加載（從服務器下載）完畢后，再執行后續代碼。但與此同時，如何還有外部文件，則是同時加載。但是外部文件內的代碼不會執行，只會在代碼解析到它的時候執行。
3、添加async屬性的script。
添加async屬性之后，script加載的外部文件成為了異步加載，這時相當於它於原本的html解析過程同步進行。所以他不會被任何加載過程阻塞，只會在自己加載完成之后執行。但是，異步執行的影響就是，它如要讀取dom節點，很可能會失敗，因為它的加載和html解析過程沒有了先后順序。另外，如果它要輸出動態的dom節點，就無法保證節點的位置，因為它添加的節點，是在html已解析的節點下順序添加的。
<script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a" async></script>
4、對於動態創建的link標簽不會阻塞其后動態創建的script標簽的加載和執行，但是其后非動態創建的script扔按1、2、3條的規則執行。