优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
48浏览
Service Worker缓存预热时为什么关键资源没被正确缓存？
我在用Service Worker做缓存预热时遇到问题，按照教程在install事件里预缓存了关键资源列表，但实际访问时发现某些CSS文件还是走网络请求了。 代码写的是这样的： self.addEve...
-
2
回答
83浏览
React Query的useQuery数据更新后页面为什么没反应？
我在Vue项目里用React Query的useQuery请求数据，初始加载没问题，但后端数据更新后页面没变化，手动刷新才显示最新数据。尝试过加staleTime:0和refetchQueries但都...
-
2
回答
140浏览
React.lazy动态导入后，如何避免重复加载相同模块导致的资源浪费？
我在用React.lazy和Suspense做路由懒加载时遇到个问题，同一个组件在不同路由里被动态导入后，webpack会生成多个chunk，导致资源重复加载。比如import(.../moduleA...
-
2
回答
105浏览
Vite预构建后依赖包体积反而变大了怎么办？
我在项目里给某个第三方库用了vite optimizeDeps预构建，结果打包后的vendor.js比之前还大200kb，这是怎么回事？ 之前配置是这样的： optimizeDeps: { entri...
-
2
回答
119浏览
WebP图片透明通道转成黑色怎么办？
我在把PNG图片转成WebP格式后，原本透明的背景变成了黑色，这是为什么？用在线转换工具试过几次都这样，本地用命令行转也一样... 尝试过加参数 -transparent 但没效果，代码直接用标签引入...
-
2
回答
133浏览
分页加载时怎么控制数据重复显示？
大家好，我在做无限滚动分页时遇到个怪问题。每次滚动到底部加载新数据时，前几页的数据会突然重复显示，像是被覆盖了又叠加？ 我用的是Vue，方法是这样的：items = []存储数据，点击加载更多时调用a...
-
2
回答
74浏览
为什么用了Keep-Alive后图片加载反而更卡了？
我在优化图片加载时启用了HTTP Keep-Alive，但发现连续请求图片反而比单独请求更慢，特别是移动端。明明设置了Connection: keep-alive和HTTP/1.1，服务器返回头也有K...
-
2
回答
101浏览
字体子集优化后网页文字显示不全怎么办？
在项目里用Google Fonts的Roboto字体，按文档配置了子集参数latin,latin-ext，但发布后发现部分特殊符号和中文显示为方块。我尝试过： 并在CSS里设置了font-family...
-
2
回答
91浏览
渐进式渲染中骨架屏如何避免与真实内容重叠？
我在用骨架屏做渐进式渲染时遇到问题，真实内容加载后骨架屏会闪一下再消失，用户体验不好。我给骨架屏加了transition: opacity 0.3s，但内容出现闪一下消失的情况，有没有更好的解决方案？...
-
2
回答
81浏览
Vue项目用CSS压缩后样式错乱怎么办？
最近在优化Vue项目时启用了CSS压缩，但压缩后样式完全乱了，文字重叠、颜色不对。检查配置也没发现问题，求解！ 比如这个组件原本正常： 标题 内容文本 .card { border: 1px soli...
-
2
回答
126浏览
为什么给关键CSS文件添加了preload链接标签后加载速度反而变慢了？
我在优化网站首页加载时，给关键CSS文件加了preload标签：<link rel="preload" href="/styles/main.css">，但监控显示首屏渲染反而比之前慢了0...
-
2
回答
148浏览
虚拟列表滚动时内容错位，如何解决？
我在给聊天列表做虚拟滚动优化时遇到了问题，当快速滚动到中间区域后，列表内容会出现几秒的错位闪烁，但过一会又恢复正常。 已经用react-window实现了基础虚拟列表，设置了itemSize为60，容...
-
2
回答
64浏览
为什么我的Webpack配置无法正确执行Tree Shaking？
我在Vue项目里用lodash时按需引入了方法，但打包后发现完整lodash库还是被包含进去了。配置了webpack.optimization.usedExports为true也没用，这是怎么回事？ ...
-
2
回答
85浏览
动态添加的为什么没触发预加载？
我在单页应用里想用JavaScript动态预加载字体文件，但发现资源始终没有被浏览器预加载。检查过网络面板，确实没有请求发出，代码逻辑看起来没问题，这是怎么回事？ 我尝试过这样写： document....
-
2
回答
92浏览
启用HTTP/3后WebSocket连接频繁断开怎么办？
我在给电商网站升级到HTTP/3后，发现实时商品库存更新的WebSocket接口频繁断开，但HTTP/2下没问题。用Chrome开发者工具看是连接直接reset，服务器日志也没错误。 尝试过把WebS...
-
2
回答
113浏览
Vue路由切换时的过渡动画导致页面卡顿怎么办？
最近在给Vue项目加路由过渡效果，用了transition标签做滑动切换，但发现每次路由变化时页面会卡顿半秒。尝试过把mode设成out-in，动画虽然顺眼了，但滚动位置会突然跳到顶部，而且新页面内容...
-
2
回答
55浏览
为什么启用HTTP2后多个请求还是排队发送？
我给网站启用了HTTP/2，但发现同时发送的多个fetch请求还是在排队执行。比如同时请求三个图片资源，网络面板显示还是按顺序发送，这不应该是多路复用吗？ 我用下面的代码测试的，服务器是Nginx 1...
-
2
回答
97浏览
如何用JavaScript实现请求队列，避免高频API调用被限流？
我在做一个实时搜索功能，输入框每输入一个字符就触发API请求，但发现输入太快会被后端限流。之前用防抖处理过，但用户希望稍微停顿就能立即搜索，所以改成节流，但发现如果用户连续快速输入三次，还是会发三个请...
-
2
回答
99浏览
Redis缓存雪崩怎么解决？随机过期时间设置不管用？
最近在优化项目缓存时遇到个难题：我们用了Redis存热点数据，但发现大量key会在同一时间集中过期。昨天测试时，设置了统一30分钟过期时间的用户信息缓存突然全失效，导致数据库瞬间被打爆。 我试过给过期...
-
2
回答
98浏览
React中大量状态变量如何优化空间复杂度？
我现在在做一个表单组件，有十几个输入框每个都用了独立的useState，发现组件渲染时内存占用特别高。试过把状态合并到一个对象里，但不确定这样是否足够优化。有没有更好的方法减少内存开销？ functi...
