第一章 Web前端技術基礎

優化

• 優化小技巧
  • 非同步載入資源
  • 使用webp（一種高壓縮比格式）圖片
  • 快取
  • 針對移動端可以考慮直接跳轉到移動端網址
    • 而不是在桌面端上相容移動端，這樣更耗空間

瀏覽器組成結構

• 輸入網址到顯示網頁發生了什麼
  • 在接收到使用者輸入網址後，瀏覽器會開啟一個執行緒處理這個請求，對使用者輸入的URL地址進行分析判斷，如果是HTTP協議就按HTTP方式處理
  • 呼叫瀏覽器引擎中的對應方法，比如WebView中的loadUrl方法，分析並載入這個URL地址。
  • 通過DNS解析獲取該網站地址對應IP地址，查詢完成後連同瀏覽器的Cookie、userAgent等資訊向網站目的IP傳送GET請求。
  • 進行HTTP協議會話，瀏覽器客戶端向Web伺服器傳送報文。
  • 進入網站後臺上的Web伺服器處理請求，如Node、Tomcat等伺服器
  • 進入部署好的後端應用，如Java、PHP等後端程式，找到對應的請求處理邏輯，這期間可能會讀取伺服器快取或者查詢資料。
  • 伺服器處理請求並返回響應報文，此時如果瀏覽器訪問過該頁面，快取上有對應資源會與伺服器最後修改記錄對比，一則返回304，否則返回200和對應內容
  • 瀏覽器開始下載HTML文件（200時）或者讀取本地快取內容（304）
  • 瀏覽器根據下載接收到的HTML檔案解析結構建立DOM文件樹，並根據HTML標記請求下載指定的MIME型別檔案（如CSS，JavaScript等），同時設定快取等內容。
  • 頁面開始解析渲染DOM，CSS根據規則解析並結合DOM文件樹進行網頁內容佈局和繪製渲染，JavaScript根據DOM API操作DOM，並讀取瀏覽器快取、執行事件繫結等，頁面整個展示過程完成。
• 瀏覽器主要組成部分
  • 使用者介面
    • 可見的地址輸入框、瀏覽器前進返回按鈕等
  • 瀏覽器引擎
    • 使用者介面和渲染引擎之間傳送指令或者從本地快取讀取資料，各個模組的通訊核心
  • 渲染引擎
    • 解析DOM文件和CSS規則並且把內容排版到瀏覽器中顯示有樣式的介面。
    • 也有人稱之為排版引擎
  • 網路（功能模組）
    • 開啟網路執行緒傳送請求或下載資原始檔
  • JavaScript引擎
    • 解析執行JavaScript（V8引擎）
  • UI後端
    • 繪製瀏覽器視窗內控制元件，如組合選擇框，輸入框等
  • 資料持久化儲存
    • 客戶端儲存（如cookie、localStorage）
• 渲染引擎主要工作流程
  • 解析HTML構建DOM樹
  • 構建渲染樹
    • 帶樣式描述的DOM樹
  • 渲染樹佈局階段
    • 佈局屬性生效（position、margin等）
  • 繪製渲染樹
    • 顯示樣式生效（color、background等）
  • 注1：DOM渲染樹的解析和輸出是並行的
  • 注2：頁面佈局發生變化 => 佈局階段開始重新渲染（重排/迴流）=> 重繪
  • 注3：在WebKit中，HTML和CSS的解析是並行的，解析後的物件稱為（Render Tree）
    • 在Gecko中，是先解析HTML後解析CSS，解析後的物件稱為（Frame Tree）
• CSS解析
  • 通過分析CSS文件。會生成一系列的CSSRule，CSSRule包括：
    • Selectors，選擇器，DOM樹中的節點根據元素、類、id選擇器匹配Selectors
    • Declaration，樣式的具體宣告
  • 權重計算（即優先順序）
  • !important > 內聯（權重1000）> id選擇器（權重100）> 類選擇器（權重10）> 元素選擇器（權重1）

持久化儲存技術

• 持久化儲存技術
  • 九種：
    • HTTP快取
    • LocalStorage
    • SessionStorage
    • indexDB
    • Web SQL
    • Cookie
    • CacheStorage
    • Application Cache
    • Flash
• HTTP檔案快取
  • Cache-Control
    • 如果同時設定了Expires（絕對過期時間）和Cache-Control（相對過期時間），則只有後者生效
  • Etag + If-None-Match
  • Last-Modified + If-Modified-Since
  • 沒有過期304，過期請求200
• localStorage
  • setItem，getItem，removeItem，clear
  • IE8以上5MB，Firefox 8以上 5.24MB，Opera 2MB，Chrome、Safari 2.6MB
  • 使用時可以考慮封裝保證安全性
  • 單個域名下localStorage有大小限制，可以使用iframe突破限制
• sessionStorage
  • 跟localStorage功能醫院，但是瀏覽器關閉就沒了
• Cookie
  • 限制在4KB左右
  • 鍵值對
  • cookie分兩種，Session Cookie和持久型Cookie
  • cookie設定中有個HttpOnly引數，背設定為HttpOnly的Cookie只能通過HTTP請求傳送到服務端進行讀寫操作，避免伺服器的Cookie記錄被修改，保證服務端驗證Cookie的安全性
  • 通過document.cookie來讀取非HttpOnly型別的Cookie
• WebSQL（不常用）
  • WebSQL不是HTML5的規範
  • WebSQL將資料以資料庫二維表形式儲存在客戶端，js讀取
  • openDataBase()，transaction()，excuteSql()
  • 相容性和使用場景有限
• IndexDB（不常用）
  • HTML5規範之一
  • 和WebSQL類似
  • 50MB
  • 大量資料儲存本地會導致資料洩露
• Application Cache（不常用）
  • manifest配置檔案，有選擇性地儲存JS、CSS、圖片等靜態資原始檔的快取機制
  • 第二次訪問頁面時才生效，回去檢查manifest檔案是否已更新，沒更新就從App Cache中讀取，有就更新App Cache
  • 優點
    • 離線瀏覽
    • 快速載入
    • 伺服器負載小
  • 缺點
    • 已經開始被標準棄用，ServiceWorkers來代替
    • 不相容主流瀏覽器
    • manifest檔案或者內部列表中某個檔案不能正常下載，整個更新過程將視為失敗，繼續使用舊快取。
    • manifest和靜態資源必須同源
    • 站點其他頁面沒有設定manifest也會在快取訪問資源
    • manifest改變時，資源請求本身也會觸發更新
• cacheStorage
  • ServiceWorker規範中定義
    • 用於儲存每個ServiceWorker宣告的Cache物件
  • ServiceWorker是在瀏覽器後臺作為一個獨立的執行緒執行的JS指令碼，為瀏覽器提供並行的計算和資料處理能力，使用message/postMessage方法在頁面之間進行通訊。
  • open()、match()、has()、delete()、keys()
• Flash（不常用）
  • 通過js api呼叫flash讀寫指定磁碟目錄

除錯工具

• 常用除錯工具
  • Fiddler：代理、攔截
  • Vorlon、Weinre：移動端除錯