CSS通用与页面专属样式加载优化及jQuery加载位置咨询

• 通用共享样式处理：多页面共用的基础样式（重置、布局框架、通用组件）优先放在<head>中，但如果体积较大，必须拆分出关键CSS直接内嵌在<head>的<style>标签里——关键CSS是首屏渲染必需的最小样式集合。剩余的通用非关键CSS，可以用rel="preload"异步加载，或者通过media="print"先加载再切换为all的方式，避免阻塞首屏渲染。如果通用CSS体积很小（gzip后几KB），直接全量放<head>也没问题，还能减少HTTP请求。
• 页面专属样式处理：仅特定页面需要的样式，放在对应页面的<body>底部（靠近</body>）加载是很好的实践。这样既不会抢占首屏资源的加载优先级，也能避免其他页面加载无用的样式文件。

• 只在需要用到jQuery的页面加载，而且要放在<body>的最底部（</body>标签之前），绝对不要在全局模板的<head>里全局引入——除非全站每个页面都依赖它。这种方式既不会阻塞HTML解析和首屏渲染，也能避免不必要的资源下载。
• 特殊情况：如果某个页面的jQuery代码必须在DOM加载前执行（非常少见），可以给<script>标签加上defer属性后放在<head>里，但依然只在需要的页面引入。

性能测试工具的结果受测试环境（服务器响应、网络模拟参数）、缓存状态等因素影响，出现差异是正常的。你可以固定测试条件（比如统一用3G网络模拟、每次测试前清空缓存），重点关注首屏加载时间、最大内容绘制（LCP）、**累积布局偏移（CLS）**这几个核心指标。只要这些核心指标在优化后有明显改善，就说明你的策略是有效的，不用纠结不同工具间的数值差异。

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