优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
37浏览
为什么我存到SessionStorage的数据页面刷新后就没了？
在开发购物车功能时，我用sessionStorage.setItem('cart', JSON.stringify(items))保存数据，但页面刷新后数据就找不到了，这是为什么啊？ 我已经检查过键名...
-
2
回答
45浏览
移动端点击事件300ms延迟怎么彻底解决？
最近在做移动端适配时发现，页面按钮的点击事件有明显延迟，测试工具显示每次点击都有300ms左右的延迟。我尝试过引入FastClick库，但页面加载时控制台报错Cannot read propertie...
-
2
回答
36浏览
preconnect明明写了，为什么DNS预解析还是没生效？
在首页头部加了<link rel="preconnect" href="https://cdn.example.com">，但开发者工具网络面板里这个CDN的资源DNS查询时间还是显示"0...
-
2
回答
36浏览
域名分片后静态资源加载反而变慢了？怎么回事？
最近给项目做了域名分片优化，把静态资源分到三个子域名加载，结果发现图片和JS文件加载时间比之前更久了，这是为什么啊？ 之前都是用主域名加载资源，现在改成、script src="cdn2.exampl...
-
2
回答
51浏览
设置了Cache-Control:max-age=3600后页面还是频繁请求CSS文件？
在开发中，我给CSS文件设置了HTTP头Cache-Control: max-age=3600，但发现每次刷新页面时，浏览器都会重新请求该文件。明明应该缓存一小时才对啊！ 尝试过清除浏览器缓存后再访问...
-
2
回答
77浏览
Service Worker缓存策略下，React应用更新后旧资源如何清理？
在React项目里用了Service Worker做静态资源缓存，但最近部署新版本后，部分用户还是加载旧的JS文件。我按网上的方法在service-worker.js里设置了版本号： // servi...
-
2
回答
44浏览
使用babel-plugin-import按需加载Ant Design为什么样式没生效？
我在项目里用Ant Design时按需编译配置了babel-plugin-import，但样式就是不生效。虽然组件功能正常，但按钮样式全是默认浏览器样式。之前直接引入完整库没问题，改成按需后就出问题了...
-
2
回答
46浏览
预加载prefetch的资源怎么没按预期加载？
最近在优化SPA应用的路由预加载，用JavaScript动态添加了prefetch链接： function preloadNextPage(path) { const link = document....
-
2
回答
41浏览
如何避免请求队列中频繁API调用被限流？
我正在做一个实时数据同步功能，需要连续发送大量POST请求到API，但总被服务器限流返回429。我尝试用队列加setTimeout控制频率，但实际测试发现请求还是挤在一起发送了，代码哪里有问题？ le...
-
2
回答
68浏览
React中如何调整WebP图片质量参数而不影响兼容性？
我在React项目里用标签加载WebP图片，想通过调整quality参数平衡质量和加载速度。但发现设置quality=70后图片反而更模糊了，而且兼容性检测工具提示旧版安卓设备可能不支持。代码这样写的...
-
2
回答
29浏览
prerender预加载页面时为什么会触发两次DOMContentLoaded事件？
我在导航页给某个链接加了prerender预加载，结果发现目标页面的DOMContentLoaded事件触发了两次。明明代码看起来没问题，这是什么情况？ 示例代码是这样的： <link rel=...
-
2
回答
34浏览
为什么Rollup打包后没Tree Shaking掉未引用的代码？
在用Rollup打包项目时，明明某个工具函数没被引用，但打包后的bundle里还是能看到它的代码。我检查过导出方式是ES模块语法，配置文件也设置了treeshaking: true，这是为什么呢？ 比...
-
2
回答
33浏览
为什么我的React组件用next/dynamic预加载子路由组件时预加载没生效？
我在React项目里用next/dynamic做路由预加载，按文档写了预加载策略，但实际测试发现组件加载时还是有延迟。代码是这样的： import dynamic from 'next/dy...
-
2
回答
50浏览
移动端按钮快速点击穿透怎么解决？防抖加disabled都没用
移动端项目里有个提交按钮，用户快速点击时会出现多次请求。我给按钮加了disabled状态，同时用了防抖函数： function handleClick() { this.disabled = true...
-
2
回答
72浏览
React移动端按钮点击总是有延迟怎么办？
我在用React开发移动端时，点击按钮总会延迟好几百毫秒才触发，试过加ontouchend和设置touch-action: none都没用，这是什么情况啊？ import { useState } f...
-
2
回答
56浏览
React错误边界如何捕获子组件未处理的Promise rejection？
我在React项目里用错误边界组件包裹了一个异步请求的子组件，但发现当子组件里未处理的Promise被reject时，错误边界没有触发。我尝试在子组件里用try...catch包裹async函数，但依...
-
2
回答
62浏览
React函数组件中如何避免因函数重新创建导致子组件频繁渲染？
我在开发一个React项目时发现，父组件传递的函数每次重新渲染都会生成新引用，导致子组件不必要的重复渲染。比如下面这个搜索框组件： function SearchBar({ onSearch }) {...
-
2
回答
52浏览
移动端视频自动播放时加载卡顿怎么办？
我在给移动端页面加视频预览功能时，用了video标签自动播放，设置了muted和autoplay属性。但测试时发现视频加载特别卡，页面都卡成PPT了。 我尝试过把视频转成webm格式，还加了以下CSS...
-
2
回答
30浏览
Vite预构建配置后为什么依赖包还是没被预构建？
最近在优化项目构建速度时，按照文档给lodash配置了预构建，但打包后发现它还是被内联了。明明在vite.config.js里写了optimizeDeps.include，重启服务和清理缓存都没用，这...
-
2
回答
43浏览
为什么我的JavaScript计时器会导致内存泄漏？
我正在开发一个实时数据监控的仪表盘，用setInterval定时更新数据。但发现每次页面切换后内存都没释放，用开发者工具看DOM已经清空了，但内存占用一直涨。代码大致是这样的： function st...
