1.「ビデオは」本当に、ビデオではなく、また写真で連続再生によって達成されます
まず、このビデオを見てください。
上でのマウスクリックのビデオ、「シーンが再現するには、」すぐに「ビデオ」を再生されます。これは、操作が障害物に遭遇する前にいくつかの時間のために、ユーザーの完全な食事を記録します。この「ビデオ」のビデオは、それがレコードに映像を記録することによって、誤解されますが、実際にはほとんど同じに見えます。実際には、ビデオではありません。(、DOMの変更、ユーザーの行動を)再生シーケンスは、再び操作を実行する、一連の操作を記録することにより、当社のクライアントは、ビデオと同じように見えます。もちろん、それはここでは多くの複雑な詳細、不便リピートを含んでいます。最近、SMARTX会社のオープンソースrrwebはまた、同様の手法を使用しています。あなたが興味を持っている場合は、詳細のために行くことができます。
これにはいくつかの利点があります。
プライバシーカスタマイズは:設定することにより、
_fun-hide
ラベルを、プラグインは自動的にデータのプライバシーを消去されます。それを行うのは難しいビデオは、ある場合。「ビデオ」非常に小さい:あなたがビデオを録画している場合は、iPhoneのX 20Sを使用して録画が6メガバイト程度で、10%の圧縮率を想定し、その後、620キロバイト依然として存在しています。ほとんどのWebページの場合、記録されたデータの20代の画面は、KBの十な限り小さくすることができます。もちろん、データが大きすぎるまれなケースを排除していない、私たちは記録を放棄します。
2.だけでなく、Chromeをサポートしています
ほとんど全ての高ブラウザ(IE(> = 11)、クロム(> = 26)、サファリ(> = 7)は、Firefox(> = 14))内蔵ブラウザ(WebViewの)マイクロチャネルを含む、支持されています。これは、情報表示装置Safariのように、次の記録例です。「シーンを再現」ラベルがクリック可能な画面が記録されたデータを再生することができる証明しています。
また、開いているページ内のマイクロチャネル/釘や他のアプリケーションが記録されます。
3.完全にそれがユーザーには影響しません、パフォーマンスを最適化
それは本当にビデオを録画されていないので、それはあまりにも多くのリソースを占有しません。また、コアアルゴリズム記録画面プラグが完全に最小限に、CPUとメモリ使用量を最適化されて。Webページ内のDOMノードの特定の番号を挿入し、統計情報はアクセスしないとアクセス記録画面プラグインのかかる状況:アルゴリズムの性能は、本質的に関連するノードの変更の画面やページ番号を記録している、私たちは、このようなテストを行っています。
插入的节点数量 | 不接入录屏(ms) | 平均时间(ms) | 接入录屏(ms) | 平均时间(ms) |
---|---|---|---|---|
10 | 110.0, 152.4, 121.9, 147.4, 133.5, 105.8, 153.3 | 132.04 | 187.1, 131.4, 121.4, 160.3, 139.9, 123.2, 143.3 | 143.8 |
50 | 114.7, 92.7,107.2, 114.3, 112.1, 124.5, 119.3 | 112.11 | 126.4, 128.8, 137.5, 143.5, 133.6, 135.1, 133.3 | 134.02 |
100 | 125.5, 118.9, 112.5, 115.4, 129.5, 107.9, 113.8 | 117.64 | 152.8, 136.0, 144.4, 146.9, 131.0, 146.0, 148.6 | 143.67 |
200 | 164.0, 121.6, 167.7, 122.1, 119.7, 139.4,129.6 | 137.72 | 196.0, 190.7, 201.8, 177.5, 194.9,175.5, 201.0 | 191.06 |
500 | 141.5, 197.5, 173.9, 193.7, 193.1, 170.6, 192.3 | 180.37 | 229.2, 274.8, 324.8, 348.0, 368.6, 324.3, 324.1 | 313.4 |
1000 | 345.7, 278.0,316.1, 258.1, 285.7, 284.0,331,2 | 299.83 | 468.9, 486.9, 453.0,376.4, 361.8, 462.7, 462.3 | 438.86 |
一般情况下,网页的变动导致DOM的变化节点不会超过100个。在小于100个节点的情况下,接入录屏插件额外增加的时间小于30毫秒。因此,在大多数情况下,录屏插件对性能的影响是可以忽略不计的。
录屏功能介绍
Fundebug提供专业的异常监控服务,当线上应用出现 BUG 的时候,我们可以第一时间报警,帮助开发者及时发现 BUG,提高 Debug 效率。在网页端,我们通过原创的录屏技术,可以 100%还原 BUG 出现之前用户的操作流程,帮助开发者快速复现出错场景。完整演示视频如下:
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用!
版权声明
转载时请注明作者 Fundebug以及本文地址:
https://blog.fundebug.com/2019/08/02/a-few-tips-about-revideo/