优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
28浏览
页面加载太慢影响SEO，该怎么优化首屏速度？
我们网站首页在Lighthouse测速里首屏得分只有40多分，Google Search Console也提示“页面加载体验不佳”。已经用了懒加载和CDN，但关键渲染路径好像还是有问题。 比如首页顶部...
-
2
回答
61浏览
LocalStorage 缓存用户数据后页面刷新就失效了？
我在做一个简单的用户登录状态保持功能，把 token 存到 LocalStorage 里，但每次刷新页面后读取不到，或者读出来是 null。明明之前 setItem 成功了，控制台也没报错，是不是我读...
-
1
回答
38浏览
react-window 列表项高度动态变化时怎么处理？
我用 react-window 的 FixedSizeList 渲染一个消息列表，但每条消息内容长度不一，有的带图片有的纯文本，导致实际高度不一样。强行用固定 height 会出现重叠或留白，试过改用...
-
1
回答
31浏览
边缘计算能减少首屏加载时间吗？具体怎么用？
我们网站的首屏加载在海外用户那特别慢，听说边缘计算可以就近分发内容，但我不太确定该怎么实际应用到前端项目里。 比如我现在有个静态 HTML 页面，已经部署在 CDN 上了，但 API 请求还是回源到国...
-
2
回答
35浏览
前端日志分级怎么合理设置才不会影响性能？
我们项目里现在所有日志都用console.log，上线后发现控制台太乱，想按 info/warn/error 分级，但又怕加太多判断影响性能。有没有轻量又清晰的做法？ 比如我现在这样写，感觉每次都要判...
-
2
回答
55浏览
用 transform 做动画真的能提升性能吗？为什么我的页面还是卡？
我听说用 transform 做动画不会触发重排，应该更流畅，但我在做一个滑动菜单时还是明显卡顿，是不是哪里写错了？ 我试过只用 transform: translateX 来移动元素，也加了 wil...
-
1
回答
44浏览
代码分割后模块串行加载怎么优化？
我在用 React 做路由级代码分割，发现多个动态 import 的模块是串行加载的，首屏白屏时间变长了。比如下面这样： const PageA = React.lazy(() => impor...
-
1
回答
34浏览
渐进增强下如何优雅降级不支持JS的表单提交？
我做了一个带前端验证的注册表单，但用户禁用JS后直接提交会跳转到错误页面。想用渐进增强的方式让表单在无JS时也能正常提交到后端，但不知道怎么组织结构才合理。 目前我的表单是这样写的： <form...
-
2
回答
32浏览
移动端图片加载太慢怎么优化？
我在做移动端页面时，发现首屏的几张大图加载特别慢，用户经常看到空白好几秒。我已经用了懒加载，但首屏图片还是卡，有什么办法能提速吗？ 这是我现在用的图片代码： <img src="banner-m...
-
1
回答
34浏览
iOS安全区域适配不生效怎么办？
我在做移动端页面时，发现 iPhone X 及以上机型底部被 Home Indicator 遮挡了内容。明明加了 env(safe-area-inset-bottom)，但好像没起作用，布局还是顶到最...
-
2
回答
41浏览
WebP转换工具怎么选？cwebp命令行参数总是报错怎么办？
最近想把项目里的图片批量转成WebP格式，试了Google官方的cwebp工具，但命令行老是报错。比如我用cwebp -q 80 image.jpg -o image.webp，有时候能成功，有时候提...
-
1
回答
31浏览
域名分片真的还能提升图片加载速度吗？
我最近在优化一个老项目，听说以前用域名分片能绕过浏览器并发限制，就试着把静态资源拆到 cdn1、cdn2 两个子域下。但实际测下来发现首屏图片加载反而更慢了，是不是现在 HTTP/2 普及之后这招已经...
-
1
回答
34浏览
前端接口失败重试怎么做才不卡死页面？
我在 Vue 项目里加了个接口失败自动重试的逻辑，但有时候网络差，连续重试好几次，页面就卡住了，用户操作都没反应。是不是我的重试方式有问题？ 我试过用 setTimeout 延迟重试，也加了最大重试次...
-
2
回答
26浏览
TTI 时间太长，怎么优化首屏交互延迟？
我们首页加载完 HTML 和关键 CSS 后，用户点击按钮没反应，得等好几秒才可交互。Lighthouse 报 TTI（Time to Interactive）高达 6s+，但 FCP 已经在 1.2...
-
1
回答
30浏览
rem和vw到底该怎么选？适配方案总出问题怎么办？
最近做移动端项目，用rem适配时在不同机型上布局老是错位，换成vw又怕兼容性不好。我试了动态设置html的font-size，但效果不稳定，尤其在iPhone和安卓机上表现不一致。 比如下面这段代码，...
-
2
回答
39浏览
大对象频繁创建导致内存飙升怎么办？
我在做一个数据可视化项目，每次切换时间范围都会生成一个包含上万条数据的大对象，页面内存占用很快就飙到1G以上，浏览器都卡死了。 试过用 delete 删除旧数据，也手动把变量设为 null，但内存还是...
-
2
回答
46浏览
SSR页面加载时出现样式闪烁，怎么解决？
我在用 Next.js 做 SSR 渲染时，首页首次加载会先显示无样式的 HTML，然后才突然“跳”出 CSS，看起来很卡。明明 CSS 是内联在 head 里的，也用了 styled-jsx，但还是...
-
2
回答
41浏览
字体子集化后中文显示成方块怎么办？
我用 fontmin 做了字体子集，结果页面上的中文全变成方块了，是不是哪里配置错了？ 项目是 React 的，我只保留了英文和几个常用中文字符，但实际渲染时连英文也出问题了。试过把字体文件换成 wo...
-
2
回答
15浏览
Icon Font 加载慢还闪一下无样式文本，怎么优化？
我在项目里用了 Icon Font，但每次刷新页面都会先看到一个方框或者文字闪一下，然后图标才出来，体验很差。已经把字体文件放本地了，也加了 font-display: swap;，但还是有 FOIT...
-
1
回答
128浏览
requestIdleCallback 在 Safari 里为啥不生效？
我在项目里用 requestIdleCallback 做非关键任务的延迟执行，Chrome 跑得好好的，结果 Safari 上完全没反应，控制台也没报错。 查了下发现 Safari 好像一直没支持这个...
