优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
69浏览
为什么给元素加了will-change: transform却没触发合成层？
我在做一个卡片翻转动画，用3D变换实现，但发现动画还是有点卡。查资料说加will-change能提前让浏览器创建合成层，于是给元素加了will-change: transform，但用开发者工具的层叠...
-
2
回答
60浏览
为什么内联关键CSS后首屏渲染反而更慢了？
我按照教程把关键CSS内联到HTML里了，但首屏渲染时间反而比之前多了500ms，这是为什么？ 之前用Webpack的ExtractTextPlugin把CSS抽离成单独文件，加载时间约1.2秒。按首...
-
2
回答
58浏览
React中用requestIdleCallback优化长列表还是卡顿怎么办？
我在用React实现一个动态加载的长列表，尝试用requestIdleCallback分批次渲染列表项，但滚动到后面还是会卡顿。我按网上的方法在useEffect里这样写的： const [items...
-
2
回答
44浏览
Hreflang标签在动态页面生成时出现重复链接问题怎么办？
我在给多语言电商网站做Hreflang优化时遇到问题，用Next.js动态生成的head标签里，不同语言页面的hreflang链接重复了。比如英文页面和法语页面互相引用时，Google Search ...
-
2
回答
95浏览
Vite预构建后Tailwind的样式为什么失效了？
在项目里同时用了Ant Design Vue和Tailwind CSS，配置了预构建后，Tailwind的样式突然不生效了。之前单独使用Tailwind没问题，加了optimizeDeps.inclu...
-
2
回答
72浏览
React中异步请求loading状态总延迟显示怎么办？
在React项目里，我给API请求加了loading状态，但每次点击按钮后loading动画都要等1-2秒才显示，用户体验特别差。代码逻辑应该是对的，但实际效果就是不及时： function Prod...
-
2
回答
63浏览
React组件重复发起API请求怎么优化首屏加载？
在开发产品列表页时发现，每次刷新页面都会看到两次相同的商品数据请求。我用useEffect在组件里调用axios.get，但好像不管是否依赖项变化都会触发。看浏览器网络请求发现首屏有重复的请求： fu...
-
2
回答
57浏览
React中多个API订阅怎么在卸载组件时全部清理？
在开发聊天室组件时用了3个WebSocket订阅，但发现组件卸载后后台还是有数据在接收。尝试在useEffect的返回函数里写了unsubscribe，但有时候某个订阅没关干净导致内存泄漏，有没有更好...
-
2
回答
82浏览
为什么压缩后的CSS在IE11下样式全乱了？
最近在用webpack的OptimizeCSSAssetsPlugin压缩CSS，结果发现打包后的样式在IE11里全乱了，其他浏览器没问题。明明开发环境不压缩的时候都正常... 尝试过在配置里加了ca...
-
2
回答
67浏览
用了Server Push反而加载更慢怎么办？
我给网站配置了HTTP/2 Server Push推送关键CSS和JS，但发现页面加载时间反而比之前多了200ms，这是为什么呢？ 尝试过在nginx里这样配置： http2_push_preload...
-
2
回答
98浏览
React组件用useEffect定时器内存持续增长怎么办？
我在开发一个实时数据展示组件时用到了useEffect里的setInterval，但组件卸载后内存一直没释放。虽然加了cleanup函数，但内存分析工具显示heap还在持续增长，这是什么问题啊？ 代码...
-
2
回答
86浏览
React加载动画为什么会出现内容和骨架屏同时闪烁？
我在用React做数据加载时的骨架屏过渡，但发现内容渲染和骨架屏会同时显示0.5秒，导致闪烁问题。之前用条件判断控制显示： function ProductList() { const [produc...
-
2
回答
78浏览
为什么我的HTML压缩配置不起作用？
我在Vue项目里用HtmlWebpackPlugin做HTML压缩，按文档配了minify选项，但生成的文件还是有空格和换行。比如这个配置： module.exports = { configureW...
-
2
回答
106浏览
预取数据时如何避免重复请求？视口滚动触发多次API调用
我在用IntersectionObserver监听元素进入视口时预取数据，但发现滚动过快时会重复发送请求。比如下面这样写： const observer = new IntersectionObser...
-
2
回答
87浏览
Vue瀑布流长列表渲染卡顿，怎么优化？
最近在做图片瀑布流页面，用CSS Grid布局配合v-for渲染500条数据，滚动特别卡顿。试过把图片懒加载改成v-lazy，但滑动到中间位置就直接卡死不动了。 代码结构大概是这样写的： <te...
-
2
回答
113浏览
React中移动端1px边框在不同机型显示模糊怎么办？
我在用React开发移动端页面时，给列表项加了border-bottom: 1px solid #eee，但在iPhone12上显示正常，iPhone14却明显模糊。 尝试过把border写成0.5p...
-
2
回答
54浏览
移动端调试时媒体查询失效，真机和模拟器显示不一致怎么办？
我在用Chrome开发者工具模拟iPhone 12调试页面，媒体查询写的是 @media only screen and (max-width: 768px) { .container { flex-...
-
2
回答
106浏览
SVG图标优化后显示模糊怎么办？
我给项目里加了好多SVG图标，压缩后反而变模糊了？ 最近在优化网页图标资源，把所有SVG图标用SVGO压缩后，虽然文件体积变小了，但在Retina屏上看明显发虚。之前直接这样引入的： <svg ...
-
2
回答
43浏览
React项目中同时使用WebP和AVIF图片导致旧浏览器白屏怎么办？
大家好，我在React项目里用标签的srcset属性同时提供webp和avif格式图片，结果在IE11和老版安卓机上直接显示空白了。之前用Can I Use查过这两种格式的支持情况，确实这些旧浏览器不...
-
2
回答
49浏览
Vue组件资源加载时如何正确设置HTTP缓存策略？
我在用Vue 3开发图片展示组件时遇到缓存问题，明明设置了响应头但效果不对。比如这个组件每次刷新都会重新下载图片： <template> <img :src="imageU...
