ReturnToYouth

如果你正在负责自身项目或团队的性能优化工作，想知道应该如何快速推进并达成既定目标；或者作为前端新人，想了解在实际工作中应该怎样理论结合实际将前端页面加载性能做到极致。本文将从下图带你教你完成从0到1完

在绘制图形会阻塞主线程，如果主线程中还有其他的任务也会表现出卡顿的效果，Canvas 的渲染性能越来越差。这节我们将通过 OffscreenCanvas + Worker进一步优化

微前端的设计要素：路由隔离、js隔离、css隔离、预加载机制、通信机制、多微应用激活，如果不了解微前端请自行搜索学习 一个完善的微前端框架需要考虑： 子应用的激活和卸载能力 页面从主应用切换到子应用，

Flexbox布局的概念 Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间

tree shaking 是 webpack 里的术语，用于移除 JS 上下文中未引用过的代码，以减小代码体积，间接减少代码在网络请求过程中的耗时。我把这个称为代码清洁工。需要注意的是 tree shaking 依赖于 ES6 的模块语法 —— import和export。 经…

说到webpack的性能优化，其实就是从时间层面与体积层面入手。对于时间层面主要就是优化webpack的构建速度（缩短构建时间）。对于体积层面主要就是优化webpack的构建结果（缩小构建结果）

本文会从函数patchChildren函数讲起，先让大家理解该函数的核心功能。接着分析diff算法的具体实现

本文会从一段模版代码开始，先后讲解patchflag、Block、Block Tree实现原理，帮助大家理解编译优化

项目入口 main.js App.vue 编译后效果 看看App.vue使用不同API风格被编译后的结果 可以看出，App.vue使用组合式 API (Composition API)编写风格，被编译