优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
27浏览
如何实现请求失败后的指数退避重试并监控重试次数？
在开发支付接口时遇到请求失败自动重试的问题。现在用递归实现指数退避重试，但发现重试次数没有正确记录到监控系统，导致无法统计真实失败率。 尝试过给每个Promise链添加.then(() => r...
-
2
回答
63浏览
媒体查询在移动端适配时，为什么元素间距会忽大忽小？
我按设计稿750px写媒体查询调整间距，但在iPhone 12和13上看起来差距很大。比如侧边栏padding在12上正常，到13就撑出来了 尝试过用rem单位和vw百分比替代，但换算起来容易出错。现...
-
2
回答
46浏览
TypeScript项目中Tree Shaking没生效，如何排查配置问题？
我按照官方文档配置了TypeScript项目，打包时发现没摇树，打包体积还是很大。检查了tsconfig.json的module和target设置，也用了rollup打包，但导出的代码里还是包含未使用...
-
2
回答
62浏览
为什么我的Service Worker缓存策略导致页面刷新后内容没更新？
最近给项目加了Service Worker做静态资源缓存，但发现更新了JS文件后页面一直显示旧版本。明明已经用cache.first策略，还手动调用了clients.claim()和skipWaiti...
-
2
回答
56浏览
为什么设置了Cache-Control还是频繁请求资源？
我在开发单页应用时给API接口设置了Cache-Control:max-age=30，但发现每次页面刷新都会重新请求JSON数据，明明应该缓存30秒才对。 代码是这样写的：fetch('/a...
-
1
回答
57浏览
如何判断WebP图片在不同质量设置下的压缩效果？
我在用sharp库把JPG转WebP时，quality参数设成80和90，文件大小差了30%，但肉眼看不出明显区别。有没有科学点的方法能自动评估不同quality值的压缩效果？特别是怎么平衡文件体积和...
-
2
回答
44浏览
Vue组件点击事件监控导致性能问题怎么办？
在Vue项目里给按钮加了点击监控，发现页面卡顿，代码用了防抖还是没用。这是为什么啊？ 我给所有按钮加了统一的点击上报逻辑，代码像这样写的： 购买 export default { methods: {...
-
1
回答
91浏览
拖拽组件频繁计算坐标，如何用缓存优化性能？
我在做一个可拖拽的卡片组件，每次鼠标移动都会触发坐标计算，发现控制台提示性能警告。尝试用 useMemo 缓存计算结果，但好像没起作用，还是在频繁重新计算： const calculatePositi...
-
2
回答
46浏览
React路由切换时过渡动画卡顿怎么办？
大家好，我在用React Router做页面切换过渡动画时遇到问题。我给路由组件加了Animate.css的fadeIn动画，但切换页面时动画有时候会卡顿或者直接跳过。我尝试在useEffect里手动...
-
2
回答
68浏览
使用react-virtualized滚动到底部时列表内容突然错位怎么办？
我在用react-virtualized的List组件渲染长列表时遇到个奇怪问题。当快速滚动到列表底部后松手，列表内容会突然错开两行的高度，看起来像数据渲染位置偏移了。我用了CellMeasurer自...
-
2
回答
43浏览
图片懒加载没效果，怎么调整资源加载优先级？
大家好，我在做首屏优化时发现图片加载还是卡顿，虽然用了loading="lazy"属性，但页面加载时图片还是阻塞了其他资源。我尝试给图片加了loading="lazy"和decoding="async...
-
2
回答
44浏览
瀑布流加载时滚动卡顿，IntersectionObserver优化无效怎么办？
我在用IntersectionObserver实现瀑布流布局时，发现滚动到加载区时页面会卡顿半秒。之前用了虚拟滚动只渲染可视区元素，但瀑布流布局高度不固定，改用观察器动态加载后问题依旧。代码逻辑应该是...
-
2
回答
59浏览
边缘计算服务优化图片加载时为什么会卡顿？
我在用Cloudflare Workers做边缘计算处理图片请求，发现当同时加载多张图片时会出现卡顿。代码是这样写的： <img src="/edge-worker/resize?width=3...
-
2
回答
63浏览
使用Performance API测量CSS动画性能时duration值异常大怎么办？
我在用Performance API监控页面动画性能时遇到问题，当使用performance.mark()和performance.measure()测量CSS动画的执行时间，发现返回的duratio...
-
2
回答
39浏览
渐进式渲染时首屏内容被二次重绘怎么办？
我在用骨架屏做渐进式渲染时遇到个问题，当真实内容加载完成替换骨架屏时，页面会出现明显闪烁。比如下面这个商品卡片： <div class="skeleton"> <div class=...
-
2
回答
61浏览
LocalStorge存大量对象时读写变慢怎么办？
在做电商项目时需要缓存用户浏览过的1000多个商品对象到LocalStorge，发现每次存取都要等几秒。试过用JSON.stringify()序列化，但读取时遍历解析还是卡顿。 代码大概是这样循环存储...
-
2
回答
83浏览
为什么我的Vue项目中使用WebP图片在某些浏览器显示异常？
我在Vue项目里尝试用WebP格式优化图片资源，用标签直接引入.webp文件。在Chrome/Firefox都能正常显示，但测试时发现IE11和旧版Safari（比如14.1）显示空白。我检查过文件路...
-
1
回答
40浏览
为什么开启will-change后页面反而更卡了？
最近在优化一个滚动列表的性能，给列表项加了will-change: transform想让GPU加速，但发现滚动反而更卡了。帧率从60直接掉到30左右，还偶尔出现卡顿。尝试过把属性改成content也...
-
2
回答
31浏览
QUIC协议请求总是报错”Unsupported Protocol”怎么办？
我在用fetch发送请求时想用QUIC协议，但总提示"Unsupported Protocol"错误。明明服务器配置了QUIC支持，代码也按照文档改了，但还是不行... 尝试过这样写请求代码： fet...
-
2
回答
60浏览
Service Worker缓存策略中，动态路由页面怎么总是返回旧内容？
我在用Vue Router做单页应用时，给Service Worker设置了缓存策略，静态资源没问题，但动态路由页面（比如/user/123）更新后，客户端还是返回旧内容。尝试过用url.pathna...
