Base64内联图片真的能提升性能吗？为什么我用了反而更慢了？
最近在做页面性能优化，听说把小图标转成 Base64 内联到 CSS 里可以减少 HTTP 请求，就试了一下。但上线后发现首屏加载反而变慢了，而且 HTML 文件体积明显变大。
我用的是 Webpack 的 url-loader，配置阈值是 8KB 以下的图片自动转 Base64。比如这个 SVG 图标：
.icon-home {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwIDE5djNoNGwtMTQgNXYtM2wxNC01ek0xMiAzbC05IDYgOSA2IDktNi05LTZ6Ii8+PC9zdmc+');
}是不是我理解错了？什么情况下才适合用 Base64 内联？还是说现在 HTTP/2 下已经不推荐这么做了？
- 1
回答
5浏览
Base64内联图片真的能提升性能吗？为什么我用了反而更慢了？
我在做首屏优化时，把几个小图标转成 Base64 内联到 CSS 里，结果 Lighthouse 评分反而下降了，页面加载也变慢了。是不是用错了场景？ 我试过只对小于 2KB 的 PNG 图片做内联，...
- 2
回答
34浏览
Ant Design Upload上传后怎么拿到文件的base64编码？
我用 Ant Design 的 Upload 组件上传图片，想在上传前把文件转成 base64 用于预览，但不知道怎么在 onChange 里获取到 base64。试过用 FileReader，但总是...
- 2
回答
55浏览
React中如何用base64解码混淆的字符串，但遇到控制台报错？
我在React组件里尝试用atob解码混淆后的base64字符串，但控制台一直报"Invalid character in input string"错误。明明在后端返回的字符串看起来没问题啊。 比如...
- 2
回答
73浏览
Vite配置base选项后静态资源404怎么办？
在用Vite打包生产环境时，我设置了base: '/dist/'，但访问页面时图片和CSS都404了。调整过publicDir也没用，控制台报错说资源路径变成了/dist/dist/images/lo...
- 2
回答
42浏览
CSP策略配置后为什么还是被绕过执行了内联脚本？
在做渗透测试时，给网站加了CSP策略禁止内联脚本，但测试人员用base64编码的dataURI依然能执行恶意脚本，这是怎么回事？ 我的CSP配置是这样的：Content-Security-Policy...
- 2
回答
65浏览
rebase 时遇到冲突怎么解决才不会搞乱提交历史？
我用 git rebase main 把 feature 分支往主干上 rebase，结果中途弹出好多冲突。我改完文件后执行了 git add . 和 git rebase --continue，但感...
- 2
回答
55浏览
Data URL 在 Vue 中如何安全地用于图片 src 防 XSS？
我在 Vue 项目里用用户上传的 base64 图片直接赋值给 img 的 src，担心会有 XSS 风险。比如下面这样写： <template> <img :src="userPr...
- 1
回答
44浏览
Git rebase后如何撤销更改并恢复到合并前的状态？
在合并分支时用了git rebase feature-branch，结果把两个分支的历史搞乱了。现在想完全回退到执行rebase之前的主分支状态，试过git reset --hard HEAD@{1}...
- 2
回答
41浏览
Markdown编辑器上传图片后路径显示404怎么办？
在用Quill.js实现Markdown编辑器时，用户上传图片用FileSaver保存为base64格式，但渲染后图片路径显示404错误。明明保存成功了啊，控制台提示GET blob:null/xxx...
- 2
回答
114浏览
Git rebase后提交历史被抹掉了，怎么恢复？
今天在合并分支时用了git rebase main，解决冲突后提交了，结果发现之前的提交历史全没了，只剩最后那次合并的记录。我明明记得要保留分支历史才用的rebase，现在该怎么把中间的几个提交找回来...
拿去改改这个配置，把阈值降到2KB试试：
记住Base64会增加33%左右的体积，小图标还好说，超过2KB就别转了。现在HTTP/2下多请求开销没那么大，反而大文件内联会影响首屏渲染。
另外建议看看是不是重复加载了多个相同图标，这种情况用CSS Sprite可能更合适。总之优化这事得看具体场景，不能盲目跟风。累死我了，又一个被网上的“最佳实践”坑了的...