优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
17浏览
Base64内联图片真的能提升性能吗？为什么我用了反而更慢了？
最近在做页面性能优化，听说把小图标转成 Base64 内联到 CSS 里可以减少 HTTP 请求，就试了一下。但上线后发现首屏加载反而变慢了，而且 HTML 文件体积明显变大。 我用的是 Webpac...
-
1
回答
69浏览
Terser 压缩后 React 组件报错，是配置问题吗？
我在用 Webpack 打包 React 项目时启用了 TerserPlugin，但压缩后的代码在浏览器里报错：Cannot read property 'map' of undefined。本地开发...
-
2
回答
33浏览
Source Map 线上生效但本地调试找不到原始 CSS 文件？
我用 Webpack 打包了项目，线上错误监控能通过 Source Map 定位到原始 JS 文件，但 CSS 报错时却只能看到压缩后的样式，根本没法调试。明明 devtool 里也配了 source...
-
1
回答
28浏览
懒渲染时组件状态丢失怎么办？
我在用 React 做一个长列表，为了性能用了懒渲染（比如只渲染可视区域的项）。但发现滚动回来后，之前输入过内容的表单项变空了，状态没了。 我试过把状态提到父组件，但数据量太大，维护起来很麻烦。有没有...
-
1
回答
24浏览
占位图加载时怎么避免页面跳动？
我在做图片懒加载，用了一个灰色背景当占位图，但图片加载完后容器高度变了，页面会突然跳一下，体验很不好。试过给img加固定宽高，但响应式布局下又不合适。 现在用的CSS是这样： .image-place...
-
1
回答
33浏览
缓存更新后样式没生效，是CSS缓存问题吗？
我改了页面的按钮样式，本地测试没问题，但上线后用户看到的还是旧样式。强制刷新才生效，是不是浏览器缓存没更新？ 我已经在构建时给CSS文件加了hash，但好像没起作用。下面是修改后的关键样式： .btn...
-
1
回答
30浏览
前端监控数据批量上报怎么避免重复发送？
我在做前端性能监控，想把用户行为日志攒一批再统一发到后端，但发现有时候页面快关了还没发出去，就用 beforeunload 补发。结果偶尔会看到同一条日志被上报两次，是不是因为正常上报和 before...
-
1
回答
24浏览
Base64内联图片真的能提升性能吗？为什么我用了反而更慢了？
我在做首屏优化时，把几个小图标转成 Base64 内联到 CSS 里，结果 Lighthouse 评分反而下降了，页面加载也变慢了。是不是用错了场景？ 我试过只对小于 2KB 的 PNG 图片做内联，...
-
1
回答
28浏览
Tree Shaking 没生效，Bundle Analyzer 显示没用的代码还在？
我用 Webpack + Babel 搭了个 React 项目，明明只 import 了 lodash 的一个函数，但 Bundle Analyzer 显示整个 lodash 都被打包进来了，Tree...
-
2
回答
18浏览
递归遍历树结构时如何避免栈溢出？
我在处理一个后台返回的部门树形数据，用递归去查找某个节点，但数据量大时浏览器直接报栈溢出错误。试过把递归改成尾递归，但好像JS引擎也不优化，还是崩。 有没有更稳妥的办法？比如转成循环？下面是我现在的写...
-
2
回答
20浏览
字体预加载怎么写才真正有效？
我在项目里用了 Google Fonts，但页面首次加载时文字还是会闪一下无样式状态（FOIT），想通过预加载优化。试过在 head 里加 <link rel="preload" as="fon...
-
1
回答
46浏览
Vue中怎么给axios请求加缓存避免重复调用？
我在做商品详情页，每次切换tab都会重新请求相同的数据，明明数据没变却反复发请求，很浪费。试过用sessionStorage手动存，但感觉不够优雅，有没有更自动的方式？ 现在代码是这样的： <s...
-
1
回答
23浏览
Tree Shaking 为什么没把无用代码删掉？是不是 sideEffects 配置错了？
我用 Webpack 打了个包，明明有个工具函数没被引用，但打包后还在。查了文档说要配 sideEffects: false，我也加了，可还是没摇掉。是我哪里弄错了吗？ 我的 package.json...
-
1
回答
23浏览
字体预加载没生效，是不是写法有问题？
我在 React 项目里用 next/font 加载自定义字体，但 Lighthouse 还是提示“确保文本在网页字体加载期间保持可见”，感觉预加载没起作用。我试过在 head 里加 link rel...
-
1
回答
46浏览
预加载图片到底该用 link 还是 img 标签？
我在做首页性能优化，想提前加载几张关键图片，但搞不清该用 <link rel="preload"> 还是直接 new Image()？ 试过在 head 里加 preload，但 DevT...
-
1
回答
21浏览
图片懒加载在移动端白屏怎么办？
我用 IntersectionObserver 做了图片懒加载，PC 上没问题，但一到手机上就先白屏好一会儿才加载出来，体验很差。是不是我写法有问题？ 我的代码是这样写的： const observe...
-
1
回答
30浏览
如何缓存复杂计算结果避免重复执行？
我在一个 React 组件里有个挺耗时的计算函数，每次渲染都会重新跑一遍，导致页面卡顿。试过用 useMemo，但依赖项一多就容易出错，有时候缓存根本没生效。 比如下面这段逻辑，每次 props.da...
-
1
回答
47浏览
防抖函数在搜索框里没生效，是我写错了吗？
我在做搜索框的关键词请求，想用防抖避免频繁调接口，但每次输入都会触发请求，感觉防抖根本没起作用。我查了文档也照着写了，是不是哪里漏了？ 下面是我的代码： function debounce(fn, d...
-
2
回答
36浏览
Tree Shaking 为什么没把我的未使用函数删掉？
我用的是 Vite + React，写了一个 utils.js 文件导出了好几个函数，但组件里只用了其中一个。打包后发现其他没用的函数还在 bundle 里，不是说 Tree Shaking 会自动去...
-
1
回答
26浏览
Early Hints 能在 React 应用里提前加载关键资源吗？
我最近看到 Early Hints（103 状态码）可以提前推送关键资源，比如 CSS 或字体。但在 React SPA 项目里试了下，发现浏览器好像没反应，不知道是不是用法不对？ 我的服务端已经配置...
