优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
11浏览
数据预取时使用IntersectionObserver，为什么预加载的图片反而延迟显示？
在开发图片列表页时，我用IntersectionObserver做预加载，但发现预加载的图片比普通加载还慢。代码逻辑没问题，但实际效果反直觉，求大神指点！ 我的实现是这样写的： const obser...
-
1
回答
4浏览
预加载图片时为什么会阻塞关键CSS加载？
我在电商详情页用预加载商品轮播图，但发现首屏渲染变慢了。用Lighthouse检查发现关键CSS的加载时间被图片占用了，这是为什么？ 尝试过这样写： <link rel="preload" hr...
-
1
回答
3浏览
React组件卸载后WeakMap里的DOM引用没被回收怎么办？
在React项目里用WeakMap存DOM引用，但发现组件卸载后内存没降下来。比如这样写的： const domRefs = new WeakMap(); function MyComponent()...
-
1
回答
4浏览
如何用惰性求值优化频繁调用的复杂计算函数？
在开发实时数据可视化时，我发现每帧都要调用一个计算坐标坐标的函数calculatePosition()，里面涉及大量三角函数运算。虽然用了缓存但参数每次都会变，导致缓存命中率很低，帧率明显下降。 我尝...
-
2
回答
1浏览
虚拟滚动实现后为什么滚动还是卡顿？
我在用vue-virtual-scroller实现表格虚拟滚动，但滚动到中间区域时依然卡顿。已经设置好itemSize=50，可视区高度3000px，数据量5000条。尝试过调整scroll-marg...
-
2
回答
2浏览
requestIdleCallback优化长列表时回调没触发咋回事？
我在用虚拟滚动做长列表优化时，把渲染逻辑塞进了requestIdleCallback，但滚动到后面几屏后发现卡顿更严重了，有时候回调函数根本没执行，这是哪里出问题了？ 尝试过这样写： function...
-
1
回答
3浏览
为什么用modulepreload预加载CSS文件时浏览器没触发加载？
最近在优化项目预加载策略时遇到个怪问题，我按照文档给CSS文件加了modulepreload标签，但开发者工具网络面板完全没反应。换成preload马上就加载了，这是不是说明modulepreload...
-
1
回答
13浏览
Vue项目用了WebP图片但旧浏览器显示不出来怎么办？
最近在Vue项目里把图片都换成WebP格式了，发现Chrome显示正常，但测试IE11和部分安卓机完全看不到图片。我查了文档知道这些浏览器不支持WebP，试过用标签加srcset属性：<img ...
-
1
回答
10浏览
域名分片后图片加载反而变慢了怎么办？
最近在优化电商网站的图片加载，尝试用域名分片把图片分到static1和static2两个子域名。但发现某些图片加载时间比之前更长了，这是怎么回事？ 我的HTML结构是这样写的： <img src...
-
1
回答
2浏览
为什么循环生成大量DOM元素时页面会卡顿？有没有更好的优化方法？
我在用JavaScript循环生成2000条带样式的列表项时，页面直接卡住了。尝试把DOM操作移到文档碎片里，渲染完再append，但滑动列表还是会有轻微卡顿。特别是加了CSS过渡效果后更明显： .l...
-
1
回答
8浏览
Schema.org的ItemList和Breadcrumb怎么配合使用？
在给电商网站做结构化数据优化时，我同时需要标记面包屑导航和产品分类列表。按照文档分别写了BreadcrumbList和ItemList的JSON-LD，但Google测试工具提示结构冲突。我尝试把两者...
-
2
回答
10浏览
动态高度长列表滚动时高度计算不准怎么办？
我用React写了一个带不同行数卡片的长列表，用了虚拟滚动后，当展开/折叠卡片时，滚动条总跳来跳去，卡顿还计算不准总高度。 尝试用ref手动测量每个卡片高度，把总高度存在state里，但更新时列表会突...
-
1
回答
3浏览
JavaScript错误聚合时如何处理堆栈路径差异导致的重复问题？
在用Sentry监控前端错误时，发现同一个错误因为调用路径不同被拆分成多个事件，比如一个组件在不同路由下的报错堆栈路径不同。虽然配置了stripPrefixes，但类似/pages/a/compone...
-
1
回答
25浏览
移动端滚动禁用橡皮筋效果在iOS上失效怎么办？
在开发移动端页面时，想彻底禁用列表的橡皮筋回弹效果。之前用了overflow: hidden和监听touch事件，安卓没问题但iOS依然有回弹，滚动还出现卡顿，求大佬指点！ 尝试过在容器加了以下代码：...
-
2
回答
4浏览
React组件卸载时如何正确清理多个useEffect订阅？
最近在做聊天功能时，一个组件同时订阅了WebSocket和API轮询，但发现组件卸载后依然在接收消息。我尝试在cleanup函数里写取消订阅的逻辑，但遇到变量作用域问题，控制台报错说"unsubscr...
-
2
回答
51浏览
虚拟滚动时为什么还是会有重复渲染和卡顿？
我在用虚拟滚动渲染长列表时，虽然实现了可视区域截取，但滚动到列表中段时偶尔会出现重复渲染的列表项，甚至卡顿一下。尝试用IntersectionObserver监听可视区域，但发现当快速滚动时计算的st...
-
1
回答
4浏览
自定义字体加载时文字闪烁怎么解决？
我在项目里用@font-face引入woff2字体文件，但页面加载时总会出现文字闪烁。试过设置font-display: swap和预加载，但效果不明显，有没有更好的优化方法？ @font-face ...
-
1
回答
9浏览
图片懒加载后为什么还是卡顿？
我在项目里用Intersection Observer做了图片懒加载，但页面滚动时还是卡顿，尝试过把换成标签并添加WebP格式，也调整了threshold到0.1，但效果不明显。代码结构是这样的： c...
-
1
回答
37浏览
Bundle分析工具显示第三方库体积异常，怎么排查具体来源？
最近在优化Vue项目时用webpack-bundle-analyzer做Bundle分析，发现第三方库总占比高达70%，但具体到每个包都显示[name]@^[version]，完全看不出具体是哪些库？...
-
2
回答
6浏览
频繁修改元素样式为什么会频繁触发重排重绘？
我在做一个实时更新的仪表盘，需要频繁修改元素的width和opacity样式，但发现页面卡顿得厉害。尝试把所有样式修改放在requestAnimationFrame里，但效果不明显。 比如这个进度条动...
