优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
60浏览
递归函数导致页面卡死，怎么优化？
我在写一个树形结构的遍历功能，用了递归处理子节点，但数据一多页面就直接卡住不动了。 试过加个深度限制，但业务上又不能丢数据。有没有办法把递归改成非阻塞的方式？比如用循环或者分片处理？ 这是我现在用的递...
-
2
回答
50浏览
Vue路由切换时如何实现平滑过渡动画？
我在用 Vue 3 + Vue Router 做页面切换，想加个淡入淡出的过渡效果，但试了 transition 包 router-view 后动画根本不触发，页面直接闪过去。是不是我写法有问题？ 这...
-
2
回答
25浏览
边缘计算怎么提升前端页面加载速度？
我们最近在做首屏性能优化，听说边缘计算能减少延迟，但不太清楚具体怎么用在前端项目里。比如静态资源放 CDN 算不算边缘计算？还是说必须用像 Cloudflare Workers 这种？ 试过把 JS ...
-
2
回答
39浏览
缓存穿透导致接口被恶意刷爆怎么办？
我们线上有个商品详情接口，最近被爬虫疯狂请求不存在的ID，直接打穿缓存压垮数据库了。试过加布隆过滤器但没生效，是不是哪里写错了？ 这是我现在用的缓存逻辑： async function getProd...
-
2
回答
48浏览
HTTP/2推送在React项目中真的能提升首屏加载吗？
我最近在优化一个React应用的首屏性能，听说HTTP/2 Server Push可以提前推送关键资源。但我在本地用Node.js搭了个支持HTTP/2的服务，尝试推送bundle.js和main.c...
-
2
回答
52浏览
Tree Shaking 为什么没生效？按需引入 lodash 还是打包了整个库？
我用 Webpack + Babel 开发 React 项目，想按需引入 lodash 的 debounce 方法，但打包后发现整个 lodash 库都被打进去了，体积一点没减。 我试过直接 impo...
-
2
回答
36浏览
React组件里定时器没清理，会导致内存泄漏吗？
我在一个React组件里用了setInterval，但切换页面后发现定时器还在跑，是不是没清理会一直占内存？ 试过在useEffect里return清理函数，但有时候还是漏掉，特别是快速切换路由的时候...
-
2
回答
74浏览
动画WebP在iOS上不播放怎么办？
我用FFmpeg把GIF转成了动画WebP，本地测试Chrome和Android都正常播放，但iOS Safari完全不动，就显示第一帧。查了下说iOS 14+才支持，但我测试的是iOS 16的设备啊...
-
2
回答
100浏览
内联关键CSS后Vue组件样式错乱怎么办？
我按教程把首屏关键CSS内联到HTML里了，但Vue组件的样式全乱了，是不是提取错了？ 我用的是vue-cli项目，critical包提取了首页的关键CSS，然后手动塞进index.html的styl...
-
2
回答
57浏览
Intersection Observer 预加载图片不生效是怎么回事？
我在用 Intersection Observer 做图片懒加载，但明明元素进视口了，回调却没触发，图片一直没加载。我检查了 rootMargin 和 threshold，也加了 observer.o...
-
2
回答
43浏览
React Query 预加载数据后怎么避免组件重复请求？
我在用 React Query 做页面切换前的数据预加载，但发现进入页面后还是会触发一次新的请求，明明之前已经 preload 过了。 我试过在路由跳转前调用 queryClient.prefetch...
-
2
回答
50浏览
延迟加载非关键CSS后页面布局错乱怎么办？
我在做首屏优化时，把非关键的CSS用media="print"加onload的方式延迟加载，但发现页面一开始没样式，等CSS加载完又突然跳动，布局完全错乱了。是不是关键CSS提取得不对？ 我现在的写法...
-
2
回答
43浏览
内链优化时怎么避免重复锚文本影响SEO？
我们网站最近在做SEO内链优化，想给关键词加内部链接，但发现很多页面都用同样的锚文本指向同一个URL。比如“产品介绍”这个词在十几篇文章里都链到首页，会不会被搜索引擎认为是过度优化甚至惩罚？ 我试着改...
-
1
回答
58浏览
数据预取时使用IntersectionObserver，为什么预加载的图片反而延迟显示？
在开发图片列表页时，我用IntersectionObserver做预加载，但发现预加载的图片比普通加载还慢。代码逻辑没问题，但实际效果反直觉，求大神指点！ 我的实现是这样写的： const obser...
-
2
回答
33浏览
预加载图片时为什么会阻塞关键CSS加载？
我在电商详情页用预加载商品轮播图，但发现首屏渲染变慢了。用Lighthouse检查发现关键CSS的加载时间被图片占用了，这是为什么？ 尝试过这样写： <link rel="preload" hr...
-
2
回答
39浏览
React组件卸载后WeakMap里的DOM引用没被回收怎么办？
在React项目里用WeakMap存DOM引用，但发现组件卸载后内存没降下来。比如这样写的： const domRefs = new WeakMap(); function MyComponent()...
-
2
回答
48浏览
如何用惰性求值优化频繁调用的复杂计算函数？
在开发实时数据可视化时，我发现每帧都要调用一个计算坐标坐标的函数calculatePosition()，里面涉及大量三角函数运算。虽然用了缓存但参数每次都会变，导致缓存命中率很低，帧率明显下降。 我尝...
-
2
回答
35浏览
虚拟滚动实现后为什么滚动还是卡顿？
我在用vue-virtual-scroller实现表格虚拟滚动，但滚动到中间区域时依然卡顿。已经设置好itemSize=50，可视区高度3000px，数据量5000条。尝试过调整scroll-marg...
-
2
回答
28浏览
requestIdleCallback优化长列表时回调没触发咋回事？
我在用虚拟滚动做长列表优化时，把渲染逻辑塞进了requestIdleCallback，但滚动到后面几屏后发现卡顿更严重了，有时候回调函数根本没执行，这是哪里出问题了？ 尝试过这样写： function...
-
2
回答
48浏览
为什么用modulepreload预加载CSS文件时浏览器没触发加载？
最近在优化项目预加载策略时遇到个怪问题，我按照文档给CSS文件加了modulepreload标签，但开发者工具网络面板完全没反应。换成preload马上就加载了，这是不是说明modulepreload...
