深入了解：http://mp.weixin.qq.com/s/nzLCd-wpo4-vkrxtf8mMcw
加載資源的形式
- 輸入url加載html
- 加載html 中的靜態(tài)資源
加載一個(gè)資源的過程
- 瀏覽器根據(jù)DNS服務(wù)器得到域名的IP地址
- 向這個(gè)IP的機(jī)器發(fā)送http請求
- 服務(wù)器收到 處理并返回http請求
- 瀏覽器得到返回的內(nèi)容
- 根據(jù)html結(jié)構(gòu)生成DOM Tree
- 根據(jù)CSS生成CSSOM
- 將DOM和CSSOM整合形成RenderTree
- 根據(jù)RenderTree開始渲染和展示
- 遇到<script>時(shí)交胚，會執(zhí)行并阻塞渲染
DOCTYPE及作用
- DTD（文檔類型定義）：告訴瀏覽器該文檔的類型岸梨，瀏覽器根據(jù)文檔類型來判斷用什么引擎來解析渲染
- DOCTYPE：告訴瀏覽器文檔使用哪種DTD（HTML 或 XHTML 規(guī)范）-----------》HTML 是用什么版本編寫的
瀏覽器渲染過程
- 使用 HTML 創(chuàng)建文檔對象模型（DOM）亲桦。
- 使用 CSS 創(chuàng)建 CSS 對象模型（CSSOM）诽里。
- 基于 DOM 和 CSSOM 執(zhí)行腳本（Script）信姓。
- 合并 DOM 和 CSSOM 形成渲染樹（Render Tree）从绘。
- 使用渲染樹布局（Layout）所有元素的大小和位置游昼。
-
繪制（Paint）所有元素涣觉。
渲染過程.png
reflow(重排) -VS- repaint(重繪)
當(dāng)DOM變化影響了元素的幾何屬性（寬、高改變等等）
瀏覽器此時(shí)需要重新計(jì)算元素幾何屬性
并且頁面中其他元素的幾何屬性可能會受影響
這樣渲染樹就發(fā)生了改變列肢，也就是重新構(gòu)造RenderTree渲染樹
這個(gè)過程叫做重排（reflow）
如果DOM變化僅僅影響的了背景色等等非幾何屬性
此時(shí)就發(fā)生了重繪（repaint）而不是重排
因?yàn)椴季譀]有發(fā)生改變
影響了布局-》重排
沒有影響布局-》重繪
重排必將引起重繪恰画，而重繪不一定會引起重排.
布局 layout
有了Render Tree宾茂，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系拴还，從而去計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置
繪制 painting
按照算出來的規(guī)則跨晴，通過顯卡，把內(nèi)容畫到屏幕上片林。
