瀏覽器怎麼渲染頁面的？
瀏覽器渲染過程.png
1.什麼是doctype及作用
dtd(document type definition,文件型別定義)是一系列的語法規則，用來定義xml或(x)html的檔案型別。瀏覽器會使用它來判斷文件型別，決定使用何種協議來解析，以及切換瀏覽器模式。
(dtd就是告訴瀏覽器我是什麼文件型別，瀏覽器根據這個判斷用什麼引擎來解析和渲染它)
doctype是用來宣告文件型別和dtd規範的，乙個主要的用途便是檔案的合法性驗證。如果檔案**不合法，那麼瀏覽器解析時便會出一些差錯；(doctype就是直接告訴瀏覽器什麼是dtd的，通知瀏覽器告訴當前的文件包含的是哪個dtd， 也就是哪個文件型別。)
常見的doctype有哪些？
html5
html 4.01 strict(嚴格模式)
(該dtd包含所有html元素和屬性，但不包括展示性的和棄用的元素--比如：font)
html 4.01 transitional(傳統模式--寬鬆模式)
(該dtd包含所有html元素和屬性，包括展示性的和棄用的元素--比如font)
瀏覽器渲染過程
html css js三個都會影響頁面最後的呈現形式(*瀏覽器拿到html，css之後要幹什麼？)
瀏覽器渲染過程？
* 把html經過html parser也就是dom parser轉成dom tree(dom樹)；
* css按照css規則和css直譯器轉成css rules(cssom tree)；
* 兩個樹一整合attachment，就形成了乙個render tree(告訴瀏覽器我這個地方要渲染乙個樹的乙個結構)，render tree不包含html具體內容，也不知道位置是什麼(layout之前render ttree不知道某乙個元素具體應該畫在什麼位置)， 通過layout就能精確的計算到要顯示的dom真正的位置、寬高、顏色，都在render tree呈現出來，最後開始painting(瀏覽器通過dui開始畫圖了)把我們的內容基本呈現出來，最後display大家在頁面能看到網頁效果了。
eg：在瀏覽器中輸入乙個url，發生了哪些事情？
--會有乙個dns解析，傳送給伺服器，伺服器響應，響應過來到客戶端瀏覽器這邊就開始了渲染過程。
重排reflow
定義：dom結構中的各個元素都有自己的盒子(模型)，這些都需要瀏覽器根據各種樣式來計算並根據計算結果將元素放到它該出現的位置，這個過程稱之為reflow。
觸發reflow：
當你增加、刪除、修改dom結點時，會導致reflow或repaint;
當你移動dom的位置，或是搞個動畫的時候；
當你修改css樣式的時候；
當你resize視窗的時候(移動端沒有這個問題)，或者滾動的時候；
當你修改網頁的預設字型時；
--如何盡量避免觸發reflow？
重燴repaint
定義：(頁面要呈現的內容統統畫在螢幕上)
當各種盒子的位置、大小以及其他屬性，例如顏色、字型大小等都確定下來後，瀏覽器於是便把這些元素都按照各自的特性繪製了一遍，於是頁面的內容出現了，這個過程稱之為repaint；
觸發repaint：
dom改動
css改動
*如何避免最小程度的repaint？(如何減少repaint的頻率)
repaint是無法避免，可以最大程度降低repaint；
先建立乙個docuementfrag，然後把東西都放到片段中，最後向瀏覽器一次新增這些片段，最後到這repaint一次
布局layout(瀏覽器的布局方式)
前端面試之瀏覽器渲染
瀏覽器渲染的整個流程 瀏覽器的整個流程如上圖所示。1 首先當使用者輸入乙個url的時候，瀏覽器就會傳送乙個請求，請求url對應的資源。2 然後瀏覽器的html解析器會將這個檔案解析，並且構建成一棵dom樹。3 在構建dom樹的時候，遇到js和css元素，html解析器就換將控制權轉讓給js解析器或者...
2020前端面試（一） 瀏覽器渲染機制篇
點這裡，歡迎關注 外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳 img oa3fsg6i 1601978311602 在生成dom樹和cssom樹之後，會遍歷dom樹的每乙個可見的節點，對於每個可見的節點，找到cssom樹中對應的規則，然後組合在一起，最終生成一棵渲染樹。注意 渲染樹只...
前端面試系列 瀏覽器快取機制
從快取位置上來說分為四種，並且各自有優先順序，當依次查詢快取且都沒有命中的時候，才會去請求網路 service workerservice worker 的快取與瀏覽器其他內建的快取機制不同，它可以讓我們自由控制快取哪些檔案 如何匹配快取 如何讀取快取，並且快取是持續性的.如果我們沒有在 servi...