优化

我在用Vue做图片懒加载优化时，想给加载失败的图片显示默认占位图。参考了一些方案后写了类似下面的代码，但实际测试时发现图片加载失败后还是直接显示红叉，占位图没出现。试过把<img标签换成v-if...

我在单页应用里给下一个路由的CSS文件加了<link rel='prefetch'>，但实际测试发现首屏渲染反而比之前慢了0.5秒，这是为什么呢？ 我尝试在路由切换时动态插入预加载标签：c...

我在用link rel="preload"预加载图片时发现页面反而更卡了，明明只是预加载下一屏的图片啊。我按照文档写了这样的代码： document.querySelectorAll('.next-p...

我在做一个带复杂动画的页面，给元素加了transform: translateZ(0)想触发GPU加速，但滚动时还是卡顿。用Chrome的Layer仪表盘看了下，发现只有部分元素显示为composit...

我在用Vite开发React项目时，想通过manualChunks把四个公共组件打包到同一个chunk里，但配置后每个组件还是单独生成了文件... 项目结构是这样的，四个组件分布在不同页面： // v...

我在用Vue项目做路由动态分包时遇到问题，按路由拆分的包里总包含重复的axios代码。我试过在webpack的splitChunks里设置cacheGroups，但发现每个chunk里还是有axios...

最近在优化一个需要循环创建1000个DOM元素的功能，发现每次循环里用var item声明变量时页面卡顿。我改成用const后性能没变化，控制台也没有报错，但元素渲染还是明显延迟： for (let ...

我在用Service Worker做缓存预热时遇到问题，按照教程在install事件里预缓存了关键资源列表，但实际访问时发现某些CSS文件还是走网络请求了。 代码写的是这样的： self.addEve...

我在Vue项目里用React Query的useQuery请求数据，初始加载没问题，但后端数据更新后页面没变化，手动刷新才显示最新数据。尝试过加staleTime:0和refetchQueries但都...

我在用React.lazy和Suspense做路由懒加载时遇到个问题，同一个组件在不同路由里被动态导入后，webpack会生成多个chunk，导致资源重复加载。比如import(.../moduleA...

我在项目里给某个第三方库用了vite optimizeDeps预构建，结果打包后的vendor.js比之前还大200kb，这是怎么回事？ 之前配置是这样的： optimizeDeps: { entri...

我在把PNG图片转成WebP格式后，原本透明的背景变成了黑色，这是为什么？用在线转换工具试过几次都这样，本地用命令行转也一样... 尝试过加参数 -transparent 但没效果，代码直接用标签引入...

大家好，我在做无限滚动分页时遇到个怪问题。每次滚动到底部加载新数据时，前几页的数据会突然重复显示，像是被覆盖了又叠加？ 我用的是Vue，方法是这样的：items = []存储数据，点击加载更多时调用a...

我在优化图片加载时启用了HTTP Keep-Alive，但发现连续请求图片反而比单独请求更慢，特别是移动端。明明设置了Connection: keep-alive和HTTP/1.1，服务器返回头也有K...

在项目里用Google Fonts的Roboto字体，按文档配置了子集参数latin,latin-ext，但发布后发现部分特殊符号和中文显示为方块。我尝试过： 并在CSS里设置了font-family...

我在用骨架屏做渐进式渲染时遇到问题，真实内容加载后骨架屏会闪一下再消失，用户体验不好。我给骨架屏加了transition: opacity 0.3s，但内容出现闪一下消失的情况，有没有更好的解决方案？...

最近在优化Vue项目时启用了CSS压缩，但压缩后样式完全乱了，文字重叠、颜色不对。检查配置也没发现问题，求解！ 比如这个组件原本正常： 标题 内容文本 .card { border: 1px soli...

我在优化网站首页加载时，给关键CSS文件加了preload标签：<link rel="preload" href="/styles/main.css">，但监控显示首屏渲染反而比之前慢了0...

我在给聊天列表做虚拟滚动优化时遇到了问题，当快速滚动到中间区域后，列表内容会出现几秒的错位闪烁，但过一会又恢复正常。 已经用react-window实现了基础虚拟列表，设置了itemSize为60，容...

我在Vue项目里用lodash时按需引入了方法，但打包后发现完整lodash库还是被包含进去了。配置了webpack.optimization.usedExports为true也没用，这是怎么回事？ ...