优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
55浏览
预取数据时如何避免重复请求？视口滚动触发多次API调用
我在用IntersectionObserver监听元素进入视口时预取数据，但发现滚动过快时会重复发送请求。比如下面这样写： const observer = new IntersectionObser...
-
1
回答
63浏览
Vue瀑布流长列表渲染卡顿，怎么优化？
最近在做图片瀑布流页面，用CSS Grid布局配合v-for渲染500条数据，滚动特别卡顿。试过把图片懒加载改成v-lazy，但滑动到中间位置就直接卡死不动了。 代码结构大概是这样写的： <te...
-
1
回答
74浏览
React中移动端1px边框在不同机型显示模糊怎么办？
我在用React开发移动端页面时，给列表项加了border-bottom: 1px solid #eee，但在iPhone12上显示正常，iPhone14却明显模糊。 尝试过把border写成0.5p...
-
2
回答
22浏览
移动端调试时媒体查询失效，真机和模拟器显示不一致怎么办？
我在用Chrome开发者工具模拟iPhone 12调试页面，媒体查询写的是 @media only screen and (max-width: 768px) { .container { flex-...
-
1
回答
39浏览
SVG图标优化后显示模糊怎么办？
我给项目里加了好多SVG图标，压缩后反而变模糊了？ 最近在优化网页图标资源，把所有SVG图标用SVGO压缩后，虽然文件体积变小了，但在Retina屏上看明显发虚。之前直接这样引入的： <svg ...
-
2
回答
14浏览
React项目中同时使用WebP和AVIF图片导致旧浏览器白屏怎么办？
大家好，我在React项目里用标签的srcset属性同时提供webp和avif格式图片，结果在IE11和老版安卓机上直接显示空白了。之前用Can I Use查过这两种格式的支持情况，确实这些旧浏览器不...
-
2
回答
24浏览
Vue组件资源加载时如何正确设置HTTP缓存策略？
我在用Vue 3开发图片展示组件时遇到缓存问题，明明设置了响应头但效果不对。比如这个组件每次刷新都会重新下载图片： <template> <img :src="imageU...
-
2
回答
26浏览
为什么我的Vue路由懒加载没有实现代码分割？
我在Vue3项目里按教程配置了路由懒加载，但打包后main.js还是有1MB，根本没分割。检查过代码： const routes = [ { path: '/about', com...
-
2
回答
22浏览
React部署到HTTPS后为什么出现混合内容警告？
最近把React项目部署到HTTPS服务器后，页面加载时老是报“Mixed Content”错误。明明所有资源路径都用了相对地址，但控制台还是提示标签引用了HTTP资源。我检查了public文件夹里的...
-
2
回答
39浏览
为什么我的页面在Android上字体显示模糊？
最近在优化移动端页面，发现同样的字体在iOS显示很清晰，但Android设备上却特别模糊。已经试过加了-webkit-font-smoothing和-moz-osx-font-smoothing，还调...
-
2
回答
61浏览
picture元素的srcset和sizes在移动端显示有问题怎么办？
我在用picture元素做响应式图片适配时遇到了问题，移动端不同分辨率下图片显示比例不对。尝试用srcset设置不同尺寸图片，但手机横竖屏切换时还是拉伸变形： <picture> <...
-
2
回答
70浏览
如何根据资源优先级动态调整预加载策略？
我在开发一个单页应用时发现，虽然用了预加载了一些资源，但页面加载时关键资源还是被其他低优先级的图片阻塞了。比如视频封面图比产品详情的CSS更早加载，导致页面白屏时间变长。尝试过设置as和media属性...
-
2
回答
43浏览
WebP有损压缩后图片模糊，怎么调整参数保持清晰？
在项目里用Sharp库把图片转WebP时，发现有损压缩到70%后人物面部和文字边缘明显模糊。试过改quality参数到85还是不够清楚，但压缩率又不能太低，该怎么平衡画质和体积？ 之前用的代码是这样的...
-
1
回答
24浏览
WebP图片回退时旧浏览器显示空白怎么办？
我在项目里用picture标签做WebP回退，代码写成这样： <picture> <source srcset="logo.webp" type="im...
-
2
回答
23浏览
使用DLL动态链接后为什么vendors包还是重复打包？
在React项目里用DLL优化打包，按教程配置了webpack.DllPlugin和DllReferencePlugin，但发现打包后的vendors包里还是包含了react和react-dom的重复...
-
2
回答
28浏览
Service Worker缓存策略更新后页面还是加载旧资源怎么办？
最近给项目加了Service Worker做静态资源缓存，但今天部署新版本后发现用户还是在加载旧资源。我尝试过清除浏览器缓存和用cache-first策略，但页面内容就是不更新，这是什么情况啊？ 我设...
-
1
回答
47浏览
React动态页面怎么设置Open Graph标签？SEO没效果
我在用React开发博客页面时遇到了Open Graph标签的问题。每个文章页都需要动态生成og:title和og:description，但分享到社交媒体时显示的还是默认内容，用SEO检测工具也提示...
-
2
回答
35浏览
React代码分割后为什么没有生成独立的chunk文件？
我在用React.lazy和Suspense做代码分割时遇到了问题。按照文档把组件用动态导入包裹： const Component = React.lazy(() => import('...
-
2
回答
26浏览
为什么我的IntersectionObserver在长列表滚动时频繁触发回调？
我在用IntersectionObserver做长列表懒加载时遇到了问题。设置rootMargin为"200px"后，滚动到可视区域外时回调确实能触发，但快速滚动时会连续触发好几次，导致重复请求数据。...
-
2
回答
72浏览
Angular组件卸载后rxjs订阅没清理导致内存泄漏怎么办？
我在Angular项目里用Subject订阅了服务端数据，按官方教程在ngOnDestroy里调用了unsubscribe，但内存还是持续上涨。明明组件卸载了，为什么订阅没断开？ 代码是这样写的：th...
