瀏覽器的探索

01- 瀏覽器組成

• 用戶界面－ 包括地址欄、後退/前進按鈕、書籤目錄等，也就是你所看到的除了用來顯示你所請求頁面的主窗口以外的其餘部分
• 瀏覽器引擎－ 用來查詢及操做渲染引擎的接口
• 渲染引擎（瀏覽器內核）－ 用來顯示請求的內容，例如，若是請求內容爲html，它負責解析html及css，並將解析後的結果顯示出來
• 網絡－ 用來完成網絡調用，例如http請求，它具備平臺無關的接口，能夠在不一樣平臺上工做
• JS解釋器－ 用來解釋執行JS代碼
• UI 後端－ 用來繪製相似組合選擇框及對話框等基本組件，具備不特定於某個平臺的通用接口，底層使用操做系統的用戶接口
• 數據存儲－ 屬於持久層，瀏覽器須要在硬盤中保存相似cookie的各類數據，HTML5定義了Storage技術，這是一種輕量級完整的客戶端存儲技術

02- 主流的渲染引擎

1.開發的時候只須要兼容三大瀏覽器便可,(谷歌, 火狐, IE瀏覽器)
2.負責解析html與css的

• Chrome瀏覽器: Blink引擎（WebKit的一個分支）。
• Safari瀏覽器: WebKit引擎，windows版本2008年3月18日推出正式版，但蘋果已於2012年7月25日中止開發Windows版的Safari。
• FireFox瀏覽器: Gecko引擎。
• Opera瀏覽器: Blink引擎(早期版使用Presto引擎）。
• Internet Explorer瀏覽器: Trident引擎。
• Microsoft Edge瀏覽器: EdgeHTML引擎（Trident的一個分支）。

03- 渲染引擎工做原理

• 渲染引擎解析的基本流程：

  

1. 解析html標籤，內存中構建DOM樹  , 解析css樣式，解析規則表, css和DOM樹同時進行
2. 構建渲染樹，渲染樹並不等同於Dom樹，由於像head標籤 或 display: none這樣的元素就沒有必要放到渲染樹中了，可是它們在Dom樹中。
    - dom樹沒有樣式，全部的節點
    - 渲染樹有樣式，只有須要顯示的節點
3. 佈局渲染樹  reflow, layout,  對節點進行佈局
4. 繪製渲染樹，調用操做系統底層API(UI Backend)進行繪圖操做。
複製代碼

04- 渲染引擎工做流程

webkit內核工做流程

Gecko工做流程

05- 重繪與迴流

重繪(repaints): 屬性只是影響元素的外觀，風格 從新操做第四步
迴流(repaints): 佈局發生改變就會引起迴流 , 迴流必將引發重繪從新操做第三步第四步

1. 當render tree中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流(reflow)。每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並從新構造這部分渲染樹，完成迴流後，瀏覽器會從新繪製受影響的部分到屏幕中，該過程成爲重繪。
2. 當render tree中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。則就叫稱爲重繪。
複製代碼

注意：迴流必將引發重繪，而重繪不必定會引發迴流。
咱們須要明白，頁面若發生迴流則須要付出很高的代價。

• 迴流什麼時候發生：

當頁面佈局和幾何屬性改變時就須要迴流。下述狀況會發生瀏覽器迴流：
一、添加或者刪除可見的DOM元素；
二、元素位置改變；
三、元素尺寸改變——邊距、填充、邊框、寬度和高度
四、內容改變——好比文本改變或者圖片大小改變而引發的計算值寬度和高度改變；
五、頁面渲染初始化；
六、瀏覽器窗口尺寸改變——resize事件發生時；
複製代碼

06- 優化性能(減小回流與重繪)的兩種方法:

1. 先加一個類,樣式所有寫在類裏,只會迴流一次
2. 而後離線處理 先none 再block 只有一次迴流和一次重繪 直接一次第二第三第四步

07- 瀏覽器與服務器的交互流程

一、瀏覽器根據主機名"www.gacl.cn"去操做系統的Hosts文件中查找主機名對應的IP地址。
二、瀏覽器若是在操做系統的Hosts文件中沒有找到對應的IP地址，就去互聯網上的DNS服務器上查找"www.gacl.cn"這臺主機對應的IP地址。
三、瀏覽器查找到"www.gacl.cn"這臺主機對應的IP地址後，就使用IP地址鏈接到Web服務器。  
四、瀏覽器鏈接到web服務器後，就使用http協議向服務器發送請求，發送請求的過程當中，瀏覽器會向Web服務器以Stream(流)的形式傳輸數據，告訴Web服務器要訪問服務器裏面的哪一個Web應用下的Web資源
五、瀏覽器作完上面4步工做後，就開始等待，等待Web服務器把本身想要訪問的1.jsp這個Web資源傳輸給它。
六、服務器接收到瀏覽器傳輸的數據後，開始解析接收到的數據，服務器解析"GET /JavaWebDemo1/1.jsp HTTP/1.1"裏面的內容時知道客戶端瀏覽器要訪問的是JavaWebDemo1應用裏面的1.jsp這個Web資源，而後服務器就去讀取1.jsp這個Web資源裏面的內容，將讀到的內容再以Stream(流)的形式傳輸給瀏覽器
七、瀏覽器拿到服務器傳輸給它的數據以後，就能夠把數據展示給用戶看了
複製代碼