优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
84浏览
为什么我的srcset图片在移动端显示模糊？
我在给图片组件设置srcset和sizes时遇到了问题，移动端设备明明匹配了小图，但显示还是模糊。 场景是卡片组件里的封面图，用CSS设置了最大宽度600px，图片宽度100%。我按照文档写了： &l...
-
2
回答
39浏览
长列表滚动时可视区域高度计算不准怎么办？
我在用虚拟滚动优化长列表时，发现可视区域高度总是比实际窗口小20px，导致最后几项提前渲染了。之前用window.innerHeight计算容器高度，但加了padding后问题更严重了。 尝试改用容器...
-
1
回答
79浏览
cache-loader缓存失效后如何避免重复编译？
我在Vue项目里用了cache-loader，第一次构建确实快很多。但每次修改代码后缓存都会失效，导致全量编译时间反而更长，这到底是怎么回事？ 尝试过在webpack配置里这样写：{ test: /....
-
1
回答
49浏览
为什么使用WebP格式后图片在移动端显示模糊，该怎么解决？
我在项目里用WebP格式压缩图片，发现手机端显示的图片边缘特别模糊，这是为什么？ 之前用这个JS脚本自动替换图片格式： document.querySelectorAll('img'...
-
2
回答
90浏览
为什么用了Thread-loader后构建反而更慢了？
最近给项目加了Thread-loader想优化打包速度，结果发现构建时间比之前还长！配置的时候按照文档设置了workers: 2，但打包时控制台老是出现worker process failed to...
-
1
回答
20浏览
移动端横竖屏切换时布局元素重叠怎么办？
在开发移动端页面时，我用flex布局做了图文列表，竖屏显示正常，但切换横屏时图片和文字会重叠。尝试过设置meta viewport和CSS媒体查询，但效果不好： <div class="item...
-
2
回答
32浏览
虚拟列表动态高度时滚动位置跳动怎么办？
我在用虚拟列表渲染不同高度的卡片时，滚动到中间位置突然跳动，这是为什么？ 设置了容器高度和overflow:auto，每个卡片高度根据内容自动变化。用offsetTop累加计算scrollTop，但滚...
-
1
回答
29浏览
为什么给元素加了will-change: transform却没触发合成层？
我在做一个卡片翻转动画，用3D变换实现，但发现动画还是有点卡。查资料说加will-change能提前让浏览器创建合成层，于是给元素加了will-change: transform，但用开发者工具的层叠...
-
2
回答
24浏览
为什么内联关键CSS后首屏渲染反而更慢了？
我按照教程把关键CSS内联到HTML里了，但首屏渲染时间反而比之前多了500ms，这是为什么？ 之前用Webpack的ExtractTextPlugin把CSS抽离成单独文件，加载时间约1.2秒。按首...
-
2
回答
25浏览
React中用requestIdleCallback优化长列表还是卡顿怎么办？
我在用React实现一个动态加载的长列表，尝试用requestIdleCallback分批次渲染列表项，但滚动到后面还是会卡顿。我按网上的方法在useEffect里这样写的： const [items...
-
2
回答
26浏览
Hreflang标签在动态页面生成时出现重复链接问题怎么办？
我在给多语言电商网站做Hreflang优化时遇到问题，用Next.js动态生成的head标签里，不同语言页面的hreflang链接重复了。比如英文页面和法语页面互相引用时，Google Search ...
-
1
回答
55浏览
Vite预构建后Tailwind的样式为什么失效了？
在项目里同时用了Ant Design Vue和Tailwind CSS，配置了预构建后，Tailwind的样式突然不生效了。之前单独使用Tailwind没问题，加了optimizeDeps.inclu...
-
2
回答
39浏览
React中异步请求loading状态总延迟显示怎么办？
在React项目里，我给API请求加了loading状态，但每次点击按钮后loading动画都要等1-2秒才显示，用户体验特别差。代码逻辑应该是对的，但实际效果就是不及时： function Prod...
-
1
回答
45浏览
React组件重复发起API请求怎么优化首屏加载？
在开发产品列表页时发现，每次刷新页面都会看到两次相同的商品数据请求。我用useEffect在组件里调用axios.get，但好像不管是否依赖项变化都会触发。看浏览器网络请求发现首屏有重复的请求： fu...
-
1
回答
36浏览
React中多个API订阅怎么在卸载组件时全部清理？
在开发聊天室组件时用了3个WebSocket订阅，但发现组件卸载后后台还是有数据在接收。尝试在useEffect的返回函数里写了unsubscribe，但有时候某个订阅没关干净导致内存泄漏，有没有更好...
-
2
回答
47浏览
为什么压缩后的CSS在IE11下样式全乱了？
最近在用webpack的OptimizeCSSAssetsPlugin压缩CSS，结果发现打包后的样式在IE11里全乱了，其他浏览器没问题。明明开发环境不压缩的时候都正常... 尝试过在配置里加了ca...
-
2
回答
29浏览
用了Server Push反而加载更慢怎么办？
我给网站配置了HTTP/2 Server Push推送关键CSS和JS，但发现页面加载时间反而比之前多了200ms，这是为什么呢？ 尝试过在nginx里这样配置： http2_push_preload...
-
1
回答
64浏览
React组件用useEffect定时器内存持续增长怎么办？
我在开发一个实时数据展示组件时用到了useEffect里的setInterval，但组件卸载后内存一直没释放。虽然加了cleanup函数，但内存分析工具显示heap还在持续增长，这是什么问题啊？ 代码...
-
1
回答
54浏览
React加载动画为什么会出现内容和骨架屏同时闪烁？
我在用React做数据加载时的骨架屏过渡，但发现内容渲染和骨架屏会同时显示0.5秒，导致闪烁问题。之前用条件判断控制显示： function ProductList() { const [produc...
-
2
回答
61浏览
为什么我的HTML压缩配置不起作用？
我在Vue项目里用HtmlWebpackPlugin做HTML压缩，按文档配了minify选项，但生成的文件还是有空格和换行。比如这个配置： module.exports = { configureW...
