优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
26浏览
SessionStorage 存对象刷新后取不出来怎么办？
我在用 sessionStorage 缓存用户配置对象，页面刷新后读取总是得到 "[object Object]" 字符串，根本没法用。明明存的时候是正常对象啊，是不是我哪里搞错了？ 试过直接存对象，...
-
1
回答
40浏览
picture 元素在 React 中怎么正确写才能适配多端分辨率？
最近在做响应式图片优化，想用 HTML5 的 <picture> 元素配合 srcset 来加载不同分辨率的图片。但在 React 里写的时候总感觉不对劲，浏览器有时候还是加载了大图，特别...
-
1
回答
50浏览
robots.txt 怎么写才能不让搜索引擎抓取测试页面？
我们网站上线前搞了个 /test/ 目录放临时页面，现在想通过 robots.txt 禁止爬虫抓取，但不确定写法对不对。我试过这样写： User-agent: * Disallow: /test/ 但...
-
1
回答
29浏览
图片懒加载时占位图怎么避免布局偏移？
我用 IntersectionObserver 做了图片懒加载，但一开始没设宽高，图片加载完后页面会突然跳动。试过给 img 加 width 和 height 属性，但不同尺寸的图不好统一处理。 也试...
-
1
回答
40浏览
opacity 动画为什么还会触发重排？不是只影响合成层吗？
我最近在做列表项的 hover 动画，想用 opacity 实现淡入淡出效果，听说 opacity 不会触发重排，只走合成层，性能好。但用 DevTools 的 Performance 面板一看，居然...
-
1
回答
39浏览
WebP图片不兼容老浏览器，怎么优雅降级？
我最近把项目里的图片全换成WebP格式了，体积小了很多，但在一些老版本的 Safari 和 IE 上直接显示不了。试过用 Modernizr 检测，但感觉太重了。现在想在 React 里做个简单的 f...
-
2
回答
45浏览
视频加载太慢，怎么优化首屏体验？
我们网站首页有个背景视频，但每次打开都卡半天，用户反馈很不好。我已经用了preload="metadata"，也压缩过 MP4 文件了，还是慢。 试过用 WebM 格式替代，但 Safari 不兼容；...
-
1
回答
38浏览
React 组件懒加载后样式错乱怎么办？
我在用 React 的 lazy + Suspense 做组件懒加载，功能是跑起来了，但发现懒加载进来的组件样式有点乱，比如 Tailwind 的类没生效，或者 CSS 模块的样式优先级不对。我试过把...
-
1
回答
36浏览
react-virtualized 渲染空白怎么办？
我用 react-virtualized 的 List 组件渲染一个长列表，数据都有，但页面显示一片空白，滚动条也没高度。 检查了 rowHeight 和 rowCount，都传了正确的值。控制台也没...
-
1
回答
57浏览
Babel配置影响Tree Shaking吗？为什么我的Vue组件没被摇掉？
我用 Vue 3 + Vite 搭的项目，发现打包后一些没用的组件还是被打进去了。我明明没引用它们，按理说 Tree Shaking 应该能干掉才对。是不是 Babel 配置有问题？ 我试过把 @ba...
-
1
回答
30浏览
modulepreload 到底怎么用才生效？
我在项目里加了 <link rel="modulepreload" href="./utils.mjs">，但浏览器 Network 面板里还是看到 utils.mjs 是在脚本执行时才加...
-
1
回答
22浏览
缓存穿透导致接口被恶意刷爆，该怎么防？
最近上线了一个商品详情页，发现有些不存在的商品 ID 被频繁请求，直接打穿缓存压垮了数据库。我试过在 Vue 里加了个 loading 防重，但根本没用，因为人家是直接调接口的。 现在每次遇到无效 I...
-
2
回答
26浏览
惰性求值在前端里到底该怎么用才对？
最近在重构一个数据表格组件，发现每次滚动都要重新计算大量行数据，性能很差。听说可以用惰性求值优化，就试着把计算逻辑包进 getter 里，比如 get formattedData()，但好像没起作用—...
-
1
回答
31浏览
模块联邦加载远程组件时为什么样式丢失了？
我在用 Webpack 5 的模块联邦做微前端，主应用能正常加载远程组件，但组件的 CSS 样式完全没生效。本地开发时样式是好的，一通过 remotes 加载就没了。 我试过把样式文件单独 impor...
-
1
回答
57浏览
Tree Shaking 为什么没把没用的 CSS 类删掉？
我用 Vite + React 做项目，发现打包后的 CSS 还是包含了很多没用的类。明明只用了 .btn-primary，但 .btn-secondary、.btn-danger 这些也被打包进去了...
-
2
回答
21浏览
数据预取时如何避免重复请求和资源浪费？
我在做商品详情页的性能优化，想用数据预取提前加载用户可能点击的商品信息。但发现如果用户没点进去，之前预取的数据就白请求了，而且如果多个地方同时预取同一个接口，还会触发多次重复请求。 我试过用 Map ...
-
1
回答
17浏览
SWC编译后箭头函数被转成普通函数，怎么保留ES6语法？
我用SWC替换了Babel做构建，但发现原本的箭头函数全被转成了普通function，导致this指向出问题。项目目标环境是现代浏览器，根本不需要降级啊。 配置里已经设了jsc.target为es20...
-
1
回答
30浏览
图片预加载在Vue中怎么实现才不会影响首屏性能？
我最近在做商品详情页，图片太多导致首屏加载很慢。想用预加载提前加载后面的图片，但又怕把主资源挤掉。试了在mounted里直接new Image()去加载，结果发现页面卡顿更严重了。 有没有比较优雅的方...
-
1
回答
21浏览
批量转换图片为WebP格式有什么高效方法？
项目里有上千张JPG/PNG图片要转成WebP，手动一张张转太慢了。我试过用cwebp命令行，但写了个脚本老是报错，路径一有空格就挂。 有没有靠谱的批量转换方案？最好是能保留目录结构、还能控制质量的那...
-
1
回答
20浏览
外链加了nofollow还会被搜索引擎抓取吗？
我最近在做SEO优化，页面里有些第三方跳转链接，比如广告和用户生成的内容。听说要加rel="nofollow"防止权重流失，但我发现Google Search Console里还是显示这些链接被爬了。...
