优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
85浏览
React列表滚动时启用GPU加速后为什么元素会闪烁？
最近在优化一个React列表滚动组件，给元素加了transform: translateZ(0)想启用GPU加速，但滚动时反而出现元素闪烁问题。尝试过设置will-change: transform和...
-
2
回答
45浏览
为什么用了HTTP/2多路复用后图片加载反而更慢了？
我在优化网站时启用了HTTP/2，按理说多路复用应该更快，但发现首页轮播图的加载时间反而比HTTP/1.1多了200ms左右。检查网络面板发现，虽然所有图片都走同一个连接，但请求顺序好像被打乱了。 尝...
-
2
回答
61浏览
为什么用了defer的JS还是阻塞了首屏渲染？
我在优化网站首屏加载时，把所有JS都加上了defer属性，但页面还是出现卡顿，DOMContentLoaded时间依然有3秒。用Lighthouse检测发现有多个JS文件被标记为"blocking"。...
-
2
回答
69浏览
Vue骨架屏在图片加载后为什么会闪一下消失？
我在做商品列表页首屏优化时用了骨架屏，但发现图片加载完成后骨架屏会闪一下才被替换。我用了v-if/v-else控制切换，骨架屏和真实图片的宽高比例也保持一致了，但问题还是存在： <div v-f...
-
2
回答
38浏览
为什么用lodash-es按需导入后Tree Shaking没减少打包体积？
我在项目里改用lodash-es想通过Tree Shaking减小体积，但打包后发现整个lodash都进去了... 按教程这样导入的： import { map, each } from '...
-
1
回答
72浏览
React-Window滚动时子项内容错位怎么办？
我在用react-window做长列表优化时遇到问题，当滚动到中间位置，子项的内容会突然错位覆盖到其他项上。之前按教程设置了固定高度，但实际运行时还是有问题。 我的代码结构是这样的： <Fixe...
-
2
回答
90浏览
页面卸载时自定义上报请求被浏览器取消怎么办？
我在做页面性能监控时，想在页面关闭前上报用户停留时长。用了window.addEventListener('beforeunload')触发上报，但发现大部分请求都被浏览器取消了。尝试改用unload...
-
2
回答
63浏览
为什么对象脱离作用域后内存没有及时回收？
我写了个Vue组件用setTimeout定时更新状态，但发现组件卸载后，Chrome内存 profi查看还是有大量对象残留。虽然在onUnmounted里用了clearTimeout，但用垃圾回收分析...
-
2
回答
61浏览
处理大量用户数据时，用数组还是对象存储更高效？
我在做一个需要频繁搜索用户ID的组件，当前用数组存储用户对象，通过遍历查找ID： const users = [{id:1, name:'Alice'}, ...]; function findUse...
-
2
回答
57浏览
React中如何用缓存策略避免重复的API请求？
我在开发一个新闻列表页面时遇到问题，每次切换标签页再回来，组件都会重新发起API请求。虽然用了useMemo缓存了数据，但发现浏览器开发者工具里还是显示重复请求： useEffect(() =>...
-
2
回答
59浏览
为什么我的TTI优化措施对首屏时间没改善？
我在做TTI优化时，尝试给图片加了loading="lazy"，还把业务代码拆成动态import，但Lighthouse测出来的Time-to-Interactive还是12秒以上，这正常吗？ 代码结...
-
2
回答
44浏览
图片预加载时如何避免出现闪烁的空白框？
在给图片列表实现预加载时遇到了问题。我给图片设置了固定宽高和loading状态，但预加载的空白框还是会先闪一下，特别是网络慢的时候更明显。我尝试过用opacity过渡和visibility属性，但效果...
-
2
回答
76浏览
关键CSS文件被阻塞首屏渲染怎么办？
我在优化首屏加载时发现，即使把CSS文件压缩到5KB，页面仍然会卡在“render”阶段。尝试过把CSS内联和使用都没效果，用Lighthouse检查显示这个CSS还是关键路径的一部分，该怎么让它不影...
-
2
回答
116浏览
为什么我的srcset图片在移动端显示模糊？
我在给图片组件设置srcset和sizes时遇到了问题，移动端设备明明匹配了小图，但显示还是模糊。 场景是卡片组件里的封面图，用CSS设置了最大宽度600px，图片宽度100%。我按照文档写了： &l...
-
2
回答
62浏览
长列表滚动时可视区域高度计算不准怎么办？
我在用虚拟滚动优化长列表时，发现可视区域高度总是比实际窗口小20px，导致最后几项提前渲染了。之前用window.innerHeight计算容器高度，但加了padding后问题更严重了。 尝试改用容器...
-
2
回答
99浏览
cache-loader缓存失效后如何避免重复编译？
我在Vue项目里用了cache-loader，第一次构建确实快很多。但每次修改代码后缓存都会失效，导致全量编译时间反而更长，这到底是怎么回事？ 尝试过在webpack配置里这样写：{ test: /....
-
2
回答
83浏览
为什么使用WebP格式后图片在移动端显示模糊，该怎么解决？
我在项目里用WebP格式压缩图片，发现手机端显示的图片边缘特别模糊，这是为什么？ 之前用这个JS脚本自动替换图片格式： document.querySelectorAll('img'...
-
2
回答
109浏览
为什么用了Thread-loader后构建反而更慢了？
最近给项目加了Thread-loader想优化打包速度，结果发现构建时间比之前还长！配置的时候按照文档设置了workers: 2，但打包时控制台老是出现worker process failed to...
-
1
回答
63浏览
移动端横竖屏切换时布局元素重叠怎么办？
在开发移动端页面时，我用flex布局做了图文列表，竖屏显示正常，但切换横屏时图片和文字会重叠。尝试过设置meta viewport和CSS媒体查询，但效果不好： <div class="item...
-
2
回答
64浏览
虚拟列表动态高度时滚动位置跳动怎么办？
我在用虚拟列表渲染不同高度的卡片时，滚动到中间位置突然跳动，这是为什么？ 设置了容器高度和overflow:auto，每个卡片高度根据内容自动变化。用offsetTop累加计算scrollTop，但滚...
