优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
30浏览
Vite打包后为什么静态资源路径404？
用Vite开发的项目部署到服务器后，图片和字体文件都报404错误，明明在public目录里放了资源，也配置了publicDir: 'public'，生产构建后的dist里确实有这些文件，但页面访问时路...
-
2
回答
18浏览
为什么我的Webpack配置了Tree Shaking还是没摇掉未使用的代码？
我在项目里按教程配置了Webpack的Tree Shaking，把mode设成production，也设置了optimization.usedExports为true，但打包后的bundle里还是能看...
-
2
回答
35浏览
页面频繁交互时如何防止日志上报重复触发影响性能？
我在做按钮点击日志上报时遇到问题，用户快速连续点击会导致重复上报。之前用了防抖： _.debounce(reportLog, 500) 但发现关键操作会被延迟甚至丢失。改用节流后： function ...
-
2
回答
41浏览
Webpack并行构建时为什么某些CSS文件未被处理？
我在项目里用thread-loader做并行构建，但发现一个CSS文件里的变量没被处理。配置了多个loader，其他CSS文件正常，就这个文件会直接输出原始代码。试过调整thread数和loader顺...
-
2
回答
24浏览
WebP转换后图片模糊，怎么调整参数才能保持清晰？
我用cwebp把一批JPG转成WebP，发现转换后的图片边缘发虚，特别是文字logo区域。尝试过加-q 90参数，但模糊问题没改善。后来改用-m 6提高压缩质量，结果文件变大了20%还卡顿，怎么办？ ...
-
1
回答
24浏览
WebP转换后图片质量评估方法有哪些？如何避免模糊又保证压缩率？
最近在用Sharp库批量转WebP图片，发现设置quality: 80后图片边缘明显发虚。尝试过改chromaSubsampling和alphaQuality参数，但不确定哪个指标最合理。用Googl...
-
1
回答
30浏览
前端错误聚合时怎么区分不同环境的重复上报？
在用Sentry做错误监控时，测试环境和生产环境的同一错误会被合并成一个事件，导致看不到环境差异。比如同样的404错误，怎么才能让不同环境的报错分开统计呢？ 我尝试在初始化Sentry时添加了envi...
-
2
回答
65浏览
React列表滚动时启用GPU加速后为什么元素会闪烁？
最近在优化一个React列表滚动组件，给元素加了transform: translateZ(0)想启用GPU加速，但滚动时反而出现元素闪烁问题。尝试过设置will-change: transform和...
-
1
回答
22浏览
为什么用了HTTP/2多路复用后图片加载反而更慢了？
我在优化网站时启用了HTTP/2，按理说多路复用应该更快，但发现首页轮播图的加载时间反而比HTTP/1.1多了200ms左右。检查网络面板发现，虽然所有图片都走同一个连接，但请求顺序好像被打乱了。 尝...
-
2
回答
40浏览
为什么用了defer的JS还是阻塞了首屏渲染？
我在优化网站首屏加载时，把所有JS都加上了defer属性，但页面还是出现卡顿，DOMContentLoaded时间依然有3秒。用Lighthouse检测发现有多个JS文件被标记为"blocking"。...
-
2
回答
51浏览
Vue骨架屏在图片加载后为什么会闪一下消失？
我在做商品列表页首屏优化时用了骨架屏，但发现图片加载完成后骨架屏会闪一下才被替换。我用了v-if/v-else控制切换，骨架屏和真实图片的宽高比例也保持一致了，但问题还是存在： <div v-f...
-
2
回答
21浏览
为什么用lodash-es按需导入后Tree Shaking没减少打包体积？
我在项目里改用lodash-es想通过Tree Shaking减小体积，但打包后发现整个lodash都进去了... 按教程这样导入的： import { map, each } from '...
-
1
回答
38浏览
React-Window滚动时子项内容错位怎么办？
我在用react-window做长列表优化时遇到问题，当滚动到中间位置，子项的内容会突然错位覆盖到其他项上。之前按教程设置了固定高度，但实际运行时还是有问题。 我的代码结构是这样的： <Fixe...
-
1
回答
52浏览
页面卸载时自定义上报请求被浏览器取消怎么办？
我在做页面性能监控时，想在页面关闭前上报用户停留时长。用了window.addEventListener('beforeunload')触发上报，但发现大部分请求都被浏览器取消了。尝试改用unload...
-
2
回答
40浏览
为什么对象脱离作用域后内存没有及时回收？
我写了个Vue组件用setTimeout定时更新状态，但发现组件卸载后，Chrome内存 profi查看还是有大量对象残留。虽然在onUnmounted里用了clearTimeout，但用垃圾回收分析...
-
1
回答
47浏览
处理大量用户数据时，用数组还是对象存储更高效？
我在做一个需要频繁搜索用户ID的组件，当前用数组存储用户对象，通过遍历查找ID： const users = [{id:1, name:'Alice'}, ...]; function findUse...
-
2
回答
29浏览
React中如何用缓存策略避免重复的API请求？
我在开发一个新闻列表页面时遇到问题，每次切换标签页再回来，组件都会重新发起API请求。虽然用了useMemo缓存了数据，但发现浏览器开发者工具里还是显示重复请求： useEffect(() =>...
-
2
回答
37浏览
为什么我的TTI优化措施对首屏时间没改善？
我在做TTI优化时，尝试给图片加了loading="lazy"，还把业务代码拆成动态import，但Lighthouse测出来的Time-to-Interactive还是12秒以上，这正常吗？ 代码结...
-
2
回答
15浏览
图片预加载时如何避免出现闪烁的空白框？
在给图片列表实现预加载时遇到了问题。我给图片设置了固定宽高和loading状态，但预加载的空白框还是会先闪一下，特别是网络慢的时候更明显。我尝试过用opacity过渡和visibility属性，但效果...
-
2
回答
36浏览
关键CSS文件被阻塞首屏渲染怎么办？
我在优化首屏加载时发现，即使把CSS文件压缩到5KB，页面仍然会卡在“render”阶段。尝试过把CSS内联和使用都没效果，用Lighthouse检查显示这个CSS还是关键路径的一部分，该怎么让它不影...
