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 閱讀(421) 評論(0)  編輯  收藏 所屬分類: web 前端性能測試

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

          導航

          統計

          常用鏈接

          留言簿(55)

          隨筆分類

          隨筆檔案

          文章分類

          文章檔案

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 苏尼特右旗| 孝义市| 东辽县| 册亨县| 乌拉特中旗| 胶南市| 同心县| 宁明县| 怀来县| 夏津县| 延寿县| 五大连池市| 岐山县| 广平县| 鄂托克前旗| 钦州市| 平乐县| 衡阳市| 濉溪县| 方正县| 奈曼旗| 上栗县| 东乌| 固原市| 定陶县| 平定县| 白河县| 厦门市| 阿拉善盟| 商南县| 本溪市| 郧西县| 镇宁| 荣成市| 兴文县| 日喀则市| 中超| 长治市| 科技| 滨海县| 桂东县|