优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
1
回答
59浏览
为什么引入了未使用的CSS变量后打包体积反而增加了？
我在项目里按需引入了一个CSS变量文件，但即使没用到某些变量，打包后的CSS文件反而比之前更大了。明明用了Webpack的Tree Shaking配置啊？ 比如我写了这样的CSS文件： :root {...
-
2
回答
38浏览
页面刷新时自定义上报事件的数据怎么总是丢失？
我在做页面性能监控时，需要在页面刷新前上报用户操作数据。把上报逻辑写在window.unload事件里，但发现有30%的上报请求根本没有触发，这是怎么回事？ 尝试过这样写： window.addEve...
-
1
回答
48浏览
循环中频繁计算复杂表达式如何用惰性求值优化？
最近在处理一个大数据列表渲染时发现性能卡顿，每次循环都要执行Math.sqrt(item.value * (item.value + 1))这样的计算。我尝试把计算结果存到变量里放到循环外面，但发现数...
-
2
回答
83浏览
React表单提交时乐观更新后样式回滚不生效怎么办？
我在做一个任务提交功能，用了乐观更新直接把按钮换成成功图标，但后端返回错误时需要回滚到原始状态。之前用useState存表单状态，成功时改成success，失败改回pending，但发现错误提示弹出时...
-
1
回答
72浏览
React项目用lodash-es为啥Tree Shaking没效果？
大家好，我在React项目里改用lodash-es做Tree Shaking优化，但打包后发现整个lodash都被引入了。比如这样写： import _ from 'lodash-es'; const...
-
2
回答
53浏览
为什么我的AVIF图片在IE和旧版Edge显示不出来？
折腾了半天把项目图片都转成AVIF格式了，结果客户反馈说公司电脑看不到图片。检查发现是IE11和Edge 79版本完全空白，换成其他格式又没问题，这是兼容性没处理好吗？ 我按网上的教程直接改了标签的s...
-
1
回答
57浏览
React项目中为什么Tree Shaking没删除未使用的导出函数？
我在React项目里用ES6模块导出了一些工具函数，但打包后发现未使用的函数仍然留在bundle里。比如这个utils.js： // utils.js export function useFetch...
-
2
回答
26浏览
为什么给第三方CDN加了dns-prefetch还是没提前解析域名？
我在页面里加了<link rel="dns-prefetch" href="//cdn.example.com">，但用Chrome开发者工具看网络请求时，发现加载这个CDN的图片时还是有...
-
1
回答
31浏览
监控数据传输时gzip压缩失效怎么办？
我在用fetch发送POST请求压缩监控数据时，明明设置了gzip压缩，但后端收到的还是明文数据。我用compressor-gzip库压缩了JSON字符串，代码也设置了Content-Encoding...
-
2
回答
47浏览
固定高度长列表滚动时子项高度自适应导致内容错乱怎么办？
我在用Vue做固定高度的虚拟滚动列表，给父容器设了height: 400px和overflow:auto，每个子项用div包裹动态内容。但滚动到中间时文字会突然撑开高度导致后面内容错位，试过给子项加m...
-
2
回答
58浏览
React组件中如何避免DOM引用导致的内存泄漏？
在开发一个动态加载的列表组件时，我给列表容器加了ref用来监听滚动，但发现组件卸载后内存 profiling 还能看到之前的实例残留。 已经用了useEffect的返回函数把ref.current设为...
-
2
回答
57浏览
API失败重试时如何避免请求堆积和内存泄漏？
在做网络请求重试功能时，用递归+setTimeout实现指数退避，但发现当接口连续失败多次后，控制台打印出大量重复请求，甚至出现内存警告。尝试过把setTimeout改成async/await写法，但...
-
2
回答
52浏览
React组件里用定时器导致内存泄漏怎么优化？
我在写一个实时刷新数据的React组件，发现组件卸载后计数器还在跑，内存占用越来越高。代码是这样写的： function Counter() { const [count, setCount] = u...
-
2
回答
64浏览
async和defer属性对首屏加载有什么具体影响？
我在优化网站首屏加载时发现，给第三方统计脚本加了async属性后，页面反而更卡了？ 具体场景是这样的：我把统计脚本放在<head>里，加上async后，LCP从3.2秒变成4.1秒。后来试...
-
2
回答
32浏览
移动端调试时为什么设备旋转后样式错乱？
我在开发响应式布局时遇到个奇怪的问题，用Chrome开发者工具移动端调试旋转屏幕时，布局会突然挤在一起，但实际手机旋转又正常。之前设置了meta(name="viewport")也没解决，这是什么原因...
-
2
回答
50浏览
为什么用了CDN后部分静态资源还是加载超时？
最近给网站配置了CDN加速，把图片和CSS都指向了CDN域名，但发现某些图片偶尔会出现加载超时的情况。已经检查过CDN的缓存规则，把图片设置了最大缓存时间，也确认了源站服务器能正常访问这些资源。但用户...
-
2
回答
55浏览
移动端Touch事件在快速滑动时会丢失触发？
在移动端开发图片轮播时，我给图片容器绑定了touchstart和touchend事件，通过计算偏移量切换图片。但用户快速滑动时经常无法触发切换，有时候事件直接没反应。我试过改用touchmove但频繁...
-
2
回答
62浏览
cache-loader在开发环境一直缓存旧代码怎么办？
在项目中配置了cache-loader想提升构建速度，但发现修改代码后页面没变化，必须重启服务才生效。尝试过删除node_modules/.cache目录也没用，控制台没有报错。webpack4的配置...
-
2
回答
49浏览
React分页加载时新数据追加失败怎么办？
我在做一个商品列表分页，用useState存数据和页码，滚动到底部触发fetch请求。但第二次加载时新数据覆盖了旧数据而不是追加，控制台没报错，这是为什么呢？ const [items, setIte...
-
2
回答
71浏览
Next.js中使用ISR时，为什么首屏静态文件仍被阻塞加载？
我在用Next.js做博客项目，配置了getStaticProps+incremental static regeneration。按文档把文章列表页设为静态生成，详情页用revalidate=100...
