SSR/SSG 的定义 之前在博客上有提过。对比 CSR、SSR、SSG、ISR，它们的优缺点和适用场景分别是什么? 一、为什么要使用 SSR/SSG？（解决传统前端渲染的核心痛点）传统 React/Vue 项目是「...

React 是异步渲染框架，传统的 DOMContentLoaded 无法准确捕获「真实渲染完成时间」，需： 用 PerformanceObserver 监听浏览器原生指标（FP/FCP/LCP）作为基础； 在 React 根组件挂载完成后，补充自...

现代 web 应用的渲染模式已经超越了最初简单的客户端与服务端之分，演化出了多种模式以适应不同场景的需求。 CSR**CSR (客户端渲染)**是 SPA(单页应用)的典型模式。服务器只返回一个空壳 HTML，所有内容的渲染都由客户端的 JavaS...

关键渲染路径(Critical Rendering Path,CRP)是浏览器将 HTML、CSS 和JavaScript 转换为屏幕上像素所经历的一系列步骤。优化 CRP，就是缩短这个过程的时间，让用户尽快看到有意义的内容，这是提升首屏性能的核心。...

简单尝试 进入sentry官网注册账户： https://sentry.io 安装依赖： npm install @sentry/react 在入口文件配置sentry 12345678910111213141516171819import
...

什么是 web 性能？MDN 上的 web 性能定义： Web 性能是网站或应用程序的客观度量和可感知的用户体验。 减少整体加载时间： 减少文件体积、减少 HTTP 请求、使用预加载 使得网站尽快可用：仅加载首屏内容，其他内容根据需要进行懒加载 平滑和交互性：使用 CSS 替代 JS 动画、减少 UI 重绘 感知表现：你的页面可能不难做到更快，但你可以让用户感觉更快。耗时操作要给用户反馈，比如加载动画、进度条、骨架屏等提示信息 性能测定：性能指标、性能测试、性能监控持续优化

一、前端文件流操作下面创建一个 fileUpload 的函数式组件，当用户选择文件时，通过FileReader将文件内容读取为 ArrayButter,然后将ArrayBuffer转换为十六进制字符串，并将结果显示在页面上。

防抖 debounce - 重新开始应用场景：搜索框输入文字后调用对应搜索接口、文本编辑器实时保存 利用闭包，不管触发频率多高，在停止触发 n 秒后才会执行，如果重复触发，会清空之前的定时器，重新计时，直到最后一次 n 秒后执行

前端的虚拟列表（Virtual List）是一种优化大型数据列表性能的技术。当需要在网页或应用程序中展示大量数据时，传统的方式是一次性渲染所有数据，这可能导致页面加载缓慢和性能下降。虚拟列表通过只渲染用户可见区域内的数据项，以及动态地加载和卸载数据项，来解决这个问题 怎么做？ 分页显示：虚拟列表将数据分页显示，只渲染用户当前可见区域内的数据项，而不是一次性渲染所有数据。

图片的懒加载原理： 当图片元素出现在屏幕中时，才给图片的 src 赋值对应的链接，去加载对应的图片