优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
67浏览
为什么关键CSS加载优先级不够高？
我在做首页性能优化时发现，虽然我把首屏样式内联了，但Lighthouse还是提示“移除阻塞渲染的资源”。我试过用 preload 加载关键 CSS 文件，但好像浏览器还是没把它当高优先级处理，这是为啥...
-
2
回答
35浏览
首屏 Loading 占位怎么避免布局抖动？
我在做首页优化，数据还没回来时用骨架屏占位，但接口一返回，内容高度变了，页面就“跳”了一下，特别难受。 试过给容器写死高度，但不同设备内容长度不一样，写死根本不现实。有没有更灵活的方案？ 现在骨架屏是...
-
2
回答
44浏览
Tree Shaking 为什么没把第三方库的无用代码去掉？
我用 Vite + Vue3 开发，引入了 lodash-es，但打包后发现整个库都被打进去了，明明只用了 debounce 啊？ 我已经按文档写了 import { debounce } from ...
-
2
回答
45浏览
Vite 的 manualChunks 配置怎么让第三方库单独打包？
我在用 Vite 做项目，想把像 lodash、axios 这些第三方库单独打成 vendor 包，但配置了 manualChunks 后发现它们还是被打进 main.js 里了，根本没拆出来。我试过...
-
2
回答
35浏览
Vue中图片懒加载不生效，是写法有问题吗？
我在用 Vue 3 做一个图片列表页，想用原生 Intersection Observer 实现懒加载，但滚动时图片根本没触发加载，一直显示 loading 占位图。我查了文档也加了 rootMarg...
-
1
回答
35浏览
prerender 预加载页面怎么不生效？
我在用 <link rel="prerender" href="/dashboard"> 预加载后台页面，但 Chrome DevTools 里看不到任何预渲染请求，页面跳转时还是重新加载...
-
2
回答
32浏览
前端缓存预热到底该怎么实现？
最近在做首屏性能优化，听说缓存预热能提升后续页面加载速度，但我不太确定具体该怎么做。 比如用户刚进入首页，能不能提前把“个人中心”或“商品详情”这些高频页面的静态资源（JS、CSS、图片）悄悄加载到缓...
-
2
回答
22浏览
如何排查和优化页面中的 Long Task？
最近用 Lighthouse 测速，发现有个 120ms 的 Long Task 警告，但不知道具体是哪段代码引起的。我试过在关键函数里加 console.time()，但定位不到源头。 项目里用了大...
-
2
回答
54浏览
移动端 touch 事件延迟怎么解决？
我在做移动端页面时，发现点击按钮有明显延迟，大概300ms左右，用户体验很差。查了下说是浏览器默认的双击缩放导致的。 试过加 user-scalable=no 到 viewport，但 Safari ...
-
2
回答
37浏览
Retina屏下图片模糊怎么解决？
我在用 React 做移动端页面，发现 iPhone 上的 logo 图片特别模糊，明明原图是 2x 的高清图。我试过直接放 2 倍图，但没用，是不是得用 srcset 或者 CSS 处理？ 现在代码...
-
2
回答
30浏览
日志上报怎么避免阻塞页面渲染？
我在做前端性能监控，想把错误日志和用户行为上报到服务器，但发现用 fetch 直接发请求会卡一下页面，尤其在低端机上很明显。有没有办法让上报完全不阻塞主线程？ 试过用 navigator.sendBe...
-
2
回答
38浏览
长列表分页加载时如何避免重复请求和数据错乱？
我在做商品列表的分页加载，每次滚动到底部就调用接口拉下一页数据。但有时候网络慢，用户快速滚动会触发多次请求，导致数据重复或者顺序错乱，咋办？ 我试过加个 loading 锁：if (loading) ...
-
2
回答
25浏览
async 和 defer 到底该怎么用才不影响首屏加载？
我在优化首屏加载时，把第三方统计脚本加了 async，但发现有时候页面渲染还是被卡住，是不是我用错了？ 之前试过这样写： <script src="analytics.js" async>...
-
2
回答
16浏览
请求失败后如何优雅地重试三次？
我在用 fetch 做 API 请求，网络偶尔不稳定，想加个重试机制，但不知道怎么写才不乱。试过在 catch 里再调一次，结果有时候会无限重试，或者状态没控制好。 比如下面这个简单的请求组件，该怎么...
-
1
回答
38浏览
iOS弹出键盘导致页面布局错乱怎么办？
我在做一个移动端的登录页，input获得焦点弹出iOS键盘后，整个页面被顶上去，而且收起键盘后页面没回到原来位置，留了一大片空白。试过加viewport-fit=cover也不行。 这是我的输入框样式...
-
2
回答
30浏览
乐观更新后数据不一致怎么办？
我在用 React 做一个点赞功能，点了之后立刻更新 UI（乐观更新），但请求失败后不知道怎么回滚。 现在试过用 useState 保存旧值，但状态多了就乱了。比如： const handleLike...
-
1
回答
52浏览
内联关键CSS后样式错乱怎么办？
我在做首屏优化时把关键CSS内联到HTML里了，但页面样式完全乱了，是不是提取的关键CSS不完整？ 我用的是 Critical 工具提取的，然后手动复制进 HTML 的 <style> 标...
-
2
回答
36浏览
分页加载时怎么避免重复请求和数据错乱？
我用 Vue 做了个列表，滚动到底部就加载下一页，但有时候快速滚动会触发多次请求，导致数据重复或者顺序错乱。试过加 loading 锁，但好像没完全解决问题。 这是我的加载逻辑： <templa...
-
2
回答
33浏览
缓存穿透导致接口频繁被刷，该怎么防？
我们有个商品详情页，用户输入不存在的ID时，请求会直接打到数据库，现在被人用脚本疯狂刷无效ID，数据库快扛不住了。我试过加一层内存缓存，但空值没存，好像还是会被穿透。 这是我的React组件里调用接口...
-
2
回答
39浏览
HTTPS对SEO真的有帮助吗？怎么配置才不会出问题？
我最近在优化网站的SEO，听说HTTPS是Google排名的一个因素，但我不太确定具体影响有多大。 现在我的网站还是HTTP的，想升级到HTTPS，但又担心配置错了反而影响收录。比如我用的是Nginx...
