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，就是缩短这个过程的时间，让用户尽快看到有意义的内容，这是提升首屏性能的核心。...

总结：当用户在浏览器地址栏输入 URL 并按下回车，一场跨越网络和计算机内部的复杂协作便拉开了序幕。这个过程是前端知识体系的全面体现。 旅程始于 DNS 查询，浏览器需要将用户输入的域名(如 google.com)解析为服务器的IP 地址。这个过程会依次查询浏览器缓存、系统缓存、路由器缓存，直至向 DNS 服务器发起请求。拿到 IP 地址后，浏览器会通过三次握手与服务器建立一条可靠的TCP 连接。如果网站是 HTTPS 的，还需要在此之上进行一次 TLS 握手，以建立加密信道。连接建立后，浏览器便可以发送 HTTP 请求报文，服务器接收到请求后，进行外理，可能涉及数据库查询，业务逻辑计算等，然后返回一个 HTTP 响应报文，其中包含了状态码(如 200 0K )和响应体(通常是 HTML 内容)。浏览器接收到 HTML 后，渲染引擎开始工作，进入关键渲染路径。它会解析 HTML 构建 DOM，解析 CSS 构建CSSOM。在解析过程中，如果遇到其他资源引用(如 JS、图片、字体文件)，浏览器会为这些资源再次发起 HTTP 请求。这些后续请求可能会复用已建立的 TCP 连接(得益于 HTTP 持久连接或 HTTP/2 的多路复用)，从而提高效率。最终，页面被渲染出来，并在后续的“水合”过程中绑定交互事件。几乎每个环节都存在优化空间:DNS 预解析、TCP 预连接、利用 CDN 加速内容分发、启用 HTTP/2 或 HTTP/3、对资源进行压缩和缓存、优化关键渲染路径等等，这些共同决定了最终的用户体验。 详细分析1. URL 解析

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

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

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

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

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