1、使用 React.memo() React.memo 是 React 提供的一个高阶组件（Higher Order Component），用于优化函数组件的性能。它可以帮助避免不必要的重新渲染，从

大家好，我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder 因为，行文字数所限，有些概念可能会一带而过亦或者提供对应的学习资料。请大家酌情观看。 前言 说起，前端性能优化，大家

INP 是一个新的核心 Web 指标，将在 2024 年 3 月变成 Stable 状态，替代 FID。

最近在学习前端性能优化方面的知识，看了很多大佬的文章，感觉文章多了比较零散，学习效率不高，所以就整合了一下大佬们写的性能优化的东西，从页面的渲染过程来建立自己的一个前端性能优化的体系。

先上灵魂拷问 在文章之前，先抛一些灵魂拷问： 前端代码从 tsx/jsx 到部署上线被用户访问，中间大致会经历哪些过程？ 上述过程中分别都有哪些考虑、指标和优化点，以满足复杂的业务需求？ 可能大部分同

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

天下武功，唯 (wei) 快(fu) 不(bu) 破(po)。 随着近几年的前端技术的高速发展，越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例，从性能角度，其最重要的指标可能就是首屏渲染所花费的时间了。那么今天，我们要给大家…

缓存，这是一个老生常谈的话题，也常被作为前端面试的一个知识点。 本文，重点在与探讨在实际项目中，如何进行缓存的设置，并给出一个较为合理的方案。 在介绍缓存的时候，我们习惯将缓存分为强缓存和协商缓存两种。两者的主要区别是使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效…

从上图可以看到，白屏过程几乎是不可避免的，因为无论如何你去优化代码体积，Vue系列类库和你需要的其他核心类库文件加起来至少有几百K，在加上这些文件执行的时间（实测至少500ms），可能大多数情况，我们白屏时间至少1200ms-1500ms了。 当然，我们可以把骨架屏所需的css…