优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
41浏览
全局变量太多导致内存占用高，该怎么优化？
最近做项目时发现页面越用越卡，打开性能面板一看内存快爆了。我猜是因为在多个 JS 文件里用了不少全局变量存状态，比如用户信息、配置项这些。试过把部分数据移到闭包里，但有些地方又得跨模块访问，改起来很麻...
-
1
回答
49浏览
React 项目中动态导入组件后样式丢失了怎么办？
我在用 React 做代码分割，用 React.lazy 动态加载一个组件，结果这个组件的 CSS 样式完全没生效，页面布局都乱了。 我试过把 import 放在组件内部，也试过用 Suspense ...
-
2
回答
48浏览
viewport 设置后页面在手机上还是缩放异常怎么办？
我给移动端页面加了 viewport meta 标签，但某些安卓机上打开还是显示特别小，像是没生效一样。明明写了 width=device-width，难道还要配合 CSS 做什么处理？ 这是我现在用...
-
1
回答
51浏览
React组件卸载后订阅没清理，内存泄漏怎么解决？
我在用React做聊天功能，组件里用了WebSocket监听消息。每次切换页面再回来，发现消息会重复收到好几遍，怀疑是之前订阅没清理掉。 我试过在useEffect里return一个清理函数，但好像没...
-
1
回答
50浏览
Intersection Observer 预加载图片不生效？
我用 Intersection Observer 做图片懒加载，但有时候图片根本没触发加载，尤其是快速滚动的时候。 我试过把 rootMargin 设成 '50px'，也检查了 observer 是否...
-
2
回答
55浏览
骨架屏在 Vue 里怎么做到数据加载完自动隐藏？
我用 Vue3 写了个商品列表页，想加个骨架屏提升体验。现在问题是：骨架屏显示出来了，但数据加载完成后不知道该怎么让它自动消失。我试过用 v-if 绑定 loading 状态，但有时候接口返回太快，骨...
-
1
回答
29浏览
图片懒加载时占位图怎么保持宽高比不抖动？
我在做图片懒加载，用一个灰色div当占位图，但真实图片加载后页面会跳动，因为不知道原图尺寸。有没有办法提前固定容器比例？ 试过用padding-top百分比方案，但需要后端返回宽高，现在接口没给这些数...
-
1
回答
31浏览
esbuild 打包后 CSS 丢失了怎么办？
我用 esbuild 打包一个 React 项目，结果发现样式全没了，页面变成纯文字裸奔状态。 我试过加 --loader:.css=css，也装了 esbuild-plugin-postcss，但还...
-
2
回答
58浏览
Meta标签对SEO真的有用吗？我加了但搜索结果没变化
最近在做公司官网的SEO优化，按教程在head里加了description和keywords这些meta标签，但一周过去了，Google搜索结果还是没变，是我写法有问题吗？ 页面其他部分都正常，CSS...
-
1
回答
28浏览
骨架屏加载时数据闪现怎么解决？
我在用 Vue 做一个商品列表页，加了骨架屏来优化首屏体验，但每次数据回来的时候会先闪一下空白，再显示真实内容，体验很割裂。明明骨架屏和真实结构是一样的，不知道是不是 v-if 切换时机的问题？ 我现...
-
2
回答
29浏览
如何准确监控前端页面的首屏加载时间？
我在用 Performance API 监控首屏时间，但发现不同设备差异很大，有时候取不到正确的 FCP 值，是不是我用的方法有问题？ 目前我是这样获取的： const observer = new ...
-
2
回答
38浏览
无限滚动加载时列表抖动是怎么回事？
我在用 React 做一个消息列表的无限滚动，每次滚动到底部就加载更多数据，但新数据一进来整个列表会突然跳一下，体验特别差。明明是 append 数据，为啥还会抖？ 我试过用 scrollTop 手动...
-
2
回答
15浏览
缓存更新后样式没生效，怎么破？
我用 webpack 打包的项目，每次改完 CSS 都会生成带 hash 的文件名，但线上用户有时候还是看到旧样式。我试过在 link 标签里加版本号，也确认服务器没开强缓存，可问题还是偶尔出现。 比...
-
1
回答
31浏览
图片加载太慢该怎么优化？
我们网站首页的 banner 图片特别大，用户打开页面时要等好几秒才显示出来，体验很差。 我已经试过把 PNG 转成 WebP 了，也用了 <picture> 标签做格式兼容，但首屏加载还...
-
1
回答
49浏览
Sentry 捕获不到 Vue 3 项目中的异步错误怎么办？
我在 Vue 3 项目里接入了 Sentry，同步错误能正常上报，但像 axios 请求失败这类异步错误完全捕获不到。已经按文档加了 Sentry.init 和 app.use(Sentry.crea...
-
1
回答
32浏览
移动端适配用 rem 还是 vw 更合适？
最近在做一个移动端 H5 项目，UI 给的设计稿是 375px 宽。我之前用的是 rem 配合 JS 动态设置根字体大小，但发现有些安卓机上字体渲染有点模糊。 听说现在很多人直接用 vw 单位做适配，...
-
1
回答
56浏览
SWR预加载数据后为什么组件还是会闪一下加载状态？
我在用SWR做数据预加载，明明在进入页面前就调用了fetcher，但组件首次渲染时还是会短暂显示loading状态，体验很不好。是我预加载的方式不对吗？ 我是在路由跳转前这样预加载的： import ...
-
1
回答
41浏览
数据预取时怎么避免重复请求？
我在用 React 做一个商品详情页，进入页面前想提前拉取商品数据。但发现如果用户快速切换路由，useEffect 里调用的 fetchProduct(id) 会被多次触发，导致同一个商品请求好几次。...
-
2
回答
26浏览
虚拟滚动列表在React中渲染空白，是哪里出错了？
我在用React实现一个长列表的虚拟滚动，数据有上万条，但页面只显示空白，滚动也没反应。我参考了网上的例子，用了固定高度和transform定位，但就是不渲染内容。 控制台没报错，数据也正常加载了，是...
-
1
回答
45浏览
Open Graph 标签设置了但分享时还是不显示预览图怎么办？
我在网站首页加了 Open Graph 的 meta 标签，包括 og:image，本地测试也确认图片路径是对的，用的是绝对 URL。但用微信或 Telegram 分享链接时，预览图要么不显示，要么显...
