Web性能定義：一個(gè)終端用戶從請(qǐng)求一段內(nèi)容開始到這段內(nèi)容顯示在用戶設(shè)備上這段時(shí)間的度量值。
運(yùn)行時(shí)性能：應(yīng)用在運(yùn)行時(shí)對(duì)用戶輸入響應(yīng)式能力的一個(gè)表示。
瀏覽器請(qǐng)求一個(gè)頁面的過程：
- 通過瀏覽器請(qǐng)求一個(gè)web頁面，瀏覽器創(chuàng)建一個(gè)線程去執(zhí)行該請(qǐng)求
- 發(fā)送請(qǐng)求，開始遠(yuǎn)程DNS查找，遠(yuǎn)程DNS將輸入的URL對(duì)應(yīng)的IP地址返回給瀏覽器
- 瀏覽器與遠(yuǎn)程web服務(wù)器通過三次握手建立一個(gè)tcp/ip連接
- tcp/ip連接建立后，瀏覽器通過連接發(fā)送一個(gè)HTTP Get請(qǐng)求到Web服務(wù)端。
- web服務(wù)器找到請(qǐng)求的資源，在HTTP響應(yīng)中將其返回并返回相對(duì)應(yīng)的狀態(tài)碼。（加載一個(gè)HTML不只需要一次這個(gè)過程，瀏覽器還要為頁面鏈接的資源發(fā)起一個(gè)HTTP請(qǐng)求，包括圖片、鏈接的css和js，但只要HTTP請(qǐng)求的源是形同的，瀏覽器可以重用響相應(yīng)的tcp連接）
常用狀態(tài)碼：200表示服務(wù)端成功響應(yīng)、301表示永久重定向、302表示臨時(shí)重定向、403表示請(qǐng)求被拒絕、404表示請(qǐng)求資源不存在、500表示服務(wù)端處理請(qǐng)求出錯(cuò)、503表示服務(wù)不可用、504表示網(wǎng)關(guān)超時(shí)
6.瀏覽器接收HTML頁面后開始渲染頁面。
現(xiàn)代瀏覽器的架構(gòu)：
- UI層：為瀏覽器繪制界面
- 網(wǎng)絡(luò)層：處理網(wǎng)絡(luò)連接，建立TCP/IP連接及HTTP請(qǐng)求，處理下載內(nèi)容并將內(nèi)容傳遞給渲染引擎。
- 渲染引擎：負(fù)責(zé)將內(nèi)容繪制到瀏覽器上，如WebKit
- JavaScript引擎：負(fù)責(zé)解析并執(zhí)行JavaScript，如V8
瀏覽器內(nèi)部模型執(zhí)行過程：
- 用戶在瀏覽器地址欄輸入U(xiǎn)RL，UI層將URL請(qǐng)求傳遞給網(wǎng)絡(luò)層
- 網(wǎng)絡(luò)層建立連接下載頁面
- 含有HTML塊的數(shù)據(jù)包到達(dá)，傳送給渲染引擎，渲染引擎對(duì)HTML字符進(jìn)行解析轉(zhuǎn)換成DOM，然后和CSSOM成渲染樹，構(gòu)建DOM節(jié)點(diǎn)，布局DOM元素的位置，描述DOM元素
- 渲染引擎在遇到<script>標(biāo)簽先會(huì)暫停下來，其一，<script>指向外部JS文件，解析過程暫停，網(wǎng)絡(luò)層介入，下載JS文件，然后初始化JS引擎解析，執(zhí)行該JS 文件；其二，<script>包含的內(nèi)嵌的JS，渲染引擎暫停，JS引擎被初始化，解析和執(zhí)行該JS文件。JS文件執(zhí)行完畢后，之前暫停的渲染引擎恢復(fù)運(yùn)行。所以,JS 會(huì)阻塞瀏覽器渲染。
HTTP響應(yīng)的五個(gè)層次類別:
- 1XX：信息；請(qǐng)求已收到，正在處理
- 2XX：成功；請(qǐng)求已經(jīng)成功接收、解析并執(zhí)行了
- 3XX：重定向；需要進(jìn)一步的跳轉(zhuǎn)和更多的操作來完成當(dāng)前的請(qǐng)求
- 4XX：客戶端錯(cuò)誤；請(qǐng)求包含了語法錯(cuò)誤，不能執(zhí)行
- 5XX：服務(wù)端錯(cuò)誤；服務(wù)端正在處理一個(gè)有效地請(qǐng)求時(shí)失敗
picture元素是HTML5的新元素，它是一個(gè)容器元素，包含多種不同的源標(biāo)簽，基于不同的視口寬度像素密度指定不同的照片，也可以容納img標(biāo)簽進(jìn)行降級(jí)。<source>元素支持media屬性，可以指明關(guān)注的媒體類型和目標(biāo)CSS屬性；src屬性指明對(duì)目標(biāo)的媒體類型和CSS屬性對(duì)應(yīng)下載的圖片。
<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>
