优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
123浏览
移动端点击区域太小，怎么优化触摸体验？
在移动端列表页里，每个列表项的删除按钮点击区域特别小，经常点到旁边的操作按钮，怎么调整触摸区域更友好？ 试过给按钮加padding: 12px，但视觉上按钮变大了，点击区域还是没变，后来把按钮包裹在里...
-
2
回答
44浏览
sitemap.xml和HTML网站地图都要做吗？优先级怎么安排？
最近在给网站做SEO优化，发现需要同时配置sitemap.xml文件和一个HTML版的网站地图页面。我在robots.txt里已经写了Sitemap: /sitemap.xml，但同事说还要做一个纯H...
-
2
回答
50浏览
Redis缓存过期后怎么避免缓存击穿？
最近项目高并发接口出现缓存击穿问题，当Redis缓存过期后，大量请求直接打到数据库。我尝试用加锁方式让一个线程更新缓存，但发现锁竞争导致接口响应变慢，而且偶尔还是会有脏数据穿透，有没有更好的解决方案？...
-
2
回答
40浏览
Vue项目集成APM监控后路由切换变慢怎么办？
最近给公司项目接入了APM监控，但发现路由切换时渲染时间比之前多了200ms左右。我按文档在main.js里初始化了agent，还在路由守卫里加了span追踪，但具体是哪里出了问题呢？ 比如这个代码示...
-
2
回答
95浏览
为什么我的模块未使用代码无法被Tree Shaking清除？
我在用Webpack打包项目时启用了Tree Shaking，但发现即使某些模块的方法没有被调用，打包后的文件里还是包含了它们。比如我定义了一个工具类：export function useA() {...
-
2
回答
70浏览
为什么使用CommonChunkPlugin后common.js仍被重复打包到多个入口chunk里？
在优化多页面应用时，我配置了CommonChunkPlugin提取公共代码，但发现生成的common.js仍然被重复打包到每个入口chunk里。明明设置了name和minChunks参数，打包后的di...
-
2
回答
58浏览
对象池复用DOM元素时内存占用反而更高怎么办？
最近在尝试用对象池优化一个高频创建销毁DOM元素的动画组件，但发现内存占用反而更高了，这是为什么呢？ 我按照网上的教程实现了简单的对象池，把废弃的DOM元素存到数组里复用： class DOMPool...
-
2
回答
98浏览
移动端1px边框在不同手机显示粗细不一怎么办？
最近在做移动端适配时遇到了个烦心事，给导航栏加了1px边框，结果在iPhoneX显示正常，但到了华为nova9就变成2px了，三星手机甚至更宽... 我按教程用了双倍边框加缩放的方法，代码是这样的： ...
-
2
回答
50浏览
React路由懒加载后打包体积没变化，哪里出问题了？
大家好，我在给React项目做代码分割时遇到了奇怪的问题。按照文档用React.lazy和配置了路由懒加载，像这样： import { Routes, Route } from 'react-rout...
-
2
回答
66浏览
为什么我的Vue项目启用了HTTP/3但网络面板还是显示HTTP/2？
我最近在Vue项目里用fetch请求接口时，发现浏览器网络面板始终显示协议是HTTP/2。服务器已经配置了QUIC和HTTP/3，也确认过CDN支持。尝试过清除缓存、换Edge和Chrome最新版测试...
-
2
回答
67浏览
BFF聚合时如何优化多端请求差异导致接口重复？
最近在做BFF聚合时发现移动端和Web端的请求参数差异大，比如移动端需要精简字段而Web端要完整数据，后端为此开了两套接口，维护起来特别麻烦。尝试在BFF层统一处理参数转换，但跨域配置总报错，该怎么优...
-
2
回答
77浏览
为什么用了React.lazy和Suspense后首屏加载反而变慢了？
我在给React项目做代码分割优化时，把一个大组件用React.lazy包裹了，然后用Suspense包裹渲染。但实际测试发现首屏加载时间比之前还长，控制台显示初始包反而增加了。这是为什么呢？ imp...
-
2
回答
67浏览
SVG图标在深色背景上显示模糊怎么办？
最近把项目里的PNG图标换成SVG后，发现图标在深色背景区域看起来特别模糊。用的是内联SVG加CSS控制颜色，但调整了fill属性好像没效果。 .icon { width: 24px; fill: c...
-
2
回答
97浏览
闭包引用导致内存泄漏怎么办？循环里用函数保存变量内存一直不释放
我在写一个数据监控组件时遇到了问题，用for循环给多个DOM元素绑定事件监听，每个监听函数里引用了循环变量i。发现即使元素被移除了，内存监控工具显示相关函数和元素节点都没被回收。 尝试过把变量改为le...
-
2
回答
99浏览
转换为WebP后图片显示空白怎么办？
我刚把项目里的JPG图片转成WebP格式，但页面上全显示空白了... 之前用的是普通标签，改成WebP路径后这样写的： <img src="logo.webp" alt="logo" width...
-
2
回答
51浏览
React中使用数据预取时，如何避免预加载资源被其他请求挤占导致白屏？
我在开发单页应用时，用预加载详情页数据，但发现当用户快速切换列表项时，多个预加载请求会同时发起。最近遇到过极端情况，页面突然出现白屏，控制台显示"Too Many Requests"错误，推测是预加载...
-
2
回答
62浏览
虚拟滚动列表为何仍卡顿？
最近在做一个长列表展示页面，数据量大概有几千条。考虑到性能问题，我尝试使用了虚拟滚动技术来优化。但是即使使用了react-window库，当快速滚动时页面还是会有明显的卡顿现象。 我的代码如下： im...
-
2
回答
66浏览
如何有效减少页面的重排与重绘？
最近在优化一个比较复杂的单页应用，发现滚动或者用户交互时性能不太好。用Chrome开发者工具看了看，发现重排和重绘挺频繁的。 试过使用CSS transform代替left/top属性移动元素，确实减...
-
2
回答
66浏览
如何在React Query中正确处理分页数据？
最近在项目里用React Query加载分页列表，但是当用户快速切换页面时，旧的数据请求会覆盖新的结果。试过调整useQuery的staleTime选项，但效果不明显，还是会出现数据错乱的情况。 有人...
-
2
回答
150浏览
长列表滚动时内存占用高怎么办？
最近在做一个展示大量数据的页面，用的是React。发现随着列表长度增加，内存占用越来越高，即使使用了虚拟滚动也感觉效果一般。有没有什么好的办法可以进一步优化内存呢？已经试过减少不必要的渲染逻辑，但还是...
