前端 - 冷加载和热加载有什么区别？
1. 冷加载（Cold Loading）
- 比喻：你第一次去一家餐厅，服务员需要从头给你介绍菜单、后厨要现做所有菜品。
- 定义：
每次刷新或启动应用时，所有资源（代码、样式、数据）都从服务器重新加载，页面完全从头开始渲染。 - 场景：
- 第一次打开网站
- 手动刷新页面（尤其是清空缓存后）
- 特点：
- 速度慢：需要加载全部资源
- 状态丢失：比如表单填写的内容、滚动位置会重置
2. 热加载（Hot Loading）
- 比喻：你在餐厅吃饭时，觉得汤不够咸，服务员直接端来一碟盐，你无需起身离开座位，其他菜也不用重做。
- 定义：
在应用运行过程中，只更新修改的部分（如某个代码文件），页面局部刷新，保持当前状态。 - 场景：
- 开发时修改代码，页面自动更新（如用 Webpack 的热模块替换 HMR）
- 部分单页应用（SPA）的路由切换
- 特点：
- 速度快：仅更新变动部分
- 保留状态：比如输入框内容、滚动位置不变
对比总结
| 特点 | 冷加载 | 热加载 |
|---|---|---|
| 加载范围 | 全量加载（所有资源） | 增量加载（仅修改部分） |
| 速度 | 慢（重新请求资源） | 快（局部更新） |
| 状态保留 | 重置（如登录状态、输入内容） | 保留（开发时体验更好） |
| 常见场景 | 生产环境首次访问、手动刷新 | 开发环境调试、模块热替换 |
举个实际例子
假设你在开发一个网页，修改了按钮的样式：
- 冷加载：手动刷新页面 → 整个页面重新加载 → 按钮样式更新，但之前输入的文本没了。
- 热加载：保存代码 → 仅更新按钮的 CSS → 页面其他部分（如输入框内容）保持不变。
开发中的热加载工具
- Webpack HMR：自动局部更新模块
- React Fast Refresh：保留组件状态热更新
- Vite 热更新：基于浏览器原生 ES 模块的快速更新
一句话总结：
- 冷加载像“重启电脑”，一切从头开始；
- 热加载像“换灯泡”，哪里坏了修哪里，不影响其他部分。