4-1 渲染機制.mp4_20171127_163909.885_看圖王.jpg
4-1 渲染機制.mp4_20171127_164214.580_看圖王.jpg
-
渲染機制類
- 什么是DOCTYPE 以及作用
4-1 渲染機制.mp4_20171127_181158.440_看圖王.jpg
一句話:DTD就是告訴瀏覽器我是什么文檔類型,瀏覽器根據(jù)這個來判斷用什么來解析,渲染它
DOCTYPE 就是告訴瀏覽器什么是DTD
-
瀏覽器的渲染過程
4-1 渲染機制.mp4_20171129_172242.480.jpg-
DOM Tree
4-1 渲染機制.mp4_20171129_174103.595.jpg -
CSS Tree
4-1 渲染機制.mp4_20171129_174319.149.jpg
-
- Render tree
4-1 渲染機制.mp4_20171129_174523.311_看圖王.jpg
瀏覽器拿到HTML,CSS它要干什么?第一步:將HTML轉(zhuǎn)成DOM 樹,將CSS根據(jù)解析規(guī)則轉(zhuǎn)成CSSOM樹,然后將兩棵樹一整合,就形成了一個Render 樹,這個Render tree就相當(dāng)于告訴瀏覽器這個樹的結(jié)構(gòu)已經(jīng)出來了.然后跟Render tree還有一個平行的Layout,前面的Render tree并不包含HTML里面的內(nèi)容,位置在什么地方,通過layout,就能精確的計算dom元素要顯示的位置,寬,高,顏色等等這些屬性,最后Painting,瀏覽器通過GUI 開始繪圖
-
重排 Refolow
- 定義:DOM 元素中的各個元素都有自己的盒子(模型),這些都需要瀏覽器通過各種樣式來計算,并根據(jù)計算的結(jié)果將元素將元素放到它該出現(xiàn)的位置,這個過程叫做Refolow.
- 要知道JS 是可以修改DOM 的, 我們重新修改了DOM,瀏覽器又該怎么做呢?這就是Refolow 要上場的時候了
- 觸發(fā)Refolow:
- 增加,刪除,修改DOM節(jié)點的時候,會導(dǎo)致Refolow或Repaint.
- 移動 DOM 位置,比如你搞個動畫的時候.
- 當(dāng)你修改CSS 樣式的時候.
- 當(dāng)你Resize 窗口的時候,移動端沒有這個問題,或者滾動的時候.
- 當(dāng)你修改網(wǎng)頁默認字體的時候
-
重繪 Repaint
- 把頁面要顯示的內(nèi)容統(tǒng)統(tǒng)都畫在屏幕上,這就是Repaint
- 觸發(fā) Repaint: 1: DOM 改動. 2: CSS改動
- 如何減少Repaint:不要一個一個節(jié)點添加到瀏覽器上去,而是 要先創(chuàng)建一個document.fragment(代碼片段),將這些節(jié)點塞到這個片段中,然后向瀏覽器中一次添加這個片段,導(dǎo)致它只Repaint 一次
