如何有效减少页面的重排与重绘？
最近在优化一个比较复杂的单页应用，发现滚动或者用户交互时性能不太好。用Chrome开发者工具看了看，发现重排和重绘挺频繁的。
试过使用CSS transform代替left/top属性移动元素，确实减少了部分重排，但整体上还是感觉不够流畅。想知道还有哪些实用的方法可以进一步降低重排重绘？
- 1
回答
13浏览
小程序授权登录后如何跳转到指定页面并保持状态？
在开发小程序用户登录功能时，用wx.login获取code后调用接口登录，但跳转到个人中心页面时数据没刷新，还要手动刷新才能显示登录状态。 尝试过用wx.navigateTo跳转，也试过setData...
- 1
回答
19浏览
uni-app中React组件如何正确监听页面滚动事件？
在用uni-app开发时遇到了滚动监听问题。我在页面里写了一个React组件，想通过uni的onPageScroll方法获取滚动位置，但滚动时数值没有变化，甚至出现重复回调。 尝试过这样写代码： co...
- 1
回答
7浏览
history模式下刷新页面报404，如何解决？
用Vue Router的history模式开发单页应用时，点击链接跳转没问题，但直接刷新页面就报404。比如访问/user/profile会提示资源未找到。 我配置了路由： const router ...
- 1
回答
59浏览
小程序支付成功后如何正确获取订单状态并跳转页面？
我在开发小程序支付功能时遇到问题，支付接口调用后虽然能正常扣款，但支付成功后页面一直停留在支付确认页，订单状态也没有更新。我按照文档写了回调函数，但不知道为什么数据没返回。 代码写的是这样的： wx....
- 1
回答
23浏览
uni-app中React组件如何正确触发页面跳转？
在uni-app里用React写组件时，想通过按钮跳转页面，但直接用uni.navigateTo一直报错。我按照文档写了个函数： const navigate = () => { uni.nav...
- 1
回答
11浏览
动态生成大量DOM元素时页面卡顿，如何优化？
我最近在做一个需要动态生成1000个带过渡效果的div的项目，用for循环拼接innerHTML时页面直接卡死了。改用文档碎片（documentFragment）后流畅度有提升，但滚动时依然卡顿。 尝...
- 1
回答
18浏览
如何防止页面中的按钮被Strokejacking攻击？
我在开发一个在线支付页面时，发现按钮区域容易被恶意页面通过透明IFrame覆盖，导致用户误触转账操作。虽然设置了X-Frame-Options: DENY，但测试时发现攻击页面仍然能嵌套我的页面。 我...
- 1
回答
61浏览
uni-app小程序端如何在页面滚动时动态改变导航栏背景色？
我在开发uni-app小程序时遇到个问题，想在页面滚动时根据位置动态改变导航栏背景色。之前用scroll-view的scroll事件测过，但事件根本不触发。后来试了原生APIuni.setNaviga...
- 1
回答
51浏览
Vue PWA离线页面如何动态显示缓存状态？
我正在开发一个Vue PWA应用，想在页面顶部实时显示离线/在线状态。按教程写了service worker但遇到问题： <template> <div> 网络状态：{{ is...
- 2
回答
25浏览
权限缓存过期后如何防止页面刷新导致权限失效？
我现在在做前端权限控制，把用户的权限列表存在localStorage里，但发现缓存过期后页面刷新就会失效。之前试过设置过期时间和自动刷新，但这样页面刷新时还是会有一段时间没有权限校验，这样会不会有安全...
首先能避免 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之类的东西，这些会加重重排。