优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
14浏览
使用Performance API测量CSS动画性能时duration值异常大怎么办？
我在用Performance API监控页面动画性能时遇到问题，当使用performance.mark()和performance.measure()测量CSS动画的执行时间，发现返回的duratio...
-
1
回答
10浏览
渐进式渲染时首屏内容被二次重绘怎么办？
我在用骨架屏做渐进式渲染时遇到个问题，当真实内容加载完成替换骨架屏时，页面会出现明显闪烁。比如下面这个商品卡片： <div class="skeleton"> <div class=...
-
2
回答
24浏览
LocalStorge存大量对象时读写变慢怎么办？
在做电商项目时需要缓存用户浏览过的1000多个商品对象到LocalStorge，发现每次存取都要等几秒。试过用JSON.stringify()序列化，但读取时遍历解析还是卡顿。 代码大概是这样循环存储...
-
1
回答
15浏览
为什么我的Vue项目中使用WebP图片在某些浏览器显示异常？
我在Vue项目里尝试用WebP格式优化图片资源，用标签直接引入.webp文件。在Chrome/Firefox都能正常显示，但测试时发现IE11和旧版Safari（比如14.1）显示空白。我检查过文件路...
-
1
回答
13浏览
为什么开启will-change后页面反而更卡了？
最近在优化一个滚动列表的性能，给列表项加了will-change: transform想让GPU加速，但发现滚动反而更卡了。帧率从60直接掉到30左右，还偶尔出现卡顿。尝试过把属性改成content也...
-
1
回答
13浏览
QUIC协议请求总是报错”Unsupported Protocol”怎么办？
我在用fetch发送请求时想用QUIC协议，但总提示"Unsupported Protocol"错误。明明服务器配置了QUIC支持，代码也按照文档改了，但还是不行... 尝试过这样写请求代码： fet...
-
1
回答
16浏览
Service Worker缓存策略中，动态路由页面怎么总是返回旧内容？
我在用Vue Router做单页应用时，给Service Worker设置了缓存策略，静态资源没问题，但动态路由页面（比如/user/123）更新后，客户端还是返回旧内容。尝试过用url.pathna...
-
1
回答
16浏览
为什么使用Gzip压缩后JS文件反而变大了？
我在用Gulp给项目文件做Gzip压缩时，发现某个.min.js文件压缩后的.gz文件比原文件大1KB左右，这正常吗？ 已经配置了gulp-gzip插件，并设置threshold: 0强制压缩。测试时...
-
2
回答
16浏览
Webpack打包后bundle体积太大怎么优化？
最近在优化项目打包体积，用Webpack打包后主chunk还是有3MB多，尝试过配置SplitChunksPlugin分包，但效果不明显。我按照网上的教程设置了common chunk和vendor ...
-
2
回答
30浏览
使用DLL动态链接后为什么生产环境报manifest.json文件找不到？
在给项目配置webpack DLL时，开发环境能正常加载dll文件，但打包生产环境时一直提示dll_vendor_manifest_*.json未找到，我已经按文档设置了manifest字段，还特意在...
-
1
回答
8浏览
SSR页面动态内容SEO无法抓取怎么办？
我在用Next.js做SSR优化时遇到个奇怪的问题。页面用getStaticProps请求了API数据，本地开发和生产环境访问都能正常显示动态内容，但Google Search Console里显示抓...
-
1
回答
15浏览
为什么启用Webpack5的Tree Shaking后某些未用代码没被清除？
最近在升级项目到Webpack5时，按文档配置了Tree Shaking，但发现第三方库里的未使用方法还是被打包进bundle里了。明明在package.json加了"sideEffects": fa...
-
1
回答
21浏览
Webpack IgnorePlugin配置后为什么没排除模块？
我在用Webpack优化项目时，想通过IgnorePlugin排除某个不常用的依赖模块。按照文档配置了以下代码，但打包后的bundle里还是能看到这个模块，到底是哪里出问题了？ const webpa...
-
1
回答
20浏览
Retina屏下图片显示模糊，如何正确设置srcset属性？
在适配移动端Retina屏幕时，我给图片用了2倍图，设置了标签的srcset属性，但实际在iPhone上还是模糊。比如用了1200w2.jpg这样的命名，代码写成： <img src="imag...
-
1
回答
27浏览
async和defer到底该怎么用才能优化首屏加载？
最近在优化页面加载速度，把两个JS文件分别用了async和defer，但页面还是感觉卡顿。比如这个代码： <script src="main.js" defer></script&g...
-
2
回答
21浏览
React Query预加载时为什么会出现重复请求？
我在用React Query做页面预加载时遇到问题，设置了staleTime和keepPreviousData，但每次刷新页面还是会触发两次请求： 我的查询配置是这样的： useQuery(['pos...
-
1
回答
14浏览
如何根据用户操作动态调整多个API请求的优先级？
在开发数据表格时同时发起筛选、分页和搜索请求，但关键筛选数据总是最后返回导致界面卡顿。之前尝试用axios.all并发请求，但关键数据因为后端逻辑总是最后回来，有什么办法能让筛选请求优先完成吗？ 试过...
-
1
回答
44浏览
WebP图片在响应式布局里兼容旧浏览器时为什么会重复加载？
我在给网站做图片优化时，想用WebP格式结合响应式图片技术。按照教程写了picture标签，里面放了不同尺寸的webp和jpg版本，但发现旧浏览器同时加载了webp和jpg的图片，这样岂不是浪费流量？...
-
2
回答
59浏览
React里大对象频繁更新导致内存飙升怎么办？
在做数据看板时，每次渲染都要生成包含10万条记录的chartData对象，即使用了useMemo和缓存，内存还是持续上涨，最后直接撑爆浏览器... 尝试把数据拆成多个小对象也没用，监控发现这个大对象一...
-
1
回答
11浏览
递归计算斐波那契数列时为什么会出现栈溢出？
我在用递归写斐波那契数列时，当n超过1000就会报错“Maximum call stack size exceeded”。尝试把代码改成尾递归形式后还是不行，难道不是尾递归优化能解决吗？ 我的代码是这...
