遇到的场景
加载更多时，动态插入表单数据，以及tab切换ajax请求来的数据进行重新渲染
重绘与重排
重绘
拿到请求资源DOM树、css树、渲染树，然后同步建立，建立完成后，对应渲染时就开始绘制页面元素
布局不变即重绘
- 颜色
- transport
重排（影响性能严重）
浏览器是根据送入的渲染树进行绘制这个网页，你所看到的网页其实本质是一个图片。那么每个元素都拥有自己所在的坐标。
重排，就是 这个元素的几何属性或者坐标发生了改变，所以会造成重排，其实就是浏览器因为几何变化造成这个变化的节点会影响到所有节点的坐标，从而需要重新计算所有渲染树上元素的坐标，所以才需要重排所有节点以便gpu重新绘制。重排在我看来主要是需要重新计算每个节点绘制的坐标造成的(为了重新生成RenderLayerTree)。
- 添加和删除可见的元素（对应优化，设置为不可见）
- 元素位置的改变
- 元素尺寸的改变（盒子模型）
- 内容的改变，文本长度，图片大小
- 页面渲染初始化
- 浏览器窗口改变（滚动条）
- 莫名其妙的重排：因为浏览器队列优化修改并批量执行来优化，谁让你要请求强制刷新队列去获取布局信息（body.currentStyle）：
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
getComputedStyle(),or currentStyle in IE
优化方案
- 不单独设置css属性，如
- 如果一定通过js修改样式有以下两种方法
- 通过display:none来将节点脱离文档流，在修改完节点之后再显示，这样只有隐藏，显示两次。
- 将会立刻造成重排的属性数据存入临时变量中。
- position:absolute,fixed 会将节点脱离文档流，避免整个dom tree重排
- 移动通过translate来实现
浏览器原理中,(root节点,css position:relative,absolute,transform，有节点溢出overflow,alpha mask,reflection,css filter,2dCanvas,WebGl,video)都会为这些元素创造一个新的Layer以便浏览器加速渲染，这些元素的修改只会涉及自己重排重绘。 - 事件委托
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。