优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
55浏览
页面关闭时日志上报总失败怎么办？
最近在做监控优化，发现用户关闭页面时上报的日志经常丢失。我在window.unload事件里用了fetch加keepalive: true，还试过把请求放在setTimeout里，但有时候还是会丢失数...
-
1
回答
67浏览
为什么在CSS里用dns-prefetch预加载图片域名没效果？
我在做页面优化时，想用dns-prefetch预加载第三方图片域名，但发现DNS查询还是延迟了。之前在CSS文件里这样写的： /* 图片资源预加载 */ @dns-prefetch images.ex...
-
2
回答
54浏览
React代码分割预获取后为什么路由切换还是卡顿？
我在用React.lazy和Suspense做代码分割，想用import()预获取组件，但切换路由时还是有明显延迟。按照文档在路由变化前调用了import('组件路径')，但控制台显示模块还是在切换时...
-
2
回答
50浏览
为什么我的Tree Shaking没生效？providedExports配置有问题吗？
我在项目里用rollup打包时遇到了奇怪的问题。明明只导入了utils.js里的add函数，但打包结果里却包含了整个math模块： // utils.js import { add } from '....
-
1
回答
78浏览
图片懒加载时占位容器高度塌陷怎么办？
在做图片列表懒加载时，用了Intersection Observer，但图片未加载时占位容器高度会塌陷，导致页面布局跳动。试过给图片设置固定高度，但不同图片尺寸差异大，效果不好： <div cl...
-
2
回答
64浏览
为什么我的React组件无法通过Tree Shaking移除未使用的导入？
我在开发React组件时遇到了奇怪的问题。我按照文档在组件里只用了lodash的_.each方法，但打包后发现整个lodash库都被包含了。明明代码里没用到其他函数啊！ 我尝试过这样写： import...
-
2
回答
22浏览
为什么我的页面内存持续增长，Performance面板显示大量DOM节点？
在开发一个实时数据图表时，我用了setInterval每秒生成新的DOM元素，但看Performance面板的Memory快照，DOM节点数一直在涨，手动调用removeChild好像没起作用，这是怎...
-
2
回答
48浏览
移动端调试时，Chrome模拟器的缩放比例怎么设置才能正常显示布局？
我在用Chrome开发者工具调试移动端页面时，发现模拟器里的页面总是自动缩放导致布局错乱。比如在iPhone 12的模拟器里，虽然设置了Device tollbar的缩放为100%，但文字和按钮还是显...
-
2
回答
20浏览
为什么给元素加了transform后合成层没生效还卡顿？
最近在优化页面滚动动画，给元素加了transform: translateZ(0)想触发合成层，但实际测试时发现页面还是卡顿。用Chrome的Layer仪也没显示"composited"标记。 我的结...
-
2
回答
35浏览
SSR页面静态化后，为什么动态内容SEO抓取不到？
我最近在Vue项目里用了Vue Server Renderer做SEO优化，首页通过API获取的轮播图数据在浏览器能正常显示，但用Google Search Console检查时发现HTML源码里这部...
-
2
回答
100浏览
对象池优化后内存反而增加，哪里出错了？
我在优化一个实时渲染动画时用了对象池，但监控发现内存占用反而比直接new对象更高。明明复用了实例，为什么会出现这种情况？ 尝试把DOM元素缓存到对象池里，代码大概是这样的： class DOMPool...
-
2
回答
67浏览
Service Worker注册成功但无法拦截请求，是什么原因？
我在给PWA应用添加Service Worker时遇到了奇怪的问题。按照教程写好了fetch事件监听，控制台也显示注册成功，但刷新页面时网络面板显示所有请求都是直接走的网络，没有触发缓存逻辑。已经检查...
-
1
回答
87浏览
Vue项目中Disk Cache如何控制？文件更新后依然加载旧版本
大家好，我在Vue项目中配置了nginx的expires头想优化Disk Cache，但文件更新后浏览器依然加载旧版本，这是为什么呢？ 我按照教程在nginx.conf里设置了： location ~...
-
2
回答
70浏览
Vue组件缓存后如何安全更新数据而不触发重复渲染？
在用keep-alive缓存列表组件时遇到问题，当后端返回新数据需要更新缓存组件，但直接修改响应式数据会触发重复渲染。比如这样写的： <keep-alive> <ProductLis...
-
1
回答
97浏览
React里用prefetch预加载数据总是延迟加载，怎么回事？
我在博客列表页用next/router的prefetch想预加载文章详情页，但每次点击链接还是看到明显的加载动画。代码写的是这样： import { useEffect } from 're...
-
2
回答
53浏览
闭包导致内存泄漏该怎么优化？
我最近在做一个动态生成按钮的功能，每个按钮需要记住自己的索引。但发现页面长时间运行后内存一直不释放，怀疑是闭包问题。 代码是这样的： <button id="create"&...
-
2
回答
24浏览
前端监控时怎么自动过滤用户输入中的身份证号和手机号？
最近在优化前端监控，想在上报用户表单数据前自动过滤身份证号和手机号。我写了正则表达式把中间部分替换成星号，但测试时发现有些正常字段也被误判了，比如某些商品编码格式类似身份证号，导致关键数据被错误覆盖。...
-
2
回答
44浏览
为什么ES模块中导入的CSS无法被Tree Shaking删除？
我在用ES Module打包项目时，发现导入的CSS文件里没用到的样式始终被包含在最终包里。比如我在组件里只用了.button-primary，但整个CSS文件都被打包了，这是为什么呢？ 我试过在We...
-
2
回答
43浏览
iOS键盘弹起时输入框被遮挡怎么解决？
在做移动端表单时发现，iOS设备键盘弹起后输入框被遮挡，试过加padding-bottom和设置position: fixed都不管用，有遇到过类似问题吗？ 代码结构是这样的： <div cla...
-
2
回答
41浏览
缓存预热后为什么部分页面还是频繁请求旧资源？
最近给项目做缓存预热时遇到奇怪问题，部署新版本后虽然用Nginx预热了大部分资源，但登录页和商品详情页还是频繁请求旧的CSS文件。检查过缓存配置： location ~* .(css|js)$ { a...
