蒲公英 · JELLY技术周刊 Vol.20: Vue3 极致优化——分析 Vue3 Compiler 告诉你为什么这么快

蒲公英 · JELLY技术周刊 Vol.20

性能优化是一条无尽的路，我们总是可以找到各种途径去提升体验，不论是响应时间还是按需加载，亦或是根据框架或者组件有针对性的优化都会是不错的方法。如果你在使用 Vue3，那么本期内容会告诉你如何完成高性能的渲染函数；React 的开发者也可以在本期中找到 TS 和 React 的最佳实践；同样本期中你也会找到新一代 Web 性能体验的指标，学无止境，术有乾坤，让我们开启本期的内容吧。

登高远眺

天高地迥，觉宇宙之无穷

前端框架

TypeScript + React 的最佳实践

使用 TypeScript 编写 React 应用的类型 Cheatsheets，也可以看做是 TypeScript + React 最佳实践。它介绍了我们在使用 React 各种特性时最佳的 TypeScript 类型写法，帮助你解答各种类型上的问题。看完这篇，妈妈再也不用担心我不会写 tsx 了。

Vue3 Compiler 优化细节，如何手写高性能渲染函数

Vue3 通过编译时和运行时相配合，让 diff 性能进一步得到提升。文章详细介绍了 Compiler 会对模板分析出哪些关键信息，运行时又是怎样利用这些信息对 diff 进行优化的。假如我们不编写 template 而是直接编写渲染函数，作者也在文末介绍了我们怎么样编写渲染函数能够让 diff 进入优化模式。文章整体内容非常硬核，需要花费一定时间的进行阅读，希望读者能坚持到到最后。这里姑且引用文章中的最后一句："Don't stop learning..."，共勉。

基础技术

Core Web Vitals--聚焦新一代Web性能体验指标

对于如何衡量用户体验，Google提供了多个工具（Lighthouse等等），在Chrome83中新增了Core Web Vitals指标。主要关注用户体验的3个方面：加载、交互性和视觉稳定性。对应的指标为：LCP、FID、CLS。降低使用者门槛。

美国人如果把根域名服务器封了，中国将会从网络上消失？

自从美国宣布“清洁网络”行动后，很多懂点网络的人，第一反应是，美国人会下手根域名服务器吗？这里先给出简要回答：不排除这种可能性，但并不是没有办法。一句话原因：虽然根不在我们手里，但我们有镜像。

图形编程

“亲亲抱抱举高高”？这款游戏满足你对VR的所有期待

虚拟现实的概念在近几年被提及的越来越频繁，但对于大众来说似乎还是一款“科幻”产品。由 Valve 公司出品的《半衰期》VR 游戏，结合 VR 设备操作上更为多样的操控设备，进行了不同于以往鼠标键盘操控游戏的交互尝试，使得游戏中的角色动作更为接近真实世界，也产生了更多的可能性。

人工智能

3D特效师可以下班了

还记得“抢钱大楼” SM 娱乐公司门口的电子屏海浪吗？一看就很贵。但 DeepMind 和斯坦福等一众科学家研究出了一款图网络模拟器——GNS 框架，转变思路，由当前市场上普遍使用的通过物理规律进行 CG 计算，转向机器学习以实现物理模拟器的方案。这将大大降低 CG 特效的门槛，可能将深远地影响到这一市场。

沧海拾遗

沧海拾遗，积跬步以至千里

京喜小程序跨端开发实战

京喜小程序的在跨端开发上的开发与优化实战文，详细讲述了 19 年双十一期间，京喜改版中面临的一系列问题，以及相关的思考。其中对于 Web、小程序、RN 三端详细提出了很多思路和实践集锦，很值得借鉴。

小程序体验评分满分优化

同样是京喜小程序，历经多次改版和优化后，在 Audits 评分中已经获得了满分。文中提到了多种优化的细节和方法，尝试了很多优化的可能，相信这些思路能够在其他的项目中，也能够得到应用，并大幅提升性能和用户的体验。

「蒲公英」期刊，每周更新，我们专注于挖掘「基础技术、工程化、跨端框架技术、图形编程、服务端开发、桌面开发、人工智能、设计哲学、前端框架」等多个大方向的业界热点，并加以专业的解读；不仅如此，我们还会推介精选凹凸技术文章，向大家呈现团队内的研究技术方向。

抬头仰望，蒲公英的种子会生根发芽，如夏花绚烂；格物致知，我们登高远眺、沧海拾遗，以求积硅步而至千里。

蒲公英 · JELLY技术周刊贡献指南

欢迎关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。