不管是面试提问，还是实际工作中，前端性能都是一个绕不过去的问题。性能优化的指标，渲染优化的原理，代码优化，等等多方面的角度，系统的整理了前端性能优化的笔记。

炎炎夏日失业潮下饥寒交迫的前端还能不能雄起，自欺欺人的产品优先战略下前端投入了多少money？前端打铁还需自身硬又有有哪些优化的方法和小技巧？

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末。 1. …

resize、scroll 这些事件是何时去派发的。 这些问题并不是刻意想刁难你，如果你不知道这些，那你可能并不能在遇到一个动画需求的时候合理的选择 requestAnimationFrame，你可能在做一些需求的时候想到了 requestIdleCallback，但是你不知道…

从提出问题开始！本文将从源码角度深入分析Vue中的nextTick、组件的异步更新的实现，带你重新认识nextTick。

本人系一个惯用Vue的菜鸡，恰巧周末和大佬扯蛋，峰回路转谈到了fiber，被大佬疯狂鄙视... 于是本菜开始了 React Fiber 相关的读源码过程。为什么看 Fiber？因为 Vue 没有，Vue3 也没有，但是却被吹的很神奇。 旧版本React同步更新：当React决定…

上周我在FDConf的分享《让你的网页更丝滑》中提到了“时间切片”，由于时间关系当时并没有对时间切片展开更细致的讨论。所以回来后就想着补一篇文章针对“时间切片”展开详细的讨论。 从用户的输入，再到显示器在视觉上给用户的输出，这一过程如果超过100ms，那么用户会察觉到网页的卡顿…

在Web应用程序中，丢帧（janky）更新通常是由于同步的高CPU时间和原生DOM的更新造成的。 时间切片是在CPU工作期间保持应用响应的一种尝试，但它只影响CPU工作。DOM的刷新必须是同步的，以确保最终DOM状态的一致性。 CPU工作时间在16ms以内，但是需要操作大量的原…

首先，在开始介绍时间切片前，很有必要先把浏览器的渲染流程梳理一下，这里面涉及的知识有event loop、渲染帧等知识，下面会简单地介绍。 事件循环，这个严格来说其实并不是js语言本身的特性，而是在浏览器这个宿主环境下提供的机制，（因为在node环境下又是另一种事件循环机制了）…