优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
33浏览
代码分割时 CommonChunk 被重复打包怎么办？
我在用 webpack 做代码分割，把公共依赖抽成 common.js，但发现 vendor 和 common 里都包含了 lodash，页面加载时重复执行了，体积也变大了。是不是 splitChun...
-
2
回答
45浏览
Memory Cache 没生效？Vue组件里图片重复请求怎么回事？
我在 Vue 项目里用 img 标签加载同一张图片，按理说浏览器应该走 Memory Cache，但每次切换组件都会重新请求，network 面板里状态是 200 而不是 (memory cache)...
-
2
回答
24浏览
移动端 touchmove 监听加了 passive 为啥还是卡顿？
我在做移动端的滑动组件，给 touchmove 事件加了 { passive: true }，但页面滚动还是明显卡顿，是不是我用错了？ 之前没加 passive 的时候 Chrome 控制台有警告，加...
-
1
回答
21浏览
opacity 动画会导致重排吗？怎么优化才不卡顿？
我给一个 div 加了 opacity 从 0 到 1 的过渡动画，但页面明显卡顿，是不是触发了重排？ 查资料说 opacity 只触发合成，不会重排，但我用 Chrome DevTools 的 Pe...
-
2
回答
30浏览
Meta标签对SEO到底有多大影响？我加了但没效果怎么办？
最近在优化一个React项目，手动在public/index.html里加了<meta name="description" content="...">，也配置了keywords，但Go...
-
2
回答
30浏览
如何用 Bundle Analyzer 看出哪个组件导致打包体积过大？
我用 webpack 打了个包，发现 vendor.js 超过 2MB，想用 webpack-bundle-analyzer 分析具体是哪个组件或库拖慢了体积，但分析图里模块太多，根本看不出重点。有没...
-
2
回答
36浏览
Code Splitting 后 CSS 重复加载怎么解决？
我用 Webpack 做了路由级别的 Code Splitting，但发现每个 chunk 都打包了一份相同的全局样式，导致页面切换时样式重复加载甚至闪烁。 比如下面这段全局重置样式，在多个入口里都被...
-
2
回答
27浏览
错误提示太生硬，怎么优化用户体验？
我现在的表单校验一出错就直接弹 alert，用户说体验很差，但我不知道该怎么改才更友好。 试过用 document.getElementById('error').innerText = '请输入邮箱...
-
1
回答
36浏览
串行加载多个CSS文件会影响性能吗？
我在做代码分割的时候，把不同页面的样式拆成了多个CSS文件，然后用JS按顺序动态加载。但发现页面渲染变慢了，是不是串行加载的问题？ 比如我现在这样加载： /* page-home.css */ .ho...
-
1
回答
29浏览
WebP图片在老浏览器上不显示怎么办？
我最近把网站的图片全换成WebP格式了，体积小了很多，加载也快。但测试时发现IE和一些旧版安卓浏览器完全不显示图片，页面直接空白。有没有办法优雅降级？ 我试过用picture标签配合source，但C...
-
1
回答
32浏览
大屏监控页面卡顿，如何优化 Canvas 渲染性能？
我们团队最近在做数据可视化大屏，用的是原生 Canvas 绘制图表和动态元素。但页面运行一段时间后明显卡顿，FPS 掉到 20 以下，尤其是在 Chrome 上。我试过用 requestAnimati...
-
2
回答
430浏览
乐观更新后 UI 没回滚，状态怎么处理？
我用 React 做了个点赞功能，点了之后立刻更新 UI（乐观更新），但请求失败时 UI 没变回去，反而卡在“已点赞”状态。是不是哪里没处理好？ 我试过在 catch 里手动 revert 状态，但有...
-
2
回答
29浏览
为什么用了 lodash-es 还是没法 tree shaking 掉没用的函数？
我项目里只用了 lodash-es 的 debounce，按理说其他函数应该被 tree shaking 掉，但打包后体积还是很大。我用的是 Vite + Vue3，默认配置应该支持 ES modul...
-
2
回答
17浏览
首屏加载太慢，关键渲染路径该怎么优化？
我们首页首屏白屏时间特别长，Lighthouse评分才40多分。我已经把CSS内联了，JS也加了 defer，但还是感觉阻塞。特别是下面这段初始化代码，是不是放的位置不对？ document.addE...
-
1
回答
22浏览
前端接口失败重试怎么做才不会重复请求？
我在用 Vue 做一个数据上报的功能，网络不稳定时想自动重试，但发现有时候会触发多次重复请求，比如用户快速切换页面又回来，或者组件销毁后还在 retry。我试过用 setTimeout 递归，但控制不...
-
2
回答
36浏览
React Query 的请求怎么避免重复触发？
我在用 React Query 做一个用户列表页，每次组件挂载都会自动发请求，但切换 tab 再回来又会重新请求一次，明明数据没变啊。 我试过把 enabled 设成 false 手动控制，但这样 i...
-
2
回答
58浏览
WeakMap在Vue组件里怎么用才不会内存泄漏？
我在Vue组件里想用WeakMap缓存一些DOM节点的元数据，但不确定会不会导致内存泄漏。试了下发现组件卸载后WeakMap里的引用好像还在？ 这是我的写法： <template> <...
-
2
回答
35浏览
为什么加了 will-change: transform 还是没提升为合成层？
我在做一个动画卡片，给元素加了 will-change: transform，但 Chrome DevTools 的 Layers 面板里还是没看到它被提升成独立合成层，这是为啥？ 我原本以为只要加了...
-
2
回答
31浏览
HTTP/2推送怎么没生效？首屏资源还是慢
我在用 Nginx 配置 HTTP/2 推送关键 CSS，但 Chrome DevTools 里看不到 pushed 资源，首屏加载速度也没提升，是不是哪里配错了？ 我试过在响应头加 Link pre...
-
1
回答
32浏览
移动端SEO优化时，媒体查询写法会影响搜索引擎收录吗？
我最近在做网站的移动优先SEO优化，发现Google Search Console提示“移动设备上内容被截断”。我检查了viewport设置没问题，但不确定是不是我的CSS媒体查询写法有问题？ 我用的...
