优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
58浏览
动态添加的为什么没触发预加载？
我在单页应用里想用JavaScript动态预加载字体文件，但发现资源始终没有被浏览器预加载。检查过网络面板，确实没有请求发出，代码逻辑看起来没问题，这是怎么回事？ 我尝试过这样写： document....
-
2
回答
76浏览
启用HTTP/3后WebSocket连接频繁断开怎么办？
我在给电商网站升级到HTTP/3后，发现实时商品库存更新的WebSocket接口频繁断开，但HTTP/2下没问题。用Chrome开发者工具看是连接直接reset，服务器日志也没错误。 尝试过把WebS...
-
2
回答
85浏览
Vue路由切换时的过渡动画导致页面卡顿怎么办？
最近在给Vue项目加路由过渡效果，用了transition标签做滑动切换，但发现每次路由变化时页面会卡顿半秒。尝试过把mode设成out-in，动画虽然顺眼了，但滚动位置会突然跳到顶部，而且新页面内容...
-
2
回答
34浏览
为什么启用HTTP2后多个请求还是排队发送？
我给网站启用了HTTP/2，但发现同时发送的多个fetch请求还是在排队执行。比如同时请求三个图片资源，网络面板显示还是按顺序发送，这不应该是多路复用吗？ 我用下面的代码测试的，服务器是Nginx 1...
-
2
回答
73浏览
如何用JavaScript实现请求队列，避免高频API调用被限流？
我在做一个实时搜索功能，输入框每输入一个字符就触发API请求，但发现输入太快会被后端限流。之前用防抖处理过，但用户希望稍微停顿就能立即搜索，所以改成节流，但发现如果用户连续快速输入三次，还是会发三个请...
-
2
回答
69浏览
Redis缓存雪崩怎么解决？随机过期时间设置不管用？
最近在优化项目缓存时遇到个难题：我们用了Redis存热点数据，但发现大量key会在同一时间集中过期。昨天测试时，设置了统一30分钟过期时间的用户信息缓存突然全失效，导致数据库瞬间被打爆。 我试过给过期...
-
2
回答
70浏览
React中大量状态变量如何优化空间复杂度？
我现在在做一个表单组件，有十几个输入框每个都用了独立的useState，发现组件渲染时内存占用特别高。试过把状态合并到一个对象里，但不确定这样是否足够优化。有没有更好的方法减少内存开销？ functi...
-
1
回答
91浏览
Webpack代码分割配置后，vendors chunk为什么还是很大？
在优化项目时，我按文档配置了SplitChunks，但打包后的vendors chunk依然有800KB。我尝试把minSize设成0，调整cacheGroups的test正则，甚至手动命名split...
-
2
回答
24浏览
vue-virtual-scroller滚动时列表项突然错位怎么解决？
在用vue-virtual-scroller渲染2000条带图片的列表时，滚动到中间位置突然出现条目重叠错位，尝试调整initial-count和estimate-size参数没效果 模板里这样写的：...
-
2
回答
56浏览
WeakMap缓存DOM元素内存没减少怎么办？
在优化页面时用WeakMap存DOM元素，但内存统计显示占用没降下来，这是为什么？ 之前用普通对象缓存DOM节点：cache = { element: document.getElementById(...
-
2
回答
28浏览
Gzip压缩后文件反而变大是怎么回事？
我在Nginx里配置了Gzip压缩，设置了gzip_types *;和gzip_comp_level 6，但发现压缩后的CSS文件比原文件大了10%左右，这是怎么回事？ 已经检查过响应头确实返回了Co...
-
2
回答
39浏览
为什么用了CSS containment后滚动反而更卡了？
我在列表组件的父容器加了contain: content想优化渲染，但滚动时反而更卡了。之前尝试把每个列表项包裹成div并设置contain属性，但效果没改善，甚至出现布局抖动。 代码是这样的： &l...
-
1
回答
43浏览
移动端列表滚动卡顿，优化后还是不流畅怎么办？
开发移动端列表页面时，当列表项超过50条左右，滚动就明显卡顿。尝试用display: none隐藏视口外元素，并改用position: absolute定位列表项，但滚动仍然有掉帧现象，特别是快速滑动...
-
2
回答
57浏览
React中如何在路由切换时预取数据却导致重复请求？
我在React应用里用useParams获取文章ID后，用useEffect在组件挂载时预取文章详情数据。但当我切换到其他页面再返回时，发现fetchData又触发了重复请求，这样会不会浪费带宽？ f...
-
2
回答
53浏览
字体子集优化后为什么部分字符显示为方框？
我在使用Google Fonts时按文档配置了字体子集，但页面里的中文引号和特殊符号还是显示方框。代码明明写了subset: 'latin,latin-ext,cyrillic,devanagari'...
-
1
回答
58浏览
使用source标签时WebP回退JPEG在旧版浏览器显示空白怎么办？
我在用picture元素优化图片，用标签指向webp格式，然后的src放jpeg。但在IE和安卓4.4测试时图片显示空白，路径没问题，这是怎么回事啊？ 代码结构是这样的： 检查过路径没问题，但旧版浏览...
-
1
回答
30浏览
WebP图片在低版本浏览器不显示，picture标签回退没生效怎么办？
最近在项目里把所有图片换成WebP格式，测试时发现IE11和Edge旧版直接不显示图片。虽然知道这些浏览器不支持，但按照网上的方法写了picture标签：<picture><sour...
-
2
回答
40浏览
前端缓存预热时资源加载顺序混乱怎么办？
在做电商网站首屏优化时，我用Service Worker做缓存预热，但发现图片和API请求的加载顺序总是乱的。比如先请求了商品详情接口，再加载轮播图资源，导致页面卡顿几秒。 我尝试在service w...
-
1
回答
49浏览
为什么IndexedDB缓存数据在页面刷新后丢失了？
大家好，我在用IndexedDB存用户操作记录时遇到怪事，存完数据马上能读到，但页面刷新后就全没了。明明加了transaction持久化参数啊！ 具体场景是这样的：todos列表的缓存，我按教程写了个...
-
1
回答
70浏览
WeakMap缓存DOM元素后内存没释放是怎么回事？
在开发可复用组件时，用WeakMap缓存DOM元素的处理函数，但发现页面卸载后内存没释放，这是为什么？ 我这样写的：const handlers = new WeakMap(); function m...
