渲染优化
本话题发布渲染优化相关的问答文章和技术分享，将持续更新，为您推荐了24篇问答，访问即可查看更多精彩内容。
-
1
回答
26浏览
GPU加速到底该怎么正确触发？
我在做一个轮播图动画，用 transform: translateX() 做位移，听说这样能触发 GPU 加速，但 Chrome DevTools 里看还是掉帧严重。是不是光用 transform 就...
-
1
回答
37浏览
预加载图片资源到底该用 link preload 还是 img hidden？
我在做一个图片画廊页面，首屏要快速展示缩略图，但高清大图需要预加载。试过用 <link rel="preload">，也试过用隐藏的 <img> 标签，但不确定哪种方式更靠谱，...
-
1
回答
22浏览
Service Worker 缓存策略怎么选才不会导致页面更新延迟？
我最近在项目里加了 Service Worker 做离线缓存，用了 cache-first 策略，结果发现用户每次发新版本后都看不到最新内容，得手动清除缓存才行。这体验太差了。 我试过改成 netwo...
-
1
回答
28浏览
懒渲染时组件状态丢失怎么办？
我在用 React 做一个长列表，为了性能用了懒渲染（比如只渲染可视区域的项）。但发现滚动回来后，之前输入过内容的表单项变空了，状态没了。 我试过把状态提到父组件，但数据量太大，维护起来很麻烦。有没有...
-
1
回答
41浏览
懒加载图片时 CSS 占位导致布局偏移怎么办？
我在做图片懒加载的时候，为了防止加载时页面跳动，给 img 加了固定宽高，但实际显示还是会有轻微偏移，特别在移动端很明显。是不是我的占位样式写得不对？ 目前是这样写的： .lazy-img { wid...
-
1
回答
50浏览
用 transform 做动画为什么有时还是会卡顿？
我听说用 transform 做动画能触发硬件加速、避免重排重绘，性能更好。但我在项目里给一个 div 加了 transform: translateX() 的过渡动画，滚动时还是明显掉帧，尤其在低端...
-
1
回答
43浏览
小程序列表滚动卡顿怎么优化？
我在做微信小程序的长列表页面，数据一多滚动就特别卡，试过用 wx:for 渲染几百条记录，体验很差。是不是应该用虚拟列表？但不确定小程序支不支持。 目前是这样写的： Page({ data: { li...
-
1
回答
27浏览
Service Worker 缓存 HTML 后页面不更新怎么办？
我用 Service Worker 做了离线缓存，把首页 index.html 也缓存了，但改了 HTML 内容后刷新页面还是旧的，哪怕关掉再开浏览器也没用。是不是缓存策略写错了？ 我注册 SW 的方...
-
2
回答
55浏览
用 transform 做动画真的能提升性能吗？为什么我的页面还是卡？
我听说用 transform 做动画不会触发重排，应该更流畅，但我在做一个滑动菜单时还是明显卡顿，是不是哪里写错了？ 我试过只用 transform: translateX 来移动元素，也加了 wil...
-
2
回答
44浏览
Node.js 接口响应太慢，怎么优化性能？
我用 Node.js 写了个 API 接口，前端用 Vue 调用，但每次加载都要等好几秒，本地开发都卡。试过加缓存和减少数据库查询，还是没明显改善。 前端是这样调用的： <template>...
-
2
回答
37浏览
will-change 设置后反而卡顿了？是我用错了吗？
我在做一个拖拽动画，给元素加了 will-change: transform 想提升性能，结果页面更卡了，甚至内存占用飙升。是不是滥用 will-change 会适得其反？ 我是在 mousemove...
-
2
回答
35浏览
为什么加了 will-change: transform 还是没提升为合成层？
我在做一个动画卡片，给元素加了 will-change: transform，但 Chrome DevTools 的 Layers 面板里还是没看到它被提升成独立合成层，这是为啥？ 我原本以为只要加了...
-
2
回答
22浏览
如何排查和优化页面中的 Long Task？
最近用 Lighthouse 测速，发现有个 120ms 的 Long Task 警告，但不知道具体是哪段代码引起的。我试过在关键函数里加 console.time()，但定位不到源头。 项目里用了大...
-
1
回答
22浏览
gzip压缩后JS文件还是很大，该怎么进一步优化？
我用 Nginx 开启了 gzip 压缩，但打包后的 main.js 仍有 1.2MB，首屏加载太慢了。试过 Webpack 的 splitChunks 拆包，但效果不明显。 这是我的入口 HTML ...
-
2
回答
48浏览
虚拟列表滚动时为什么会出现白屏闪烁？
我在用 React 实现虚拟列表时，快速滚动经常看到白屏一闪，体验很糟糕。明明已经按可视区域渲染了，数据量也不大（大概 1000 条）。 我试过用 React.memo 包裹子项，也加了 key，但问...
-
2
回答
28浏览
为什么用 transform 做动画还是会卡顿？
我最近在 Vue 里做一个拖拽卡片的效果，为了性能特意用了 transform 来做位移，但快速拖动时还是明显掉帧。网上都说 transform 不会触发重排，应该很流畅才对，是不是我哪里写错了？ 我...
-
2
回答
29浏览
图片懒加载后为什么还是卡顿？
我在项目里用Intersection Observer做了图片懒加载，但页面滚动时还是卡顿，尝试过把换成标签并添加WebP格式，也调整了threshold到0.1，但效果不明显。代码结构是这样的： c...
-
1
回答
41浏览
动态生成大量DOM元素时页面卡顿，如何优化？
我最近在做一个需要动态生成1000个带过渡效果的div的项目，用for循环拼接innerHTML时页面直接卡死了。改用文档碎片（documentFragment）后流畅度有提升，但滚动时依然卡顿。 尝...
-
1
回答
39浏览
为什么开启will-change后页面反而更卡了？
最近在优化一个滚动列表的性能，给列表项加了will-change: transform想让GPU加速，但发现滚动反而更卡了。帧率从60直接掉到30左右，还偶尔出现卡顿。尝试过把属性改成content也...
-
2
回答
96浏览
Service Worker注册成功但无法拦截请求，是什么原因？
我在给PWA应用添加Service Worker时遇到了奇怪的问题。按照教程写好了fetch事件监听，控制台也显示注册成功，但刷新页面时网络面板显示所有请求都是直接走的网络，没有触发缓存逻辑。已经检查...
