不会数论

在使用vite时，我们通常最直观的感受就是-“太快了！”。打包构建速度简直就是飞一般的感觉。 但是你有没有想过，为什么 vite 可以做到启动速度这么快呢？他对比传统的 webpack 打包工具来说，

我来介绍一个非常神奇的前端功能：轻易地将文本、视频，还是炫酷的动态内容，统统都能“飞”起来。任何 HTML 内容都能实现画中画模式，

开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样： 对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用 position: sticky …

> 于水增 ## 故事背景 事情起源于之前做的海报编辑器，自己调试时无意中发现字体渲染好慢，第一反应就是网怎么变慢了，断网了？仔细一看才发现，淦！这几个字体资源咋这么大，难怪网速变慢了呢😁😁。

其实刚看到这个题目的时候，我的内心是拒绝的，但是本着对科学的敬畏精神，我开始了 CommonJs 的探索之路。 来来来奉上我这几天的心血，拿走不客气。如有错误欢迎指正，共同进步。 提到CommonJs 绕不开的就是模块化。 很久以前，开发网页要通过命名空间的方式来组织代码，例如…

上篇文章我们讲解了beginWork的工作流程，而workLoop中另外个重要的函数就是completeWork，此篇文章会着重剖析completeWork阶段的工作内容

前面两篇文章介绍了fiber架构和workLoop如何调度。但是缺了一块非常重要的地方，那就是开发者写的代码是如何对接到上面流程的？ 在日常开发中，我们只关心了如何写组件，但是写完的组件是如何被渲染？

react16之后重构了ReactElement构成的树形结构，而beginWork、completeWork的核心目的就是做这样的一件事情，把ReactElement的结构转成fiber结构

workLoop是react中一个非常重要的执行函数，今天的这篇文章我们需要完成下面几个小目标： 理解什么是workLoop? 熟悉workLoop的流程是什么？ 掌握workLoop源码是如何实现的