API測試與相容---效能檢測工具
效能檢測工具-------
國外：
YSlow:23條效能軍規，打分制，提供瀏覽器外掛
WebPageTest：真實瀏覽器，多地區，視屏截圖
GooglePageSpeed：真實瀏覽器，移動端
國內：
效能魔方（推薦）：多地區 運營商 多角度 優化建議---http://www.mmtrix.com 賬號Owen
阿里測（老牌）：多地區 多瀏覽器 訪問限制
17CE：多地區評測訪問速度，更偏運維
API測試與相容--------
HTTP協議入門
為什麼？
絕大多數的web應用，都建在http協議之上
是什麼？
無狀態、B/S模式應用層協議，多基於TCP協議
包含啥？
請求：報文格式（報頭、正文、URI）、請求方法、請求頭
響應：狀態碼、訊息報頭、響應正文
FAQ？
常見請求頭：User-Agent、Cookie、Referrer
常見響應頭：Content-Type 、 content-Length 、Cache
常見狀態碼：2xx(請求成功) 3xx（頁面跳轉）4xx（客戶端請求錯誤，資料格式）5xx（伺服器端錯誤）
參考資料 HTTP權威指南 TCP/IP詳解
瀏覽器開啟網頁時發生了什麼？（瀏覽器基本工作原理）
位址列輸入URL 之後
DNS解析（多級快取）--解析輸入的URL
請求（TCP連線 HTTP報文）
解析（解壓 快取處理 引用資源）--對壓縮過的js css程式碼進行解壓，以及圖片 等引用資源
構建：DOM樹（節點顯隱 層次結構）
構建：cssom樹（css優先順序）
構建：render樹（css匹配規則）
（render樹的改變，導致重繪） Repaint+Reflow
Repaint：面板類外觀改變引發的重新渲染，如背景色
Reflow：位置 大小 盒模型等發生變化需要重新佈局
常見誘因：
頁面滾動
頁面縮放
新增樣式
操作DOM（屬性 樣式 增刪節點）
計算寬高位置等
指令碼：文件狀態（阻塞和延遲 內聯和外聯）
渲染頁面（DOM+CSSOM--> Render-Tree）
1.API測試資料
工具： 谷歌瀏覽器 有內建的 DHC， postman也是一款很不錯的API測試工具
包括：
1.請求構造
請求引數，請求頭 請求方法
響應檢視 格式化
2.請求管理
儲存 名稱空間管理（專案 服務）
3高階用法
請求複製
資料匯入匯出
2.瀏覽器相容3部區
1如何發現問題？
QuirksMode：相容性列表
CanIUse：查詢js特性，css屬性，html5等的支援情況（推薦）
CanIUse.com
2 如何解決問題：
1 BrowserHacks:不同瀏覽器及版本支援的各種黑科技
BrowserHacks.com
2 Shim：補充老舊瀏覽器的不足，讓程式碼更順手
ES5Shim
ES6Shim
HTML5Shim
JSONShim
3 如何把事做絕：
漸進增強，工具：Modernizr（推薦） Feature.js
Modernizr：現代瀏覽器特徵檢測，助你漸進增強
Feature.js：類似 Modernizr比較輕量，不支援css
基於Modernizr做漸進增強（增強老舊瀏覽器的功能）
全域性安裝：Modernizr
獲取配置：自定義構建
生成構建：命令列用法
引入指令碼：直接頁面引用
使用方法：JS+CSS