HTML本地打开卡顿主因是file://协议限制及资源加载问题：禁用跨源请求、无压缩缓存、路径错误致404、同步脚本阻塞渲染、未设图片宽高引发重排、Base64内联增大体积；应通过Network面板定位瓶颈，用本地服务器替代双击打开。
HTML 文件打开慢、加载卡顿，通常不是 HTML 本身的问题，而是它触发的资源加载、渲染阻塞或运行时逻辑拖慢了整体体验。直接双击打开 file:// 协议的 HTML 文件时尤其明显——浏览器跳过了服务端优化环节，所有问题都会裸露出来。
为什么本地双击打开 HTML 就很卡？
浏览器对 file:// 协议有严格限制：无法发起跨源请求、不支持 HTTP/2、禁用部分缓存策略、CORS 报错会静默失败、甚至某些现代 API（如 fetch() 加载本地 JSON）默认被拒。更关键的是，没有服务端压缩（如 gzip/Brotli）、无 HTTP 缓存头、资源路径解析慢（尤其含大量相对路径或 <base href> 时）。
- 图片、CSS、JS 文件路径写成
./assets/img/logo.png，但实际目录结构错位，浏览器反复 404 后重试 - 引用了未下载的 CDN 资源（如
https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.js），本地没网就卡住数秒 - HTML 里写了
<script src="app.js"></script>，但app.js实际在js/app.js，404 后仍继续解析，拖慢 DOM 构建
哪些 HTML 写法会直接拖慢首次渲染？
阻塞渲染的标签和内联逻辑是主因。浏览器必须按顺序解析 HTML，遇到同步脚本就暂停 DOM 构建，直到脚本下载、执行完毕。
-
<script>标签没加defer或async，且放在<head>或靠前位置 - 内联
<style>过大（超 2KB），或包含复杂 CSS 选择器（如div div div span:hover），阻塞样式计算 - 用了
<img>但没设width/height属性，导致布局抖动（layout shift），浏览器反复重排 - HTML 中嵌入大量 Base64 图片（如
src="data:image/png;base64,iVBOR..."），增大 HTML 体积，延长解析时间
怎么快速定位是哪部分拖慢了加载？
别猜，用浏览器开发者工具的真实数据说话。打开 HTML 后，按 F12 → 切到 Network 标签页 → 刷新（Ctrl+R），重点关注三列：
立即学习“前端免费学习笔记（深入）”；
-
Waterfall：看哪个资源“开始时间”晚、“传输时间”长、“等待时间（TTFB）”高（本地文件 TTFB 应接近 0ms，若 >50ms 说明路径或编码有问题） -
Size列显示resource size和transfer size，如果二者接近，说明没压缩；若 HTML 的 transfer size > 500KB，基本就是内联资源或未压缩文本惹的祸 - 右键任意请求 →
Block request URL，临时屏蔽某个 JS/CSS，再刷新，观察是否变快——这是最直接的归因法
/* 示例：用 Chrome 快速测试某 script 是否罪魁祸首 */
// 在 Console 执行，临时移除指定脚本
document.querySelector('script[src="analytics.js"]').remove();
// 然后手动触发关键操作，看是否还卡本地开发时最该做的 3 件事
不用搭完整服务，但必须绕过 file:// 限制：
- 用 Python 快速起一个静态服务：
python3 -m http.server 8000，然后访问http://localhost:8000/index.html - VS Code 安装插件
Live Server，右键 HTML 文件 →Open with Live Server，自动启用缓存头、gzip 模拟、热更新 - 检查所有外部资源链接：把 CDN 替换为本地副本，或加
onerror="this.remove()"防止挂起，例如：<script src="https://unpkg.com/react@18/umd/react.development.js" onerror="this.remove()"></script>
真正卡顿的根源往往藏在看似无害的路径错误、未处理的 404 或同步脚本里。比起优化算法，先让所有资源能稳定加载，才是提速的第一步。
