优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
54浏览
Vue项目用了WebP图片但旧浏览器显示不出来怎么办？
最近在Vue项目里把图片都换成WebP格式了，发现Chrome显示正常，但测试IE11和部分安卓机完全看不到图片。我查了文档知道这些浏览器不支持WebP，试过用标签加srcset属性：<img ...
-
1
回答
47浏览
域名分片后图片加载反而变慢了怎么办？
最近在优化电商网站的图片加载，尝试用域名分片把图片分到static1和static2两个子域名。但发现某些图片加载时间比之前更长了，这是怎么回事？ 我的HTML结构是这样写的： <img src...
-
2
回答
44浏览
为什么循环生成大量DOM元素时页面会卡顿？有没有更好的优化方法？
我在用JavaScript循环生成2000条带样式的列表项时，页面直接卡住了。尝试把DOM操作移到文档碎片里，渲染完再append，但滑动列表还是会有轻微卡顿。特别是加了CSS过渡效果后更明显： .l...
-
2
回答
44浏览
Schema.org的ItemList和Breadcrumb怎么配合使用？
在给电商网站做结构化数据优化时，我同时需要标记面包屑导航和产品分类列表。按照文档分别写了BreadcrumbList和ItemList的JSON-LD，但Google测试工具提示结构冲突。我尝试把两者...
-
2
回答
66浏览
动态高度长列表滚动时高度计算不准怎么办？
我用React写了一个带不同行数卡片的长列表，用了虚拟滚动后，当展开/折叠卡片时，滚动条总跳来跳去，卡顿还计算不准总高度。 尝试用ref手动测量每个卡片高度，把总高度存在state里，但更新时列表会突...
-
2
回答
32浏览
JavaScript错误聚合时如何处理堆栈路径差异导致的重复问题？
在用Sentry监控前端错误时，发现同一个错误因为调用路径不同被拆分成多个事件，比如一个组件在不同路由下的报错堆栈路径不同。虽然配置了stripPrefixes，但类似/pages/a/compone...
-
2
回答
56浏览
移动端滚动禁用橡皮筋效果在iOS上失效怎么办？
在开发移动端页面时，想彻底禁用列表的橡皮筋回弹效果。之前用了overflow: hidden和监听touch事件，安卓没问题但iOS依然有回弹，滚动还出现卡顿，求大佬指点！ 尝试过在容器加了以下代码：...
-
2
回答
42浏览
React组件卸载时如何正确清理多个useEffect订阅？
最近在做聊天功能时，一个组件同时订阅了WebSocket和API轮询，但发现组件卸载后依然在接收消息。我尝试在cleanup函数里写取消订阅的逻辑，但遇到变量作用域问题，控制台报错说"unsubscr...
-
2
回答
83浏览
虚拟滚动时为什么还是会有重复渲染和卡顿？
我在用虚拟滚动渲染长列表时，虽然实现了可视区域截取，但滚动到列表中段时偶尔会出现重复渲染的列表项，甚至卡顿一下。尝试用IntersectionObserver监听可视区域，但发现当快速滚动时计算的st...
-
1
回答
44浏览
自定义字体加载时文字闪烁怎么解决？
我在项目里用@font-face引入woff2字体文件，但页面加载时总会出现文字闪烁。试过设置font-display: swap和预加载，但效果不明显，有没有更好的优化方法？ @font-face ...
-
2
回答
31浏览
图片懒加载后为什么还是卡顿？
我在项目里用Intersection Observer做了图片懒加载，但页面滚动时还是卡顿，尝试过把换成标签并添加WebP格式，也调整了threshold到0.1，但效果不明显。代码结构是这样的： c...
-
1
回答
62浏览
Bundle分析工具显示第三方库体积异常，怎么排查具体来源？
最近在优化Vue项目时用webpack-bundle-analyzer做Bundle分析，发现第三方库总占比高达70%，但具体到每个包都显示[name]@^[version]，完全看不出具体是哪些库？...
-
2
回答
39浏览
频繁修改元素样式为什么会频繁触发重排重绘？
我在做一个实时更新的仪表盘，需要频繁修改元素的width和opacity样式，但发现页面卡顿得厉害。尝试把所有样式修改放在requestAnimationFrame里，但效果不明显。 比如这个进度条动...
-
2
回答
50浏览
合并CSS后部分页面样式错乱怎么办？
我在合并项目中的两个CSS文件时，发现登录页的按钮样式突然变成默认样式了。之前分别引入时没问题，合并后其他页面正常，就登录页出问题。试过调整合并顺序、检查选择器权重，都没解决。 合并前的HTML是这样...
-
2
回答
28浏览
vue-virtual-scroller滚动时滚动条不联动怎么解决？
在用vue-virtual-scroller做长列表时，发现滚动条和内容不同步，拖动滚动条内容没动，但滑动内容时滚动条能动。尝试过设置容器高度和overflow，还是不行。代码结构如下： <te...
-
2
回答
63浏览
Vue请求缓存导致数据更新不及时怎么办？
最近在做Vue项目时遇到个奇怪的问题，我给接口设置了Cache-Control: max-age=300，但页面刷新时数据总比实际延迟很久。比如商品价格修改后，用户需要等很久才能看到新价格。 我试过手...
-
2
回答
48浏览
骨架屏切换时为什么会出现闪烁？如何避免布局抖动？
我在给列表页加骨架屏时遇到问题，当真实内容加载出来后，骨架屏区域会突然跳动一下，看起来很卡。我用了opacity过渡，但闪烁反而更明显了。 代码结构大概是这样的，骨架屏用背景色模拟内容形状： <...
-
2
回答
58浏览
WebP图片压缩后文件变大了怎么办？
我在给电商网站优化图片时发现奇怪的事：.webp转换后反而比原图大，比如这张商品图： <img src="product.jpg" alt="商品图" sizes="(max-width: 60...
-
1
回答
53浏览
为什么启用usedExports后未使用的导出内容还是被打包进去了？
我在用Webpack打包React组件时启用了Tree Shaking，配置里设置了optimization.usedExports: true。但发现导入的模块里未被使用的导出内容仍然出现在打包结果...
-
2
回答
57浏览
位运算优化CSS动画时为啥反而更卡了？
最近在优化一个无限滚动的CSS动画，尝试用位运算代替除法计算位置偏移，但发现帧率反而从60掉到30了。 比如这段代码用位运算右移代替除以2： .scroll-item { transform: tra...
