优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
91浏览
图片压缩后体积没变小，是不是我方法用错了？
我在项目里用了 imagemin 压缩 PNG 图片，但发现打包后的文件大小几乎没变，这正常吗？ 我试过配置 quality 和 optimizationLevel，比如下面这样： imagemin(...
-
1
回答
76浏览
External外部化后线上报错找不到依赖怎么办？
我在用 Vite 打包项目时，把 lodash 和 axios 通过 external 配置外部化了，本地开发没问题，但部署到线上后控制台报 Uncaught ReferenceError: _ is...
-
1
回答
84浏览
Service Worker 缓存策略怎么让 React 页面首次加载更快？
我在用 Create React App 搭的项目里加了 Service Worker，想优化首屏加载速度。但发现用户第一次访问时还是得等所有 JS 加载完才能看到内容，缓存好像没起作用。我试过在 s...
-
2
回答
38浏览
渐进式渲染怎么做才能不闪屏？
我在做首屏优化，尝试用渐进式渲染先显示骨架屏再加载真实内容，但页面老是闪一下白屏或者布局跳动，体验很不好。 我现在的做法是用 visibility: hidden 隐藏内容区域，等数据回来再切 vis...
-
2
回答
31浏览
移动端弹窗打开后怎么防止背景滚动穿透？
我在做移动端页面时，点击按钮弹出一个 fixed 定位的弹窗，但发现手指在弹窗上滑动时，底下的页面还是会跟着滚动，这体验太差了。 试过给 body 加 overflow: hidden，但在 iOS ...
-
2
回答
30浏览
前端请求重试机制怎么避免无限循环？
我在做接口请求失败自动重试的功能，但有时候网络一直不好，重试就停不下来，页面直接卡死。我试过加个计数器限制重试3次，但代码写得有点乱，不确定是不是最佳实践。 比如现在用的是 fetch 封装的请求函数...
-
2
回答
26浏览
数据预取时怎么避免重复请求？
我在用 React 做一个商品详情页，进入页面前想提前拉取商品数据。但发现如果用户快速切换商品，会发起多个重复的请求，体验很不好。 我试过用 useRef 存请求状态，但还是没控制住。比如下面这段代码...
-
1
回答
44浏览
骨架屏在React中怎么避免闪屏问题？
我用React做列表页的骨架屏，数据加载很快时骨架屏一闪而过，体验很差。试过加setTimeout延迟隐藏，但感觉不靠谱。 现在代码是这样： const [loading, setLoading] =...
-
2
回答
19浏览
位运算判断奇偶数比取模更快吗？
我在优化一个高频调用的工具函数，看到有人说用位运算判断奇偶比 num % 2 更快，就试着改成 (num & 1) === 0。但实际测下来性能好像没差多少，甚至有时候更慢？是不是我用错了？ ...
-
2
回答
186浏览
Webpack 打包后的 JS 文件压缩没生效是怎么回事？
我用 Webpack 5 搭了个项目，明明配置了 TerserPlugin 做 JS 压缩，但打包出来的 main.js 还是格式化状态，注释和空格都在，体积特别大。开发环境没问题，但 product...
-
2
回答
26浏览
PerformanceObserver 在 Vue 里监听不到 longtask 是怎么回事？
我在 Vue 项目里想用 PerformanceObserver 监控长任务（longtask），但完全收不到回调，是不是写法有问题？ 已经确认浏览器支持 longtask（Chrome 100+），...
-
2
回答
40浏览
前端日志分级怎么做才合理？
我们项目现在所有日志都用console.log打，线上出问题根本没法快速定位，想按 info/warn/error 分级，但不知道怎么统一管理。 试过自己封装一个 logger，但团队有人还是直接用原...
-
1
回答
50浏览
Redis缓存穿透怎么处理才靠谱？
我在做商品详情页，用户输入不存在的商品ID时，每次都会打到数据库，感觉这就是缓存穿透。试过把空结果也缓存一下，但不确定该设多长的过期时间，而且担心缓存太多无效key会占内存。 现在用的是Node.js...
-
1
回答
31浏览
用户行为监控怎么避免重复上报？
我在做用户点击行为埋点，用的是 addEventListener 监听 click 事件，但发现同一个按钮快速点几次会触发多次上报，数据就失真了。 试过加个 flag 标记是否正在上报，但页面跳转快的...
-
1
回答
49浏览
CDN加载的CSS样式没生效，本地却正常？
我用CDN部署了网站的静态资源，但发现从CDN加载的CSS样式完全没生效，可本地打开index.html时样式是正常的。是不是CDN缓存的问题？还是MIME类型不对？ 我的CSS文件里就写了点基础样式...
-
2
回答
34浏览
长列表滚动卡顿，内存占用高怎么优化？
我在做一个消息列表页，数据有上千条，即使只渲染可视区域，滚动还是特别卡，而且内存占用一直很高。我试过用 React 的虚拟滚动库，但效果不明显，是不是 CSS 写得有问题？ 比如下面这段样式，会不会导...
-
1
回答
40浏览
组件卸载后订阅没清理，内存泄漏怎么解决？
我在 React 组件里用 useEffect 订阅了一个全局事件，但切换页面后发现回调还在执行，明显是内存泄漏了。试过在 useEffect 返回函数里 unsubscribe，但好像没生效？ 下面...
-
1
回答
32浏览
IgnorePlugin 真的能减少打包体积吗？我配置了好像没效果
我在用 Webpack 打包项目时，听说 IgnorePlugin 可以忽略某些模块来减小体积。比如我想跳过 moment 的本地化文件，就照着文档加了插件，但打完包发现 vendor.js 一点没变...
-
2
回答
31浏览
Intersection Observer 预加载图片为啥没触发？
我在用 Intersection Observer 做图片懒加载，但滚动到图片位置时回调根本没执行，不知道是哪里写错了。 已经把 rootMargin 设成 '100px' 了，也确认元素在视口内，但...
-
1
回答
53浏览
如何正确设置关键CSS资源的加载优先级？
我在优化页面首屏加载速度时，发现关键CSS还是被浏览器低优先级加载了。明明用了preload，但Lighthouse还是提示“未发现关键请求链”。 我试过把关键样式内联，也试过用preload预加载外...
