优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
48浏览
动态导入组件后样式丢失是怎么回事？
我在 Vue 项目里用动态导入加载一个组件，结果发现组件能正常显示，但样式全没了。之前是直接 import 的没问题，改成 () => import() 就出问题了，是不是漏了什么配置？ 这是我...
-
1
回答
24浏览
分包后首屏加载反而变慢了，是我的策略有问题吗？
最近在用 Webpack 做分包优化，原本以为把 node_modules 拆成 vendor 包、业务代码拆成 main，再配合动态 import 按需加载，首屏应该更快才对。结果上线后 Light...
-
1
回答
30浏览
渐进式图片在 React 中怎么实现才有效？
我在做图片加载优化，听说渐进式 JPEG 能提升体验，但直接用普通 <img> 标签好像没效果。我试过把图片转成 progressive 格式，但在 React 组件里加载时还是从上到下一...
-
1
回答
31浏览
资源压缩后首屏加载反而变慢了，怎么回事？
我们项目最近做了资源压缩优化，把 JS 和 CSS 都用 webpack 压缩了，还启用了 Gzip。但奇怪的是，上线后 Lighthouse 测出来的首屏时间反而比之前高了 0.5s 左右。本地测试...
-
1
回答
21浏览
preconnect 到底该写在 head 哪个位置才生效？
我在优化页面加载速度，看到建议用 <link rel="preconnect"> 提前建立第三方域名连接。但我加了之后用 DevTools 看，好像没起作用？ 我把它放在了 <hea...
-
1
回答
23浏览
首屏加载时如何正确实现 Loading 占位避免布局抖动？
我在做首页优化，数据还没回来的时候想用 skeleton loading 占位，但每次数据加载完 DOM 结构一变，页面就会“跳一下”，体验很差。我试过给容器写死高度，但不同设备下内容高度不一样，不太...
-
1
回答
26浏览
GPU加速到底该怎么正确触发？
我在做一个轮播图动画，用 transform: translateX() 做位移，听说这样能触发 GPU 加速，但 Chrome DevTools 里看还是掉帧严重。是不是光用 transform 就...
-
1
回答
37浏览
预加载图片资源到底该用 link preload 还是 img hidden？
我在做一个图片画廊页面，首屏要快速展示缩略图，但高清大图需要预加载。试过用 <link rel="preload">，也试过用隐藏的 <img> 标签，但不确定哪种方式更靠谱，...
-
1
回答
22浏览
Service Worker 缓存策略怎么选才不会导致页面更新延迟？
我最近在项目里加了 Service Worker 做离线缓存，用了 cache-first 策略，结果发现用户每次发新版本后都看不到最新内容，得手动清除缓存才行。这体验太差了。 我试过改成 netwo...
-
1
回答
32浏览
HTTP/2 开启后为什么首屏加载反而变慢了？
我最近把网站升级到 HTTP/2 了，理论上多路复用应该更快才对，但上线后发现首屏加载时间比之前还长了几百毫秒，特别在弱网下更明显。 服务器是 Nginx，配置里已经加了 listen 443 htt...
-
2
回答
36浏览
WebP图片在Safari上不显示怎么办？
我最近把项目里的JPG和PNG都转成WebP格式了，体积小了很多，但在Safari上图片直接裂开不显示。查了下说Safari 14之前不支持WebP，但用户还在用老版本，这咋办？ 试过用<pic...
-
1
回答
27浏览
时间分片渲染长列表时样式错乱怎么办？
我在用 requestIdleCallback 做长列表的时间分片渲染，数据是分批 append 到 DOM 的，但每次新批次插入后，滚动位置会跳动，而且有些 item 的样式看起来不对。 我检查了 ...
-
1
回答
24浏览
防抖和节流到底该怎么选？搜索框请求总被意外触发怎么办？
我在做搜索框的关键词联想功能，用户一输入就发请求，结果打字快的时候请求发了一堆，服务器都扛不住了。我试过用防抖，但有时候刚打完字还没来得及请求，焦点就丢了，结果没拿到数据。 也试过节流，比如_.thr...
-
1
回答
24浏览
关键CSS资源到底该怎么预加载才有效？
我最近在优化首屏加载速度，听说要把关键CSS内联，非关键的用preload加载。但我试了在HTML里加，结果浏览器还是没提前加载，F12看网络面板发现它等到HTML解析到后面才开始请求，这不就失去预加...
-
1
回答
19浏览
关键渲染路径阻塞，CSS和JS到底该怎么放？
我在优化页面首屏加载时，发现即使把CSS放在head里、JS放底部，Lighthouse还是提示“阻塞渲染”。明明已经按教程做了啊，是不是还有其他坑？ 比如我现在的结构是这样： <!DOCTYP...
-
2
回答
35浏览
前端性能监控采样率怎么设置才合理？
我们项目接入了自研的前端性能监控，但全量上报数据量太大，想用采样。可采样率设低了怕漏掉关键错误，设高了又影响服务器压力，到底该怎么平衡？ 比如现在有个动画卡顿的问题，只在低端机上偶尔出现，采样率10%...
-
2
回答
37浏览
SSR 和 SSG 到底该怎么选？项目上线后首屏还是慢
我们用 Next.js 做了个内容型网站，现在纠结该用 SSR 还是 SSG。试过 getStaticProps 静态生成，但数据更新频繁，每次都要重新构建；换成 getServerSideProps...
-
2
回答
30浏览
移动端点击延迟怎么解决？React里加了fastclick还是有卡顿
我在做移动端 React 项目时，发现按钮点击后有明显延迟，大概300ms左右。查资料说是因为浏览器要判断是不是双击缩放，所以加了 fastclick 库，但效果不明显，有些地方甚至更卡了。 下面是我...
-
1
回答
25浏览
移动端横竖屏切换时布局错乱怎么解决？
我在做移动端页面，用的是 rem 布局，横屏时内容被拉得很宽，元素都挤在一起了，看着特别乱。试过用 @media (orientation: landscape) 单独写样式，但效果不稳定，有些机型根...
-
2
回答
39浏览
如何准确监控前端首屏加载时间？
我在做性能监控，想准确获取用户首屏加载完成的时间，但发现不同设备和网络下差异很大。用 performance.timing 里的字段好像不太准，比如 domContentLoadedEventEnd ...
