重绘和重排

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、pandas是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

重绘和重排

• DOM发生改变的时候触发重排，使DOM重新排列，重绘不一定会重排，但重排一定会发生重绘，重绘和重排都会耗费浏览器的性能，尽量避免。

---

一、什么是重绘和重排

• 重绘（repaint）：就是重新绘制，是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观
• 重排（reflow）：就是重新排列，当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树

二、引起重绘和重排的属性

1.重绘

外观属性包括界面、文字等可用状态向量描述的属性，如：

        界面：appearance、outline、background、mask、box-shadow、box-reflect、filter、opacity、clip、border-radius、background-size、visibility

        文字：text、font、word

2.重排

改变元素几何信息（大小和位置），都会引起，如：

        添加或删除可见的DOM元素

        元素位置改变，或者使用动画

        元素的尺寸改变（外边距、内边距、边框厚度、宽高等几何属性）

        内容改变（例如：文本改变或图片被另一个不同尺寸的图片替代、在input框输入内容）

        浏览器窗口尺寸改变（resize事件发生时）

        页面渲染初始化

        设置style属性的值

        计算offsetWidth、offsetHeight、offsetTop和offsetLeft等布局信息

        激活CSS伪类（如 :hover）

        查询某些属性或调用某些方法（如：getComputedStyle()、getBoundingClientRect()）

---

减少重绘和重排

避免一条一条的修改DOM的样式，可以直接修改DOM的className

        避免把DOM结点的属性值放在一个循环里当成循环里的变量

        给动画的HTML元件使用fixed或absolute的position，那么修改他们的css是不会重排

        避免在大量元素上使用:hover

        分离读写操作

        避免使用Table布局

        避免设置多层内联样式

        避免在布局信息改变时查询布局信息

        当需要对DOM元素进行一系列的操作时，可以先使元素脱离文档流，再对其进行一些列操作，然后再把元素带回文档中