优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
52浏览
如何在 Vue 项目中自动将图片转为 WebP 并优雅降级？
我最近在做性能优化，想把项目里的 JPG/PNG 自动转成 WebP，但又怕老浏览器不支持。试了下用 webpack 插件生成 WebP，但不知道怎么在 Vue 模板里自动切换格式，现在只能手动写两套...
-
1
回答
27浏览
Webpack 的 Tree Shaking 为什么没生效？
我用 Webpack 5 打了个包，明明写了按需导入的代码，但打包后发现没被摇掉，体积还是很大。是不是配置有问题？ 我试过把 mode 设成 production，也确认用了 ES6 模块语法，比如 ...
-
1
回答
32浏览
惰性求值怎么用在前端数据处理里？
我在做一个表格组件，每次加载都要处理上千条数据，直接 map 一遍太卡了。听说可以用惰性求值优化，但不知道怎么在 JS 里实际实现？ 试过用 function* () {} 写生成器，但不确定怎么和 ...
-
2
回答
53浏览
图片压缩后体积没变小，是我用错方法了吗？
我最近在优化一个电商项目的商品详情页，发现图片加载特别慢。试了用 Canvas 做前端压缩，但生成的图片文件大小几乎没变，甚至有时候还变大了！明明原图是 2MB，压缩后还是 1.9MB 左右，完全没达...
-
2
回答
52浏览
骨架屏加载时数据闪现怎么解决？
我在用骨架屏优化列表页加载体验，但数据回来后会先闪一下空白再显示内容，体验很割裂。明明骨架屏和真实结构样式一致，不知道是不是 setState 的时机问题？ 我试过在 useEffect 里请求数据，...
-
1
回答
20浏览
移动端适配用 rem 还是 vw 更合适？
最近在做一个移动端 H5 项目，UI 给的设计稿是 375px 宽。我之前用的是 rem 配合 JS 动态设置根字体大小，但发现不同机型下还是有细微偏差，而且代码写起来有点麻烦。 听说现在很多人直接用...
-
2
回答
38浏览
WebP图片质量怎么评估才靠谱？
我最近把项目里的JPG都转成WebP了，体积是小了不少，但肉眼看着有些图好像糊了，尤其是文字和图标边缘。有没有什么靠谱的方法能客观评估WebP压缩后的质量？ 我试过用不同quality参数（比如70、...
-
1
回答
34浏览
CDN回源频繁导致加载变慢，该怎么优化缓存策略？
我们网站用了阿里云CDN，但最近发现很多静态资源（比如JS和CSS）每次都要回源拉取，页面加载明显变慢。明明设置了Cache-Control: max-age=31536000，但浏览器还是经常发请求...
-
1
回答
57浏览
Vue组件销毁后内存没释放，是不是哪里引用没清理？
我在一个 Vue 项目里做单页应用，切换路由时发现内存占用一直在涨。用 Chrome 的 Performance 面板看了下，卸载的组件好像没被 GC 回收。我明明在 beforeUnmount 里清...
-
2
回答
29浏览
Vue组件里父子互相引用会导致内存泄漏吗？
我在写一个弹窗组件，父组件通过 ref 拿到子组件实例，子组件又通过 props 拿到了父组件的引用，页面切换后发现内存占用一直不降，是不是循环引用导致的？试过在 beforeUnmount 里手动置...
-
2
回答
51浏览
前端频繁创建对象会导致内存泄漏吗？怎么判断是不是GC没及时回收？
最近在做一个数据可视化项目，页面里会不断生成新的图表对象，用的是 ECharts。我发现浏览器内存占用一直在涨，即使切换了页面也没降下来。我试过把实例变量设为 null，比如 chartInstanc...
-
1
回答
50浏览
用 div 写导航栏会影响 SEO 吗？
我之前一直用 div 搭页面结构，最近听说语义化标签对 SEO 更友好，有点慌。比如我的顶部导航栏现在是这样写的： const Header = () => { return ( <div...
-
1
回答
31浏览
移动端滚动卡顿怎么优化？
我在做一个移动端的长列表页面，用的是普通的 div 滚动，但一滚动就特别卡，尤其在低端安卓机上。 试过加 transform: translateZ(0) 和 will-change: scroll-...
-
1
回答
190浏览
内存快照里怎么定位内存泄漏的具体代码位置？
我在用 Chrome DevTools 做内存分析，拍了两个快照对比发现 detached DOM 节点越来越多，但不知道是哪段代码造成的。 看过官方文档说要看 retainers 链，可点进去全是像...
-
2
回答
64浏览
如何监控 Webpack 构建体积变化？
我们项目最近打包体积突然涨了 30%，但不知道是哪个依赖或模块导致的。试过用 webpack-bundle-analyzer 看当前包结构，但没法对比历史版本的变化趋势，有啥好办法能持续监控构建体积吗...
-
2
回答
39浏览
Intersection Observer 为什么监听不到元素进入视口？
我在做一个图片懒加载功能，用 Intersection Observer 监听图片是否进入视口，但回调一直没触发。页面滚动时完全没反应，是不是哪里写错了？ 我创建 observer 的代码是这样的： ...
-
2
回答
37浏览
对象池在前端动画中真的能减少内存抖动吗？
最近在做 Canvas 粒子动画，频繁创建和销毁粒子对象导致内存波动很大，FPS 也不稳。听说用对象池能缓解这个问题，但我照着网上的例子写了之后，效果不明显，甚至有时候更卡了。 我试过把用完的粒子放回...
-
1
回答
31浏览
移动端调试时样式错乱怎么排查？
我在做移动端页面时，本地 Chrome 模拟器看起来正常，但真机上某些元素位置完全不对，试过用 vConsole 和 Chrome DevTools 远程调试，但还是找不到原因。是不是媒体查询写错了？...
-
2
回答
36浏览
Webpack打包时如何合理拆分Chunk避免重复代码？
我用Webpack打包项目，发现多个页面引用了相同的第三方库（比如lodash和axios），但每个chunk里都包含了这些库的代码，体积特别大。 我试过用splitChunks配置，但效果不明显，甚...
-
1
回答
32浏览
SVG 文件体积太大，怎么优化才有效？
我用设计工具导出的 SVG 图标有好几 KB，放进项目后感觉加载变慢了。试过在线压缩工具，但有些会破坏样式，比如把 fill="currentColor" 改成固定颜色，导致主题切换失效。 有没有靠谱...
