大家好，我是凯森。昨天在开源圈子里发生了一个小插曲。原因是一位用户表示，新的React文档在文档结构、美学和性能方面都达到了非常高的标准。在测试了新的Vue文档和ReactBeta文档后，尤雨熙表示：在性能方面，新的Vue文档更有优势。Dan表示：目前文档还在Beta版，现在还有更重要的工作要做，会在正式版上线前优化性能。话虽这么说，Dan应该连夜优化了性能：本篇文章，让我们看看Dan做了哪些优化。欢迎加入人类优质前端框架群，利用优化后的lightHouse跑分：作为对比，Vue文档的跑分：两者10个TTI跑分对比：这里TTI（TimetoInteractive，可以是交互时间），衡量的是页面变成完全交互所需要的时间，这里的完全交互是指：页面显示有用的信息（用FCP衡量，FCP指的是FirstContentfulPaint），大部分元素在可见页面完成事件绑定，交互响应延迟50ms以内优化措施优化主要有两个思路：编译时：减少打包体积运行时：延迟加载首屏不需要的代码分成不同的文件，可以减少首屏bundle的大小：再举个例子：这部分优化将bundle的大小减少了一半左右；其次，当前的Next.js（文档使用的框架）默认不为现代浏览器启用编译。这意味着将在bundle中引入更多的polyfill，并且将有更多的语法转换和辅助函数。Dan通过配置启用此功能：运行时优化。运行时优化的主要方式是：延迟加载非必要资源。新文档中有很多依赖CodeMirrorlinter的codesandbox（在线示例），但这不是折叠所必需的。所以Dan懒加载了这部分资源：另外仔细观察会发现TotalBlockingTime指标下降了很多：TBT（TotalBlockingTime，即总阻塞时间）衡量页面FirstContentfulPaintFirstContentPainting(FCP)交互时间和交互时间(TTI)之间的总时间。.一般来说，如果JS执行时间过长，就会影响到这个指标。我们知道，页面加载完成后，前端框架会有首屏渲染的初始化过程。即使是服务端渲染，也会有一个Hydrate（注水）的过程。React18的SelectiveHydration为解决这个问题提供了一个很好的方法。如果你的React18应用是SSR，那么被
