Web 前端性能分析（一）

Ashin 發布于2019-08-23 16:22 / 2882人閱讀

摘要：參考鏈接初探監控網頁與程序性能使用簡潔的測試網頁加載速度前端性能統計前端性能監控起步使用性能快速分析前端性能通過以上幾篇文章，可以對前端性能相關的概念和有一個整體的認識。但在我們這次的前端性能監控方案中，并不將其作為主要的監控指標。

參考鏈接

初探 performance – 監控網頁與程序性能

使用簡潔的 Navigation Timing API 測試網頁加載速度

前端性能統計

前端性能——監控起步

使用性能API快速分析web前端性能

Page Visibility

通過以上幾篇文章，可以對前端性能相關的概念和 API 有一個整體的認識。

簡要說明

前段時間和同事一起對網頁性能監控方面的知識做了些探討和實踐，期望可以對用戶的網絡情況、程序的性能狀況等做個統計分析，從而對程序進行有針對性的優化。為此我們做了個簡單的試驗項目，主要對 頁面加載 和 ajax請求 兩個方面進行了分析。（本文的方案主要是出于技術探討的目的，只是一個 Demo，而非完整的性能監控方案）

這個圖是最初的方案圖，我們初級版本的程序設計基本上就是按照圖上這個思路來的。

我們的實現思路是，在頁面初始化完成后，將本次頁面加載的信息和用戶上次頁面操作過程中發出的ajax請求信息上報給服務器，由服務端進行進一步統計分析。

頁面加載信息，主要指css樣式表、js腳本和圖片等外部資源加載用時和初始化完成的時間（全部完成用時）。
用戶上次頁面操作過程中發出的ajax請求，主要是指用戶上一次在這個頁面上進行的查詢、自定義設置等操作過程中，觸發的ajax請求相關的信息，比如方法名稱、服務器處理時間、客戶端下載時間等。

為什么是用戶上次操作的ajax相關信息？
主要是出于減少請求的目的，以避免監控程序本身對程序主體性能的影響，因此不會將每個請求的信息都實時的上報服務器，而是先存儲在客戶端。我們會將用戶在這個頁面進行的各種操作觸發的異步請求信息，以一定格式存儲在客戶端 localstorage，當用戶再次打開這個頁面的時候，我們會從 localstorage 中取出存儲的ajax信息，將其上報服務器，然后清空 localstorage 中這些舊的數據，以便重新進行記錄。

因此，用戶在打開這個頁面時，我們上報的是用戶上次的使用信息。（如果有用戶只打開過一次這個頁面，后面就再沒使用過，那么這是一個低頻使用客戶，不在我們統計范圍內。）

而用戶的頁面加載信息，每次用戶打開頁面時，我們都會將其上傳至服務器，不需要在客戶端進行存儲。

服務端收到前端上報的數據后，會進行相應的分析處理，這里不對這部分進行說明。

相關知識 一、影響網頁性能的因素

HTML 的解析和渲染（參見文檔《瀏覽器解析渲染HTML頁面的過程》）

服務端處理的速度（負載均衡，緩存策略）

客戶端帶寬（網絡狀況）

我們要對網頁的性能進行統計分析，首先應當確定哪些因素會對網頁的性能帶來影響。一般來說，前端HTML文檔的結構是否合理，外部資源是否進行了壓縮合并，靜態內容是否使用了CDN加速，服務端是否配置了負載均衡，是否采取了緩存策略，以及客戶端帶寬狀況等，都會對網頁的性能造成影響。

二、瀏覽器解析渲染HTML頁面的過程

參考資料： 瀏覽器的工作原理

上面這篇文章會幫助我們了解瀏覽器解析和渲染HTML文檔的過程。具體的可以參見另一篇文檔： 《瀏覽器解析渲染HTML頁面的過程》

這里對以下幾點進行著重說明：

HTML 文檔的解析和渲染是一個漸進的過程。為達到更好的用戶體驗，呈現引擎會力求盡快將內容顯示在屏幕上。它不必等到整個 HTML 文檔解析完畢，就會開始構建呈現樹和設置布局。在不斷接收和處理來自網絡的其余內容的同時，呈現引擎會將部分內容解析并顯示出來。

瀏覽器的預解析機制。

HTML 文檔的解析和渲染過程中，外部樣式表和腳本順序執行、并發加載。

JS 腳本會阻塞 HTML 文檔的解析，包括 DOM 樹的構建和渲染樹的構建；CSS 樣式表會阻塞渲染樹的構建，但 DOM 樹依然繼續構建（除非遇到 script 標簽且 css 文件此時仍未加載完成），但不會渲染繪制到頁面上。
在 HTML 文檔的解析過程中，解析器遇到

在頁面初始化完成之后，每次ajax請求的信息都會實時添加到調試頁面，就像這樣：

在控制臺控制調試頁面的開閉：

問題和思考

傳輸大小
performance.timing.transferSize 可以用來獲取傳輸大小，但是公司產品WebKit版本不支持，所以前端對于css、js文件的大小暫時沒辦法提供。而對于ajax的傳輸內容大小，我們使用 Content-Length 的值。

如何準確定義頁面初始化完成的時機
對于圖片加載，我們可以通過 window 對象的 load 事件獲取圖片等外部資源加載完成的時間，也可以通過一些方法去獲取首屏圖片加載完成的時間，但是對于頁面初始化過程中發起的多個異步請求完成時機的判斷，會相對麻煩一些，主要是由于異步請求返回結果的先后順序不定。

我們設想在頁面初始化完成的時候，在業務代碼中調用方法上報信息到服務器，那么怎么確定頁面初始化完成了？
比如頁面初始化完成應當包括關鍵詞查詢接口返回、表格內數據查詢接口返回這兩個ajax請求完成，此時我們才認為頁面初始化完成了（對于這個頁面來講，也可以說是首屏加載完成）。但是異步請求的返回順序是不定的，也許查詢關鍵字的請求先返回，也許查詢表格數據的接口先返回，如果需要準確定義初始化完成的時機，就要判斷是否所有初始化涉及的請求均已成功，特別是有些頁面的初始加載可能會調用很多個ajax請求，這就不太好確定什么時候是初始化完成的時候。

對于試驗項目中的這個頁面，因為初始化只涉及兩個請求，相對來說作為主體內容的表格數據是主要的請求，而關鍵詞的請求相對來說不太重要，因此我們可以粗略的將請求表格數據成功的時間，認為是頁面初始化完成的時機，我們可以在請求表格數據的成功回調中進行信息的上報。

但是這樣顯然是不夠精確的，并且這個頁面的初始化過程涉及的異步請求比較少，但是如果是請求數量比較多的情況呢？

我們的解決方案是：$.when() + $.Deferred()

我們使用變量接收初始化過程中調用的 ajax 請求所返回的 jqXHR 對象，在 jQuery1.5 版本之后，$.ajax() 方法返回的 jqXHR 對象都是 Deferred 對象，因此我們可以將這些 jqXHR 對象放在 $.when() 方法中，為它們指定回調函數（即上報服務器的操作），這樣就可以保證頁面初始化時機的準確性。

代碼示例如下：

// 頁面初始化
$(function () {
  // 表格初始化
  var dtd = tableSection.showTable();
  // 設置關鍵字
  var dtd2 = integratedQuery.setHotKeyWords();
  $.when(dtd, dtd2)
    .done(function () {
      // 將頁面性能數據上報服務器
      try {
        WebPerformance.sendPerformanceInfoToServer();
      } catch (e) {
        throw e;
      }
    })
    .fail(function () {
      console.log("fail: send performance info")
    });
    // 其他初始化操作
    // ...
 });

GPU云服務器云服務器前端web前端前端web前端課程 web前端前端開發前端web前端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102960.html

前端優化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
前端性能優化

摘要：端優談談關于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發送，從而達到對頁面的優化。而作為一名有追求的前端，勢必要力所能及地優化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優化問題過早優化是萬惡之源。優化向：單頁應用多路由預渲染指南 Ajax 技術的出現，讓我們的 Web 應用能夠在不刷新的狀態下顯示不同頁面的內容，這就是單頁應用。在一個單頁應用中，往往只有一...

Dean 2019-08-21 18:19 評論0 收藏0
前端每周清單半年盤點之 PWA 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于...

崔曉明 2019-08-20 19:01 評論0 收藏0
如何成為一名優秀的web前端工程師（前端攻城師）？

摘要：我從沒有聽到有人問如何做一名優秀甚至卓越的前端工程師。作為一個優秀的前端工程師還需要深入了解以及學會處理的這些缺陷。再者，優秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求。　　我所遇到的前端程序員分兩種：　　第一種一直在問：如何學習前端？　　第二種總說：前端很簡單，就那么一點東西。　　我從沒有聽到有人問：如何做一名優秀、甚至卓越的WEB前端工程師...

Turbo 2019-08-20 17:21 評論0 收藏0