优化
专注应用全链路优化疑问，解答性能、代码、资源与体验优化中的各类优化问题。
-
2
回答
138浏览
Webpack代码分割配置后，vendors chunk为什么还是很大？
在优化项目时，我按文档配置了SplitChunks，但打包后的vendors chunk依然有800KB。我尝试把minSize设成0，调整cacheGroups的test正则，甚至手动命名split...
-
2
回答
53浏览
vue-virtual-scroller滚动时列表项突然错位怎么解决？
在用vue-virtual-scroller渲染2000条带图片的列表时，滚动到中间位置突然出现条目重叠错位，尝试调整initial-count和estimate-size参数没效果 模板里这样写的：...
-
2
回答
94浏览
WeakMap缓存DOM元素内存没减少怎么办？
在优化页面时用WeakMap存DOM元素，但内存统计显示占用没降下来，这是为什么？ 之前用普通对象缓存DOM节点：cache = { element: document.getElementById(...
-
2
回答
44浏览
Gzip压缩后文件反而变大是怎么回事？
我在Nginx里配置了Gzip压缩，设置了gzip_types *;和gzip_comp_level 6，但发现压缩后的CSS文件比原文件大了10%左右，这是怎么回事？ 已经检查过响应头确实返回了Co...
-
2
回答
53浏览
为什么用了CSS containment后滚动反而更卡了？
我在列表组件的父容器加了contain: content想优化渲染，但滚动时反而更卡了。之前尝试把每个列表项包裹成div并设置contain属性，但效果没改善，甚至出现布局抖动。 代码是这样的： &l...
-
2
回答
68浏览
移动端列表滚动卡顿，优化后还是不流畅怎么办？
开发移动端列表页面时，当列表项超过50条左右，滚动就明显卡顿。尝试用display: none隐藏视口外元素，并改用position: absolute定位列表项，但滚动仍然有掉帧现象，特别是快速滑动...
-
2
回答
74浏览
React中如何在路由切换时预取数据却导致重复请求？
我在React应用里用useParams获取文章ID后，用useEffect在组件挂载时预取文章详情数据。但当我切换到其他页面再返回时，发现fetchData又触发了重复请求，这样会不会浪费带宽？ f...
-
2
回答
81浏览
字体子集优化后为什么部分字符显示为方框？
我在使用Google Fonts时按文档配置了字体子集，但页面里的中文引号和特殊符号还是显示方框。代码明明写了subset: 'latin,latin-ext,cyrillic,devanagari'...
-
2
回答
94浏览
使用source标签时WebP回退JPEG在旧版浏览器显示空白怎么办？
我在用picture元素优化图片，用标签指向webp格式，然后的src放jpeg。但在IE和安卓4.4测试时图片显示空白，路径没问题，这是怎么回事啊？ 代码结构是这样的： 检查过路径没问题，但旧版浏览...
-
2
回答
58浏览
WebP图片在低版本浏览器不显示，picture标签回退没生效怎么办？
最近在项目里把所有图片换成WebP格式，测试时发现IE11和Edge旧版直接不显示图片。虽然知道这些浏览器不支持，但按照网上的方法写了picture标签：<picture><sour...
-
2
回答
75浏览
前端缓存预热时资源加载顺序混乱怎么办？
在做电商网站首屏优化时，我用Service Worker做缓存预热，但发现图片和API请求的加载顺序总是乱的。比如先请求了商品详情接口，再加载轮播图资源，导致页面卡顿几秒。 我尝试在service w...
-
2
回答
67浏览
为什么IndexedDB缓存数据在页面刷新后丢失了？
大家好，我在用IndexedDB存用户操作记录时遇到怪事，存完数据马上能读到，但页面刷新后就全没了。明明加了transaction持久化参数啊！ 具体场景是这样的：todos列表的缓存，我按教程写了个...
-
2
回答
118浏览
WeakMap缓存DOM元素后内存没释放是怎么回事？
在开发可复用组件时，用WeakMap缓存DOM元素的处理函数，但发现页面卸载后内存没释放，这是为什么？ 我这样写的：const handlers = new WeakMap(); function m...
-
2
回答
80浏览
微交互过渡动画在移动端卡顿怎么办？
在做按钮点击微交互时，给按钮加了0.3秒的scale动画，结果在iOS上滑动页面时明显卡顿，有什么优化方法？ 尝试过设置will-change: transform，但效果不明显。代码是这样的：.bu...
-
2
回答
61浏览
预获取（prefetch）在单页应用中如何正确使用？为什么我的页面加载反而变慢了？
我在开发一个Vue单页应用时，尝试给下一页的图片列表页面添加预获取。按文档写了类似下面的代码，但发现首页加载反而变慢了，控制台显示预加载了大量图片资源。这是不是预获取用错了？ <template...
-
2
回答
218浏览
前端监控告警阈值怎么设？频繁误报怎么办？
最近给项目加了API响应时间监控，用Prometheus+Grafana设置告警，但总是收到"响应时间超过2秒"的误报... 之前试过静态阈值if(responseTime > 2000)，但深...
-
2
回答
75浏览
分页加载时如何动态计算起始索引？
在React项目里实现分页加载，发现计算起始索引的公式有问题。我用了startIndex = (page - 1) * pageSize，但切换页码时数据会重复显示，比如从第3页跳到第1页后列表还是显...
-
2
回答
57浏览
动态网站用JavaScript生成sitemap.xml后，为什么爬虫没抓取到？
在Vue项目里，我通过遍历路由生成sitemap.xml文件并放在public目录，但Google Search Console提示未检测到。检查文件确实存在，robots.txt也添加了Sitema...
-
2
回答
40浏览
Brotli压缩后JS文件反而变大，是配置问题还是服务器不支持？
我用Express配置了Brotli压缩，但发现压缩后的JS文件比Gzip版本还大，这是怎么回事？ 我按照网上的教程在Node服务里这样写配置： const compression = require...
-
2
回答
64浏览
虚拟列表实现时，为什么滚动到底部后内容错位了？
在给项目加虚拟列表优化时，卡顿问题解决了但滚动到底部时，列表项突然错位了。我用的是基于高度计算的虚拟列表方案，滚动到接近底部时会自动加载新数据，但新加载的内容位置会突然跳到中间。 尝试过调整可视区域计...
