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

資訊專欄INFORMATION COLUMN

基于rrweb錄屏與重放頁面

Crazy_Coder / 2549人閱讀

摘要：后面當(dāng)頁面發(fā)生變化時(shí)，只對(duì)變化的元素進(jìn)行序列化。當(dāng)重放頁面時(shí)，會(huì)將數(shù)據(jù)反序列化并插入到頁面中，而原先增量的變化，如屬性或者文本變化，則根據(jù)找到對(duì)應(yīng)元素修改而子節(jié)點(diǎn)的增加或減少，根據(jù)父元素進(jìn)行變更。

項(xiàng)目背景

在使用ant design文檔的過程中發(fā)現(xiàn)，antd使用了一個(gè)叫做logRocket的錄屏框架，于是立馬將logRocket用在自己的項(xiàng)目當(dāng)中，測(cè)試它的功能。

logRocket網(wǎng)站將采集到的數(shù)據(jù)，按照人員和session進(jìn)行分類，觀看各人員的操作回放，可以發(fā)現(xiàn)系統(tǒng)中某些操作的不便之處，并且可以發(fā)現(xiàn)哪些人員是你的重度用戶。

但是logRocket的數(shù)據(jù)存儲(chǔ)在他們的服務(wù)器，并且從logRocket回放里，能看到系統(tǒng)中的各種重要數(shù)據(jù)。如果數(shù)據(jù)被別有用心之人獲取，后果將很嚴(yán)重。

rrweb

如果我們需要基于一個(gè)開源框架，并將數(shù)據(jù)存在自己的服務(wù)器中，限制人員查看的權(quán)限，這樣就尅消除之前的隱患。

下面我要介紹的就是今天的主角rrweb框架，全稱record and replay the web。它由三個(gè)庫組成：

rrweb-snapshot，將頁面中的dom轉(zhuǎn)化為可序列化的數(shù)據(jù)結(jié)構(gòu)

rrweb，提供錄屏和重放的api

rrweb-player，提供播放的ui頁面，支持快進(jìn)、全屏、拖拽等操作

每次刷新頁面時(shí)，rrweb會(huì)將頁面中的dom元素全部轉(zhuǎn)換成文檔數(shù)據(jù)，并給每個(gè)dom元素分配一個(gè)唯一id。后面當(dāng)頁面發(fā)生變化時(shí)，只對(duì)變化的dom元素進(jìn)行序列化。當(dāng)重放頁面時(shí)，會(huì)將數(shù)據(jù)反序列化并插入到頁面中，而原先增量的dom變化，如屬性或者文本變化，則根據(jù)id找到對(duì)應(yīng)dom元素修改；而子節(jié)點(diǎn)的增加或減少，根據(jù)父元素id進(jìn)行dom變更。

開發(fā)歷程

1.直接使用rrweb記錄每次的序列化錄屏數(shù)據(jù)，首先保存到localStorage中，當(dāng)數(shù)據(jù)量超過閾值或者超過時(shí)間限制，再由sendbeacon發(fā)送數(shù)據(jù)到node，并保存到mongo中。

2.首先遇到的問題是sendbeacon發(fā)送數(shù)據(jù)居然出現(xiàn)了丟失，原因是數(shù)據(jù)超過65536時(shí)，將會(huì)發(fā)送失敗，由于sendbeacon是由后臺(tái)進(jìn)程多帶帶發(fā)送，無法獲取失敗狀態(tài)，所以要進(jìn)行降級(jí)處理，當(dāng)數(shù)據(jù)過大時(shí)，使用fetch請(qǐng)求發(fā)送。

3.由于公司中后臺(tái)系統(tǒng)的用戶分布在世界各地，海外的網(wǎng)絡(luò)延遲較高，需要解決壓縮數(shù)據(jù)大小的問題，這里使用的是lz-string庫。一開始想要在每次存儲(chǔ)在localStorage時(shí)進(jìn)行壓縮，后來發(fā)現(xiàn)壓縮后的數(shù)據(jù)有特殊字符，JSON.parse高頻率出錯(cuò)，后改為在每次發(fā)送數(shù)據(jù)到后端之前壓縮，并在node端進(jìn)行解壓。

4.一開始的數(shù)據(jù)庫選型為時(shí)序數(shù)據(jù)庫influxdb，由于某些不可抗拒原因改為了mongodb。

5.在項(xiàng)目上線后選擇了一個(gè)小項(xiàng)目進(jìn)行測(cè)試，發(fā)現(xiàn)存儲(chǔ)和播放效果良好，代碼如下

import rrweb from "rrweb";

rrweb.record({
  emit(event) {
    storagePush(event);
  },
});

存進(jìn)數(shù)據(jù)庫中的數(shù)據(jù)結(jié)構(gòu)為

{
timestamp: 1563418490795,
name:"小明",
event:...
}

方便按照用戶和時(shí)間范圍進(jìn)行查找數(shù)據(jù)，內(nèi)容如下

6.但是每次都要播放一整天的數(shù)據(jù)，第一播放接口獲取的數(shù)據(jù)量巨大，第二播放時(shí)間漫長，抓不住重點(diǎn)，一旦數(shù)據(jù)有誤導(dǎo)致后續(xù)錄屏都播放不了。

查看rrweb源碼發(fā)現(xiàn)checkoutEveryNms屬性可以按照時(shí)間進(jìn)行session切分，于是代碼變成了這樣

rrweb.record({
  emit(event, checkout) {
    if(checkout)rrwebSessionSet();
    storagePush(event);
  },
  checkoutEveryNms: 1000 * 60 * 10
});

每一次checkoutEveryNms到期時(shí)，emit里的第二個(gè)參數(shù)checkout都會(huì)為true，這樣就可以知道新的session開始，給session分配一個(gè)唯一值，存到數(shù)據(jù)庫中的數(shù)據(jù)結(jié)構(gòu)改為這樣

{
timestamp: 1563418490795,
name:"小明",
session:xxxxxxxxxxx,
event:...
}

有了session概念之后，某個(gè)人某一天的操作就可以按照session進(jìn)行選擇


播放頁面如下

7.小項(xiàng)目測(cè)試完畢后，希望引入一個(gè)大項(xiàng)目進(jìn)行測(cè)試，于是開放了一個(gè)uv上千、pv幾十萬的大項(xiàng)目，采集一天的數(shù)據(jù)后，發(fā)現(xiàn)存儲(chǔ)數(shù)據(jù)正常，而播放頁面已經(jīng)獲取不到數(shù)據(jù)，查看mongo的stats發(fā)現(xiàn)一天存儲(chǔ)量達(dá)到了1500萬條，每一條數(shù)據(jù)基本在幾十KB到幾M之間。

首先對(duì)不同的項(xiàng)目進(jìn)行分表存儲(chǔ)，并將索引設(shè)置為后臺(tái)處理，這個(gè)方案使用后播放頁面變得正常，但人員列表接口還是很慢。

于是在每次存儲(chǔ)mongo時(shí)，存一份人員和日期的數(shù)據(jù)到redis中，目前系統(tǒng)已經(jīng)正常運(yùn)行，所有接口能在1s內(nèi)返回所有數(shù)據(jù)。

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

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

相關(guān)文章

  • 網(wǎng)頁應(yīng)該如何錄屏呢？

    摘要：用于將及其狀態(tài)轉(zhuǎn)化為可序列化的數(shù)據(jù)結(jié)構(gòu)并添加唯一標(biāo)識(shí)則是將記錄的數(shù)據(jù)結(jié)構(gòu)重建為對(duì)應(yīng)的。用于記錄中的所有變更則是將記錄的變更按照對(duì)應(yīng)的時(shí)間一一重放。表示觀察變動(dòng)時(shí)，是否需要記錄變動(dòng)前的屬性值。該方法返回變動(dòng)記錄的數(shù)組。 摘要： 網(wǎng)頁應(yīng)該如何錄屏呢？ 作者：Winty 原文：用戶行為錄幀調(diào)研 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 關(guān)鍵點(diǎn) 首先，每一次會(huì)話都有一個(gè)唯一的s...

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

  • 初識(shí)React

    摘要：初識(shí)依稀記得那年參加線下活動(dòng)，第一次聽說這個(gè)詞語，當(dāng)時(shí)的主講人是郭達(dá)峰，他播放了一個(gè)關(guān)于及的性能對(duì)比視頻。合成事件會(huì)以事件委托的方式綁定到組件最上層，并且在組件卸載的時(shí)候自動(dòng)銷毀綁定的事件。 初識(shí)React 依稀記得2015那年參加線下活動(dòng)，第一次聽說React這個(gè)詞語，當(dāng)時(shí)的主講人是郭達(dá)峰，他播放了一個(gè)關(guān)于ember、angular及react的性能對(duì)比視頻： React.js Co...

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

  • 數(shù)據(jù)浪潮之間的前端工程師

    摘要：數(shù)據(jù)浪潮之間的前端工程師十年來，波瀾壯闊的移動(dòng)互聯(lián)網(wǎng)浪潮促進(jìn)了技術(shù)的迅猛發(fā)展，隨著瀏覽器性能網(wǎng)絡(luò)帶寬等基礎(chǔ)設(shè)施的提升，也能夠承載起包含復(fù)雜交互可視化計(jì)算邏輯需求的富客戶端應(yīng)用。 showImg(https://segmentfault.com/img/remote/1460000016874425); 本文是架構(gòu)師 2018-10 月刊的卷首語，歸納于自筆者的技術(shù)之路系列文章，也是對(duì) ...

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

  • 前端小報(bào) - 201812 月刊

    摘要：也能幫你寫代碼了微軟和團(tuán)隊(duì)一起推出擴(kuò)展，預(yù)覽版可以在插件市場(chǎng)直接查找安裝。微軟宣布將采用內(nèi)核這對(duì)于諸多的前端開發(fā)者而言，無疑是本年底最大的福音具體的計(jì)劃可以參考官網(wǎng)的博客，在不久的將來，基于的瀏覽器將要正式和我們見面啦。 訂閱 / 投稿：https://github.com/txd-team/monthly本期小編：?Hkmu (扶容)?/?x-cold (尹摯) 新聞快報(bào) npm ...

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

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

0條評(píng)論

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