前端日拱一卒D2——瀏覽器基礎

前言

餘爲前端菜鳥，感姿式水平匱乏，難觀前端之大局。遂決定循前端知識之脈絡，以興趣爲引，輔以幾分堅持，望於己能解惑致知、於同道能助力一二，豈不美哉。

本系列代碼及文檔均在 此處

從輸入url到展現頁面經歷了什麼？

• 接收輸入，開啓線程處理
• 調用方法分析url
• DNS解析獲取對應IP地址
  • DNS(domain name system)，解析過程由host->本地域名解析器緩存->本地域名服務器->根域名服務器->頂級域名服務器->二級域名服務器
  • DNS prefetch可使瀏覽器主動去執行域名解析，域名解析在後臺執行，可能連接出現前已經解析完了，能夠減小用戶點擊連接時的延遲，好比

    // taobao主頁
    <link rel="dns-prefetch" href="//g.alicdn.com" />
    <link rel="dns-prefetch" href="//img.alicdn.com" />
    複製代碼

• 與服務器創建鏈接，確認後發送報文
• 到達服務器處理請求，後端應用處理請求
• 服務器返回響應報文，適用相應緩存策略
• 瀏覽器下載文檔（考慮緩存策略）
• 解析html創建dom tree，下載css/js
• 解析渲染dom，css根據規則結合dom進行內容佈局和繪製渲染，js根據dom api操做dom，執行事件綁定等至展現過程完成

瀏覽器組成

• 用戶界面
• 瀏覽器引擎 (查詢和操做渲染引擎的接口)
• 渲染引擎 (顯示頁面內容)
• 網絡模塊
• js引擎 (負責js解釋執行，如V8引擎)
• UI後端 (繪製基本的瀏覽器窗口內控件)
• 數據持久化存儲 (可經過瀏覽器引擎提供的接口調用)

渲染引擎

渲染引擎負責解析html和css，將css規則應用到html標籤上，並將html渲染爲頁面上具體的dom內容

過程

• 解析html生成dom tree
• 將dom樹節點順序提取，結合css規則計算樣式數據，構建render tree
• render tree佈局，根據每一個渲染樹節點的佈局屬性將節點固定到頁面的對應位置
• 繪製render tree，將元素的顯示屬性（背景、顏色、文本等）應用到節點，完成整個dom在頁面上的顯示

頁面元素位置變化將致使重排和重繪(即佈局和繪製階段從新渲染)，位置不變可是顯示樣式變化則會致使重繪。從新渲染的代價比較大，因此應勁量避免重排，減小重繪。

Gecko與Webkit

二者在渲染引擎部分很相似，但也有區別。前者的css解析是在html解析完生成內容sink以後進行的，結合構建的樹叫作frame tree，後者css解析和html解析能夠認爲是並行的。

解析詳解

• html解析

  從html文本標籤通過詞法分析->parse成dom對象，每一個標籤中的每一個元素在解析後對應都有一個原始類型

  

  let element = document.getElementById('div')
  let type = Object.prototype.toString.call(element).slice(8, -1)
  console.log(type)
  // HTMLDivElement
  複製代碼

  dom元素標籤是文本化的html標識，dom元素對象是一個帶有父子關係的樹形對象

• css解析

  css文件被解析成一個CSSStyleSheet對象，該對象內存在多個CSSStyleRule，每一個rule包含有選擇器信息和聲明對象（樣式信息）

  

• render tree

  生成render tree的時候會遍歷dom樹的節點，爲每一個節點找到css rule並根據優先級（老生常談的權重判斷方式）將多條rule合併生成最終該節點的樣式信息添加到render tree上。

數據持久化

HTTP文件緩存

• cache-control/expire 前者是相對時間，後者是絕對時間

  // 前端設置
  <meta http-equiv="Cache-Control" content="max-age=7200" />
  <meta http-equiv="Expires" content="Mon, 16 Jul 2018 23:00:00 GMT" />
  複製代碼

• Etag和Last-Modified是返回頭中的信息，當本地緩存失效時會將這些信息一塊兒發送至服務端進行對比

• 服務端進行決策是否有更新，返回200或者304

localStorage

• 單個域名下的localStorage大小限制在幾M
• 瀏覽器多個標籤頁打開同一域名頁面時localStorage是共享的
• 簡單的幾個方法getItem, setItem, removeItem, clear

sessionStorage

• 會話結束時(瀏覽器關閉)自動清空

Cookie

• basics

  • 單個域名下的cookie大小限制在4K
  • 每一個cookie都是<key>=<value>的形式
  • cookie類型爲string
  • cookie有域(domain)和路徑(path)的概念，通常不可跨域訪問，路徑遵循子目錄可訪問的規則
  • secure保證cookie在傳輸過程當中加密

  document.cookie='name=123;expires=date;path=path;domain=domain;secure'
  複製代碼

• session cookie和持久性cookie

  前者生命週期爲瀏覽器會話期間，保存在內存中，後者通常會設置過時時間，保存在硬盤上，到期後纔會被清空失效

• HttpOnly屬性

  

  設置了HttpOnly的cookie只能經過請求頭髮送到服務端進行讀寫操做，避免了被前端js修改，保證了服務端驗證cookie的安全性

• 操做

  document.cookie = 'name=123' // add
  document.cookie = 'name=1234' // edit
  document.cookie = 'name=1234;expires=xxxx' // expires爲過去時間，則delete
  複製代碼

Web SQL和IndexedDB

在客戶端進行數據存儲，適用場景不是不少，也存在一些安全問題，且行且看

Application Cache

• 經過manifest配置文件實現本地緩存的解決方案
• 在第二次訪問時，訪問appCache，檢查manifest文件是否更新，將更新的文件從新拉取並更新cache
• 離線存儲的容量限制爲5M，緩存文件必須和manifest同源
• 將被廢棄，被sevice worker替代(後續pwa瞭解一下)

CacheStorage

這部分涉及到service worker，不是三言兩語能說清，因此請轉到 這裏

雖發表於此，卻畢竟爲一人之言，又是每日學有所得之筆記，內容未必詳實，看官老爺們還望海涵。