优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
24浏览
移动端按钮快速点击穿透怎么解决？防抖加disabled都没用
移动端项目里有个提交按钮，用户快速点击时会出现多次请求。我给按钮加了disabled状态，同时用了防抖函数： function handleClick() { this.disabled = true...
-
2
回答
38浏览
React移动端按钮点击总是有延迟怎么办？
我在用React开发移动端时，点击按钮总会延迟好几百毫秒才触发，试过加ontouchend和设置touch-action: none都没用，这是什么情况啊？ import { useState } f...
-
1
回答
26浏览
React错误边界如何捕获子组件未处理的Promise rejection？
我在React项目里用错误边界组件包裹了一个异步请求的子组件，但发现当子组件里未处理的Promise被reject时，错误边界没有触发。我尝试在子组件里用try...catch包裹async函数，但依...
-
1
回答
29浏览
React函数组件中如何避免因函数重新创建导致子组件频繁渲染？
我在开发一个React项目时发现，父组件传递的函数每次重新渲染都会生成新引用，导致子组件不必要的重复渲染。比如下面这个搜索框组件： function SearchBar({ onSearch }) {...
-
1
回答
26浏览
移动端视频自动播放时加载卡顿怎么办？
我在给移动端页面加视频预览功能时，用了video标签自动播放，设置了muted和autoplay属性。但测试时发现视频加载特别卡，页面都卡成PPT了。 我尝试过把视频转成webm格式，还加了以下CSS...
-
1
回答
20浏览
Vite预构建配置后为什么依赖包还是没被预构建？
最近在优化项目构建速度时，按照文档给lodash配置了预构建，但打包后发现它还是被内联了。明明在vite.config.js里写了optimizeDeps.include，重启服务和清理缓存都没用，这...
-
1
回答
19浏览
为什么我的JavaScript计时器会导致内存泄漏？
我正在开发一个实时数据监控的仪表盘，用setInterval定时更新数据。但发现每次页面切换后内存都没释放，用开发者工具看DOM已经清空了，但内存占用一直涨。代码大致是这样的： function st...
-
1
回答
49浏览
Vue项目HMR更新后样式没变化是怎么回事？
在用Vue3+Vite开发时，修改组件样式后HMR虽然触发了更新，但页面样式就是不生效，得手动刷新才看得见变化，这正常吗？ 比如这个组件： <template> <div class...
-
1
回答
24浏览
移动端视频加载卡顿，自动播放设置有问题吗？
折腾了好几天移动端视频优化，发现视频在iPhone上加载特别卡顿，而且自动播放时偶尔会黑屏。我按照网上的方法设置了poster和muted，但效果不好。这是我的代码： <video class=...
-
1
回答
12浏览
短路求值时变量未定义报错该怎么处理？
在渲染列表时遇到问题，想用短路求值简化判断，但老是报错。比如写成item && item.name，当item是null时还能正常返回null，但如果item根本未定义就会报错。我试过...
-
2
回答
21浏览
如何减少字体子集导致的额外HTTP请求？
在项目里用Web字体时发现，每个字体文件都会单独发起HTTP请求，比如这样：@font-face{src:url('font.woff2')}，这样首屏加载好慢啊。 试过把字体文件转成base64内联...
-
1
回答
24浏览
React列表滚动卡顿，如何优化移动端性能？
大家好，我在开发一个移动端React列表页时遇到性能问题。当列表项超过50条后滚动就明显卡顿，尝试用React.memo和useCallback优化过，但效果不明显... 代码结构大概是这样（简化版）...
-
2
回答
190浏览
为什么Vendor分离后vendor.js反而比main.js还大？
在用Webpack做Vendor分离时，配置了splitChunks按需拆分第三方包，但生成的vendor.chunk.js居然比app代码还大两倍，加载反而更慢了。按照文档设置了cacheGroup...
-
1
回答
11浏览
React路由懒加载后页面刷新为什么会失去代码分割效果？
我在用React和React Router做路由懒加载，按照文档写了类似这样的代码：const About = React.lazy(() => import('./About'))，配合Sus...
-
2
回答
29浏览
CSS拆分后为什么Chunk还是没变小？
我在用Webpack打包项目时，把组件的CSS单独抽离成动态导入的文件，但生产环境里这些CSS还是被打包到vendors_chunk里了。我按文档写了这样的CSS： /* Button.module....
-
2
回答
16浏览
React项目HMR更新后样式没变化怎么办？
在开发React组件时用了CSS Modules，配置了HMR但遇到问题。修改CSS后页面内容更新了，样式却没变： // vite.config.js export default defineCon...
-
2
回答
21浏览
代码分割后动态加载分包时，如何处理依赖模块重复加载的问题？
我在用React.lazy实现代码分割时遇到问题。页面A和页面B都引用了lodash，按路由拆分的两个分包里都包含了lodash代码。虽然配置了webpack的splitChunks，但动态加载时发现...
-
1
回答
55浏览
Hover预加载时如何避免重复请求和资源浪费？
我在给产品页的商品缩略图做Hover预加载时遇到了问题，当鼠标快速移进移出多个图片时，控制台显示重复请求了同一个资源。我用了下面的代码，但发现即使移开后又移回来，还是会触发新的请求，这样会不会导致带宽...
-
1
回答
53浏览
CDN加速后静态资源加载反而变慢，该怎么排查？
最近给项目配置了某云CDN，按官方文档改了CNAME和缓存策略，但测试发现图片和JS文件加载时间反而比直接访问源站慢了1-2秒。我尝试过清除浏览器缓存、检查CDN状态码（都是200），还对比了DNS解...
-
2
回答
23浏览
移动端滚动卡顿时，怎么用Passive监听优化事件？
在优化移动端页面时，我给触摸事件加了{ passive: true }，滚动确实流畅了，但有个问题：touchMove里调用event.preventDefault()阻止滚动时完全没反应了，这是为什...
