- 知識面要廣
- 理解要深刻
- 學會贊美(說自己沒有了解的這么深)
- 渲染機制
- js運行機制
- 頁面性能
- 錯誤監控
渲染機制
- 什么是DOCTYPE及作用
- 瀏覽器渲染過程
- 重排Reflow
- 重繪Repaint
- 布局Layout
什么是DOCTYPE及作用
- DTD
用來定義xml,xhtml的文檔類型。
用來告訴瀏覽器我是什么文檔類型。讓瀏覽器根據文檔類型來選擇合適的引擎來解析渲染。 - DOCTYPE
告訴瀏覽器是什么DTD,也就是什么文檔類型。 -
常見的DOCTYPE有哪些,寫一下html5的該怎么寫?
要知道html4有嚴格模式和傳統模式。以及區別。
1.瀏覽器渲染過程
html解析器解析html生成dom tree,css解析器解析css生成cssom tree,然后這兩顆樹結合生成render tree,layout之前render tree不知道每個結點具體該畫在頁面的什么位置,layout可以精確的計算每個節點要顯示位置的寬和高以及顏色。最后瀏覽器就開始畫圖啦,呈現出頁面。
2.重排Reflow
-
定義
- 觸發
---增加,刪除,修改dom節點時,會導致reflow或repaint
---移動dom的位置,或者是動畫的時候
---修改css樣式的時候
---resize窗口的時候,或是滾動
---修改網頁的默認字體時
3.重繪Repaint
頁面要成仙的內容畫在屏幕上。
-
定義
- 觸發
dom改動
css改動 - 如何避免最小程度的重繪?
通過documentframe,將要加的節點全部加在這個片段節點上,最后一次性添加到dom中,而不是一個一個節點依次添加到dom中。