优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
85浏览
为什么我的网页在Android设备上显示模糊，调整viewport没效果？
我在开发移动端页面时发现，同一个页面在iPhone显示正常，但华为和小米手机上文字和图标总是模糊。我设置了viewport： <meta name="viewport" content="wid...
-
2
回答
33浏览
Vue组件中大对象缓存导致内存飙升，如何有效优化？
我在开发图片预览功能时，用数组缓存了500+张base64图片，发现内存持续飙升到200MB以上。尝试在组件卸载时清空数组并赋值null，但任务管理器显示内存占用没降下来，这是为什么？ 代码结构大概是...
-
1
回答
17浏览
表格数据处理导致页面卡顿，Long Task怎么优化？
最近在做表格数据处理功能，当用户导入超过1w条数据时页面会卡死几秒，Lighthouse检测到Long Task有12秒。我尝试把循环改成用setTimeout分片处理，但实际运行时还是出现长时间阻塞...
-
1
回答
18浏览
为什么设置了Cache-Control还是频繁发起请求？
大家好，我在优化API请求时设置了Cache-Control:max-age=300，但发现页面刷新时还是频繁发起请求，控制台网络标签也没显示缓存命中的状态。比如获取用户信息的接口，明明30秒内重复访...
-
2
回答
25浏览
HTTPS配置后SEO工具提示存在混合内容错误怎么办？
最近给网站配置了HTTPS，但SEO检测工具总提示存在混合内容错误。我已经检查过所有资源链接了，但问题还是没解决： .header-logo { background: url(http://exam...
-
2
回答
39浏览
为什么给图片链接加了prefetch后反而加载更慢了？
我在开发单页应用时，想用预加载下一个页面的图片资源。按照文档在标签里加了rel="prefetch"，但发现图片反而比直接访问时加载更慢了，这是什么情况？ 具体场景是这样的：当前页面有个导航链接指向商...
-
1
回答
22浏览
Vue组件上报监控数据时，压缩后的JSON体积反而更大怎么办？
我在Vue项目里做监控上报，想用gzip压缩数据再发送，但发现压缩后的base64字符串比原始JSON还大20%。用的是pako库，数据量大概3KB左右，这是为什么呢？ <template>...
-
1
回答
51浏览
为什么Webpack配置了Tree Shaking后，某些未引用的代码依然被打包进去？
我在项目里配置了Webpack的Tree Shaking，但发现未使用的模块还是被打包了。比如这个组件里只用了utils.js的add函数： // component.jsx import { add...
-
1
回答
39浏览
React里用了modulepreload标签预加载JS模块，但资源没加载成功怎么办？
我在React组件里用标签预加载了一个动态导入的JS模块，按文档写了modulepreload，但控制台网络面板里根本看不到请求，也没报错。代码检查了好几遍，属性都没问题，这是怎么回事？ // App...
-
1
回答
76浏览
React中使用闭包导致内存泄漏，该怎么优化？
在开发React列表组件时发现内存泄漏问题，代码里用闭包保存了状态变量。比如这个定时器示例： useEffect(() => { const timer = setTimeout(() =>...
-
1
回答
34浏览
DNS预加载没生效？怎么设置dns-prefetch才能让图片加载更快？
我在页面里加了，但图片加载速度没变，这是为啥？ 场景是这样的：网站轮播图的图片都来自img.example.com域名，我按教程加了dns-prefetch标签。但用Chrome开发者工具看网络面板，...
-
2
回答
24浏览
生产环境如何根据日志级别动态控制输出？
最近在给公司项目做日志分级优化，想让开发环境输出所有日志，测试环境只留warn和error，生产环境只显示error。但按照网上的方法用process.env.NODE_ENV包裹console语句后...
-
1
回答
25浏览
如何实现前端日志分级过滤，避免生产环境输出冗余信息？
现在在做监控优化时发现，开发阶段用了很多console.log和console.warn，但生产环境跑起来后日志量太大影响性能。尝试用process.env.NODE_ENV做条件判断包裹日志： if...
-
1
回答
24浏览
Tree虚拟化实现时如何解决深度嵌套节点渲染卡顿？
我在用React实现公司组织架构的Tree虚拟化列表时遇到问题，数据有20层嵌套结构。虽然用了react-virtualized和react-window控制可视区域，但展开多级子节点后滚动还是卡得要...
-
2
回答
26浏览
骨架屏在数据加载完成前如何保持位置不偏移？
在用Vue做文章列表页时，我给每个卡片加了骨架屏，但真实数据加载完成后整个布局会突然跳动。之前试过给骨架屏设置固定高度，但滚动条会闪一下，改用flex布局后间距又对不齐。现在用的是这样写的： <...
-
1
回答
14浏览
React中如何实现渐进增强的图片懒加载兼容旧浏览器？
我在用React做图片懒加载时遇到了问题，用IntersectionObserver实现的方案在IE11完全失效，基础图片都不显示了。我试过在组件里这样写： function LazyImage({ ...
-
2
回答
17浏览
WebP图片转换后，如何量化评估质量损失？
在React项目里用sharp库把JPG转WebP时，设置quality=80后图片边缘有点模糊。有没有什么客观指标或工具能帮我评估质量损失？ 我试过用文件大小对比和视觉检查，但这样太主观了。比如下面...
-
2
回答
24浏览
为什么我的Service Worker缓存策略在页面更新后仍然加载旧资源？
我在用Service Worker做静态资源缓存时遇到问题。部署了新版本后，明明控制台显示已安装新Worker，但页面还是加载旧的/calculation.js文件。 尝试过手动清除浏览器缓存和注册新...
-
1
回答
13浏览
WebP图片懒加载时，为什么部分图片显示成空白？
我在用Intersection Observer做WebP图片懒加载时，发现Chrome能正常显示，但Firefox有30%几率显示空白图片。之前用标签的srcset属性根据浏览器支持动态切换WebP...
-
1
回答
20浏览
Skeleton骨架屏如何动态匹配不同分辨率的图片占位？
最近在做首屏骨架屏优化时遇到个问题，当页面在不同分辨率下，我用固定宽高的div模拟的商品图片占位框，加载真实图片后总会出现比例错乱。 比如在移动端横屏时，.skeleton-img设置的width: ...
