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

  • A+
所属分类:Web前端
摘要

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

蒲公英 · 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技术周刊贡献指南

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

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

或者关注凹凸实验室