优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
108浏览
为什么Webpack配置了Tree Shaking后，某些未引用的代码依然被打包进去？
我在项目里配置了Webpack的Tree Shaking，但发现未使用的模块还是被打包了。比如这个组件里只用了utils.js的add函数： // component.jsx import { add...
-
2
回答
78浏览
React里用了modulepreload标签预加载JS模块，但资源没加载成功怎么办？
我在React组件里用标签预加载了一个动态导入的JS模块，按文档写了modulepreload，但控制台网络面板里根本看不到请求，也没报错。代码检查了好几遍，属性都没问题，这是怎么回事？ // App...
-
2
回答
130浏览
React中使用闭包导致内存泄漏，该怎么优化？
在开发React列表组件时发现内存泄漏问题，代码里用闭包保存了状态变量。比如这个定时器示例： useEffect(() => { const timer = setTimeout(() =>...
-
2
回答
82浏览
DNS预加载没生效？怎么设置dns-prefetch才能让图片加载更快？
我在页面里加了，但图片加载速度没变，这是为啥？ 场景是这样的：网站轮播图的图片都来自img.example.com域名，我按教程加了dns-prefetch标签。但用Chrome开发者工具看网络面板，...
-
2
回答
97浏览
生产环境如何根据日志级别动态控制输出？
最近在给公司项目做日志分级优化，想让开发环境输出所有日志，测试环境只留warn和error，生产环境只显示error。但按照网上的方法用process.env.NODE_ENV包裹console语句后...
-
1
回答
66浏览
如何实现前端日志分级过滤，避免生产环境输出冗余信息？
现在在做监控优化时发现，开发阶段用了很多console.log和console.warn，但生产环境跑起来后日志量太大影响性能。尝试用process.env.NODE_ENV做条件判断包裹日志： if...
-
2
回答
54浏览
Tree虚拟化实现时如何解决深度嵌套节点渲染卡顿？
我在用React实现公司组织架构的Tree虚拟化列表时遇到问题，数据有20层嵌套结构。虽然用了react-virtualized和react-window控制可视区域，但展开多级子节点后滚动还是卡得要...
-
2
回答
67浏览
骨架屏在数据加载完成前如何保持位置不偏移？
在用Vue做文章列表页时，我给每个卡片加了骨架屏，但真实数据加载完成后整个布局会突然跳动。之前试过给骨架屏设置固定高度，但滚动条会闪一下，改用flex布局后间距又对不齐。现在用的是这样写的： <...
-
2
回答
49浏览
React中如何实现渐进增强的图片懒加载兼容旧浏览器？
我在用React做图片懒加载时遇到了问题，用IntersectionObserver实现的方案在IE11完全失效，基础图片都不显示了。我试过在组件里这样写： function LazyImage({ ...
-
2
回答
41浏览
WebP图片转换后，如何量化评估质量损失？
在React项目里用sharp库把JPG转WebP时，设置quality=80后图片边缘有点模糊。有没有什么客观指标或工具能帮我评估质量损失？ 我试过用文件大小对比和视觉检查，但这样太主观了。比如下面...
-
2
回答
63浏览
为什么我的Service Worker缓存策略在页面更新后仍然加载旧资源？
我在用Service Worker做静态资源缓存时遇到问题。部署了新版本后，明明控制台显示已安装新Worker，但页面还是加载旧的/calculation.js文件。 尝试过手动清除浏览器缓存和注册新...
-
2
回答
39浏览
WebP图片懒加载时，为什么部分图片显示成空白？
我在用Intersection Observer做WebP图片懒加载时，发现Chrome能正常显示，但Firefox有30%几率显示空白图片。之前用标签的srcset属性根据浏览器支持动态切换WebP...
-
2
回答
64浏览
Skeleton骨架屏如何动态匹配不同分辨率的图片占位？
最近在做首屏骨架屏优化时遇到个问题，当页面在不同分辨率下，我用固定宽高的div模拟的商品图片占位框，加载真实图片后总会出现比例错乱。 比如在移动端横屏时，.skeleton-img设置的width: ...
-
2
回答
79浏览
WebP有损压缩后渐变背景出现明显色块怎么办？
在项目里把图片换成WebP格式后，产品图的渐变背景出现了明显色块，调整quality参数也没太大改善。比如这张背景图： <picture> <source srcset="bg.we...
-
2
回答
32浏览
空状态页面如何设计才能提升用户留存？有没有具体优化技巧？
最近在做电商商品列表页的空状态优化，现在用的是简单的div显示“暂无商品”和一个刷新按钮，但用户流失率很高。试过加个插画和文案，但转化率没明显变化，该怎么提升互动呢？ 之前参考了其他平台案例，发现有的...
-
2
回答
40浏览
Vue项目中使用IntersectionObserver实现加载进度条导致滚动卡顿怎么办？
在Vue项目里想用IntersectionObserver检测关键资源加载进度，然后发现滚动时页面卡顿，特别是资源较多时更明显。我尝试给每个资源元素添加了观察器，然后在回调里计算总进度： const ...
-
2
回答
44浏览
requestIdleCallback优化长列表时为什么还是会卡顿？
我用虚拟列表渲染上千条数据时，尝试用requestIdleCallback分批渲染，但滚动到后面还是明显卡顿。之前试过分页和简单的节流函数都没彻底解决，现在这样写： function renderBa...
-
2
回答
47浏览
为什么我的LCP评分总是卡在2.5秒以上？优化后还是没达标
最近在优化网站LCP指标，把关键资源压缩到200KB以内了，也用了标签，但实测LCP还是2.6秒左右。我用Lighthouse测试发现，那个大图的传输时间显示1.8秒，为啥总时间这么高？ 尝试过把图片...
-
2
回答
68浏览
Memory Cache缓存导致动态组件样式残留怎么办？
在做页面切换时用了Memory Cache缓存组件状态，但发现上一个页面的CSS变量样式残留了，比如这个示例： :root { --primary-color: #4CAF50; } .dynamic...
-
2
回答
82浏览
为什么用LocalStorage存大对象时浏览器提示内存溢出？
在项目里用localStorage.setItem('userConfig', JSON.stringify(bigObj))存了一个包含几百个表单状态的大对象，结果Chrome控制台突然报错Unca...
