性能优化性能优化方案本文系统介绍了前端性能优化的完整链路，从请求与网络、资源加载、页面渲染、JS执行、React框架运行、交互体验到监控治理。关键指标涵盖TTFB、FCP、LCP、INP、CLS，强调先定位瓶颈再针对性优化，并给出CDN缓存、代码拆分、LCP治理、CLS稳定、长任务拆分、React重渲染控制等具体方案，最后以Sentry监控形成闭环。2026/7/2170
性能优化构建工具模块打包VIte&Webpack本文深入对比 Webpack 与 Vite 的核心差异：Webpack 开发环境构建完整 Bundle，Vite 利用浏览器原生 ESM 按需转换，实现快速启动。详细解析了模块图构建、Tree Shaking、代码分割、HMR 热更新原理及 Loader/Plugin 机制。同时给出了基于实际项目的构建优化方法与性能改进数据，帮助读者理解并提升构建效率。2026/7/1590
浏览器浏览器的进程和线程现代浏览器采用多进程架构（包括Browser、Renderer、Network、GPU等进程），以提升稳定性、安全性和性能。渲染进程内部有主线程、合成线程等，JS单线程即指主线程。站点隔离（Site Isolation）机制将不同站点分配到不同渲染进程，防止数据泄露。理解进程与线程的区别，有助于优化页面性能。2026/7/1120
SEO本文系统讲解 Next.js SEO，提出可发现、可抓取、可索引、可理解、可体验五件事模型。详解搜索引擎工作流与 GSC 使用，覆盖 sitemap、robots、noindex、canonical、metadata、JSON-LD 等核心手段，以及 SSG/ISR/SSR/CSR 对 SEO 的影响。包含常见页面策略和问题排查方法，适合面试准备与实践参考。SEO2026/6/2530
Next.js渲染方式本文深入解析Next.js渲染方式，提出以“代码执行位置、页面生成时机、缓存位置、响应发送方式、交互接入”五问总模型。核心内容包括：SSG/SSR/ISR/CSR对比，RSC与Streaming/PPR的组件边界与传输边界，缓存层级与Cache Components新模型，以及项目选型落点与面试常见误区。强调App Router是混合渲染，重在组件树内切分静态、缓存、动态、流式和客户端交互边界。Next.js2026/6/2240
React源码React源码篇五：Scheduler本文深入分析React Scheduler调度器，解释其解决主线程响应性的根本原因。文章清晰区分Root Scheduler（管理root、lane和同步/并发分流）与底层scheduler package（任务队列、时间切片和continuation），并完整追踪从setState到浏览器任务队列的链路。核心结论：SyncLane在microtask末尾同步flush保证紧急交互即时反馈，TransitionLane进入并发render可中断让步；render阶段为内存计算可中断，commit阶段涉及真实DOM修改必须原子完成。2026/6/1050
React源码React源码篇三：React Update QueueReact的UpdateQueue将setState的触发与状态计算解耦。dispatch阶段创建带优先级的update并入队，render阶段根据renderLanes合并pendingQueue到baseQueue，按顺序计算新state，跳过不命中的update并保留至baseQueue以便后续重放。eagerState优化可在dispatch阶段提前计算，若无变化则避免不必要的调度。核心在于处理并发优先级下的更新排序与恢复。2026/6/910
React源码React源码篇二：React Render/commit本文深入解析React的render和commit阶段，涵盖从setState触发更新到Fiber树构建、diff算法、flags收集以及commit阶段DOM操作的全流程。重点包括双缓冲机制、beginWork与completeWork的分工、数组diff的两轮策略及key的重要性，强调render可中断而commit需同步完成。2026/6/350
React源码React源码篇一：React FiberReact Fiber是React为可中断渲染设计的内部工作单元，既表示组件节点又承载状态、副作用和优先级。从JSX到页面更新：JSX编译为ReactElement，经HostRoot update入队，在render阶段reconcile成Fiber树（workInProgress），commit阶段通过root.current切换实现双缓冲，避免直接修改已提交的current树。current与workInProgress通过alternate复用，支持并发渲染和稳定提交。2026/6/160
.png&w=3840&q=75)
.png&w=3840&q=75)
