1. 程式人生 > >探討web前端效能分析

探討web前端效能分析

即是web使用者在訪問一個頁面時所要花費的時間總和。即一個完全意義上的使用者響應時間,相對於伺服器的響應時間而言還會包括更多的內容和影響因素。那麼一個web頁面的完整請求包括了哪些部分的時間總和就是web前端效能分析和優化所需要了解的基礎知識,先了解一下使用者從瀏覽器訪問一個url後到頁面完全展示所有內容的整個過程吧。

頁面的請求過程:

=======================================開始分界線=============================================

1、瀏覽器的url請求
2、遞迴尋找DNS伺服器
3、連線目標IP並建立TCP連線
4、向目標伺服器傳送http請求

5、web伺服器接收請求後處理
6、web伺服器返回相應的結果【無效、重定向、正確頁面等】

7、瀏覽器接收返回的http內容

====================================前端解析分割線============================================

8、開始解析html檔案,當然是自上而下,先是頭部,後是body

9、當解析到頭部css外部連結時,同步去下載,如果遇到外部js連結也是下載【不過js連結不建議放在頭部,因為耽誤頁面第一展現時間】

10、接著解析body部分,邊解析邊開始生成對應的DOM樹,同時等待css檔案下載

11、一旦css檔案下載完畢,那麼就同步去用已經生成的DOM節點+CSS去生成渲染樹

12、渲染樹一旦有結構模型了,接著就會同步去計算渲染樹節點的佈局位置

13、一旦計算出來渲染的座標後,又同步去開始渲染

14、10-13步進行過程中如果遇到圖片則跳過去渲染下面內容,等待圖片下載成功後會返回來在渲染原來圖片的位置

15、同14步,如果渲染過程中出現js程式碼調整DOM樹機構的情況,也會再次重新來過,從修改DOM那步開始

16、最終所有節點和資源都會渲染完成

=========================================分析結束分割線==============================================

17、渲染完成後開始page的onload事件

18、整個頁面load完成

整個過程中會有很多的分別請求,所以TCP連線會很多,並且每一個用完都會自己關了,除非是keep-live型別的可以請求多次才關閉。



綜上所述:
一個頁面的請求等於一個或多個url的請求,因此一個頁面裡包含的外部請求數會影響頁面的整體效能每請求一次就要多佔用一次cpu使用、多一次tcp連線
每個url的請求又包括定址、連線、請求傳輸、返回傳輸、斷連的過程;因此每個階段的外部環境也會影響整體效能【DNS伺服器的定址時間,請求和返回內容時的網路環境】
除了URL請求數量外,每個請求的內容大小也是影響效能的主要因素【檔案越大消耗在傳輸過程中的時間就越長】
請求同樣多的資源,並行請求和序列請求速率是不一樣的,所以請求的資源要儘量支援同步請求【同步請求不同資源,即請求被髮送到不同的資源伺服器即可】
依據瀏覽器的載入、渲染機制,選擇合適的HTML內容排版方式【減少反覆建立物件例項的次數、充分利用快取機制】
優先載入使用者關注的內容【css載入優於js內容,首屏內容優於非首屏內容】

關注完http請求的過程後,再來關注整個請求過程中關注的幾個時間點,通過確定時間點就可以確定影響效能的時間段,就是確定影響效能的因素。根據上面的介紹主要的幾個時間點又可以分頁面的整體時間點、以及單個url請求過程中的時間點。【基於httpanalyzer工具的指標】

單個url請求的主要時間點
1、Cache Read:快取讀取時間,或304錯誤的處理時間 
2、Block:請求等待時間,取決於快取檢查,網路連線等待
3、DNS Lookup:DNS伺服器查詢時間,取決於dns服務的數量,dns註冊的域
4、Connect:tcp連線的總時間,取決於連線型別,ssh,keepalive都會比http長
5、Send first to last:傳送請求內容的時間,取決於請求內容大小,及上行的傳輸速度
6、Wait:等待響應的時間,取決於網路環境的響應,web伺服器的處理時間
7、Receive first to last:接收響應內容的時間,取決於響應內容,下行的傳輸速度,也要考慮伺服器的頻寬
8、Time to first byte:從請求一直到接收到第一個字元的總時間,等於1+2+3+4+5+6
9、Network:網路消耗時間,等於3+4
10、Begin to end:整個請求的總時間,等於1+2+3+4+5+6+7


單個頁面的主要時間點
1、DOM Ready Time: DOM完成的時間,從接收html到完全轉換成dom樹所需的時間
2、DOM Ready to Page Load: 頁面元素的載入和渲染完成時間,包括html,css,img及其它內容
3、Page Load Time: page頁onload事件的時間,其實際時間等於總時間 - (DOM ready + 元素渲染時間)
4、URL Requests Begin to End:url請求所消耗的所有時間,從傳送請求發起到接收最後一個位元組斷開
5、Network Time:消耗在網路上的時間,即tcp的連線時間
6、Begin to End:所有消耗的時間,包括請求結束後的渲染時間

相關推薦

探討web前端效能分析

即是web使用者在訪問一個頁面時所要花費的時間總和。即一個完全意義上的使用者響應時間,相對於伺服器的響應時間而言還會包括更多的內容和影響因素。那麼一個web頁面的完整請求包括了哪些部分的時間總和就是web前端效能分析和優化所需要了解的基礎知識,先了解一下使用者從瀏覽器訪問一個url後到頁面完全展示所有內容的

web前端效能分析--原理篇 .

web前端效能: 即是web使用者在訪問一個頁面時所要花費的時間總和。即一個完全意義上的使用者響應時間,相對於伺服器的響應時間而言還會包括更多的內容和影響因素。那麼一個web頁面的完整請求包括了哪些部分的時間總和就是web前段效能分析和優化所需要了解的基礎知識,先了解一下使用者從瀏覽器訪問一個url後到頁面

WEB前端效能分析--工具篇

線上網站類: WebPageTest 說明: 線上的站點效能評測網站,地址http://www.webpagetest.org/ 補充: 其實這網站也是個開源專案,所以支援自己搭建一個內部的測試站點 ShowSlow 說明: showslow是yslow的資料收集與展示平臺http://www.show

web前端效能分析--原理篇

web前端效能: 即是web使用者在訪問一個頁面時所要花費的時間總和。即一個完全意義上的使用者響應時間,相對於伺服器的響應時間而言還會包括更多的內容和影響因素。那麼一個web頁面的完整請求包括了哪些部分的時間總和就是web前段效能分析和優化所需要了解的基礎知識,先了解一下使用者從瀏覽器訪問一個url後到

Web前端效能優化問題

1、請減少HTTP請求基本原理: 在瀏覽器(客戶端)和伺服器發生通訊時,就已經消耗了大量的時間,尤其是在網路情況比較糟糕的時候,這個問題尤其的突出。 一個正常HTTP請求的流程簡述:如在瀏覽器中輸入"www.xxxxxx.com"並按下回車,瀏覽器再與這個URL指向的伺服器建立連線,然後瀏覽器才

如何進行web前端效能優化

這裡是修真院前端小課堂,每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能,本篇分享的是: 【如何進行web前端效能優化】   大家好,我是IT修真院深圳分院第9期的學員

web前端效能優化的一些方法

web前端是應用伺服器處理之前的部分,前端主要包括:HTML,CSS,javascript,image等各種資源,針對不同的資源有不同的優化方式。  (2)減少DNS查詢: 內容優化 (1)減少HTTP請求數:這條策略是最重要最有效的,因為一個完整的請求要經過DNS定址,

主流Web Service效能分析

Web Service也稱為XML Web Service,WebService是一種可以接收Internet或者Intranet上傳遞過來的請求,是輕量級獨立的通訊技術,具有很好的跨平臺效能,因此使用Web Service有許多優點: 1. 跨防火牆的通訊 Web Service具有良好的

Web前端效能優化——如何有效提升靜態檔案的載入速度

原文連結:https://wetest.qq.com/lab/view/345.html?from=content_qcloud WeTest 導讀 此文總結了筆者在Web靜態資源方面的一些優化經驗。

深度講解:web前端效能優化

一、課程簡介: 1、課程大綱 涉及到的分類 網路層面 構建層面 瀏覽器渲染層面 服務端層面 涉及到的功能點 資源的合併與壓縮 圖片編解碼原理和型別選擇 瀏覽器渲染機制 懶載入預載入 瀏覽器儲存 快取機制 PW

Web前端效能優化(一)

1. 靜態資源的壓縮與合併 我們在開發的時候會習慣縮排和寫註釋,方便我們在日常的維護,但將程式碼上傳至服務端後,我們完全可以把那些空格、製表符、換行符進行壓縮,以此減少請求資源的大小;同樣的,我們在服務端所引用的第三方庫進行合併,能減少 HTTP 的請求數量 將

一款前端效能分析工具—WebPageTest

我們常常說效能測試,但通常我們只關注後端效能,那麼前端效能怎麼測試呢?今天就介紹一個WEB前端效能分析工具WebPageTest。這是一個線上的免費效能評測網站,支援IE,Chrome,使用真正的瀏覽器(IE和Chrome)和真實的消費者連線速度,從全球多個地點執行免費網

用Docker安裝Web前端效能測試工具YellowLabTools

一、YellowLabTools概述 1.YellowLabTools簡介 Yellow Lab Tools:是一款開源的Web前端效能測試工具,具有一些在其他工具上無法看到的獨特功能,如頁面載入時,JavaScript與DOM互動和其他程式程式碼驗證問題。 Yellow Lab Tools 偏向於一個

架構優化之高效能:web前端效能優化,靜態資源快取,檔案壓縮

web前端效能優化 內容主要來自阿里架構一書。自己總結以及進行實踐 一.瀏覽器訪問優化 1.減少http請求 合併css,合併JS,合併圖片:圖片也可以進行合併,多張圖片合併成一張, 現在的瀏覽器會自動的複用tcp連結,不會剛用完就關閉 2.設定使用瀏覽器快取 靜態資源(如何設定?可

web前端效能優化之CDN

什麼是CDN CDN (Content Delivery Network) 可直譯成內容分發網路。CDN的本質仍然李詠快取技術快取, 解決的是__如何將資料快速可靠從源站傳遞到使用者的問題__。使用者獲取資料時,不需要直接從源站獲取,通過CDN對於資料的分發,使用者可以從一個較優的伺服器獲取資料,從而達到快

Web前端效能優化:減少DNS查詢

DNS(Domain Name System): 負責將域名URL轉化為伺服器主機IP。 DNS查詢流程:首先檢視瀏覽器快取是否存在,不存在則訪問本機DNS快取,再不存在則訪問本地DNS伺服器。所以DNS也是開銷,通常瀏覽器查詢一個給定URL的IP地址要花費20-120ms,在DNS查詢完成前

Web前端效能雜記

  前面說過,使用者感受的響應時間是取決於諸多因素的,我們幾乎不能得到真實的使用者響應時間。對於Web應用前端效能的研究也不是為了準備得到一個響應時間,其效能一部分取決於Web伺服器和應用伺服器(下載資源,執行等),另一部分取決於瀏覽器的實現機制、介面JS檔案的執行等,所以我們討論前端效能的目的是減少總的響應

Web前端效能優化(三)新增Expires頭

什麼是Expires頭? Expires儲存的是一個用來控制快取失效的日期。當瀏覽器看到響應中有一個Expires頭時,它會和相應的元件一起儲存到其快取中,只要元件沒有過期,瀏覽器就會使用快取版本而不會進行任何的HTTP請求。Expires設定的日期格式必須為GMT

Web前端效能優化的9大問題

以上都是對HTML和CSS非常糟糕的使用方法。  正確理解: HTML是一門標記語言,使用合理的HTML標籤前你必須瞭解其屬性,比如Flow Elements,Metadata Elements ,Phrasing Elements。比較基礎的就是得知道塊級元素和內聯元素、盒模型、SEO方面的知識。 CSS

八大技巧,提升Web前端效能(贈超實用前端乾貨大合集,含特效原始碼)

1. 優化 CSS 效能CSS,即級聯樣式表,能從 HTML 描述的內容生成專業而又整潔的檔案。