优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
26浏览
WeakMap 能不能用来缓存 DOM 元素的计算结果？
我在做一个动态表格，想用 WeakMap 缓存每个单元格的格式化结果，避免重复计算。但发现缓存好像没生效，是不是我用错了？ 我试过这样写： const cache = new WeakMap(); f...
-
2
回答
33浏览
Memory面板里怎么判断是不是内存泄漏？
我在用 Chrome DevTools 的 Memory 面板做性能分析，拍了几次快照，看到有些对象数量一直在涨，但不确定是不是真的内存泄漏。比如我反复打开关闭一个弹窗组件，按理说 DOM 和事件监听...
-
2
回答
28浏览
External外部化后样式丢失是怎么回事？
我用Webpack把Ant Design外部化了，结果页面样式全没了，控制台也没报错。本地开发时样式正常，一上线就出问题。 我试过在html里手动引入CDN的CSS，但还是不行。是不是External...
-
2
回答
83浏览
Memory Cache 为什么有时候不生效？
我在开发一个图片预览功能，发现有些图片明明已经加载过一次了，但刷新页面后还是重新请求，Memory Cache 没有命中。我用的是 new Image() 动态加载图片，控制台 Network 里看到...
-
2
回答
31浏览
Tree Shaking 为什么没生效？打包体积还是很大
我用的是 Vite + React，明明只 import 了 lodash 的 debounce，但打包后整个 lodash 都被打进去了，体积一点没减小。是不是 Tree Shaking 没生效？ ...
-
2
回答
28浏览
长列表滚动卡顿，怎么优化内存占用？
我用 React 渲染一个上千条消息的聊天列表，虽然用了虚拟滚动，但内存还是涨得特别快，页面越滚越卡。是不是没清理掉不可见的 DOM 节点？ 目前是用 react-window 的 FixedSize...
-
2
回答
27浏览
如何实现页面加载进度条？
我在做项目首页，想加个顶部的加载进度条，但不知道怎么监听整体资源加载进度。 试过用 window.onload，但只能知道什么时候加载完，没法拿到中间的进度。也查了 performance.getEn...
-
1
回答
34浏览
接口太多导致页面加载慢，怎么合并请求？
我们首页要同时拉用户信息、订单列表和系统通知，现在是三个独立的 fetch，感觉太慢了。有没有办法把它们合并成一个请求？ 我试过用 Promise.all，但后端说这样还是三次数据库查询，没减轻压力。...
-
2
回答
29浏览
react-window 渲染空白，数据明明有却显示不出来？
我用 react-window 的 FixedSizeList 渲染一个长列表，数据是从接口拿的，console.log 也能看到数组有内容，但页面就是一片空白，Item 组件根本没执行。 我试过把数...
-
2
回答
26浏览
延迟加载JS会影响首屏渲染吗？
我在做首屏优化，把非关键JS用defer和动态import()延迟加载了，但发现首屏内容反而变慢了，这是为啥？ 比如我把一个工具库改成这样： document.addEventListener(�...
-
2
回答
28浏览
为什么用 transform 做动画还是会卡顿？
我最近在 Vue 里做一个拖拽卡片的效果，为了性能特意用了 transform 来做位移，但快速拖动时还是明显掉帧。网上都说 transform 不会触发重排，应该很流畅才对，是不是我哪里写错了？ 我...
-
1
回答
999浏览
Cache-loader 加了反而变慢，是我配置错了吗？
我最近在项目里加了 cache-loader 想提升构建速度，但发现第二次构建比没加还慢，有点懵。 我是在 babel-loader 前面加的，配置大概是这样： module.exports = { ...
-
2
回答
34浏览
预加载图片在Vue中怎么写才有效？
我在用Vue做图片轮播，想提前加载下一张图避免切换时白屏，但加了preload好像没起作用。试过在created里new Image()，也试过在template里加，都不行。 下面是我现在的写法，是...
-
2
回答
25浏览
Tree Shaking 为什么没生效？我明明用了 ES6 模块啊
我在用 Webpack 打包一个 React 项目，发现 lodash 的整个包都被打包进去了，哪怕我只 import 了一个 debounce。我查了文档说 Tree Shaking 要求用 ES6...
-
2
回答
27浏览
iOS安全区域适配导致页面底部被遮挡怎么办？
我在做移动端页面时，iPhone X及以上机型的底部导航栏总是被系统手势栏挡住，加了padding-bottom: env(safe-area-inset-bottom)也没用，是不是哪里写错了？ 我...
-
1
回答
32浏览
如何根据网络状态动态调整预加载策略？
我在做图片懒加载时想结合网络感知，比如在 4G/5G 下多预加载几张，WiFi 下全量加载，但 navigator.connection 好像兼容性不太好？ 试过用 navigator.connect...
-
1
回答
34浏览
智能预加载怎么判断用户下一步要访问哪个页面？
我最近在做首页性能优化，想用智能预加载提前加载用户可能点击的页面资源，但完全不知道该怎么预测用户行为。 试过用 IntersectionObserver 监听可视区域内的链接，但很多关键按钮并不在首屏...
-
2
回答
29浏览
横竖屏切换时布局错乱怎么解决？
我用 Vue 做了个移动端页面，横屏时内容被拉伸变形，竖屏又显示不全，试过用媒体查询但效果不稳定。有没有更可靠的适配方案？ 目前是这样写的： <template> <div clas...
-
2
回答
39浏览
Meta标签怎么写才能让搜索引擎更好地收录页面？
我最近在做公司官网的SEO优化，但发现页面在百度和Google的搜索结果里标题和描述都不对。明明我在HTML里写了meta标签，比如<meta name="description" conten...
-
2
回答
44浏览
Tree Shaking 为什么没生效？按需引入 lodash 还是打包了整个库？
我用的是 webpack5 + babel，想按需引入 lodash 的 debounce 方法，但打包后发现整个 lodash 库都被打进去了，体积一点没减。 我试过直接 import { debo...
