Web性能定義：一個終端用戶從請求一段內容開始到這段內容顯示在用戶設備上這段時間的度量值。
運行時性能：應用在運行時對用戶輸入響應式能力的一個表示。
瀏覽器請求一個頁面的過程：
- 通過瀏覽器請求一個web頁面，瀏覽器創(chuàng)建一個線程去執(zhí)行該請求
- 發(fā)送請求，開始遠程DNS查找倒堕，遠程DNS將輸入的URL對應的IP地址返回給瀏覽器
- 瀏覽器與遠程web服務器通過三次握手建立一個tcp/ip連接
- tcp/ip連接建立后，瀏覽器通過連接發(fā)送一個HTTP Get請求到Web服務端爆价。
- web服務器找到請求的資源垦巴，在HTTP響應中將其返回并返回相對應的狀態(tài)碼。（加載一個HTML不只需要一次這個過程铭段，瀏覽器還要為頁面鏈接的資源發(fā)起一個HTTP請求骤宣，包括圖片、鏈接的css和js序愚，但只要HTTP請求的源是形同的憔披，瀏覽器可以重用響相應的tcp連接）
常用狀態(tài)碼：200表示服務端成功響應、301表示永久重定向爸吮、302表示臨時重定向芬膝、403表示請求被拒絕、404表示請求資源不存在形娇、500表示服務端處理請求出錯锰霜、503表示服務不可用、504表示網關超時
6.瀏覽器接收HTML頁面后開始渲染頁面桐早。
現(xiàn)代瀏覽器的架構：
- UI層：為瀏覽器繪制界面
- 網絡層：處理網絡連接癣缅，建立TCP/IP連接及HTTP請求，處理下載內容并將內容傳遞給渲染引擎哄酝。
- 渲染引擎：負責將內容繪制到瀏覽器上友存，如WebKit
- JavaScript引擎：負責解析并執(zhí)行JavaScript，如V8
瀏覽器內部模型執(zhí)行過程：
- 用戶在瀏覽器地址欄輸入URL陶衅，UI層將URL請求傳遞給網絡層
- 網絡層建立連接下載頁面
- 含有HTML塊的數據包到達屡立，傳送給渲染引擎，渲染引擎對HTML字符進行解析轉換成DOM搀军，然后和CSSOM成渲染樹侠驯，構建DOM節(jié)點抡秆，布局DOM元素的位置，描述DOM元素
- 渲染引擎在遇到<script>標簽先會暫停下來吟策，其一儒士，<script>指向外部JS文件，解析過程暫停檩坚，網絡層介入着撩，下載JS文件，然后初始化JS引擎解析匾委，執(zhí)行該JS 文件拖叙；其二，<script>包含的內嵌的JS赂乐，渲染引擎暫停薯鳍，JS引擎被初始化，解析和執(zhí)行該JS文件挨措。JS文件執(zhí)行完畢后挖滤，之前暫停的渲染引擎恢復運行。所以,JS 會阻塞瀏覽器渲染浅役。
HTTP響應的五個層次類別:
- 1XX：信息斩松；請求已收到，正在處理
- 2XX：成功觉既；請求已經成功接收惧盹、解析并執(zhí)行了
- 3XX：重定向；需要進一步的跳轉和更多的操作來完成當前的請求
- 4XX：客戶端錯誤瞪讼；請求包含了語法錯誤钧椰，不能執(zhí)行
- 5XX：服務端錯誤；服務端正在處理一個有效地請求時失敗
picture元素是HTML5的新元素符欠，它是一個容器元素嫡霞，包含多種不同的源標簽，基于不同的視口寬度像素密度指定不同的照片背亥，也可以容納img標簽進行降級。<source>元素支持media屬性悬赏，可以指明關注的媒體類型和目標CSS屬性狡汉；src屬性指明對目標的媒體類型和CSS屬性對應下載的圖片。
<picture>
<source media=“(min-width:640px,min-device-pixel-ratio:2)” src=“XXX.jpg”>
<source media=“(min-width:1024px,min-device-pixel-ratio:2)” src=“XXX.jpg”>
</picture>
