雪碧图background-position需以元素左上角为原点，垂直堆叠时第二图标为0 -16px；内联style限首屏小样式（≤1KB），禁用normalize等大文件；base64临界值建议设4096；preload必须加as="style"。
雪碧图合并CSS背景图时，background-position怎么算才不偏移
雪碧图本身不减少请求数，关键在「一张图+多个background-position」能否精准复用。偏移的根源往往是单位混淆或坐标系理解错。
- 所有
background-position值默认以元素左上角为原点，X向右为正、Y向下为正——和CSS坐标系一致，但和PS/Figma的“从上往下排图标”习惯相反 - 如果雪碧图里图标是垂直堆叠的，第二个图标顶部距图顶16px，那它的
background-position应该是0 -16px（负值表示向上挪） - 用
px比用%更可控；避免混用rem或em，字体缩放会意外拉偏位置 - 检查雪碧图是否含透明边距：导出时关掉“裁剪透明区域”，否则
background-position要额外减去那几像素
内联<style>样式时，哪些CSS能塞、哪些必须外链
内联<style>确实省一次HTTP请求，但只适合「首屏强依赖+体积小+无复用」的样式。塞多了反而拖慢首屏解析。
- 可内联：重置
body、h1等基础样式，首屏按钮/卡片的color/font-size，不超过1KB的@keyframes - 不能内联：完整
normalize.css、组件库全局样式（如ant-design）、含大量@media查询的响应式规则——它们会阻塞HTML解析，且无法被缓存 - 注意
<style>标签位置：必须放在<head>里，若插在<body>中段，浏览器可能触发重排
Webpack/Vite打包时，url()引用的小图标自动转base64的临界值怎么设
工具自动把小图转成base64字符串内联进CSS，本质是用体积换请求数。但设太高会撑大CSS文件，影响首屏渲染。
- Webpack的
url-loader或asset/inline规则，默认临界值常是8KB，对CSS里的小图标来说太大了——建议调到4096（4KB）以内 - Vite中通过
build.assetsInlineLimit配置，设为4096后，background: url('./icon.svg')会变成background: url("data:image/svg+xml;base64,...") - SVG慎用base64：部分旧版iOS Safari对data URI长度敏感，超2KB可能渲染失败；PNG/JPEG更稳妥
- 检查生成结果：打开打包后的CSS，搜
data:image确认是否真被内联，别只信配置
用preload提前加载关键CSS时，as="style"必须写吗
必须写。不写as="style"，浏览器会当普通脚本或资源处理，失去预加载优先级，甚至引发CSP报错。
立即学习“前端免费学习笔记（深入）”；
-
<link rel="preload" href="main.css" as="style">让浏览器知道这是CSS，可提前下载并放入样式表队列 - 配合
onload动态插入：<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">，避免阻塞渲染 - 注意兼容性：IE完全不支持
preload，需用script回退；Safari 11.1+才支持onload事件 - 别滥用：只对首屏必需的CSS用
preload，其他仍走常规link rel="stylesheet"
preload没配as="style"导致白屏延迟——这两处不报错，但效果直接打折扣。 
