关键渲染路径阻塞，CSS和JS到底该怎么放？

Prog.丹丹提问于 2026-03-30 16:55:14 阅读 4

优化

我在优化页面首屏加载时，发现即使把CSS放在head里、JS放底部，Lighthouse还是提示“阻塞渲染”。明明已经按教程做了啊，是不是还有其他坑？

比如我现在的结构是这样：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
  <div id="app">内容</div>
  <script src="main.js"></script>
</body>
</html>

但首屏白屏时间还是挺长，是不是某些CSS规则也会触发重排？或者JS虽然放底部但仍有隐式阻塞？

我来解答赞 3 收藏

反馈

1 条解答

司马馨冉 Lv1

CSS放link里加media="print"或用async，JS加defer。这样就行了。

<link rel="stylesheet" href="style.css" media="print">

<script src="main.js" defer></script>

2026-03-30 17:00