2018年页面中部引入CSS文件的弊端及该实践合理性探讨

其实这个问题挺有代表性的——早期确实有不少开发者强调「绝不能在body里放link标签」，但MDN明确表示这是符合规范的合法写法。不过合法可不代表就是好实践，咱们结合2018年的Web环境（放到现在核心逻辑也没变），拆解下这么做的问题，以及什么时候才适合这么用。

核心弊端 #

• 引发页面闪烁，破坏用户体验：浏览器解析HTML时，遇到<link rel="stylesheet">会优先下载并解析对应的CSS，这时候后续的HTML渲染会被阻塞。如果在页面中部引入CSS，前面的内容可能已经渲染完成，突然加载的新CSS会让页面样式突变，出现明显的「闪屏」效果。比如你给出的例子里，h1、段落和图片已经显示了，突然加载specific-component.css，要是这个文件里包含全局样式（比如修改body字体、背景色），整个页面都会出现跳变，用户体验很差。
• 拖慢页面加载速度：浏览器的预加载扫描器通常只会在<head>区域扫描资源链接，放到body中部的link标签可能无法被提前识别，导致CSS的下载启动时间延后。2018年那会儿不少用户的网络带宽还没现在充裕，这种延迟对加载性能的影响会更显著。
• 增加代码维护成本：把CSS分散在body的各个位置，时间久了很难追踪样式的来源，团队协作时更容易出现样式冲突、重复引入的问题，后期排查和修改都会变得麻烦。

为什么MDN说这是允许的？ #

MDN的表述是「允许」而非「推荐」——HTML规范本身确实支持在body内放置link标签，但这是为了满足特定场景的需求，比如按需加载首屏外的组件CSS。举个例子：如果你的页面很长，首屏下方有一个体积较大的复杂组件（比如数据表格、交互式弹窗），这个组件的CSS在首屏加载时完全用不上，这时候可以在组件所在位置附近引入它的CSS，减少首屏需要加载的资源体积，加快首屏渲染速度。

不过这种场景也需要配合优化手段，比如给link标签加上media="print"（让浏览器先不阻塞渲染，之后再切换到screen），或者用JavaScript监听滚动事件，当组件进入视口时再动态加载CSS，避免阻塞正常的页面渲染流程。

总结：属于良好实践还是不良实践？ #

绝大多数场景下，这属于不良实践。

最优的做法还是把所有CSS都放到<head>里，或者借助现代构建工具（比如Webpack）把CSS拆分成按需加载的代码块，通过动态import的方式加载，而不是直接在body里插入link标签。如果确实有特殊需求要在body内引入，一定要确保这个CSS只作用于引入位置之后的内容，不会影响前面已渲染的元素，同时做好性能测试，避免出现体验问题。

内容的提问来源于stack exchange，提问作者Marvin3