优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
30浏览
无限滚动加载时列表抖动怎么办？
我用 IntersectionObserver 做了个无限滚动，但每次加载新数据后页面会突然跳一下，体验很糟糕。明明没动滚动位置，怎么就抖了？ 试过给容器加固定高度、用虚拟滚动库，但要么没效果要么太重...
-
2
回答
44浏览
Service Worker 缓存 CSS 文件后样式不生效怎么办？
我用 Service Worker 缓存了静态资源，但发现页面加载时有时候 CSS 样式没应用上，刷新一下又好了。是不是缓存策略写错了？ 我试过在 install 事件里缓存 CSS，也确认文件路径没...
-
2
回答
46浏览
FCP太慢了，首屏加载白屏好几秒怎么办？
我们首页上线后 Lighthouse 报 FCP 超过 4 秒，用户一进来就是白屏，体验很差。已经做了图片懒加载和代码分割，但首屏关键资源还是加载太慢。 关键 CSS 是内联的，但字体文件和首屏数据请...
-
2
回答
51浏览
微交互卡顿怎么优化？动画总感觉不流畅
我在做按钮点击反馈的微交互，用了 CSS 的 transform 和 transition，但低端机上明显卡顿，掉帧严重。试过加 will-change: transform 也没啥用。 现在代码是这...
-
1
回答
17浏览
循环里频繁操作DOM真的会影响性能吗？
我最近在做一个动态列表渲染的功能，发现页面有点卡。看了一下代码，是在for循环里不断用element.appendChild()往页面加元素。这样写是不是有问题？ 我试过把节点先拼成字符串再一次性插入...
-
2
回答
27浏览
前端日志分级怎么合理设计才不会影响性能？
最近在做前端监控系统，想给 console.log 加个日志级别控制，但不确定怎么分级才合理。比如开发环境要详细日志，生产环境只保留 error，但又怕频繁判断影响性能。 我试过这样写： const ...
-
2
回答
40浏览
字体加载太慢怎么优化？
我在项目里用了一个自定义的中文字体，但页面首次加载时明显卡顿，文字会先显示默认字体再闪成自定义字体，用户体验很差。我试过用 font-display: swap，但好像没完全解决问题。 现在想用 Ja...
-
2
回答
28浏览
LCP总是超时，图片懒加载反而更慢了怎么办？
我用 IntersectionObserver 做了图片懒加载，结果 LCP 指标反而变差了，首屏大图老是加载很慢。 明明没加懒加载前 LCP 是 1.8s，现在经常飙到 3s 以上。我试过给首屏图加...
-
2
回答
32浏览
固定高度的长列表怎么优化滚动性能？
我有个聊天记录列表，每条消息高度固定为60px，但数据一多（比如上千条）页面就卡得不行。试过用虚拟滚动，但自己写的逻辑好像有问题，滚动时经常白屏或者错位。 这是我现在计算可视区域渲染项的代码： con...
-
1
回答
31浏览
前端怎么用惰性求值优化大数据列表渲染？
我有个页面要展示上万条数据的列表，直接渲染卡得不行。听说可以用惰性求值只处理可视区域的数据，但不知道具体咋实现。试过用 Array.prototype.slice 截取一部分，但滚动时还是卡顿明显。 ...
-
2
回答
50浏览
骨架屏加载时为什么会出现布局跳动？
我在用 Vue 做商品列表页，加了骨架屏之后，数据加载完成瞬间页面会“闪一下”或者元素位置突然偏移，感觉体验更差了。明明骨架屏和真实内容结构是一样的啊。 我试过给图片容器固定宽高，文字也用了 heig...
-
2
回答
41浏览
HTTPS对SEO真的有帮助吗？为什么我切了HTTPS排名反而掉了？
我们网站前几天从HTTP全站切到HTTPS了，结果Google Search Console里索引量没变，但自然流量明显下降，是不是哪里配置错了？ 我确认了301跳转都加了，<link rel=...
-
1
回答
36浏览
WebP无损压缩后图片反而变大了，怎么回事？
我用cwebp把PNG转成WebP做无损压缩，结果文件比原图还大，这正常吗？ 命令是这么跑的：cwebp -lossless input.png -o output.webp，原图120KB，转完变成...
-
2
回答
50浏览
渐进式渲染怎么做才能不闪屏？
我试了用流式 SSR 返回 HTML，但首屏内容先显示骨架屏，等 JS 加载完又整个替换成真实内容，明显闪了一下，体验很不好。是不是应该让服务端直接返回部分真实数据？ 现在服务端只返回空容器：<...
-
2
回答
34浏览
Hard-source-webpack-plugin 缓存没生效是怎么回事？
我按照文档装了 hard-source-webpack-plugin，也加到 webpack 配置里了，但每次重新构建还是全量编译，缓存好像根本没用上。 我的配置是这样的： const HardSou...
-
2
回答
60浏览
Vite 的 manualChunks 配置不生效是怎么回事？
我在 Vite 项目里想用 manualChunks 把 lodash 单独打包，但 build 之后发现它还是被打进 vendor 里了，根本没拆出来。 我试过在 vite.config.js 里这...
-
1
回答
23浏览
如何监控 Webpack 构建体积变化？
最近项目构建后 bundle 体积涨得有点快，想加个监控看看每次构建的大小变化，但不知道怎么搞。试过用 webpack-bundle-analyzer 手动生成报告，但没法自动追踪历史记录。 有没有办...
-
1
回答
43浏览
robots.txt 怎么写才能不让搜索引擎抓取测试页面？
我们上线了一个新项目，但有些测试页面比如 /test/ 和 /dev/ 路径下的内容不想被搜索引擎收录。我试着在根目录加了 robots.txt，但不确定写法对不对，怕误伤正式页面。 目前我的写法是这...
-
2
回答
26浏览
hreflang标签怎么写才对？Google Search Console老报错
我给一个多语言网站加了 hreflang，但 Google Search Console 一直提示“无效的 hreflang 值”或者“页面未返回自身引用”。我明明每个页面都写了自己和其他语言版本的链...
-
2
回答
33浏览
Cache-Control 设置了却没生效？
我给静态资源加了 Cache-Control，但浏览器还是每次都请求，根本没缓存，这是为啥？ 我在 Nginx 里配置了 expires 1y;，也试过直接在 HTML 的 meta 标签里写，但刷新...
