<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    qileilove

    blog已經轉移至github,大家請訪問 http://qaseven.github.io/

    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前端性能分析--實踐篇

    posted on 2013-09-27 10:44 順其自然EVO 閱讀(419) 評論(0)  編輯  收藏 所屬分類: web 前端性能測試

    <2013年9月>
    25262728293031
    1234567
    891011121314
    15161718192021
    22232425262728
    293012345

    導航

    統計

    常用鏈接

    留言簿(55)

    隨筆分類

    隨筆檔案

    文章分類

    文章檔案

    搜索

    最新評論

    閱讀排行榜

    評論排行榜

    主站蜘蛛池模板: 久久久久亚洲av无码专区导航| 国产无遮挡又黄又爽免费视频| 伊人亚洲综合青草青草久热| 免费一级毛片在线播放放视频| 国产精品国产免费无码专区不卡| 亚洲国产美女精品久久久| 毛片大全免费观看| 亚洲日韩精品无码专区| 大陆一级毛片免费视频观看| 亚洲码欧美码一区二区三区| 免费va在线观看| 一级毛片aa高清免费观看| 久久亚洲精品无码观看不卡| 你是我的城池营垒免费观看完整版| 91麻豆精品国产自产在线观看亚洲| 天黑黑影院在线观看视频高清免费 | 2021在线观看视频精品免费| 亚洲国产精品成人综合久久久| 欧美三级在线电影免费| 亚洲中文无码mv| 亚洲日韩国产精品乱| 久久青草免费91线频观看不卡| 97se亚洲综合在线| 成年女人看片免费视频播放器| 黄色一级免费网站| 亚洲AV乱码一区二区三区林ゆな| 免费不卡视频一卡二卡| 国产成人精品亚洲| 久久久久亚洲AV无码专区首| 无人在线观看完整免费版视频| 羞羞的视频在线免费观看| 日本亚洲视频在线| 成年人在线免费观看| 无遮挡免费一区二区三区| 久久精品国产亚洲香蕉| 最近中文字幕mv免费高清视频7 | www国产亚洲精品久久久日本| 日韩电影免费在线观看网站 | 亚洲国产亚洲综合在线尤物| 又黄又爽的视频免费看| 99久久久国产精品免费牛牛|