如何有效减少页面的重排与重绘？
最近在优化一个比较复杂的单页应用，发现滚动或者用户交互时性能不太好。用Chrome开发者工具看了看，发现重排和重绘挺频繁的。
试过使用CSS transform代替left/top属性移动元素，确实减少了部分重排，但整体上还是感觉不够流畅。想知道还有哪些实用的方法可以进一步降低重排重绘？
- 1
回答
21浏览
Flutter中如何正确监听页面生命周期变化？
我在做Flutter页面性能优化，想在页面进入后台时暂停一些动画，回到前台再恢复。但不知道该监听哪个生命周期方法，试了deactivate和dispose都不对，它们好像不是用来处理前后台切换的？ 查...
- 1
回答
27浏览
Hippy 中如何正确监听页面返回事件？
我在 Hippy 项目里想监听页面返回（比如 Android 物理返回键），但试了 BackHandler 没反应，是不是用法不对？ 官方文档说要用 Hippy.backPressListener，但...
- 1
回答
27浏览
uni-app中如何监听页面返回事件？
我在uni-app里做了一个表单页面，用户填写到一半点返回键，我想弹个确认框防止误操作。但试了onUnload和onHide都不行，安卓物理返回键根本没触发这些生命周期。 查文档说可以用onBackP...
- 1
回答
30浏览
如何在Vue中监听页面用户点击行为并上报？
我在做前端行为监控，想记录用户在页面上的点击操作，比如点了哪个按钮、哪个链接。目前尝试在Vue组件里加了@click监听，但感觉这样每个地方都要手动埋点，太麻烦了。有没有全局监听的办法？ 我试过在mo...
- 1
回答
28浏览
用户输入内容渲染到页面时如何防止XSS攻击？
我在做一个评论功能，用户提交的内容会直接用 innerHTML 插入到页面上。虽然我知道可以用 DOMPurify 这类库来过滤，但想先自己试试简单处理。比如把 < 转成 < 之类...
- 1
回答
33浏览
Figma插件中如何正确监听页面选中元素的变化？
我在开发一个Figma插件，想监听页面上选中的节点变化，但 on("selectionchange") 好像没触发。我查了文档，也试了在 ui.html 里加事件监听，但都没反应。是不是我的写法有问题...
- 2
回答
35浏览
大屏监控页面卡顿，如何优化Vue数据更新性能？
我们做的一个大屏监控页面，每秒要更新几十个组件的数据，现在明显感觉卡顿、掉帧。试过用 Vue 的 computed 和 watch，但数据量一大就卡得不行。 比如下面这个组件，每秒从 WebSocke...
- 1
回答
37浏览
SvelteKit 中如何正确加载动态路由的页面数据？
我在 SvelteKit 里写了个动态路由 [slug]，但每次进入页面都拿不到数据，+page.js 里的 load 函数好像没执行？ 我试过在 +page.svelte 里直接 fetch，但这样...
- 1
回答
49浏览
WePY 中如何监听页面返回事件？
我在用 WePY 开发小程序，现在有个页面需要在用户点击左上角返回按钮时做些清理操作，但不知道怎么监听页面返回。 试过 onUnload，但它在页面关闭时才触发，而我想在用户真正点击返回的时候就处理。...
- 1
回答
27浏览
如何监听页面中用户的所有点击行为并上报？
我在做前端监控系统，想记录用户在页面上的所有点击行为，包括按钮、链接、甚至空白区域。试过给 document 加 click 事件监听，但发现有些点击没捕获到，比如某些动态加载的组件或者被 stopP...
首先能避免 DOM 操作就尽量避免，批量处理是关键。比如你要更新多个样式，别一个一个改 style，而是统一操作 class，或者用
requestAnimationFrame包一下，让浏览器自己优化时机。直接频繁读写 offsetTop、clientWidth 这类布局属性也会强制触发重排，记得转义这类访问，缓存值，别每次循环都去查。然后是 DOM 结构设计问题，尽量保持平坦的结构，嵌套太深一动就全页面重排。定位脱离文档流的元素用 absolute 或 fixed，减少对其他节点的影响。动画元素建议用
transform: translate3d，不仅避重排，还能走 GPU 合成层，但别滥用，不然内存占用会上升。另外，CSS 层面尽量用 will-change 提示浏览器哪些元素会变，比如
will-change: transform，让浏览器提前分层。但别乱加，加多了反而拖累性能。opacity 和 transform 是目前唯一不会触发重排和重绘也能实现视觉变化的属性，能用上就尽量用。最后别忘了监听 scroll、resize 这些事件要做节流，一个没防住就是连续几十次重排。用
throttle控制频率，16ms 左右一次比较安全。这些组合拳打下来，一般都能明显改善卡顿，实在不行再考虑虚拟滚动或者懒渲染大列表。
transform和opacity是首选属性。给需要动画的元素加上will-change: transform, opacity;，提前告诉浏览器做好准备。另外，把频繁变化的元素独立到自己的层，用减少影响范围。检查一下是否用了不必要的强制同步布局操作，比如offsetWidth之类的东西，这些会加重重排。