优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
27浏览
合并CSS后部分页面样式错乱怎么办？
我在合并项目中的两个CSS文件时，发现登录页的按钮样式突然变成默认样式了。之前分别引入时没问题，合并后其他页面正常，就登录页出问题。试过调整合并顺序、检查选择器权重，都没解决。 合并前的HTML是这样...
-
1
回答
3浏览
vue-virtual-scroller滚动时滚动条不联动怎么解决？
在用vue-virtual-scroller做长列表时，发现滚动条和内容不同步，拖动滚动条内容没动，但滑动内容时滚动条能动。尝试过设置容器高度和overflow，还是不行。代码结构如下： <te...
-
1
回答
22浏览
Vue请求缓存导致数据更新不及时怎么办？
最近在做Vue项目时遇到个奇怪的问题，我给接口设置了Cache-Control: max-age=300，但页面刷新时数据总比实际延迟很久。比如商品价格修改后，用户需要等很久才能看到新价格。 我试过手...
-
1
回答
20浏览
骨架屏切换时为什么会出现闪烁？如何避免布局抖动？
我在给列表页加骨架屏时遇到问题，当真实内容加载出来后，骨架屏区域会突然跳动一下，看起来很卡。我用了opacity过渡，但闪烁反而更明显了。 代码结构大概是这样的，骨架屏用背景色模拟内容形状： <...
-
2
回答
7浏览
WebP图片压缩后文件变大了怎么办？
我在给电商网站优化图片时发现奇怪的事：.webp转换后反而比原图大，比如这张商品图： <img src="product.jpg" alt="商品图" sizes="(max-width: 60...
-
1
回答
10浏览
为什么启用usedExports后未使用的导出内容还是被打包进去了？
我在用Webpack打包React组件时启用了Tree Shaking，配置里设置了optimization.usedExports: true。但发现导入的模块里未被使用的导出内容仍然出现在打包结果...
-
2
回答
13浏览
位运算优化CSS动画时为啥反而更卡了？
最近在优化一个无限滚动的CSS动画，尝试用位运算代替除法计算位置偏移，但发现帧率反而从60掉到30了。 比如这段代码用位运算右移代替除以2： .scroll-item { transform: tra...
-
1
回答
24浏览
SWR预取数据时如何避免重复请求？
在列表页预取详情数据时，发现每次滚动加载新条目都会触发重复的SWR请求。我尝试用useEffect结合swr/mutate缓存数据，但控制台还是显示重复的GET请求，该怎么优化？ import use...
-
1
回答
7浏览
esbuild打包后代码体积反而变大了怎么办？
我之前用Webpack打包项目时代码压缩后的体积是800KB，换成esbuild后配置了treeShaking，但打包结果反而涨到1.2MB。尝试过把minify设为true，但没变化。查看输出代码发...
-
1
回答
9浏览
DLL入口文件引用CSS时出现‘Unexpected token’错误怎么办？
我在用webpack的DllPlugin打包常用库时，入口文件里引用了一个CSS文件：.box { border: 1px solid red; }但构建时提示“Unexpected token ‘....
-
1
回答
11浏览
采样率动态调整导致监控数据不准确怎么办？
最近在优化前端监控的采样策略，遇到个难题：我们给API请求设置了固定采样率10%，但业务高峰时日志量暴增到50万条，服务器扛不住，低峰期又只有几百条分析不出问题。尝试改成动态采样，根据QPS自动调整，...
-
1
回答
18浏览
Intersection Observer监听多个元素时为什么回调重复触发？
我在用Intersection Observer给图片列表做懒加载，当快速滚动时发现有些图片的回调会被重复触发，导致重复加载。已经给每个图片绑定了唯一的observer，也检查了entries.isI...
-
1
回答
23浏览
React动态高度列表滚动卡顿怎么优化？
在用React做商品列表时，每个列表项高度动态变化，滚动到300条左右就明显卡顿。尝试过用固定高度但内容溢出，用useState+useEffect实时计算总高度又导致渲染阻塞，有没有更好的解决办法？...
-
1
回答
22浏览
为什么Rollup打包后Tree Shaking没去掉未使用的CSS类？
在用Rollup打包Vue组件时遇到了奇怪的问题，明明代码里只用了CSS文件中的两个类，但打包后的样式文件里却包含了所有类。我检查过配置，已经设置了"sideEffects: false"，还试过在导...
-
1
回答
16浏览
浏览器不支持WebP图片时，如何优雅地实现降级回退到JPEG？
最近在做图片格式优化时，把所有图片换成了WebP格式，结果发现低版本IE和某些移动端浏览器直接显示不出来。我试过用标签配合： <picture> <source srcset="im...
-
1
回答
43浏览
如何根据网络状况动态调整CSS资源的预加载优先级？
我在移动端项目里用预加载公共CSS文件，但发现4G环境下首屏渲染反而更慢了。尝试用navigator.connection有效吗？ 现在这样写的预加载代码： /* 公共样式预加载 */ <lin...
-
2
回答
30浏览
Vue错误边界组件无法捕获异步子组件错误怎么办？
我在给Vue项目加错误边界时遇到个怪问题，父组件用errorCaptured钩子包裹了异步加载的子组件，但是发现当子组件在异步数据加载时触发错误，父组件的错误边界完全没反应... 代码是这样写的： &...
-
1
回答
8浏览
Vendor分离配置后为什么没生成独立的vendor chunk？
我在用Webpack做代码分割时配置了vendor分离，但打包后发现common chunk里全是第三方库代码，vendor chunk没生成。按照文档设置了optimization.splitChu...
-
1
回答
16浏览
IndexedDB存储对象时报错”Failed to execute ‘put’ on ‘IDBObjectStore’，该怎么解决？
在开发待办事项应用时，我尝试用IndexedDB存储包含日期的Task对象，但执行put操作就报错： Uncaught DOMException: Failed to execute 'put' on...
-
1
回答
12浏览
React错误边界无法捕获子组件异步错误怎么办？
我在用React错误边界处理组件异常时遇到个问题，同步报错能正常捕获，但子组件里setTimeout里的错误完全没反应。之前在父组件用了static getDerivedStateFromError，...
