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