优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
44浏览
为什么给第三方CDN加了dns-prefetch还是没提前解析域名？
我在页面里加了<link rel="dns-prefetch" href="//cdn.example.com">，但用Chrome开发者工具看网络请求时，发现加载这个CDN的图片时还是有...
-
2
回答
50浏览
监控数据传输时gzip压缩失效怎么办？
我在用fetch发送POST请求压缩监控数据时，明明设置了gzip压缩，但后端收到的还是明文数据。我用compressor-gzip库压缩了JSON字符串，代码也设置了Content-Encoding...
-
2
回答
73浏览
固定高度长列表滚动时子项高度自适应导致内容错乱怎么办？
我在用Vue做固定高度的虚拟滚动列表，给父容器设了height: 400px和overflow:auto，每个子项用div包裹动态内容。但滚动到中间时文字会突然撑开高度导致后面内容错位，试过给子项加m...
-
2
回答
92浏览
React组件中如何避免DOM引用导致的内存泄漏？
在开发一个动态加载的列表组件时，我给列表容器加了ref用来监听滚动，但发现组件卸载后内存 profiling 还能看到之前的实例残留。 已经用了useEffect的返回函数把ref.current设为...
-
2
回答
90浏览
API失败重试时如何避免请求堆积和内存泄漏？
在做网络请求重试功能时，用递归+setTimeout实现指数退避，但发现当接口连续失败多次后，控制台打印出大量重复请求，甚至出现内存警告。尝试过把setTimeout改成async/await写法，但...
-
2
回答
95浏览
React组件里用定时器导致内存泄漏怎么优化？
我在写一个实时刷新数据的React组件，发现组件卸载后计数器还在跑，内存占用越来越高。代码是这样写的： function Counter() { const [count, setCount] = u...
-
2
回答
82浏览
async和defer属性对首屏加载有什么具体影响？
我在优化网站首屏加载时发现，给第三方统计脚本加了async属性后，页面反而更卡了？ 具体场景是这样的：我把统计脚本放在<head>里，加上async后，LCP从3.2秒变成4.1秒。后来试...
-
2
回答
53浏览
移动端调试时为什么设备旋转后样式错乱？
我在开发响应式布局时遇到个奇怪的问题，用Chrome开发者工具移动端调试旋转屏幕时，布局会突然挤在一起，但实际手机旋转又正常。之前设置了meta(name="viewport")也没解决，这是什么原因...
-
2
回答
76浏览
为什么用了CDN后部分静态资源还是加载超时？
最近给网站配置了CDN加速，把图片和CSS都指向了CDN域名，但发现某些图片偶尔会出现加载超时的情况。已经检查过CDN的缓存规则，把图片设置了最大缓存时间，也确认了源站服务器能正常访问这些资源。但用户...
-
2
回答
87浏览
移动端Touch事件在快速滑动时会丢失触发？
在移动端开发图片轮播时，我给图片容器绑定了touchstart和touchend事件，通过计算偏移量切换图片。但用户快速滑动时经常无法触发切换，有时候事件直接没反应。我试过改用touchmove但频繁...
-
2
回答
78浏览
cache-loader在开发环境一直缓存旧代码怎么办？
在项目中配置了cache-loader想提升构建速度，但发现修改代码后页面没变化，必须重启服务才生效。尝试过删除node_modules/.cache目录也没用，控制台没有报错。webpack4的配置...
-
2
回答
75浏览
React分页加载时新数据追加失败怎么办？
我在做一个商品列表分页，用useState存数据和页码，滚动到底部触发fetch请求。但第二次加载时新数据覆盖了旧数据而不是追加，控制台没报错，这是为什么呢？ const [items, setIte...
-
2
回答
85浏览
Next.js中使用ISR时，为什么首屏静态文件仍被阻塞加载？
我在用Next.js做博客项目，配置了getStaticProps+incremental static regeneration。按文档把文章列表页设为静态生成，详情页用revalidate=100...
-
2
回答
71浏览
Vue图片懒加载时，加载失败的降级方案没生效怎么办？
我在用Vue做图片懒加载优化时，想给加载失败的图片显示默认占位图。参考了一些方案后写了类似下面的代码，但实际测试时发现图片加载失败后还是直接显示红叉，占位图没出现。试过把<img标签换成v-if...
-
2
回答
60浏览
为什么用了后页面加载反而变慢了？
我在单页应用里给下一个路由的CSS文件加了<link rel='prefetch'>，但实际测试发现首屏渲染反而比之前慢了0.5秒，这是为什么呢？ 我尝试在路由切换时动态插入预加载标签：c...
-
2
回答
42浏览
预加载的资源为什么会阻塞页面加载？
我在用link rel="preload"预加载图片时发现页面反而更卡了，明明只是预加载下一屏的图片啊。我按照文档写了这样的代码： document.querySelectorAll('.next-p...
-
2
回答
130浏览
为什么用了translateZ后页面滚动还是卡顿？
我在做一个带复杂动画的页面，给元素加了transform: translateZ(0)想触发GPU加速，但滚动时还是卡顿。用Chrome的Layer仪表盘看了下，发现只有部分元素显示为composit...
-
2
回答
66浏览
Vite的manualChunks配置后组件还是单独打包怎么办？
我在用Vite开发React项目时，想通过manualChunks把四个公共组件打包到同一个chunk里，但配置后每个组件还是单独生成了文件... 项目结构是这样的，四个组件分布在不同页面： // v...
-
2
回答
57浏览
按路由动态分包后为什么还是有重复代码？
我在用Vue项目做路由动态分包时遇到问题，按路由拆分的包里总包含重复的axios代码。我试过在webpack的splitChunks里设置cacheGroups，但发现每个chunk里还是有axios...
-
2
回答
88浏览
为什么在循环里声明变量优化后性能还是卡顿？
最近在优化一个需要循环创建1000个DOM元素的功能，发现每次循环里用var item声明变量时页面卡顿。我改成用const后性能没变化，控制台也没有报错，但元素渲染还是明显延迟： for (let ...
