1. 浏览器渲染基础 1.1 渲染帧 帧(frame):动画过程中，每一幅静止的画面叫做帧 帧率(frame per second):每秒连续播放的静止画面的数量 帧时长(frame running

我们知道，在浏览器中，页面是一帧一帧绘制出来的，渲染的帧率与设备的刷新率保持一致。大多数设备的屏幕刷新率为1s 60次，当每秒内绘制的帧数（FPS）超过60时，页面渲染是流畅的；而当FP

介绍浏览器渲染一帧的过程，在渲染一帧过程中会执行渲染的一系列操作，还有异步任务和两个很关键的回调：requestAnimationFrame和requestIdelCallback

1. requestAnimationFrame 为了看起来比较方便，我们在火焰图上大致的标记一下，可以明显的看到，在经过了点击事件之后，发生了一次requestCallbackCB -> 连着5次 setTimeoutCB -> 一次 requestCallbackCB ->…

想让网页变得丝滑，首先，我们需要一个标准来判断什么样的网页是丝滑的；其次，我们要准确的测量出网页的性能数据；最后，使用有效的方法让网页变得丝滑。 本篇文章将针对这三个方面进行详细的介绍。 1. RAIL 到底怎样的网页是丝滑的？我们需要一个标准来辅助判断我们的网页是否丝滑。 C…

已经好久没有写博客了。本文不说 Vue3.0 了，相信已经有很多文章在说它了。而前一段时间尤大开源的 Vite 则是一个更加吸引我的东西，它的总体思路是很不错的，早期源码的学习成本也比较低，于是就趁着假期学习一番。 本文撰写于 Vite-0.9.1 版本。 一个是 Vite 主…

最近连续遇到几次浏览器缓存导致的问题，在此总结一下问题的场景、原因以及如何解决，供大家参考。我们遇到的问题大体上有以下两个场景。

在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画…

2022 年了，requestIdleCallback 还不会吗？赶紧学一下，买不了吃亏，买不了上当