瀏覽器的組成

• 使用者介面－ 包括位址列、後退/前進按鈕、書籤目錄等，也就是你所看到的除了用來顯示你所請求頁面的主視窗之外的其他部分

• 瀏覽器引擎－ 用來查詢及操作渲染引擎的介面

• 渲染引擎（瀏覽器核心）－ 用來顯示請求的內容，例如，如果請求內容為html，它負責解析html及css，並將解析後的結果顯示出來

• 網路－ 用來完成網路呼叫，例如http請求，它具有平臺無關的介面，可以在不同平臺上工作

• UI 後端－ 用來繪製類似組合選擇框及對話方塊等基本元件，具有不特定於某個平臺的通用介面，底層使用作業系統的使用者介面

• JS直譯器－ 用來解釋執行JS程式碼

• 資料儲存－ 屬於持久層，瀏覽器需要在硬碟中儲存類似cookie的各種資料，HTML5定義了Storage技術，這是一種輕量級完整的客戶端儲存技術

主流的渲染引擎

瀏覽器的渲染引擎也叫排版引擎，或者是瀏覽器核心

主流的 渲染引擎 有

• 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的一個分支）。

渲染引擎工作原理

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

1. 解析HTML構建Dom樹，DOM 是W3C組織推薦的處理可擴充套件置標語言的標準程式設計介面。
2. 構建渲染樹，渲染樹並不等同於Dom樹，因為像`head`標籤 或 `display: none`這樣的元素就沒有必要放到渲染樹中了，但是它們在Dom樹中。
3. 對渲染樹進行佈局，定位座標和大小、確定是否換行、確定position、overflow、z-index等等，這個過程叫`layout` 或 `reflow`。
4. 繪製渲染樹，呼叫作業系統底層API(UI Backend)進行繪圖操作。

webkit核心工作流程

gecko核心工作流程

結論：瀏覽器能夠解析HTML檔案，並且顯示到頁面中。所以我們寫的檔案能夠使用瀏覽器開啟並且能夠看到效果。

效能優化：重繪與迴流（重排）

迴流（reflow）與重繪（repaint），在效能優化的時候，經常會提起，因為涉及到瀏覽器底層的渲染，所以掌握的童鞋並不多，但是面試經常被提及。

迴流(reflow):當render tree中的一部分(或全部)因為元素的規模尺寸，佈局，隱藏等改變而需要重新構建。

重繪(repaint)：當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，比如background-color。

1. 每個頁面至少需要一次迴流+重繪。

2. 迴流必將引起重繪

迴流什麼時候發生？

1、新增或者刪除可見的DOM元素；

2、元素位置改變；

3、元素尺寸改變——邊距、填充、邊框、寬度和高度

4、內容改變——比如文字改變或者圖片大小改變而引起的計算值寬度和高度改變；

5、頁面渲染初始化；

6、瀏覽器視窗尺寸改變——resize事件發生時；

var s = document.body.style;
s.padding = "2px"; // 迴流+重繪
s.border = "1px solid red"; // 再一次 迴流+重繪
s.color = "blue"; // 再一次重繪
s.backgroundColor = "#ccc"; // 再一次 重繪
s.fontSize = "14px"; // 再一次 迴流+重繪
// 新增node，再一次 迴流+重繪
document.body.appendChild(document.createTextNode('abc!'));

• 如何效能優化? 儘量減少重繪與迴流的次數

  • 直接使用className修改樣式，少用style設定樣式

  • 讓要操作的元素進行”離線處理”，處理完後一起更新

    • 使用DocumentFragment進行快取操作,引發一次迴流和重繪

    • 使用display:none技術，只引發兩次迴流和重繪;

  • 將需要多次重排的元素，position屬性設為absolute或fixed，這樣此元素就脫離了文件流，它的變化不會影響到其他元素為動畫的 HTML 元素，例如動畫，那麼修改他們的 CSS 是會大大減小 reflow 。

  • 完成功能是前提，在完成功能的情況下想著優化程式碼

    var pNode,fragment = document.createDocumentFragment(); 
  //動態建立20個p標籤，先用DocumentFragment 物件來快取   
  for(var i=0; i<20; i++){
    pNode = document.createElement('p');
    pNode.innerHTML = i;
    fragment.appendChild(pNode);    
   }
  document.body.appendChild(fragment);

瀏覽器與伺服器的互動流程

1. 瀏覽器通過位址列發出請求

2. 通過DNS伺服器解析，得到域名對應的ip地址

3. 根據ip地址，訪問伺服器具體的某個檔案

4. 伺服器響應這個具體的檔案

5. 瀏覽器獲取響應，進行顯示

問題1：我們寫的html頁面，存放在哪兒？

問題2：我們寫的html頁面，在哪裡解析的（顯示）？

前端開發：以瀏覽器為宿主環境，結合 HTML、CSS、Javascript等技術，而進行的一系列開發，通常稱之為前端開發。

伺服器端開發：HTTP伺服器可以結合某一程式語言處理業務邏輯，由此進行的開發，通常稱之為服務端開發。

nodejs：服務端的javascript開發，用於開發服務端程式的

apache php

nodejs javascript

動態網頁： 網頁的資料是動態生成的 資料在‘動’