优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
38浏览
Early Hints 怎么在 Nginx 上配置才生效？
我看到 Early Hints 能提前推送资源链接，加快页面加载，就在本地 Nginx 试了下，但浏览器 Network 面板里完全没看到 103 Early Hints 响应。 我加了 http2_...
-
1
回答
39浏览
缓存策略怎么选？强缓存和协商缓存到底怎么用才对？
我最近在优化项目加载速度，看到浏览器缓存有强缓存和协商缓存两种，但搞不清实际场景该用哪个。比如静态资源像 JS、CSS 文件，我试过加 Cache-Control: max-age=31536000，...
-
2
回答
59浏览
CSS压缩后样式错乱，怎么解决？
我用Webpack打包项目时启用了CSS压缩，结果上线后发现有些按钮的hover效果没了，还有布局也错位了。本地开发环境一切正常，但构建后的CSS好像被过度压缩了。 我试过用css-minimizer...
-
1
回答
42浏览
这段CSS选择器会不会导致性能问题？
我最近在优化一个老项目，发现有一段CSS用了很深层的嵌套选择器，页面元素一多就感觉卡顿。我查了下说是选择器复杂度会影响渲染性能，但不确定是不是这个原因。 我试过简化结构，但样式就乱了。这段代码是不是真...
-
1
回答
36浏览
WebP图片在老浏览器上不显示怎么办？
我最近把项目里的图片都转成WebP格式了，体积确实小了很多，但在一些老版本的 Safari 和 IE 上完全不显示，页面直接裂图。我知道可以用 picture 标签做兼容，但不确定具体怎么写才稳妥。 ...
-
1
回答
31浏览
数据预取时怎么避免重复请求？
我在用 React 做一个商品详情页，进入列表页的时候想提前把详情数据拉下来，用了 useEffect 里调接口做预取。但用户如果快速点进同一个商品两次，发现控制台发了两次一样的请求，这不就浪费了吗？...
-
1
回答
39浏览
多个小接口能不能合并成一个来减少请求？
最近在做商品详情页，页面要同时拉取商品信息、库存、评论数和用户收藏状态，现在是分开四个请求发的。听说接口合并能优化性能，但不确定怎么搞才合理？ 我试过让后端加一个聚合接口，但前端调用时参数不好统一，而...
-
1
回答
27浏览
Service Worker 缓存 HTML 后页面不更新怎么办？
我用 Service Worker 做了离线缓存，把首页 index.html 也缓存了，但改了 HTML 内容后刷新页面还是旧的，哪怕关掉再开浏览器也没用。是不是缓存策略写错了？ 我注册 SW 的方...
-
1
回答
27浏览
Vite 项目里怎么实现按需编译组件？
我用 Vite + Vue3 开发，发现每次改一个组件，整个页面都重新编译，速度有点慢。我看文档说支持按需编译，但不知道具体怎么配置。 试过在 vite.config.js 里加了一些 optimiz...
-
1
回答
58浏览
移动端 viewport 设置后页面还是缩放异常怎么办？
我在 React 项目里加了 viewport meta 标签，但 iOS 上页面还是会自动缩放，字体忽大忽小，特别在横屏时更明显。试过 width=device-width 和 initial-sc...
-
2
回答
87浏览
React 代码分割后组件重复加载怎么办？
我在用 React 的 lazy + Suspense 做路由级别的代码分割，但发现每次切换到同一个路由时，组件都会重新加载，导致状态丢失。明明已经加载过一次了，为什么还会重复执行？是不是我写法有问题...
-
1
回答
61浏览
骨架屏在Vue中怎么实现才不会闪屏？
我用 Vue 做了个商品列表页，数据从接口拉取，想加个骨架屏提升体验。但每次加载完数据后，骨架屏消失、真实内容出现的瞬间会“闪一下”，看起来特别卡。我试过用 v-if="loading" 控制骨架屏和...
-
1
回答
30浏览
React中如何正确缓存API数据避免重复请求？
我用useEffect去请求用户数据，但每次组件重新渲染都会重新发请求，明明数据没变。试过把依赖数组设为空，但又拿不到最新的userId。有没有办法只在userId变化时才请求，同时缓存结果？ 这是我...
-
1
回答
19浏览
Webpack 的 usedExports 配置为啥没生效？
我按文档开启了 optimization.usedExports: true，但打包后发现没用的函数还是被打包进去了，根本没被 tree-shaking 掉，这是为啥？ 我的模块是 ES6 语法写的，...
-
1
回答
32浏览
HTTP/2 开启后为什么资源加载反而变慢了？
我最近把项目从 HTTP/1.1 升级到 HTTP/2，本以为能提升性能，结果首页加载时间反而比之前还长。服务器是 Nginx，已经确认 http2 模块开启，Chrome DevTools 也显示协...
-
2
回答
42浏览
首屏加载时如何用占位图避免布局抖动？
我在做商品列表页的首屏优化，数据还没回来时页面会先空着，等接口返回后突然“跳”出内容，体验很差。试过用<div class="skeleton"></div>做骨架屏，但高度固...
-
1
回答
53浏览
WebP图片在旧版浏览器上不显示怎么办？
我最近把网站的图片全换成WebP格式了，加载快了不少，但在一些老浏览器（比如Safari 13以下、IE）里直接显示空白。试过用picture标签加回退，但好像没生效，是不是写法有问题？ 这是我的代码...
-
2
回答
41浏览
IndexedDB 存储大量数据时页面卡顿怎么办？
我在用 IndexedDB 缓存用户的历史操作记录，数据量大概有几万条，每次打开页面读取数据时都会明显卡顿好几秒。 试过用 cursor 分批读取，但还是卡。有没有更高效的读取方式？或者是不是我建索引...
-
2
回答
72浏览
Canonical标签到底该怎么写才对？
我最近在做多语言网站的SEO，发现Google Search Console提示有重复内容。查了资料说要加canonical标签，但我试了几次都不确定写法对不对。 比如英文页是https://exam...
-
1
回答
62浏览
CSS代码分割后样式丢失怎么办？
我用 React 做项目时尝试做 CSS 代码分割，结果动态加载的组件样式完全没生效，页面布局全乱了。是不是 splitChunks 配置有问题？ 我用的是 React.lazy + Suspense...
