Open lxw124 opened 4 years ago
回流又称为重排，当渲染树因为一些元素的尺寸大小，位置等发生变化而需要重新构建，就叫做回流，每个页面至少要回流一次。 重绘，当页面的一些元素内容发生变化，字体颜色发生变化等，不会影响页面布局的属性发生变化就叫重绘。 回流一定会引起重绘，重绘不一定会引起回流。 引起回流的操作有：①页面的首次渲染②添加，删除DOM元素③元素的大小，位置发生变化④放大，缩小浏览器窗口⑤激活伪类，设置style属性值，操作class属性⑥获取一些属性：clientWidth、clientHeight、clientTop、clientLeft、offsetWidth、offsetHeight、offsetTop、offsetLeft、scrollWidth、scrollHeight、scrollTop、scrollLeft。操作一些方法：scrollIntoView()、scrollIntoViewIfNeeded()、getComputedStyle()、getBoundingClientRect()、scrollTo() 重绘：改变字体颜色，改变文本内容等。 减少回流重绘的操作：①避免使用table布局②尽量在dom树最末端改变class③避免设置多层内联样式④将动画效果应用在position为fixed或absolute上⑤避免频繁操作dom，可以创建文档碎片，将dom操作统一添加到上面⑥避免频繁操作样式⑦具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后面的元素频繁回流
回流又称为重排，当渲染树因为一些元素的尺寸大小，位置等发生变化而需要重新构建，就叫做回流，每个页面至少要回流一次。 重绘，当页面的一些元素内容发生变化，字体颜色发生变化等，不会影响页面布局的属性发生变化就叫重绘。 回流一定会引起重绘，重绘不一定会引起回流。 引起回流的操作有：①页面的首次渲染②添加，删除DOM元素③元素的大小，位置发生变化④放大，缩小浏览器窗口⑤激活伪类，设置style属性值，操作class属性⑥获取一些属性：clientWidth、clientHeight、clientTop、clientLeft、offsetWidth、offsetHeight、offsetTop、offsetLeft、scrollWidth、scrollHeight、scrollTop、scrollLeft。操作一些方法：scrollIntoView()、scrollIntoViewIfNeeded()、getComputedStyle()、getBoundingClientRect()、scrollTo() 重绘：改变字体颜色，改变文本内容等。 减少回流重绘的操作：①避免使用table布局②尽量在dom树最末端改变class③避免设置多层内联样式④将动画效果应用在position为fixed或absolute上⑤避免频繁操作dom，可以创建文档碎片，将dom操作统一添加到上面⑥避免频繁操作样式⑦具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后面的元素频繁回流