优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
83浏览
作用域优化真的能提升前端性能吗？我这样写有问题吗？
最近在学性能优化，看到有人说减少全局变量、缩小作用域能提升性能。但我试了下，感觉没啥区别，是不是我理解错了？比如下面这段代码，我把变量提到外层想复用，但同事说反而更差了： <script>...
-
1
回答
22浏览
gzip压缩后JS文件还是很大，该怎么进一步优化？
我用 Nginx 开启了 gzip 压缩，但打包后的 main.js 仍有 1.2MB，首屏加载太慢了。试过 Webpack 的 splitChunks 拆包，但效果不明显。 这是我的入口 HTML ...
-
2
回答
38浏览
内联关键CSS后样式错乱怎么办？
我在做首屏优化时把关键CSS内联到HTML里了，但页面样式完全乱了，是不是提取的关键CSS不完整？ 我用的是 Critical 工具自动提取的，生成的内联样式大概长这样： .header { posi...
-
1
回答
41浏览
域名分片真的还能提升图片加载速度吗？
我最近在优化一个老项目，听说以前用域名分片能绕过浏览器并发限制，就试着把静态资源拆到 cdn1、cdn2 两个子域下。但实际测下来发现首屏图片加载反而更慢了，是不是现在 HTTP/2 普及后这招已经失...
-
2
回答
38浏览
lodash-es 按需引入后为什么打包体积还是很大？
我用的是 Vite + Vue3，想通过 tree shaking 减小 lodash 的打包体积，就改用了 lodash-es，并只 import 了 debounce。但 build 完发现 ve...
-
2
回答
51浏览
TypeScript 项目开启 strict 模式后 Tree Shaking 失效了？
我用 Vite + TypeScript 搭了个项目，之前 Tree Shaking 正常，但一开 strict: true 就发现打包体积变大了，没用的代码没被删掉。是不是 tsconfig 的配置...
-
2
回答
30浏览
Cache-Control 设置了 max-age=3600，为什么浏览器还是发请求？
我给静态资源加了 Cache-Control: max-age=3600，但每次刷新页面，浏览器还是会向服务器发请求，只是返回 304。不是应该直接用缓存、不发请求才对吗？ 我试过在 Nginx 里配...
-
2
回答
28浏览
加载动画在数据返回后不消失怎么办？
我用一个简单的 loading 动画来提升用户体验，数据请求前显示，请求完成后隐藏。但有时候数据明明回来了，loading 还是卡在页面上不消失，特别奇怪。 我试过在 then 里加 isLoadin...
-
2
回答
163浏览
如何限制同时发起的 fetch 请求数量？
我有个页面要加载几十个用户头像，每个头像都要单独请求接口。现在一进来就同时发几十个 fetch，浏览器卡死了，怎么控制并发数啊？ 试过用 Promise.all，但好像更糟了，所有请求还是同时发出去。...
-
1
回答
18浏览
prefetch 资源没生效，是写法有问题吗？
我在首页加了对登录页 CSS 的 prefetch，但 Network 里根本没看到预加载请求，是不是我写错了？ 已经确认资源路径是对的，直接访问能拿到。也试过把 rel="prefetch" 放在 ...
-
2
回答
33浏览
Redis缓存怎么在Vue里配合后端做数据更新？
我用Vue写了个商品列表页，每次进页面都调接口拿数据，后端说加了Redis缓存，但改完商品信息后前端还是显示旧的。我试过在编辑成功后重新请求列表，但有时候还是刷不出来最新的，是不是缓存没清？ 这是我的...
-
1
回答
37浏览
为什么加了 transform: translateZ(0) 反而卡顿了？
我听说用 transform: translateZ(0) 能开启 GPU 加速，就给一个频繁动画的元素加上了，结果页面反而更卡了，这是为啥？ 这个元素是个横向滚动的列表，每项都有图片和文字，我试过只...
-
2
回答
37浏览
虚拟列表滚动时样式错乱怎么办？
我用原生JS实现了一个简单的虚拟列表，但滚动时列表项的样式会突然错位或者闪烁，感觉是高度计算有问题。我给每个列表项设置了固定高度，CSS如下： .virtual-item { height: 60px...
-
2
回答
46浏览
Webpack 的 splitChunks 配置怎么才能让公共模块单独打包？
我在用 Webpack 做代码分割，想把多个入口共用的 lodash 和 axios 提出来单独打成一个 vendor.js，但不管怎么配 splitChunks，它们还是被打进每个入口 chunk ...
-
1
回答
28浏览
Webpack 并行构建为啥反而变慢了？
我用 Webpack 5 的 thread-loader 和 mini-css-extract-plugin 开启了并行构建，但本地开发时 build 时间从 18s 涨到了 25s，这是不是哪里配错...
-
1
回答
28浏览
预渲染后首页SEO正常，但其他路由页面还是空白，怎么回事？
我用的是 Vue 3 + Vite 项目，为了 SEO 接入了 prerender-spa-plugin 做预渲染。本地 build 之后，首页 index.html 确实有完整内容，Google 模...
-
1
回答
34浏览
SWR预加载数据后为什么组件还是闪一下加载状态？
我在用SWR做数据预加载，明明在进入页面前就调用了preload，但组件首次渲染时还是会短暂显示loading状态，感觉预加载没生效，这是为啥？ 我试过在路由跳转前手动触发fetch，也确认了缓存ke...
-
1
回答
39浏览
React中如何控制数据请求的优先级？
我在用React做搜索功能，用户频繁输入时会触发多次请求，旧的请求结果反而覆盖了新的，怎么让新请求优先、取消旧的？ 试过用AbortController，但不确定是不是用对了，代码大概是这样： use...
-
2
回答
40浏览
虚拟滚动列表高度计算不准怎么办？
我用 React 实现了一个虚拟滚动列表，但 item 的高度是动态的（有的带图有的不带），结果滚动时内容错位、空白或者重叠，特别乱。 试过给每个 item 固定 height: 100px 能正常滚...
-
2
回答
28浏览
Chrome DevTools 内存快照里怎么定位闭包导致的内存泄漏？
我在做一个单页应用，发现切换页面后内存一直涨，用 DevTools 的 Memory 面板拍了快照，看到很多 Detached DOM tree 和 Closure，但不知道具体是哪段代码引起的。我怀...
