优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
33浏览
Chrome内存快照里怎么判断是不是内存泄漏？
我在用 Chrome DevTools 的 Memory 面板拍快照，但不太会看那些 retained size 和 distance，到底怎么看才能确定是不是真的内存泄漏了？ 我试过反复打开关闭一个...
-
2
回答
123浏览
国际化切换语言后页面内容没更新怎么办？
我在用 i18next 做国际化，切换语言时路由和 store 都变了，但页面上的文本还是旧的，得手动刷新才生效。是不是漏了什么监听机制？ 试过调用 i18n.changeLanguage，也用了 u...
-
1
回答
97浏览
字体预加载后反而首屏变慢了，怎么回事？
我给网站加了字体预加载，用的是 <link rel="preload" as="font">，但发现首屏加载时间反而变长了，本地测试特别明显。 本来以为预加载能提升性能，结果 Lighth...
-
2
回答
39浏览
时间分片渲染长列表时卡顿怎么办？
我在用时间分片优化一个几千条数据的列表，每帧只渲染10条，但滚动时还是明显卡顿。是不是我的切片逻辑有问题？ 我试过用 requestIdleCallback，也试过用 setTimeout 拆分任务，...
-
2
回答
41浏览
模块联邦中远程组件加载失败怎么办？
我在用 Webpack 5 的模块联邦搞微前端，本地调试时主应用能正常加载远程组件，但部署到测试环境后就报错了，控制台提示找不到 remoteEntry.js。 我检查了 remote 的 publi...
-
2
回答
37浏览
图片懒加载时占位图怎么处理才不抖动？
我在做图片懒加载，用了一张灰色的占位图，但图片加载完成后页面还是会“抖”一下，布局好像被撑开了。明明设置了宽高，为啥还会这样？ 我试过给 img 加 width: 100%; height: auto...
-
2
回答
37浏览
首屏加载太多请求，怎么合并减少？
我们首页现在首屏要加载七八个CSS和JS文件，Lighthouse说请求数太多影响性能。我试过把小图标转成base64内联，但CSS还是拆成了好几个，比如 reset.css、header.css、b...
-
2
回答
33浏览
esbuild打包后为什么CSS文件没被提取出来？
我用 esbuild 构建项目时，发现所有的 CSS 都被打包进 JS 文件里了，而不是生成独立的 .css 文件。明明看到文档说可以通过 bundle: true 和 outfile 配合输出 CS...
-
2
回答
83浏览
图片懒加载时占位图怎么保持宽高比不塌陷？
我用 Intersection Observer 做了图片懒加载，但发现图片还没加载出来时，因为没有设置宽高，页面会先塌陷一下，然后图片加载完又撑开，体验很不好。我试过给 img 加 width 和 ...
-
1
回答
40浏览
Icon太多导致首屏加载慢，该怎么优化？
项目里用了几十个 SVG icon，现在首屏加载明显变慢，Lighthouse 评分也掉得厉害。我试过把它们合并成雪碧图，但维护起来太麻烦，而且有些 icon 还要动态改颜色。 现在每个 icon 都...
-
2
回答
26浏览
Webpack5 构建速度太慢怎么优化？
项目升级到 Webpack5 后，每次构建都要一分多钟，开发体验太差了。我试过开 cache，也用了 thread-loader，但提升不明显。 现在用的是 cache: { type: 'files...
-
1
回答
26浏览
国际化切换后页面布局错乱怎么办？
我用 i18n 做多语言切换，但切换到阿拉伯语时整个页面布局都乱了，文字方向没变，元素还重叠了。明明加了 dir="auto" 啊，是不是哪里漏了？ 这是我的 HTML 结构： <html la...
-
1
回答
35浏览
Webpack打包后如何实现持久化缓存避免用户重复下载？
我用 Webpack 打包项目，每次构建后文件名都变了，用户就得重新下载所有资源，体验很差。听说可以用 contenthash 实现持久化缓存，但试了好像没生效？ 我在 output.filename...
-
2
回答
57浏览
Preload 在 React 中怎么正确使用？为什么资源没被提前加载？
我在 React 项目里想用 preload 提前加载一个重要的 JSON 配置文件，但发现浏览器并没有在页面加载初期就请求它，而是等到组件挂载后才发起请求。是不是我的写法有问题？ 我试过在 useE...
-
2
回答
32浏览
网络差的时候怎么智能预加载资源？
我在做移动端页面优化，想根据用户的网络状态决定是否预加载下一页的图片。用了 navigator.connection.effectiveType 判断，但在低端机上效果不稳定，有时网速明明很慢却还是触...
-
2
回答
52浏览
Webpack 并行构建真的能提升速度吗？怎么配置才有效？
我项目用的是 Webpack 5，听说开启并行构建能加快打包速度，但试了几次感觉没变化，甚至有时候还更慢了。 我加了 parallel: true 到 babel-loader 里，也装了 threa...
-
2
回答
40浏览
关键渲染路径优化到底该从哪下手？
最近在做页面性能优化，听说关键渲染路径（Critical Rendering Path）是核心，但完全不知道该从哪开始改。我试过把 CSS 放到 <head> 里，JS 加了 defer，...
-
1
回答
98浏览
用 Set 还是 Map 来去重数组更高效？
我有个包含大量对象的数组，想根据某个字段去重。之前用 Array.filter + indexOf 处理小数据还行，但数据一多就卡。听说 Set 和 Map 性能更好，但不确定哪种更适合这种场景。 比...
-
2
回答
23浏览
WebP响应式图片怎么在不同设备上正确加载？
我用 <picture> 标签做了 WebP 的响应式图片，但发现有些老设备还是加载不了 fallback 的 JPG，页面直接空白了。是不是我的写法有问题？ 我试过这样写： <pi...
-
1
回答
31浏览
React中怎么在路由跳转前预取数据避免白屏？
我用React Router做页面跳转，但新页面的数据是进入后才请求的，导致有短暂白屏。听说可以用数据预取解决，但不知道怎么在跳转前就提前加载好数据？ 试过在useEffect里请求，但还是等组件挂载...
