这破引擎，卡了我整个青春——聊聊216前端渲染的真相

很多人一提到前端渲染引擎，张嘴就是“慢”。尤其是老版本的。

我承认，确实慢。

可是你有没有思考过, 它究竟慢在何处? 是源于它出现故障了, 还是由于它负担起了太多其他引擎都不敢承担的工作任务?

假设你去创作一个组件，它需要对JSX予以解析, 将其转化为虚拟DOM, 接着开展Diff操作, 进而对真实DOM进行更新, 每一个步骤都好似在以生命为代价求得性能。

难道你会说React的Fiber并非是更为先进的吗? 当然不会了。然而, 难道能够说Vue的响应式不是更为直观的样子吗? 也不存在什么问题的呀。

问题根本不在于谁快谁慢。

问题在于——你真的需要那个快吗？

此刻开启随便任一技术社区, 尽是"性能优化"的帖子。仿佛你不在渲染引擎那儿节省那几毫秒, 便不值得被称作前端工程师一样。

我曾目睹一个团队, 在挑选框架之际, 发生了持续三天的争吵。仅仅是由于存在有人认为A引擎相较于B引擎, 在速度方面要快出那么些许。

结果呢？

项目上线历经三个月时间, 其业务逻辑已然混乱得犹如一锅毫无头绪的粥。用户对于你所使用的是何种引擎根本就不予以关心态度, 仅仅只是关心着按钮为何点击之后无法产生相应动作。

你省了那几毫秒，却丢了整个用户体验。

值吗？

我知道这话说出来，可能要挨骂。

但虚拟DOM真的被神化了。

它在本质层面而言, 就是一个对象, 你将其拿去比对差异之处之后, 再进行批量更新, 思路是没有差错的, 然而代价究竟是什么呢? 是你每一回的状态产生变化时, 都得重新去生成一棵完整的虚拟DOM树。

这棵树大一点呢？页面直接卡死给你看。

亲自被我踩过的坑, 有一个表格, 存在几千行数据, 当用户进行筛选操作时, 页面会出现白屏的情况, 并会持续三秒。经过半天时间的调试, 最终发现在此刻虚拟DOM的diff过程耗时太长了。

最终解决方案？不是优化虚拟DOM，而是切成了按需渲染。

所以你看，没有银弹。前端渲染引擎也是。

我发现一个有趣的现象。

写文章的人众多, 一开头便着手深入剖析渲染引擎原理。涵盖Fiber架构, 涉及时间切片, 关乎优先级调度。看似颇为高端厉害, 然而当你询问他实实在在究竟要怎样去解决自身项目之中的性能问题呢?

他沉默了。

情况是这样的，问题就出在这儿。我们错误地将“知道”认定为“理解”, 又把“能说”看成了“会做”。

直到如今, 我都没法宣称自己切实完全掌握了216渲染引擎。不过我清楚, 每当我着手编写代码之际, 它都在为我承揽风险。

它没那么神，也没那么烂。

它只是无数个被你忽略的瞬间里，替你扛起了所有。

有时候，你以为是渲染引擎的问题。

其实是你代码写得太烂了。

譬如存在一个列表, 你为其嵌套了多达十层的 v-if, 而在这种情况下渲染引擎若不卡顿那才叫奇怪。再比如说有一个弹窗, 你一次性将所有子组件都进行加载, 如此这般它要是不崩溃那又会是谁崩溃。

先问问自己，你的代码够不够干净。

然后再去骂引擎。

这么多年，前端渲染引擎一直在进化。

从最初的直接对DOM进行操作, 到后来的虚拟DOM层面, 继而到如今的编译时实施优化。每一个步骤都是在历经坎坷的情况下逐步推进的。

Vue 3有的静态标记, React 18存在并发模式，则干脆是把框架给干掉了, 并且直接编译成为原生DOM。

换代的每一款引擎, 始终都在尝试着去应答同一个问题, 即: 我究竟应该通过怎样的方式去促使使用者产生速度上的快的感觉呢?

答案一直在变。但初心没变过。

说到这儿，我有点激动了。

每日里, 好多人嘴上不停念叨着用户体验, 然而手上所编写的代码, 却处处皆是问题。有一个页面, 加载之时会有几十个组件, 还有一个请求, 返回的数据多达上万条, 另外有一个动画, 其运行竟经历了十层嵌套。

然后怪渲染引擎卡。

你有良心吗？

这引擎已然是极为尽力了, 于你每一次的点击之时, 于你每一回的滚动之际, 于你每一轮的输入之后, 它皆这般暗地里做下了数量众多的事情。

你看到了吗？

我知道，大家都在卷。

卷入框架之中, 卷入性能方面, 卷入新的技术领域。然而你可曾感觉到, 我们卷入的程度变得越发远离原本状态了?

仅仅只是进行一个页面的编写, 却非要采用微前端的方式。仅仅只是存在一个表单, 却非要去搞复杂的状态管理。

渲染引擎不是你炫技的工具。它是个工具，仅此而已。

好好用它，别滥用它。

我不是什么技术大牛。我只是个写了七年代码的普通人。

我踩过坑，骂过引擎，最后发现，问题出在自己身上。

前端渲染引擎没那么复杂。它就是个帮你把代码变成页面的仆人。

你善待它，它就善待你。

写这篇文章，不是为了炫耀知识。

只是想告诉那些跟我一样迷茫的人：别慌，慢慢来。

引擎在那里，不会跑。

但你得学会怎么骑。

此文是经由泛微e启营事业群共同构建而成的, 要是遇见彼此相似的情形时, 请跟泛微e启营的创始人海总取得联系来加以处理。