- 知識面要廣
- 理解要深刻
- 學會贊美（說自己沒有了解的這么深）
- 渲染機制
- js運行機制
- 頁面性能
- 錯誤監(jiān)控
渲染機制
- 什么是DOCTYPE及作用
- 瀏覽器渲染過程
- 重排Reflow
- 重繪Repaint
- 布局Layout
什么是DOCTYPE及作用
- DTD
用來定義xml伺帘，xhtml的文檔類型瞬内。
用來告訴瀏覽器我是什么文檔類型。讓瀏覽器根據(jù)文檔類型來選擇合適的引擎來解析渲染。 - DOCTYPE
告訴瀏覽器是什么DTD饺饭，也就是什么文檔類型纵装。 -
常見的DOCTYPE有哪些经柴，寫一下html5的該怎么寫猴娩？
要知道html4有嚴格模式和傳統(tǒng)模式。以及區(qū)別饿肺。
1.瀏覽器渲染過程
html解析器解析html生成dom tree蒋困，css解析器解析css生成cssom tree，然后這兩顆樹結(jié)合生成render tree敬辣，layout之前render tree不知道每個結(jié)點具體該畫在頁面的什么位置雪标，layout可以精確的計算每個節(jié)點要顯示位置的寬和高以及顏色。最后瀏覽器就開始畫圖啦溉跃，呈現(xiàn)出頁面村刨。
2.重排Reflow
-
定義
- 觸發(fā)
---增加，刪除撰茎，修改dom節(jié)點時嵌牺，會導致reflow或repaint
---移動dom的位置，或者是動畫的時候
---修改css樣式的時候
---resize窗口的時候，或是滾動
---修改網(wǎng)頁的默認字體時
3.重繪Repaint
頁面要成仙的內(nèi)容畫在屏幕上髓梅。
-
定義
- 觸發(fā)
dom改動
css改動 - 如何避免最小程度的重繪？
通過documentframe绎签，將要加的節(jié)點全部加在這個片段節(jié)點上枯饿，最后一次性添加到dom中，而不是一個一個節(jié)點依次添加到dom中诡必。
