瀏覽器的內核主要分為渲染引擎和JS引擎。目前市面上常見的瀏覽器內核可以分為這四種：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。這里面大家最耳熟能詳的可能就是 Webkit 內核了，Webkit 內核是當下瀏覽器世界真正的霸主。
頁面加載過程
- 瀏覽器根據DNS域名服務器解析域名得到IP地址；
- 向這個IP地址發起HTTP請求；
- 服務器收到，處理，返回HTTP請求;
-
瀏覽器得到返回的內容。
瀏覽器渲染過程
主要分為三步：
1. 解析
- 一是解析HTML，生成DOM樹；
- 二是解析CSS，生成CSS規則樹；
-
三是運行JS腳本，等到JS文件下載完成后，通過DOM API 和CSS API 操作DOM Tree和CSS Rule Tree。
注意：
渲染過程中，如果遇到 <script>就停止渲染，執行 JS 代碼。因為瀏覽器渲染和 JS 執行共用一個線程，而且這里必須是單線程操作，多線程會產生渲染 DOM 沖突。JavaScript的加載、解析與執行會阻塞DOM的構建，也就是說，在構建DOM時，HTML解析器若遇到了JavaScript，那么它會暫停構建DOM，將控制權移交給JavaScript引擎，JavaScript引擎運行完畢，瀏覽器再從中斷的地方恢復DOM構建。
JS文件不只是阻塞DOM的構建，它會導致CSSOM也阻塞DOM的構建。因為不完整的CSSOM是無法使用的，如果JavaScript想訪問CSSOM並更改它，那么在執行JavaScript時，必須要能拿到完整的CSSOM。
解決方案：這是為什么建議把<script>標簽放到<body>的最后面的原因。如果不放在最后，也可使用defer或者async屬性，異步加載js文件。二者的區別是：async會在下載完之后立即執行；而defer會等到DOM Tree解析完成之后再去執行。
2. 構造Rendering Tree(回流)
- Rendering Tree 渲染樹並不等同於DOM樹，渲染樹只會包括需要顯示的節點和這些節點的樣式信息。
- CSS 的 Rule Tree主要是為了完成匹配並把CSS Rule附加上Rendering Tree上的每個Element（也就是每個Frame）。
-
計算每個Frame 的位置，這又叫layout和reflow過程（回流）。
3. paint（繪制）
參考文章：前端開發這么多年，你真的了解瀏覽器頁面渲染機制嗎？ | 技術頭條