优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
24浏览
WebP有损压缩后渐变背景出现明显色块怎么办？
在项目里把图片换成WebP格式后，产品图的渐变背景出现了明显色块，调整quality参数也没太大改善。比如这张背景图： <picture> <source srcset="bg.we...
-
1
回答
12浏览
空状态页面如何设计才能提升用户留存？有没有具体优化技巧？
最近在做电商商品列表页的空状态优化，现在用的是简单的div显示“暂无商品”和一个刷新按钮，但用户流失率很高。试过加个插画和文案，但转化率没明显变化，该怎么提升互动呢？ 之前参考了其他平台案例，发现有的...
-
1
回答
14浏览
Vue项目中使用IntersectionObserver实现加载进度条导致滚动卡顿怎么办？
在Vue项目里想用IntersectionObserver检测关键资源加载进度，然后发现滚动时页面卡顿，特别是资源较多时更明显。我尝试给每个资源元素添加了观察器，然后在回调里计算总进度： const ...
-
1
回答
15浏览
requestIdleCallback优化长列表时为什么还是会卡顿？
我用虚拟列表渲染上千条数据时，尝试用requestIdleCallback分批渲染，但滚动到后面还是明显卡顿。之前试过分页和简单的节流函数都没彻底解决，现在这样写： function renderBa...
-
1
回答
16浏览
为什么我的LCP评分总是卡在2.5秒以上？优化后还是没达标
最近在优化网站LCP指标，把关键资源压缩到200KB以内了，也用了标签，但实测LCP还是2.6秒左右。我用Lighthouse测试发现，那个大图的传输时间显示1.8秒，为啥总时间这么高？ 尝试过把图片...
-
2
回答
32浏览
Memory Cache缓存导致动态组件样式残留怎么办？
在做页面切换时用了Memory Cache缓存组件状态，但发现上一个页面的CSS变量样式残留了，比如这个示例： :root { --primary-color: #4CAF50; } .dynamic...
-
2
回答
32浏览
为什么用LocalStorage存大对象时浏览器提示内存溢出？
在项目里用localStorage.setItem('userConfig', JSON.stringify(bigObj))存了一个包含几百个表单状态的大对象，结果Chrome控制台突然报错Unca...
-
2
回答
11浏览
为什么我存到SessionStorage的数据页面刷新后就没了？
在开发购物车功能时，我用sessionStorage.setItem('cart', JSON.stringify(items))保存数据，但页面刷新后数据就找不到了，这是为什么啊？ 我已经检查过键名...
-
2
回答
15浏览
移动端点击事件300ms延迟怎么彻底解决？
最近在做移动端适配时发现，页面按钮的点击事件有明显延迟，测试工具显示每次点击都有300ms左右的延迟。我尝试过引入FastClick库，但页面加载时控制台报错Cannot read propertie...
-
2
回答
18浏览
preconnect明明写了，为什么DNS预解析还是没生效？
在首页头部加了<link rel="preconnect" href="https://cdn.example.com">，但开发者工具网络面板里这个CDN的资源DNS查询时间还是显示"0...
-
2
回答
13浏览
域名分片后静态资源加载反而变慢了？怎么回事？
最近给项目做了域名分片优化，把静态资源分到三个子域名加载，结果发现图片和JS文件加载时间比之前更久了，这是为什么啊？ 之前都是用主域名加载资源，现在改成、script src="cdn2.exampl...
-
1
回答
15浏览
设置了Cache-Control:max-age=3600后页面还是频繁请求CSS文件？
在开发中，我给CSS文件设置了HTTP头Cache-Control: max-age=3600，但发现每次刷新页面时，浏览器都会重新请求该文件。明明应该缓存一小时才对啊！ 尝试过清除浏览器缓存后再访问...
-
1
回答
43浏览
Service Worker缓存策略下，React应用更新后旧资源如何清理？
在React项目里用了Service Worker做静态资源缓存，但最近部署新版本后，部分用户还是加载旧的JS文件。我按网上的方法在service-worker.js里设置了版本号： // servi...
-
2
回答
20浏览
使用babel-plugin-import按需加载Ant Design为什么样式没生效？
我在项目里用Ant Design时按需编译配置了babel-plugin-import，但样式就是不生效。虽然组件功能正常，但按钮样式全是默认浏览器样式。之前直接引入完整库没问题，改成按需后就出问题了...
-
2
回答
26浏览
预加载prefetch的资源怎么没按预期加载？
最近在优化SPA应用的路由预加载，用JavaScript动态添加了prefetch链接： function preloadNextPage(path) { const link = document....
-
1
回答
15浏览
如何避免请求队列中频繁API调用被限流？
我正在做一个实时数据同步功能，需要连续发送大量POST请求到API，但总被服务器限流返回429。我尝试用队列加setTimeout控制频率，但实际测试发现请求还是挤在一起发送了，代码哪里有问题？ le...
-
1
回答
42浏览
React中如何调整WebP图片质量参数而不影响兼容性？
我在React项目里用标签加载WebP图片，想通过调整quality参数平衡质量和加载速度。但发现设置quality=70后图片反而更模糊了，而且兼容性检测工具提示旧版安卓设备可能不支持。代码这样写的...
-
1
回答
15浏览
prerender预加载页面时为什么会触发两次DOMContentLoaded事件？
我在导航页给某个链接加了prerender预加载，结果发现目标页面的DOMContentLoaded事件触发了两次。明明代码看起来没问题，这是什么情况？ 示例代码是这样的： <link rel=...
-
2
回答
19浏览
为什么Rollup打包后没Tree Shaking掉未引用的代码？
在用Rollup打包项目时，明明某个工具函数没被引用，但打包后的bundle里还是能看到它的代码。我检查过导出方式是ES模块语法，配置文件也设置了treeshaking: true，这是为什么呢？ 比...
-
1
回答
13浏览
为什么我的React组件用next/dynamic预加载子路由组件时预加载没生效？
我在React项目里用next/dynamic做路由预加载，按文档写了预加载策略，但实际测试发现组件加载时还是有延迟。代码是这样的： import dynamic from 'next/dy...
