即是web用戶在訪問一個(gè)頁面時(shí)所要花費(fèi)的時(shí)間總和。即一個(gè)完全意義上的用戶響應(yīng)時(shí)間，相對(duì)于服務(wù)器的響應(yīng)時(shí)間而言還會(huì)包括更多的內(nèi)容和影響因素。那么一個(gè)web頁面的完整請(qǐng)求包括了哪些部分的時(shí)間總和就是web前段性能分析和優(yōu)化所需要了解的基礎(chǔ)知識(shí)，先了解一下用戶從瀏覽器訪問一個(gè)url后到頁面完全展示所有內(nèi)容的整個(gè)過程吧。
頁面的請(qǐng)求過程：
1、瀏覽器的url請(qǐng)求
2、遞歸尋找DNS服務(wù)器
3、連接目標(biāo)IP并建立TCP連接
4、向目標(biāo)服務(wù)器發(fā)送http請(qǐng)求
5、web服務(wù)器接收請(qǐng)求后處理
6、web服務(wù)器返回相應(yīng)的結(jié)果【無效、重定向、正確頁面等】
7、瀏覽器接收返回的http內(nèi)容
================================前端解析分割線===========================================
8、開始解析html文件，當(dāng)然是自上而下，先是頭部，后是body
9、當(dāng)解析到頭部css外部鏈接時(shí)，同步去下載，如果遇到外部js鏈接也是下載【不過js鏈接不建議放在頭部，因?yàn)榈⒄`頁面第一展現(xiàn)時(shí)間】
10、接著解析body部分，邊解析邊開始生成對(duì)應(yīng)的DOM樹，同時(shí)等待css文件下載
11、一旦css文件下載完畢，那么就同步去用已經(jīng)生成的DOM節(jié)點(diǎn)+CSS去生成渲染樹
12、渲染樹一旦有結(jié)構(gòu)模型了，接著就會(huì)同步去計(jì)算渲染樹節(jié)點(diǎn)的布局位置
13、一旦計(jì)算出來渲染的坐標(biāo)后，又同步去開始渲染
14、10-13步進(jìn)行過程中如果遇到圖片則跳過去渲染下面內(nèi)容，等待圖片下載成功后會(huì)返回來在渲染原來圖片的位置
15、同14步，如果渲染過程中出現(xiàn)js代碼調(diào)整DOM樹機(jī)構(gòu)的情況，也會(huì)再次重新來過，從修改DOM那步開始
16、最終所有節(jié)點(diǎn)和資源都會(huì)渲染完成
=========================================分析結(jié)束分割線==============================================
17、渲染完成后開始page的onload事件
18、整個(gè)頁面load完成
整個(gè)過程中會(huì)有很多的分別請(qǐng)求，所以TCP連接會(huì)很多，并且每一個(gè)用完都會(huì)自己關(guān)了，除非是keep-live類型的可以請(qǐng)求多次才關(guān)閉。
綜上所述：
一個(gè)頁面的請(qǐng)求等于一個(gè)或多個(gè)url的請(qǐng)求，因此一個(gè)頁面里包含的外部請(qǐng)求數(shù)會(huì)影響頁面的整體性能
【每請(qǐng)求一次就要多占用一次cpu使用、多一次tcp連接】
每個(gè)url的請(qǐng)求又包括尋址、連接、請(qǐng)求傳輸、返回傳輸、斷連的過程；因此每個(gè)階段的外部環(huán)境也會(huì)影響整體性能
【DNS服務(wù)器的尋址時(shí)間，請(qǐng)求和返回內(nèi)容時(shí)的網(wǎng)絡(luò)環(huán)境】
除了URL請(qǐng)求數(shù)量外，每個(gè)請(qǐng)求的內(nèi)容大小也是影響性能的主要因素
【文件越大消耗在傳輸過程中的時(shí)間就越長】
請(qǐng)求同樣多的資源，并行請(qǐng)求和串行請(qǐng)求速率是不一樣的，所以請(qǐng)求的資源要盡量支持同步請(qǐng)求
【同步請(qǐng)求不同資源，即請(qǐng)求被發(fā)送到不同的資源服務(wù)器即可】
依據(jù)瀏覽器的加載、渲染機(jī)制，選擇合適的HTML內(nèi)容排版方式
【減少反復(fù)創(chuàng)建對(duì)象實(shí)例的次數(shù)、充分利用緩存機(jī)制】
優(yōu)先加載用戶關(guān)注的內(nèi)容
【css加載優(yōu)于js內(nèi)容，首屏內(nèi)容優(yōu)于非首屏內(nèi)容】
關(guān)注完http請(qǐng)求的過程后，再來關(guān)注整個(gè)請(qǐng)求過程中關(guān)注的幾個(gè)時(shí)間點(diǎn)，通過確定時(shí)間點(diǎn)就可以確定影響性能的時(shí)間段，就是確定影響性能的因素。根據(jù)上面的介紹主要的幾個(gè)時(shí)間點(diǎn)又可以分頁面的整體時(shí)間點(diǎn)、以及單個(gè)url請(qǐng)求過程中的時(shí)間點(diǎn)。【基于httpanalyzer工具的指標(biāo)】
單個(gè)url請(qǐng)求的主要時(shí)間點(diǎn)：
1、Cache Read：緩存讀取時(shí)間，或304錯(cuò)誤的處理時(shí)間
2、Block：請(qǐng)求等待時(shí)間，取決于緩存檢查，網(wǎng)絡(luò)連接等待
3、DNS Lookup：DNS服務(wù)器查找時(shí)間，取決于dns服務(wù)的數(shù)量，dns注冊(cè)的域
4、Connect：tcp連接的總時(shí)間，取決于連接類型，ssh，keepalive都會(huì)比http長
5、Send first to last：發(fā)送請(qǐng)求內(nèi)容的時(shí)間，取決于請(qǐng)求內(nèi)容大小，及上行的傳輸速度
6、Wait：等待響應(yīng)的時(shí)間，取決于網(wǎng)絡(luò)環(huán)境的響應(yīng)，web服務(wù)器的處理時(shí)間
7、Receive first to last：接收響應(yīng)內(nèi)容的時(shí)間，取決于響應(yīng)內(nèi)容，下行的傳輸速度，也要考慮服務(wù)器的帶寬
8、Time to first byte：從請(qǐng)求一直到接收到第一個(gè)字符的總時(shí)間，等于1+2+3+4+5+6
9、Network：網(wǎng)絡(luò)消耗時(shí)間，等于3+4
10、Begin to end：整個(gè)請(qǐng)求的總時(shí)間，等于1+2+3+4+5+6+7
單個(gè)頁面的主要時(shí)間點(diǎn)：
1、DOM Ready Time: DOM完成的時(shí)間，從接收html到完全轉(zhuǎn)換成dom樹所需的時(shí)間
2、DOM Ready to Page Load: 頁面元素的加載和渲染完成時(shí)間，包括html，css，img及其它內(nèi)容
3、Page Load Time: page頁onload事件的時(shí)間，其實(shí)際時(shí)間等于總時(shí)間 - （DOM ready + 元素渲染時(shí)間）
4、URL Requests Begin to End:url請(qǐng)求所消耗的所有時(shí)間，從發(fā)送請(qǐng)求發(fā)起到接收最后一個(gè)字節(jié)斷開
5、Network Time:消耗在網(wǎng)絡(luò)上的時(shí)間，即tcp的連接時(shí)間
6、Begin to End:所有消耗的時(shí)間，包括請(qǐng)求結(jié)束后的渲染時(shí)間