优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
104浏览
移动端调试时，Chrome模拟器的缩放比例怎么设置才能正常显示布局？
我在用Chrome开发者工具调试移动端页面时，发现模拟器里的页面总是自动缩放导致布局错乱。比如在iPhone 12的模拟器里，虽然设置了Device tollbar的缩放为100%，但文字和按钮还是显...
-
2
回答
45浏览
为什么给元素加了transform后合成层没生效还卡顿？
最近在优化页面滚动动画，给元素加了transform: translateZ(0)想触发合成层，但实际测试时发现页面还是卡顿。用Chrome的Layer仪也没显示"composited"标记。 我的结...
-
2
回答
59浏览
SSR页面静态化后，为什么动态内容SEO抓取不到？
我最近在Vue项目里用了Vue Server Renderer做SEO优化，首页通过API获取的轮播图数据在浏览器能正常显示，但用Google Search Console检查时发现HTML源码里这部...
-
2
回答
120浏览
对象池优化后内存反而增加，哪里出错了？
我在优化一个实时渲染动画时用了对象池，但监控发现内存占用反而比直接new对象更高。明明复用了实例，为什么会出现这种情况？ 尝试把DOM元素缓存到对象池里，代码大概是这样的： class DOMPool...
-
2
回答
94浏览
Service Worker注册成功但无法拦截请求，是什么原因？
我在给PWA应用添加Service Worker时遇到了奇怪的问题。按照教程写好了fetch事件监听，控制台也显示注册成功，但刷新页面时网络面板显示所有请求都是直接走的网络，没有触发缓存逻辑。已经检查...
-
2
回答
124浏览
Vue项目中Disk Cache如何控制？文件更新后依然加载旧版本
大家好，我在Vue项目中配置了nginx的expires头想优化Disk Cache，但文件更新后浏览器依然加载旧版本，这是为什么呢？ 我按照教程在nginx.conf里设置了： location ~...
-
2
回答
105浏览
Vue组件缓存后如何安全更新数据而不触发重复渲染？
在用keep-alive缓存列表组件时遇到问题，当后端返回新数据需要更新缓存组件，但直接修改响应式数据会触发重复渲染。比如这样写的： <keep-alive> <ProductLis...
-
2
回答
124浏览
React里用prefetch预加载数据总是延迟加载，怎么回事？
我在博客列表页用next/router的prefetch想预加载文章详情页，但每次点击链接还是看到明显的加载动画。代码写的是这样： import { useEffect } from 're...
-
2
回答
73浏览
闭包导致内存泄漏该怎么优化？
我最近在做一个动态生成按钮的功能，每个按钮需要记住自己的索引。但发现页面长时间运行后内存一直不释放，怀疑是闭包问题。 代码是这样的： <button id="create"&...
-
2
回答
60浏览
前端监控时怎么自动过滤用户输入中的身份证号和手机号？
最近在优化前端监控，想在上报用户表单数据前自动过滤身份证号和手机号。我写了正则表达式把中间部分替换成星号，但测试时发现有些正常字段也被误判了，比如某些商品编码格式类似身份证号，导致关键数据被错误覆盖。...
-
2
回答
57浏览
为什么ES模块中导入的CSS无法被Tree Shaking删除？
我在用ES Module打包项目时，发现导入的CSS文件里没用到的样式始终被包含在最终包里。比如我在组件里只用了.button-primary，但整个CSS文件都被打包了，这是为什么呢？ 我试过在We...
-
2
回答
58浏览
iOS键盘弹起时输入框被遮挡怎么解决？
在做移动端表单时发现，iOS设备键盘弹起后输入框被遮挡，试过加padding-bottom和设置position: fixed都不管用，有遇到过类似问题吗？ 代码结构是这样的： <div cla...
-
2
回答
59浏览
缓存预热后为什么部分页面还是频繁请求旧资源？
最近给项目做缓存预热时遇到奇怪问题，部署新版本后虽然用Nginx预热了大部分资源，但登录页和商品详情页还是频繁请求旧的CSS文件。检查过缓存配置： location ~* .(css|js)$ { a...
-
1
回答
80浏览
为什么引入了未使用的CSS变量后打包体积反而增加了？
我在项目里按需引入了一个CSS变量文件，但即使没用到某些变量，打包后的CSS文件反而比之前更大了。明明用了Webpack的Tree Shaking配置啊？ 比如我写了这样的CSS文件： :root {...
-
2
回答
55浏览
页面刷新时自定义上报事件的数据怎么总是丢失？
我在做页面性能监控时，需要在页面刷新前上报用户操作数据。把上报逻辑写在window.unload事件里，但发现有30%的上报请求根本没有触发，这是怎么回事？ 尝试过这样写： window.addEve...
-
2
回答
74浏览
循环中频繁计算复杂表达式如何用惰性求值优化？
最近在处理一个大数据列表渲染时发现性能卡顿，每次循环都要执行Math.sqrt(item.value * (item.value + 1))这样的计算。我尝试把计算结果存到变量里放到循环外面，但发现数...
-
2
回答
111浏览
React表单提交时乐观更新后样式回滚不生效怎么办？
我在做一个任务提交功能，用了乐观更新直接把按钮换成成功图标，但后端返回错误时需要回滚到原始状态。之前用useState存表单状态，成功时改成success，失败改回pending，但发现错误提示弹出时...
-
2
回答
95浏览
React项目用lodash-es为啥Tree Shaking没效果？
大家好，我在React项目里改用lodash-es做Tree Shaking优化，但打包后发现整个lodash都被引入了。比如这样写： import _ from 'lodash-es'; const...
-
2
回答
69浏览
为什么我的AVIF图片在IE和旧版Edge显示不出来？
折腾了半天把项目图片都转成AVIF格式了，结果客户反馈说公司电脑看不到图片。检查发现是IE11和Edge 79版本完全空白，换成其他格式又没问题，这是兼容性没处理好吗？ 我按网上的教程直接改了标签的s...
-
2
回答
114浏览
React项目中为什么Tree Shaking没删除未使用的导出函数？
我在React项目里用ES6模块导出了一些工具函数，但打包后发现未使用的函数仍然留在bundle里。比如这个utils.js： // utils.js export function useFetch...
