由于最近想歇歇（前一段忙拍摄上云和大版本升级太累了！！），给自己放了个假，鼓捣前端。

(资料图片仅供参考)

产品给了一句没头没尾的需求：体验要和FinalCut一样。

然后，我又想让他看我电脑锁屏：这个需求做不了，I don't want to do this shit!

PS：依旧没碰云剪辑，另外一个业务场景。

然后研究了一下Final的操作为何会觉得如此丝滑。

今天要讲的一个细节：

几乎所有在画面上调整，滑块调整，都是帧内完成，也就是说，鼠标操作的跟随，全部在当前帧完成。

别问我咋知道的。录了操作的录屏，传到分秒帧，用逐帧播放功能一帧一帧看过的。（为了给后面维护的同学留下证据，原生JS写代码，真不是我有那个大病。）

场景：

不方便说，就反正类似我们现在在视频上圈点画标注的功能，需要鼠标拖动时，画面上实时产生变化的场景。

解决方案

由React重构为原生JS，外层在套入React。组件内部操作不使用数据驱动。

整站的技术栈在使用React，所以其实很多组件当时写的时候也是数据驱动。也就是，鼠标按下时改变状态，然后移动时计算位置坐标，直接set到子组件进行位置更新的方式。

这个方式存在的问题就摆在那了。查了一遍之前的代码。很多setXXX useEffect({},[xxx])的玩意儿。假设经过一次数据的监听和计算之后再Set回去，然后Render的时候再改。鼠标点按和位置改变，就差了一帧。鼠标移动较慢的情况下一般1-2个像素，较快的情况下。10几个像素也是有可能的。就会有种不丝滑的感觉了。

div重绘问题也比较显著。数据变了，然后这个div……就重新生成了一个。（这点我也十分惊讶）组件套组件之后。div渲消耗？没帧都产生了新的，GC消耗？？？？……emmm 自己想吧，不多做解释了。

这个地方需要加一个我们自己的场景遇到的问题：

时间码

剪辑过视频的小伙伴可能会注意到这个东西。视频非编工具，大致上是这样的 时：分：秒：帧 音频则是 时：分：秒：毫秒。假设我们把音频的 一个数据记录（44100HZ 就是单声道1秒 44100个数据记录，实际上毫秒都不足以计明白）anyway无论音频还是视频。在我们公司产品里，确实要求时间码需要和视频的帧数强一致。

但往往，视频播放组件，和时间戳显示组件，就根本不是同一个组件。需要数据Prop。好吧。。这次场景。。都不在一个项目里（讲真）。主站引用不同的两个包。。。

这时候，你监听数据变化。很抱歉，不是差一帧就是差两帧。极度恶心。音频更显著。毕竟毫秒是计量单位。

而且。。。video标签和Audio标签的ontimeupdate一秒只触发四次。播放过程中，每一帧和他的时间码对上，这事儿。。就挺恶心的。当然，好在这些差异，其实只在播放中体现。暂停之后。显示器刷新一两帧之后。也就自然而然的对上了。基本上只有了FCP和PR的人才会觉得好像有哪别扭。

处理这个问题必然是根本不set 需要用到的组件需要能直接调用到video/audio标签的currentTime，RAF刷新innerText。（虽然不难，但就是觉得在React项目里，写这玩意，是很有那个大病）

时不时打开性能签，调试单帧内调用栈所用时长。

调试技巧吧算是。首先，我开发用的显示屏刷新率实际在 60HZ。之前发现过这个问题。感觉开发时候很顺畅的东西，拿到120HZ显示屏测。效果就跟屎一样。

这个时候，首先确保写的前端组件自身能不能支持到120HZ的刷新频率。也就是毫秒内完成所有计算和渲染。并不是性能签渲染全绿就可以。和16毫秒刷新的要求差的还挺多的。

然后，你需要保证你的同事写的别的组件不拖你后腿（我开玩笑的！真的），整个页面的计算和渲染都必须控制在毫秒内。当然，性能签录了堆栈的。哪拖后腿搞哪就好，跟正常的前端性能调试没啥区别。

这里需要承认，到写这玩意儿为止，还是没能保证应用场景的整个页面计算+渲染在毫秒以内。确实，和用户的硬件性能关联还挺大的。但是尽可能提高性能还是得花些功夫。（反正至少我开发机，调不到这个数，我也不会上线，你们也看不着，哈哈哈哈哈）

开发环境录屏。

这个完全是测主观感受用的。上述都是理论、数据。实际主观感受，丝滑程度，跟手程度，基本优化完一个地方，就实际操作录一版。逐帧播放。看着哪觉得不对劲逐帧播放看一下。

遗留问题：GC

众所周知，浏览器GC。。。行吧 我不说了，就是会卡一下。有感知的卡一下。目前还没有特别好的解法。不过大致的思路是，尽可能缩短GC时间。毕竟GC过程在清理无用的内存。也是顺着节点往上找有没有引用占得时间长。那么尽可能的，少制造垃圾。。只是解题思路，这玩意，没真优化完，不敢说确保有效。有啥新想法到时候再写吧。

最后：更新完应该不会在现有功能上先用，应该是新功能上用。收一波数据，再改现有的视频圈点批注。

依旧，群号，答案自己查

711929228 

关键词：