让你的网页飞起来!
本文详细解析 CSS 和 JavaScript 标签的放置位置如何影响页面性能,涵盖阻塞原理、浏览器机制和最佳实践。掌握这些知识可显著提升用户体验和 SEO 排名!
浏览器渲染页面时需经历:
内(✅ 强烈推荐)<head>
<link rel="stylesheet" href="styles.css">
head>
底部(❌ 禁止)<body>
<div>已渲染的无样式内容div>
<link rel="stylesheet" href="styles.css">
body>
关键结论:CSS 必须放在
中!
阻塞原理:
内(❌ 不推荐)<head>
<script src="heavy.js">script>
head>
底部(✅ 推荐)<body>
<script src="app.js">script>
body>
属性 | 加载时机 | 执行时机 | 是否阻塞 | 适用场景 |
---|---|---|---|---|
无 | 立即 & 阻塞 | 下载完立即执行 | ✅ | 极少使用 |
async |
异步 | 下载完立即执行 | ⚠️ 可能 | 独立脚本(统计/广告) |
defer |
异步 | 在 DOMContentLoaded 前 |
❌ | 依赖 DOM 的脚本 |
<head>
<script async src="ads.js">script>
<script defer src="main.js">script>
head>
async
脚本执行顺序不确定,不能有依赖defer
脚本按 HTML 中顺序执行async
)CSS 放
<head>
<link rel="stylesheet" href="core.css">
<style>body{background:#fff;}style>
head>
JS 用 defer
或放底部
<body>
<script defer src="analytics.js">script>
<script>
// 小段初始化代码放底部
script>
body>
关键指标优化
指标 | 优化前 | 优化后 | 提升 |
---|---|---|---|
FCP | 1.2s | 0.4s | 67% |
LCP | 2.5s | 1.1s | 56% |
TTI | 3.0s | 1.3s | 57% |
DOCTYPE html>
<html>
<head>
<title>优化示例title>
<link rel="stylesheet" href="styles.css">
<script defer src="app.js">script>
head>
<body>
<h1>用户立即看到我!h1>
body>
html>
DOCTYPE html>
<html>
<head>
<script src="jquery.js">script>
<script src="heavy.js">script>
head>
<body>
<link rel="stylesheet" href="styles.css">
body>
html>
➜ 避免样式闪烁defer
➜ 不阻塞关键渲染路径async
➜ 最大化并行加载