优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
39浏览
对象池在前端真的有必要用吗？
最近在写一个 Canvas 粒子动画，频繁创建和销毁粒子对象，感觉性能有点卡。听说可以用对象池优化，但不确定在前端场景下值不值得搞。 我试着手写了一个简单的池子，但复用的时候老是出 bug，比如状态没...
-
1
回答
43浏览
空状态组件怎么优雅地复用又不影响性能？
我在做列表页的空状态提示，每个页面都要写一遍“暂无数据”的逻辑，感觉很重复。想抽成通用组件，但又怕传太多 props 或者条件渲染影响性能，有没有好的实践？ 比如我现在是这样写的： const Use...
-
1
回答
26浏览
SSR下如何正确处理Vue组件中的window对象访问？
我在用Nuxt做服务端渲染时，有个组件需要读取window.innerWidth，但一刷新页面就报“window is not defined”错误。本地开发没问题，部署到服务器就挂了。是不是得加判断...
-
2
回答
31浏览
WebP图片用source标签不生效是怎么回事？
我在项目里想用WebP格式优化图片加载，按文档写了picture和source标签，但浏览器还是加载了jpg，根本没用WebP，是不是写法有问题？ 我试过把WebP放第一个source，也检查了文件路...
-
1
回答
58浏览
请求队列怎么避免重复发送相同接口？
我在做搜索建议功能，用户输入时会频繁触发请求，现在用了一个简单的队列控制，但发现如果快速输入相同关键词还是会发多次请求。试过加防抖，但业务要求不能延迟显示结果，所以想用队列去重，但不知道怎么高效判断“...
-
1
回答
43浏览
自定义性能上报数据怎么避免重复发送？
我在做前端性能监控，用 PerformanceObserver 收集了首屏时间，但发现每次页面刷新都会重复上报相同的数据。 试过加 localStorage 标记，但用户清缓存就失效了。有没有更靠谱的...
-
1
回答
38浏览
全局变量太多会导致内存泄漏吗？怎么优化？
最近在做一个单页应用，发现页面用久了特别卡，打开任务管理器一看内存占用飙到1G多。我怀疑是因为项目里用了太多全局变量，比如window.globalData = {...}这种写法。 试过在组件卸载时...
-
2
回答
34浏览
External外部化后CDN资源加载失败怎么办？
我在用Webpack做打包优化，把React和ReactDOM配置成external了，想用CDN加载。本地开发没问题，但部署到测试环境后页面直接白屏，控制台报错说React is not defin...
-
2
回答
48浏览
如何在用户快速切换搜索时取消上一个未完成的请求？
我做了一个搜索框，每次输入就发请求去后端查数据。但用户打字快的时候，前面的请求还没回来，新的又发出去了，结果旧数据覆盖了新数据，显示错乱。我试过用 AbortController，但不知道怎么在 Re...
-
2
回答
28浏览
占位图加载时怎么避免页面跳动？
我在做图片懒加载，用了灰色背景当占位图，但图片加载完成瞬间还是会引起页面轻微跳动，体验很不好。是不是宽高没设对？ 我给img标签加了固定宽高，CSS也写了： .placeholder { backgr...
-
1
回答
39浏览
资源合并后 JS 执行顺序出问题了怎么办？
我们项目里把几个 JS 文件合并成一个 bundle.js 之后，页面直接报错了，说某个函数找不到。明明单独加载的时候都好好的，合并之后顺序好像乱了。 我试过调整 webpack 的 entry 顺序...
-
2
回答
36浏览
静态资源缓存策略到底该怎么配才不会出问题？
我在部署一个 React 项目时，发现每次更新代码后用户还是看到旧内容，怀疑是缓存没处理好。我试过在 nginx 里加了 Cache-Control: max-age=31536000 给静态资源，但...
-
1
回答
35浏览
WebP 无损压缩后图片反而变大了，怎么回事？
我用 cwebp 工具对一张 PNG 图片做了无损 WebP 转换，结果文件体积比原图还大了 20%。不是说 WebP 无损压缩效率更高吗？是不是我哪里用错了？ 我在 CSS 里是这样引用的： .he...
-
1
回答
50浏览
WOFF2 字体加载失败怎么办？
我在项目里用了 WOFF2 格式的自定义字体，本地开发没问题，但部署到线上后部分浏览器根本不加载，控制台报 404。我确认文件路径是对的，而且服务器也配置了 MIME 类型。 是不是还要加什么特殊的响...
-
1
回答
35浏览
瀑布流长列表滚动卡顿怎么优化？
我用 React 实现了一个图片瀑布流，数据一多滚动就特别卡，试过给每个 item 加 key 但没用。是不是得用虚拟滚动？但瀑布流高度不一致，普通的 react-window 好像不支持…… 这是我...
-
2
回答
41浏览
响应式图片在移动端显示模糊怎么办？
我用 <img> 标签做了个响应式图片，但在手机上看特别糊，PC上是清晰的。是不是没设置对？ 我试过加 max-width: 100% 和 height: auto，也用了 srcset，...
-
2
回答
33浏览
长列表分页加载时怎么避免重复请求和数据错乱？
我用 Intersection Observer 做滚动分页加载，但快速滚动时经常触发多次请求，导致后一页的数据比前一页先回来，顺序全乱了。 试过加 loading 锁：if (loading) re...
-
2
回答
39浏览
连接复用时为什么 fetch 还是新建 TCP 连接？
我在做性能优化时发现，明明连续发了几个 fetch 请求到同一个域名，但浏览器 DevTools 里显示每个请求都新建了 TCP 连接，不是说 HTTP/1.1 支持 keep-alive、HTTP/...
-
1
回答
49浏览
循环里频繁操作DOM真的会影响性能吗？
最近在做一个动态列表渲染的功能，发现页面有点卡。我是在for循环里直接用element.innerHTML += item不断拼接内容的，听说这样性能很差，但不太确定具体原因。 试过把HTML先拼成字...
-
2
回答
35浏览
为什么我的 Vue 项目静态资源没走 Disk Cache？
我用 Vue CLI 打包上线后，发现每次刷新页面都会重新请求 JS 和 CSS 文件，明明设置了 long-term caching，但 Chrome DevTools 里看到这些资源的状态是 20...
