成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Web 前端性能分析（一）

Ashin / 2923人閱讀

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

參考鏈接

初探 performance – 監(jiān)控網(wǎng)頁與程序性能

使用簡潔的 Navigation Timing API 測試網(wǎng)頁加載速度

前端性能統(tǒng)計

前端性能——監(jiān)控起步

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

Page Visibility

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

簡要說明

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

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

我們的實現(xiàn)思路是，在頁面初始化完成后，將本次頁面加載的信息和用戶上次頁面操作過程中發(fā)出的ajax請求信息上報給服務(wù)器，由服務(wù)端進(jìn)行進(jìn)一步統(tǒng)計分析。

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

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

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

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

服務(wù)端收到前端上報的數(shù)據(jù)后，會進(jìn)行相應(yīng)的分析處理，這里不對這部分進(jìn)行說明。

相關(guān)知識 一、影響網(wǎng)頁性能的因素

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

服務(wù)端處理的速度（負(fù)載均衡，緩存策略）

客戶端帶寬（網(wǎng)絡(luò)狀況）

我們要對網(wǎng)頁的性能進(jìn)行統(tǒng)計分析，首先應(yīng)當(dāng)確定哪些因素會對網(wǎng)頁的性能帶來影響。一般來說，前端HTML文檔的結(jié)構(gòu)是否合理，外部資源是否進(jìn)行了壓縮合并，靜態(tài)內(nèi)容是否使用了CDN加速，服務(wù)端是否配置了負(fù)載均衡，是否采取了緩存策略，以及客戶端帶寬狀況等，都會對網(wǎng)頁的性能造成影響。

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

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

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

這里對以下幾點進(jìn)行著重說明：

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

瀏覽器的預(yù)解析機制。

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

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

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

在控制臺控制調(diào)試頁面的開閉：

問題和思考

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

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

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

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

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

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

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

代碼示例如下：

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102960.html

相關(guān)文章

  • 前端優(yōu)化 - 收藏集 - 掘金

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

    VincentFF 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

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

    princekin 評論0 收藏0

  • 前端性能優(yōu)化

    摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問題我們都知道對頁面進(jìn)行緩存能夠有利于減少請求發(fā)送，從而達(dá)到對頁面的優(yōu)化。而作為一名有追求的前端，勢必要力所能及地優(yōu)化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬惡之源。 優(yōu)化向：單頁應(yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁面的內(nèi)容，這就是單頁應(yīng)用。在一個單頁應(yīng)用中，往往只有一...

    Dean 評論0 收藏0

  • 前端每周清單半年盤點之 PWA 篇

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

    崔曉明 評論0 收藏0

  • 如何成為一名優(yōu)秀的web前端工程師（前端攻城師）？

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

    Turbo 評論0 收藏0

發(fā)表評論

0條評論

Ashin

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<