亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

xzavier / 1909人閱讀

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

什么是FMP

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

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

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

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

TTI : DomInteractive - FetchStart （首次可交付時(shí)間）

Ready : DomContentLoadEventEnd - FetchStart （加載完成時(shí)間）

Load : LoadEventStart - FetchStart （頁面完全加載時(shí)間）

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

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

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

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

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

頁面是否可以交互，動(dòng)畫是否順暢（delightful）

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

成為FMP元素的條件

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

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

體積占比比較大

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

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

主要元素可能是多個(gè)組成的

算法如何設(shè)計(jì)

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

獲取FMP元素

計(jì)算FMP元素的加載時(shí)間

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

具體的算法流程如下圖

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

我把整個(gè)流程分為兩個(gè)下面兩個(gè)部分：

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

確定FMP元素，計(jì)算出最終的FMP值

下面我們按照步驟來分析

初始化監(jiān)聽

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

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

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


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

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

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


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

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


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

通過計(jì)算確定FMP元素，計(jì)算最終FMP時(shí)間

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

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

weight為1的普通元素，那么我們會(huì)通過元素上面的標(biāo)記，去查詢之前保存的時(shí)間集合，得到這個(gè)元素的加載時(shí)間點(diǎn)

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

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

最后

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108789.html

相關(guān)文章

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

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

    mrli2016 評(píng)論0 收藏0

  • GMTC 2019 參會(huì)回顧

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

    Zack 評(píng)論0 收藏0

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

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

    makeFoxPlay 評(píng)論0 收藏0

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

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

    noONE 評(píng)論0 收藏0

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

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

    王軍 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<