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

資訊專欄INFORMATION COLUMN

前端監(jiān)控實踐——FMP的智能獲取算法

xzavier / 1885人閱讀

今天來給大家介紹下前端監(jiān)控中一個特定指標的獲取算法，有人會問，為啥就單單講一個指標？這是因為，目前大部分的指標，比如白屏?xí)r間，dom加載時間等等，都能通過現(xiàn)代瀏覽器提供的各種api去進行較為精確的獲取，而今天講的這個指標，以往獲取他的方式只能是通過邏輯埋點去獲取它的值，因此在做一些前端監(jiān)控時，需要根據(jù)業(yè)務(wù)需要去改變頁面對這個值的埋點方式，會比較繁瑣，恰巧最近剛剛好在做一些前端監(jiān)控相關(guān)的項目，遇到這個問題時就在想，能不能通過一種無須埋點的方式，將這個值給獲取到？倒騰了一段時間，終于把算法弄出來了，今天就來給大家介紹下————FMP(first meaning paint) 指標的智能獲取算法

什么是FMP

解答這個問題之前，我們先來了解下現(xiàn)代前端監(jiān)控性能的主要指標統(tǒng)計方法，在2013年之后，標準組織推出了 performance timing api ，如下圖

這個api統(tǒng)計了瀏覽器從網(wǎng)址開始導(dǎo)航到 window.onload事件觸發(fā)的時間點，比如請求開始的時間點——requestStart,響應(yīng)結(jié)束的時間點——responseEnd,通過這些時間點我們可以計算出一些對頁面加載質(zhì)量有指導(dǎo)意見的時長，比如以下幾個:

TTFB : ResponseStart - RequestStart (首包時間，關(guān)注網(wǎng)絡(luò)鏈路耗時)

FPT : ResponseEnd - FetchStart （首次渲染時間 / 白屏?xí)r間）

TTI : DomInteractive - FetchStart （首次可交付時間）

Ready : DomContentLoadEventEnd - FetchStart （加載完成時間）

Load : LoadEventStart - FetchStart （頁面完全加載時間）

通過這些指標我們可以得到很多有用的web端網(wǎng)頁加載信息，建立對網(wǎng)頁性能概況

以上的指標可以對網(wǎng)頁進行數(shù)值化的衡量，但是其實這種衡量只能體現(xiàn)一個視角的性能觀點，比如TTFB很快，就能代表用戶能夠很快的看到頁面的內(nèi)容嘛？這個不一定是成立的，因此人們有開始從用戶的視角去分析網(wǎng)頁加載的性能情況，將用戶看待加載過程，分成了以下幾個階段：

頁面是否正在正常加載 （happening）

頁面加載的內(nèi)容是否已經(jīng)足夠（useful）

頁面是否已經(jīng)可以操作了 （usable）

頁面是否可以交互，動畫是否順暢（delightful）

而我們今天討論的FMP（first meaningful paint），其實就是回答 is it useful,加載的內(nèi)容是否已經(jīng)足夠，其實這是一個很難被定義的概念。每個網(wǎng)頁都有自己的特點，只有開發(fā)者和產(chǎn)品能夠比較確定哪個元素加載的時間點屬于FMP,今天我們就來討論一下，如何比較智能的去找出頁面那個主要的元素，確定頁面的FMP

成為FMP元素的條件

首先我們可以看看下面的圖：

我們可以發(fā)現(xiàn)在頁面中比較useful的內(nèi)容，都是含有信息量比較豐富的，比如圖片，視頻，動畫，另外就是占可視面積較大的，頁面中還存在兩種形態(tài)的內(nèi)容可以被視為是useful的，一種是單一的塊狀元素，另外一種是由多個元素組合而成的大元素，比如視頻元素，banner圖，這種屬于單一的塊狀元素，而像圖片列表，多圖像的組合，這種屬于元素組合
總結(jié)一下成為FMP元素的條件：

體積占比比較大

屏幕內(nèi)可見占比大

資源加載元素占比更高(img, svg , video , object , embed, canvas)

主要元素可能是多個組成的

算法如何設(shè)計

前面介紹了FMP的概念還有成為FMP的條件，接下來我們來看看如何設(shè)計FMP獲取的算法，按照上面的介紹，我們知道算法分為以下兩個部分:

獲取FMP元素

計算FMP元素的加載時間

如果有了解過瀏覽器加載原理的同學(xué)都知道，瀏覽器在在獲取到html頁面之后會逐步的對html文檔進行解析，遇到j(luò)avascript會停止html文檔的解析工作，執(zhí)行javascript，執(zhí)行完繼續(xù)解析html，直到整個頁面解析完成為止。頁面除了html文檔中的元素加載，可能在執(zhí)行javascript的時候，會產(chǎn)生動態(tài)的元素片段加載，一般來說，首屏元素會在這期間加載。因此我們只需要監(jiān)控元素的加載和加載的時間點，然后再進行計算。

具體的算法流程如下圖

相關(guān)的代碼鏈接我已經(jīng)放在最后面了，下面我會逐步的講解整個算法流程

我把整個流程分為兩個下面兩個部分：

監(jiān)聽元素加載，主要是為了確定普通元素加載的時間點

確定FMP元素，計算出最終的FMP值

下面我們按照步驟來分析

初始化監(jiān)聽

可以看到首先我們先執(zhí)行了firstSnapshot方法，用于記錄在代碼執(zhí)行之前加載的元素的時間點

接下來初始化MutationObserver，開始監(jiān)聽document的加載情況，在發(fā)生回調(diào)的時候，記錄下當前到performance.timing.fetchStart的時間間隔,然后對body的元素進行深度遍歷，進行打點，記錄是在哪一次回調(diào)的時候記錄的，如下圖

監(jiān)聽的最后我們會將在window.onload的時候去觸發(fā)檢查是否停止監(jiān)聽的條件，如下圖


如果監(jiān)聽的時間超過LIMIT，或者發(fā)生回調(diào)的時間間隔已經(jīng)超過1s中，我們認為頁面已經(jīng)穩(wěn)定，停止dom元素加載的監(jiān)聽，開始進入計算過程

完成監(jiān)聽，進行元素得分計算

首先前面我們說了，我們的元素對于頁面的貢獻是不同的，資源加載的元素會對用戶視覺感官的影響比較大，比如圖片，帶背景的元素，視頻等等，因此我設(shè)計了一套權(quán)重系統(tǒng)，如下：


可以看到svg,img的權(quán)重為2，canvas,object,embed,video的權(quán)重為4，其他的元素為1，
也就是說，如果一個圖片面積為1/2首屏面積，其實他的影響力會和普通元素占滿首屏的影響力一樣

接著我們回到代碼，我們首先會對整個頁面進行深度優(yōu)先遍歷搜索，然后對每一個元素進行進行分數(shù)計算，如下圖


可以看到我們通過element.getBoundingClientRect獲取了元素的位置和大小，然后通過計算"width * height * weight * 元素在viewport的面積占比"的乘積，確定元素的最終得分，然后將改元素的子元素得分之和與其得分進行比較，去較大值，記錄得分元素集

通過計算確定FMP元素，計算最終FMP時間

通過上面的步驟我們獲取到了一個集合，這個集合是"可視區(qū)域內(nèi)得分最高的元素的集合",我們會對這個集合的得分取均值，然后過濾出在平均分之上的元素集合，然后進行時間計算

可以看到分為兩種情況去處理:

weight為1的普通元素，那么我們會通過元素上面的標記，去查詢之前保存的時間集合，得到這個元素的加載時間點

weight不為1的元素，那么其實就存在資源加載情況，元素的加載時間其實是資源加載的時間，我們通過performance.getEntries去獲取對應(yīng)資源的加載時間，獲取元素的加載速度

最后去所有元素最大的加載時間值，作為頁面加載的FMP時間

最后

以上就是整個算法的比較具體的流程，可能有人會說，這個東西算出來的就是準確的么？這個算法其實是按照特征分析，特定的規(guī)則總結(jié)出來的算法， 總體來說還是會比較準確，當然web頁面的布局如果比較奇特，可能是會存在一些偏差的情況。也希望大家能夠一起來豐富這個東西，為FMP這個計算方法提出自己的建議
附上代碼 鏈接

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

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

相關(guān)文章

  • 前端黑科技：美團網(wǎng)頁首幀優(yōu)化實踐

    摘要：在美團支付的前端技術(shù)體系里，通過預(yù)渲染提升網(wǎng)頁首幀優(yōu)化，從而優(yōu)化了白屏問題，提升用戶體驗，并形成了最佳實踐。我們團隊主要負責(zé)美團支付相關(guān)的業(yè)務(wù)，如果網(wǎng)站太慢會影響用戶的支付體驗，會造成客訴或資損。 前言 自JavaScript誕生以來，前端技術(shù)發(fā)展非常迅速。移動端白屏優(yōu)化是前端界面體驗的一個重要優(yōu)化方向，Web 前端誕生了 SSR 、CSR、預(yù)渲染等技術(shù)。在美團支付的前端技術(shù)體系里，通...

    mrli2016 評論0 收藏0

  • GMTC 2019 參會回顧

    摘要：回顧上一次參加還是年。年的還是真正的，年的會議早已經(jīng)把英文全稱去掉，改稱全球大前端技術(shù)大會。同時與產(chǎn)品協(xié)作從產(chǎn)品設(shè)計方面突出關(guān)注點，做產(chǎn)品設(shè)計方面的優(yōu)化，如站新版改造減少頁面元素，將播放器窗口直接顯示在第一屏。 回顧 上一次參加 GMTC 還是 2017 年。那時的我還是剛剛參加工作并在試用期辭職的菜鳥。 2017 年的 GMTC 還是真正的 Global Mobile Tech Co...

    Zack 評論0 收藏0

  • AI中臺：一種敏捷的智能業(yè)務(wù)支持方案|宜信技術(shù)學(xué)院沙龍分享實錄

    摘要：因此數(shù)據(jù)中臺必須具備智能化能力，能夠為業(yè)務(wù)提供一定的智能數(shù)據(jù)分析能力。宜信作為一家金融科技公司，更多面對的是金融領(lǐng)域的智能業(yè)務(wù)需求。 showImg(https://segmentfault.com/img/bVbqQM0?w=1155&h=492); 內(nèi)容來源：宜信技術(shù)學(xué)院第1期技術(shù)沙龍-線上直播|AI中臺：一種敏捷的智能業(yè)務(wù)支持方案 主講人介紹：井玉欣 宜信技術(shù)研發(fā)中心AI應(yīng)用團隊...

    makeFoxPlay 評論0 收藏0

  • 實時智能決策引擎在螞蟻金服風(fēng)險管理中的實踐

    摘要：在演講中，王修坤分享了互聯(lián)網(wǎng)保險產(chǎn)品場景化高頻化和碎片化的典型特征以及在風(fēng)險控制方面所面臨的諸多挑戰(zhàn)，并為大家介紹了實時智能決策引擎在螞蟻金服風(fēng)險管理中的實踐。 摘要：以數(shù)字金融新原力(The New Force of Digital Finance)為主題，螞蟻金服ATEC城市峰會于2019年1月4日上海如期舉辦。金融智能專場分論壇上，螞蟻金服數(shù)據(jù)技術(shù)專家王修坤做了主題為《實時智能決...

    noONE 評論0 收藏0

  • 如何實現(xiàn)多維智能監(jiān)控？--AI運維的實踐探索

    摘要：近十年監(jiān)控系統(tǒng)開發(fā)經(jīng)驗，具有構(gòu)建基于大數(shù)據(jù)平臺的海量高可用分布式監(jiān)控系統(tǒng)研發(fā)經(jīng)驗。監(jiān)控多維數(shù)據(jù)特點監(jiān)控的核心是對監(jiān)控對象的指標采集處理檢測和分析。通過單一對象的指標反映的狀態(tài)已不能滿足業(yè)務(wù)監(jiān)控需求。 吳樹生：騰訊高級工程師，負責(zé)SNG大數(shù)據(jù)監(jiān)控平臺建設(shè)。近十年監(jiān)控系統(tǒng)開發(fā)經(jīng)驗，具有構(gòu)建基于大數(shù)據(jù)平臺的海量高可用分布式監(jiān)控系統(tǒng)研發(fā)經(jīng)驗。前言在2015年構(gòu)建多維監(jiān)控平臺時用kmeans做了異常點...

    王軍 評論0 收藏0

發(fā)表評論

0條評論

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