这是一个创建于 2098 天前的主题，其中的信息可能已经有所发展或是发生改变。
我们（ SmartX 前端团队）在去年开源了我们实现的 web 录制与回放库 rrweb，可以将页面中的操作记录为可序列化的日志数据并回放，也在仓库中附上了我们的设计文档。
最近我们在知乎专栏中更新了一篇 博客 ，更详细地介绍了这个项目的演进过程与设计思路，希望能够让对此感兴趣的开发者可以参与其中。
在 rrweb 中我们正在实现的功能包括：
- 对 iframe 和 shadow DOM 的嵌套录制
- 对 CSS in JS 的实现
- 网络请求和异常捕获的插件
除此之外我们也在基于 rrweb 构建一些有意思的应用，例如：
- 一套用户行为收集与分析的 SaaS 化工具
- 面向非开发者的 Demo 录制与编辑工具
当然，rrweb 只是我们工作中实际解决的诸多工程问题的一个缩影，以今年为例，我们的工作内容包括：
- 将一个密集开发了三年的复杂项目渐进式迁移至 typescript，并应用 state chart, UI pattern 等我们认为对于高质量前端开发有极大帮助的理论，甩掉历史包袱，提高代码质量与可维护性。
- 沉淀出一套强类型的 Web 全栈开发技术栈，并且基于强类型定义自动生成大量基础代码，从而把人工开发时间降至最低，快速承接多个内部系统的全栈开发需求。
- 完成一个可以灵活运行在浏览器内或后端服务中的 data layer，让后端情况极为复杂的已有项目也能享受到 GraphQL 对前端开发带来的便利性，并且对于缓存、异步、异常等问题有更加严谨的处理。
如果你也是一个善于运用技术解决工程问题、对高质量的严肃企业应用开发有兴趣的工程师，那么非常欢迎私信和我聊聊～
 |
1
azh7138m 2019-03-31 00:09:21 +08:00
老早之前就 star 过了，回放的实现当时惊艳到我了。
> 密集开发了三年的复杂项目渐进式迁移至 typescript 最近在 ts 上面遇到了一些问题，我们项目 ts 大概有 9w 行，打包非常缓慢（ [email protected] + [email protected] ）,换到 ts-loader 打包时间确实减少很明显（差不多 50%），但是内存吃的非常多（ max_old_space_size 得 3G 才不会爆掉），不知道其他人的项目都是怎么处理这些问题的 :( |
 |
2
guyskk0x0 2019-03-31 00:43:06 +08:00 via Android
很赞，尤其是小霸王游戏机那个例子，请问游戏机是 canvas 或者 d3.js 实现还是普通 html ？效果怎么这么好？
我之前做过类似的 record-replay 功能，实现思路和 op log 一样，发现 canvas/d3.js 做的页面基本没法录，还有一些复杂的事件没法回放(event dispatch API 不支持)，用户还想要回放结束能继续操作页面，实在是做不到啊 |
 |
3
aryu OP  1
@guyskk0x0 游戏机的例子是借用的一个开源的实现，基于 HTML 的。
canvas 目前没有处理，理论上可以通过 monkey patch 一些 canvas 的 API 来实现一个 canvasObserver，不过对 canvas 不太熟悉不确定是否可行。d3 如果是 SVG 的部分录制起来是没问题的，需要在给元素打快照的时候判断是否需要增加 SVG namespace。 比如哪些事件无法回放呢？我们现在的实现思路是视觉上的逻辑回放，所以只需要回放会对视觉产生影响的事件，其它的 JS 逻辑本身也不会回放，但是对 DOM 的改变会被录制下来。比较特殊的是 hover 没法用 JS 模拟，所以这部分我们通过增加一些 CSS 规则和控制样式类的添加 /移除来模拟。 |
|
4
guyskk0x0 2019-03-31 12:45:06 +08:00 via Android
@aryu 我当时的实现是录制时记录各种事件，然后回放时 dispatch 事件，没有用 DOM Observer。最后发现 drag 事件 dispatch 之后并没有触发对应的 listener，还有个页面是监听 mousedown 和 mouseup 组合当做点击，dispatch 时 mousedown 和 mouseup 之间的时间间隔过小就触发不了 listener。用 DOM Observer 应该就不会有问题。
|
 |
5
yao978318542 2019-05-09 15:58:54 +08:00
大佬牛逼 特意来点赞
|
|
6
yao978318542 2019-05-09 16:16:27 +08:00
能导出 MP4 吗？
|
 |
7
xiaowanhashi 2020-07-14 16:18:17 +08:00
@yao978318542 想问下导出 mp4 的问题解决了吗？
|
|
8
yao978318542 2020-07-14 16:34:51 +08:00
@xiaowanhashi #7 项目不用了
|
|
9
xiaowanhashi 2020-07-14 22:15:58 +08:00
@yao978318542 除了 MP4 有遇到其他的问题吗？我这边使用过程中发现回放的时候有些样式丢失了
|
|
10
yao978318542 2020-07-15 08:56:02 +08:00
@xiaowanhashi #9 没，当时就写了一个小 demo 就没用了
|
Select Language