回流与重绘

Posted 2020-06-09

强制重绘

ele.setAttribute( ‘style‘ , ele.getAttribute(‘style‘ ));

 

1、当render tree （渲染树）中的部分或全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建时，称之为 回流

每个页面至少回流一次，就是在页面第一次加载的时候。 也就是将受修改影响的部分重新“流一遍”，回流完成后，浏览器重新绘制受影响的部分到屏幕中，该过程称之为  重绘

2、当渲染树中的一些元素需要更新属性，而这些属性只是影响外观风格，而不影响布局的，该元素重绘即可，但是改变位置的话会导致该元素，它的子元素，还可能兄弟元素  回流和重绘，添加一个DOM 节点到会导致该元素的回流和重绘，影响全局的重大的改变，例如修改html 的字体大小，会导致缓存的无效，而使整个树 回流和重绘

3、回流的花销取决于有多少节点需要重新构建，如果在body 最前面插入一个元素，会导致整个渲染树回流

 

利用重绘（当js操作页面布局异常时可以尝试）：

visibility属性值的改变visibile或者inherit. 不会引发回流。element.calssName = element.className

-webkit-transform: translateZ(0); 

 

回流发生情况：

添加或删除可见的DOM 元素

计算样式，添加移除样式

元素尺寸改变---边距，边框，高度等等

内容改变----文本改变或者图片改变引起宽度高度改变

页面渲染初始化（第一次加载页面）

浏览器窗口尺寸的改变----resize 事件发生时

position在absolute 和 static 会产生回流，position 在属性是否脱离文档流会产生回流， visibility不会，visibility隐藏无需重新布局

Element：

clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth

Frame, Image：

height, width

Range：

getBoundingClientRect(), getClientRects()

SVGLocatable：

computeCTM(), getBBox()

SVGTextContent：

getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()

SVGUse：

instanceRoot

window：

getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

This list is almost certainly not complete, but it is a good start. The best way to check for over-layout is to watch for the purple layout bars in the Timeline panel of Chrome or Safari‘s Inspector.

 

绘制顺序  背景颜色-〉背景图片-〉边框->子代 ->轮廓

 

在发生变化时，浏览器会尽可能做出最小的响应。因此，元素的颜色改变后，只会对该元素进行重绘。元素的位置改变后，只会对该元素及其子元素（可能还有同级元素）进行布局和重绘。添加 DOM 节点后，会对该节点进行布局和重绘。一些重大变化（例如增大“html”元素的字体）会导致缓存无效，使得整个呈现树都会进行重新布局和绘制。

 

chrome 重绘的原因有下面几种：

1、Dom因为javascript操作发生改变，chrome会重新计算布局

2、Animations are playing that get updated in a frame-based cycle

3、用户交互，例如hover改变样式

4、任何导致页面布局改变的操作

 

使用持续渲染模式：

开启该模式之后，整个页面会保持连续渲染状态，通过显示隐藏元素查看对页面渲染时间的影响来定位问题在哪个元素，定位到元素之后再通过启用弃用CSS来定位具体是哪个样式问题。