为什么我的静态React网站在localhost本地环境运行时会频繁冻结？

SVG相关问题 #

• 未优化的SVG源文件：设计工具导出的SVG通常会携带大量冗余的编辑器元数据、未合并路径、隐藏图层、无效注释，部分大体积SVG还会内置嵌入的位图资源，会大幅提升解析渲染耗时，单张SVG体积超过200KB时就可能出现明显的加载阻塞。
• 内联SVG滥用：如果将大量SVG直接作为JSX内联写在React组件中，会提升单组件的JS体积，本地开发环境下未压缩的JS解析执行会直接阻塞主线程，触发页面冻结。
• 复杂SVG的渲染开销：包含大量复杂路径、渐变、滤镜、内置动画的SVG渲染时会占用大量GPU资源，若同时渲染10张以上这类复杂SVG，很容易导致主线程阻塞，出现页面无响应的情况。

React开发环境与渲染逻辑问题 #

• 开发模式额外开销：React本地开发模式默认开启严格模式、热更新、source map等调试特性，若单次渲染组件数量过多、或存在无意义重复渲染问题，开发环境的额外调试开销会被放大，直接触发卡顿。你可以先执行npm run build打包后本地预览生产构建产物，若生产环境运行正常，即可确定是开发模式的调试开销导致的问题。
• 不必要的重复渲染：若组件未做memo优化、状态更新逻辑不合理导致大量组件同时重渲染，主线程会被JS执行完全占满，无法处理图片加载、用户交互等任务，表现为页面冻结、资源加载慢。
• 资源请求队列阻塞：如果所有SVG都设置了预加载，或是同时发起的资源请求数超过浏览器并行请求上限，会导致大量SVG请求排队，出现加载耗时过长的问题。

Bootstrap与样式相关问题 #

• Bootstrap未按需引入：如果全量引入了Bootstrap4的所有CSS和JS组件，而实际仅用到小部分功能，全量样式解析、以及Bootstrap附带的jQuery/Popper.js运行时执行都会占用额外的主线程资源，放大卡顿问题。
• 冗余CSS规则：如果存在大量未使用的CSS规则、或是复杂层级选择器、通配符选择器，浏览器的样式计算开销会大幅上升，尤其是页面元素较多时，会进一步阻塞渲染流程。
• 强制同步布局触发频繁重排：如果你的代码或用到的第三方组件存在频繁读取布局属性后立刻修改样式的逻辑，会触发浏览器反复重排重绘，直接导致页面卡顿冻结。

排查时可以先打开浏览器开发者工具的「性能(Performance)」面板，录制页面加载过程的性能快照，直接定位占用主线程时间最长的任务，即可快速定位根因。

内容的提问来源于stack exchange，提问作者ritik jain