浏览器基础知识
Web瀏覽器的主要功能是展示網(wǎng)頁資源，即請求服務(wù)器并將結(jié)果展示在窗口中。工作原理大概如下：
地址欄輸入URL
瀏覽器根據(jù)輸入的URL查找域名的IP地址，DNS查找過程如下：
- 瀏覽器緩存——瀏覽器會緩存DNS記錄一段時間，不同瀏覽器默認緩存時間不一樣，IE默認為30分鐘，Firefox默認是1分鐘。
- 系統(tǒng)緩存——如果在瀏覽器緩存里沒有找到需要的緩存記錄，瀏覽器會到系統(tǒng)緩存中查找。
- 路由器緩存——如果系統(tǒng)緩存中也沒有，就會將請求發(fā)給路由器并在其DNS緩存中查找。
- ISP緩存——如果路由器緩存中沒有，就會將請求發(fā)給ISP的DNS緩存服務(wù)器并在其記錄中查找。
- 訪問根域名服務(wù)器——如果ISP緩存中沒有，就會由ISP向根域名服務(wù)器進行遞歸搜索，查找到對應記錄并返回。
瀏覽器與對應Web服務(wù)器建立TCP連接，并發(fā)送HTTP請求，Web服務(wù)器接收到請求后進行一系列分析處理（關(guān)于HTTP請求響應的詳細過程以后再進行剖析）并返回HTML文件。
瀏覽器解析HTML
瀏覽器接收到服務(wù)器返回的HTML文件，解析<head>標簽：
- 關(guān)于頁面的一些配置標簽，例如<title>、<meta>、<base>等，以后再進行剖析，這些會對頁面屬性進行設(shè)置。
- 碰到內(nèi)聯(lián)CSS和JS會立即解析執(zhí)行。
- 碰到外部CSS和JS會并發(fā)請求相關(guān)資源，然后解析執(zhí)行。不同瀏覽器針對同一域的同一時間默認并發(fā)連接數(shù)會有不同，一般在10個以內(nèi)。
接著，瀏覽器開始解析<body>里的內(nèi)容：
- 碰到需要獲取其他地址內(nèi)容的標簽，例如<img>、<script>，會并發(fā)請求相關(guān)資源。
當HTML解析器遇到<script>標簽時，默認必須先執(zhí)行腳本，然后再恢復文檔的解析和渲染。腳本的執(zhí)行只在默認情況下是同步和阻塞的。<script>標簽可以通過defer和async屬性來改變腳本的執(zhí)行方式。使用defer和async屬性，可以讓瀏覽器在下載腳本時繼續(xù)解析和渲染文檔。defer屬性使瀏覽器延遲腳本的執(zhí)行，直到文檔的載入和解析完成。async屬性使瀏覽器可以盡快地執(zhí)行腳本，而不用在下載腳本時阻塞文檔解析。如果<script>標簽同時擁有這兩個屬性，同時支持這兩者的瀏覽器會執(zhí)行async屬性并忽略defer屬性。延遲腳本會按照他們在文檔里的出現(xiàn)順序來執(zhí)行，而異步腳本在他們載入后執(zhí)行，可能會無序執(zhí)行。
瀏覽器渲染原理
關(guān)于瀏覽器的渲染原理，這里有篇流傳很廣很不錯的文章——《How browsers work》（英文版，中文翻譯版），就不細說了。簡要分析幾點：
-
瀏覽器的主要組件
1. 用戶界面——包括地址欄、后退/前進按鈕、書簽目錄等，也就是你所看到的除了用來顯示你所請求頁面的主窗口之外的其他部分。
2. 瀏覽器引擎——用來查詢及操作渲染引擎的接口。
3. 渲染引擎——用來顯示請求的內(nèi)容，例如，如果請求內(nèi)容為HTML，它負責解析HTML及CSS，并將解析后的結(jié)果顯示出來。
4. 網(wǎng)絡(luò)——用來完成網(wǎng)絡(luò)調(diào)用，例如HTTP請求，它具有平臺無關(guān)的接口，可以在不同平臺上工作。
5. UI后端——用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平臺的通用接口，底層使用操作系統(tǒng)的用戶接口。
6. JS解釋器——用來解釋執(zhí)行JS代碼。
7. 數(shù)據(jù)存儲——屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)，HTML5定義了web database技術(shù)，這是一種輕量級完整的客戶端存儲技術(shù)。
圖1：瀏覽器主要組件
Chrome為每個Tab分配了各自的渲染引擎實例，每個Tab就是一個獨立的進程。
-
reflow和repaint
瀏覽器渲染過程中經(jīng)常伴隨著reflow和repaint，如果只是改變某個元素的背景色、文字顏色等不影響Dom布局的屬性時會引起瀏覽器進行repaint，相對而言，如果改變影響Dom布局的屬性時就會引起瀏覽器進行reflow，而reflow比repaint開銷要大很多，因此應盡量避免。
轉(zhuǎn)載于:https://www.cnblogs.com/ywang1724/p/3916633.html
總結(jié)
- 上一篇： C#回顾 - 3.NET的IO：字节流
- 下一篇： HTML5简略介绍