script放head中默认同步执行，会阻塞HTML解析导致白屏和document.getElementById返回null；应使用defer（保序、DOM就绪后执行）或async（独立脚本、不保序）控制时机。

head 标签不是“资源管理器”，它只是元信息和引用的容器；真正决定资源加载行为的是标签类型、属性和位置，而不是把东西塞进去就完事。

为什么 script 放在 head 里经常导致白屏或阻塞

浏览器解析 HTML 是从上到下流式进行的。遇到 <script src="app.js"></script> 且没加 defer 或 async，就会暂停 HTML 解析，同步下载并执行 JS —— 这期间页面完全不渲染，用户看到空白。

• 必须阻塞：只有极少数初始化逻辑（如 Polyfill 检测）才需要同步执行，且应内联、极简
• 推荐方案：用 defer（保证执行顺序，等 DOM 解析完再执行）或 async（完全异步，不保证顺序，适合独立统计脚本）
• 注意：defer 只对外部脚本生效，<script>console.log(1)</script> 写在 head 里依然会立即执行

link rel="stylesheet" 必须放在 head 里，但顺序有讲究

CSS 是渲染阻塞资源，浏览器必须先拿到样式才能安全绘制。但放错顺序会导致 FOUC（闪白）或布局跳变。

• 关键 CSS（如重置、布局、首屏样式）应放在最前，用
• 非关键 CSS 加 media="print" 或用 onload 切换 media 类型来延迟加载，避免阻塞渲染
• 不要用 @import 在 CSS 文件里再引入其他 CSS —— 它会串行加载，性能更差
• favicon.ico 要尽早声明：，否则浏览器可能默认发起两次请求

meta 和 link 的动态修改容易被忽略的坑

很多框架或 SPA 项目会在运行时改 或 ，但这对 SEO 几乎无效。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 搜索引擎爬虫通常不执行 JS，或只执行有限 JS，所以客户端注入的 很可能根本不会被抓取
• 正确做法：服务端渲染（SSR）阶段就把最终 和 写进初始 HTML 响应
• 如果必须客户端改，只用于用户体验（如路由切换更新标题），别指望它影响搜索排名
• 用 document.head.querySelector('meta[name="description"]') 修改已有标签，别用 innerHTML 清空整个 head —— 会删掉 和第三方 SDK 初始化脚本

资源路径写错、跨域、缓存问题怎么快速定位

开发者工具 Network 面板里看到 404、CORS 错误或缓存 stale，90% 是路径或配置问题，不是 head 结构本身的问题。

• 相对路径以当前 HTML 文件为基准，不是以 JS/CSS 文件所在目录为准 —— href="css/main.css" 是相对于 HTML 的路径
• CDN 引入 JS/CSS 时，务必加 integrity 和 crossorigin：
• favicon 或 og:image 必须用绝对 URL，且带协议（https://），否则社交平台分享时无法识别
• 静态资源加哈希（如 style.a1b2c3.css）可规避强缓存问题，但需构建工具支持，不能靠手动改名

真正难的不是把标签写进 head，而是理解每个标签背后的加载机制、执行时机和浏览器行为边界。写进去只是开始，管住它的行为才是关键。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！