优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
64浏览
微交互过渡动画在移动端卡顿怎么办？
在做按钮点击微交互时，给按钮加了0.3秒的scale动画，结果在iOS上滑动页面时明显卡顿，有什么优化方法？ 尝试过设置will-change: transform，但效果不明显。代码是这样的：.bu...
-
1
回答
41浏览
预获取（prefetch）在单页应用中如何正确使用？为什么我的页面加载反而变慢了？
我在开发一个Vue单页应用时，尝试给下一页的图片列表页面添加预获取。按文档写了类似下面的代码，但发现首页加载反而变慢了，控制台显示预加载了大量图片资源。这是不是预获取用错了？ <template...
-
2
回答
75浏览
前端监控告警阈值怎么设？频繁误报怎么办？
最近给项目加了API响应时间监控，用Prometheus+Grafana设置告警，但总是收到"响应时间超过2秒"的误报... 之前试过静态阈值if(responseTime > 2000)，但深...
-
2
回答
50浏览
分页加载时如何动态计算起始索引？
在React项目里实现分页加载，发现计算起始索引的公式有问题。我用了startIndex = (page - 1) * pageSize，但切换页码时数据会重复显示，比如从第3页跳到第1页后列表还是显...
-
2
回答
42浏览
动态网站用JavaScript生成sitemap.xml后，为什么爬虫没抓取到？
在Vue项目里，我通过遍历路由生成sitemap.xml文件并放在public目录，但Google Search Console提示未检测到。检查文件确实存在，robots.txt也添加了Sitema...
-
2
回答
24浏览
Brotli压缩后JS文件反而变大，是配置问题还是服务器不支持？
我用Express配置了Brotli压缩，但发现压缩后的JS文件比Gzip版本还大，这是怎么回事？ 我按照网上的教程在Node服务里这样写配置： const compression = require...
-
2
回答
43浏览
虚拟列表实现时，为什么滚动到底部后内容错位了？
在给项目加虚拟列表优化时，卡顿问题解决了但滚动到底部时，列表项突然错位了。我用的是基于高度计算的虚拟列表方案，滚动到接近底部时会自动加载新数据，但新加载的内容位置会突然跳到中间。 尝试过调整可视区域计...
-
2
回答
41浏览
移动端点击区域太小，怎么优化触摸体验？
在移动端列表页里，每个列表项的删除按钮点击区域特别小，经常点到旁边的操作按钮，怎么调整触摸区域更友好？ 试过给按钮加padding: 12px，但视觉上按钮变大了，点击区域还是没变，后来把按钮包裹在里...
-
2
回答
31浏览
sitemap.xml和HTML网站地图都要做吗？优先级怎么安排？
最近在给网站做SEO优化，发现需要同时配置sitemap.xml文件和一个HTML版的网站地图页面。我在robots.txt里已经写了Sitemap: /sitemap.xml，但同事说还要做一个纯H...
-
2
回答
25浏览
Redis缓存过期后怎么避免缓存击穿？
最近项目高并发接口出现缓存击穿问题，当Redis缓存过期后，大量请求直接打到数据库。我尝试用加锁方式让一个线程更新缓存，但发现锁竞争导致接口响应变慢，而且偶尔还是会有脏数据穿透，有没有更好的解决方案？...
-
2
回答
26浏览
Vue项目集成APM监控后路由切换变慢怎么办？
最近给公司项目接入了APM监控，但发现路由切换时渲染时间比之前多了200ms左右。我按文档在main.js里初始化了agent，还在路由守卫里加了span追踪，但具体是哪里出了问题呢？ 比如这个代码示...
-
2
回答
49浏览
为什么我的模块未使用代码无法被Tree Shaking清除？
我在用Webpack打包项目时启用了Tree Shaking，但发现即使某些模块的方法没有被调用，打包后的文件里还是包含了它们。比如我定义了一个工具类：export function useA() {...
-
2
回答
53浏览
为什么使用CommonChunkPlugin后common.js仍被重复打包到多个入口chunk里？
在优化多页面应用时，我配置了CommonChunkPlugin提取公共代码，但发现生成的common.js仍然被重复打包到每个入口chunk里。明明设置了name和minChunks参数，打包后的di...
-
2
回答
37浏览
对象池复用DOM元素时内存占用反而更高怎么办？
最近在尝试用对象池优化一个高频创建销毁DOM元素的动画组件，但发现内存占用反而更高了，这是为什么呢？ 我按照网上的教程实现了简单的对象池，把废弃的DOM元素存到数组里复用： class DOMPool...
-
2
回答
49浏览
移动端1px边框在不同手机显示粗细不一怎么办？
最近在做移动端适配时遇到了个烦心事，给导航栏加了1px边框，结果在iPhoneX显示正常，但到了华为nova9就变成2px了，三星手机甚至更宽... 我按教程用了双倍边框加缩放的方法，代码是这样的： ...
-
2
回答
27浏览
React路由懒加载后打包体积没变化，哪里出问题了？
大家好，我在给React项目做代码分割时遇到了奇怪的问题。按照文档用React.lazy和配置了路由懒加载，像这样： import { Routes, Route } from 'react-rout...
-
2
回答
27浏览
为什么我的Vue项目启用了HTTP/3但网络面板还是显示HTTP/2？
我最近在Vue项目里用fetch请求接口时，发现浏览器网络面板始终显示协议是HTTP/2。服务器已经配置了QUIC和HTTP/3，也确认过CDN支持。尝试过清除缓存、换Edge和Chrome最新版测试...
-
1
回答
45浏览
BFF聚合时如何优化多端请求差异导致接口重复？
最近在做BFF聚合时发现移动端和Web端的请求参数差异大，比如移动端需要精简字段而Web端要完整数据，后端为此开了两套接口，维护起来特别麻烦。尝试在BFF层统一处理参数转换，但跨域配置总报错，该怎么优...
-
1
回答
50浏览
为什么用了React.lazy和Suspense后首屏加载反而变慢了？
我在给React项目做代码分割优化时，把一个大组件用React.lazy包裹了，然后用Suspense包裹渲染。但实际测试发现首屏加载时间比之前还长，控制台显示初始包反而增加了。这是为什么呢？ imp...
-
2
回答
42浏览
SVG图标在深色背景上显示模糊怎么办？
最近把项目里的PNG图标换成SVG后，发现图标在深色背景区域看起来特别模糊。用的是内联SVG加CSS控制颜色，但调整了fill属性好像没效果。 .icon { width: 24px; fill: c...
