澄清Fundebug录屏技术的几点误会

àì夳堔傛蜴生んèń 2021-11-10 05:32 213阅读 0赞

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vZnVucmV2ZWRpby1sb2dvLmpwZw][]

### 1. "视频"并非真的视频、也不是通过连续播放大量截图来实现 ###

首先请大家观看这个视频： [https://static.fundebug.cn/eleme\_full.mp4][https_static.fundebug.cn_eleme_full.mp4]

视频中，当鼠标点击“场景重现”，会立即播放一段“视频”。它完整的记录了用户点餐时候遇到障碍之前的一段操作。这段“视频”看起来和真的视频几乎一样，所以会被误以为是通过录制视频来记录的。实际上，它并非视频。我们在客户端通过记录操作序列(用户行为、DOM变化)，在重放的时候将操作序列再执行一遍，看起来就像视频一样了。当然，涉及到很多复杂的细节，在这里不便赘述。近期，SMARTX公司开源的[rrweb][]也使用了类似的技术。如果感兴趣，可以去了解详细内容。

这样做有几大优点：

*  可自定义的隐私保护：通过配置`_fun-hide`标签，插件会自动将隐私数据抹去。如果是视频，很难做到。
 *  "视频”的体积很小：如果是录制视频，使用iPhone X录制一个20s的视频大概是6MB，假设压缩比例为10%，那么依然有620KB。针对大多数的网页，20s的录屏数据可以小至几十KB。当然不排除极个别的情况数据量过大，我们会主动放弃录制。

### 2. 不仅只支持Chrome ###

几乎所有高版本的浏览器(IE(>=11)，Chrome(>=26)，Safari(>=7), Firefox(>=14))都是支持的，包括微信内置浏览器(Webview)。比如下面这一条记录，设备信息显示为Safari。“场景重现”的标签是可点击的，证明录屏有数据，可以播放。

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wMi1zYWZhcmktcmVkby5wbmc][]

另外，微信/钉钉等应用内打开的网页也是可以录制的:

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wMi13ZWJ2aXctcmVkby5wbmc][]

### 3. 性能充分优化，不会影响用户使用 ###

因为不是真的录制视频，所以并不会占用太多资源。另外，录屏插件的核心算法经过充分的优化，将CPU和内存使用率降到最低。录屏算法的性能本质上和页面发生变化的节点数有关，我们做过这样一个测试：在网页中插入一定数量的DOM节点，并统计接入和不接入录屏插件耗时情况。

<table> 
 <thead> 
  <tr> 
   <th>插入的节点数量</th> 
   <th align="center">不接入录屏(ms)</th> 
   <th>平均时间(ms)</th> 
   <th>接入录屏(ms)</th> 
   <th>平均时间(ms)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>10</td> 
   <td align="center">110.0, 152.4, 121.9, 147.4, 133.5, 105.8, 153.3</td> 
   <td>132.04</td> 
   <td>187.1, 131.4, 121.4, 160.3, 139.9, 123.2, 143.3</td> 
   <td>143.8</td> 
  </tr> 
  <tr> 
   <td>50</td> 
   <td align="center">114.7, 92.7,107.2, 114.3, 112.1, 124.5, 119.3</td> 
   <td>112.11</td> 
   <td>126.4, 128.8, 137.5, 143.5, 133.6, 135.1, 133.3</td> 
   <td>134.02</td> 
  </tr> 
  <tr> 
   <td>100</td> 
   <td align="center">125.5, 118.9, 112.5, 115.4, 129.5, 107.9, 113.8</td> 
   <td>117.64</td> 
   <td>152.8, 136.0, 144.4, 146.9, 131.0, 146.0, 148.6</td> 
   <td>143.67</td> 
  </tr> 
  <tr> 
   <td>200</td> 
   <td align="center">164.0, 121.6, 167.7, 122.1, 119.7, 139.4,129.6</td> 
   <td>137.72</td> 
   <td>196.0, 190.7, 201.8, 177.5, 194.9,175.5, 201.0</td> 
   <td>191.06</td> 
  </tr> 
  <tr> 
   <td>500</td> 
   <td align="center">141.5, 197.5, 173.9, 193.7, 193.1, 170.6, 192.3</td> 
   <td>180.37</td> 
   <td>229.2, 274.8, 324.8, 348.0, 368.6, 324.3, 324.1</td> 
   <td>313.4</td> 
  </tr> 
  <tr> 
   <td>1000</td> 
   <td align="center">345.7, 278.0,316.1, 258.1, 285.7, 284.0,331,2</td> 
   <td>299.83</td> 
   <td>468.9, 486.9, 453.0,376.4, 361.8, 462.7, 462.3</td> 
   <td>438.86</td> 
  </tr> 
 </tbody> 
</table>

一般情况下，网页的变动导致DOM的变化节点不会超过100个。在小于100个节点的情况下，接入录屏插件额外增加的时间小于30毫秒。因此，在大多数情况下，录屏插件对性能的影响是可以忽略不计的。

### 录屏功能介绍 ###

[Fundebug][]提供专业的异常监控服务，当线上应用出现 BUG 的时候，我们可以第一时间报警，帮助开发者及时发现 BUG，提高 Debug 效率。在网页端，我们通过原创的录屏技术，可以 100%还原 BUG 出现之前用户的操作流程，帮助开发者快速复现出错场景。完整演示视频如下：[https://static.fundebug.cn/product.mp4][https_static.fundebug.cn_product.mp4]

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家[免费试用][Link 1]！

[![img][]][img 1]

转载时请注明作者 **Fundebug**以及本文地址：  
[https://blog.fundebug.com/2019/08/02/a-few-tips-about-revideo/][https_blog.fundebug.com_2019_08_02_a-few-tips-about-revideo]

[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vZnVucmV2ZWRpby1sb2dvLmpwZw]: /images/20211109/7704498739934d6fb5ab1f08fd33c66b.png
[https_static.fundebug.cn_eleme_full.mp4]: https://static.fundebug.cn/eleme_full.mp4
[rrweb]: https://www.rrweb.io/
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wMi1zYWZhcmktcmVkby5wbmc]: /images/20211109/d149bdd18a39476ba865c0172ba21712.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wMi13ZWJ2aXctcmVkby5wbmc]: /images/20211109/64b7c278d9ac40b1a14cddbec8d58839.png
[Fundebug]: https://www.fundebug.com/
[https_static.fundebug.cn_product.mp4]: https://static.fundebug.cn/product.mp4
[Link 1]: https://www.fundebug.com/team/create
[img]: /images/20211109/6796faef5fbb41b0a72754623f72e361.png
[img 1]: https://static.fundebug.cn/wechat_slogan.png
[https_blog.fundebug.com_2019_08_02_a-few-tips-about-revideo]: https://blog.fundebug.com/2019/08/02/a-few-tips-about-revideo/