回流与重绘

强制重绘

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来定位具体是哪个样式问题。

时间: 01-26

回流与重绘的相关文章

前端必备的浏览器知识(渲染过程、回流和重绘等)

常用哪几种浏览器测试?有哪些浏览器内核(Rendering Engine)? (Q1)浏览器:Chrome,IE,FireFox,Safari,Opera. (Q2)对应内核:Webkit,Trident,Gecko,Webkit,Presto.(国内的浏览器,除了傲游是直接基于Webkit开发的,其他基本都是基于谷歌在webkit上开发的Chromium,当然谷歌自己也是用的Chromium.另外值得的一提的是手机的系统(安卓.苹果)默认浏览器都是基于webkit内核的) 如何理解浏览器内核?

减少页面回流与重绘(Reflow & Repaint)

如果你的HTML变得很大很复杂,那么影响你JavaScript性能的可能并不是JavaScript代码的复杂度,而是页面的回流和重绘. 回流(Reflow)是指布局引擎为frame计算图形的过程. frame是一个矩形,拥有宽高和相对父容器的偏移.frame用来显示盒模型(content model), 但一个content model可能会显示为多个frame,比如换行的文本每行都会显示为一个frame. 关于CSS盒模型的介绍请参考:CSS 盒模型及其呈现方式 重绘(Repaint)发生在元

你真的了解回流和重绘吗

回流和重绘可以说是每一个web开发者都经常听到的两个词语,我也不例外,可是一直不是很清楚这两步具体做了什么事情.最近由于部门内部要做分享,所以对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合自己的体会,写了这篇文章,希望可以帮助到大家. 浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,可以跳到后面.(这个渲染过程来自MDN) 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,生成DOM树,解析CSS,生成C

【开发必看】你真的了解回流和重绘吗?

本文由云+社区发表 回流和重绘可以说是每一个web开发者都经常听到的两个词语,可是可能有很多人不是很清楚这两步具体做了什么事情.最近有空对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合一些例子,写了这篇文章,希望可以帮助到大家. 浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,优化性能,可以跳到后面.(这个渲染过程来自MDN) 浏览器渲染过程 添加描述 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,生成

详解回流和重绘及优化

回流和重绘可以说是每一个web开发者都经常听到的两个词语,看了一些博客和书籍,整理了一些内容并且结合自己的体会,写了这篇文章,希望可以帮助到大家. 1. 浏览器的渲染过程 1.1 渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,可以跳到后面.(这个渲染过程来自MDN) 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,生成DOM树,解析CSS,生成CSSOM树 将DOM树和CSSOM树结合,生成渲染树(Render Tree)

经典面试题:什么是回流和重绘?如何优化?

浏览器渲染一个页面有两条线程:一条是渲染js脚本,一条是渲染css脚本.但是两条线程是互斥的. 回流:当render tree的一部分或者全部元素因改变了自身的宽高,布局,显示或隐藏,或元素内部的文字结构发生变化,导致需要重新构建页面的时候,回流就产生了. 重绘:当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就产生了重绘. 结论:回流必定触发重绘,而重绘不一定出发回流. 如何避免回流:1.不使用能够触发回流的属性:2.建立一个图层,让回流在图层里面进行,限制

[转] 你真的了解回流和重绘吗

浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,可以跳到后面.(这个渲染过程来自MDN) 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,生成DOM树,解析CSS,生成CSSOM树 将DOM树和CSSOM树结合,生成渲染树(Render Tree) Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小) Painting(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝

什么是回流与重绘

首先要知道HTML的渲染过程. 解析HTML并构建DOM树和CSSOM树,浏览器对HTML标记转换成文档对象模型,CSS标记则转换成CSS对象模型(CSSOM),DOM 树包含了所有的 html 标签,包括不展示的 head 节点和 display:none 的节点,而 CSSOM 树则会去掉浏览器不能识别的样式. 接着就是构建render 树.将 DOM 树和 CSSOM 树合并为 render 树,在这个过程中,需要计算每一个呈现对象的可视化属性,会去掉不展示在页面上的节点(如 displa

前端回流与重绘之简介

回流与重绘 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候.在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘. 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color.则就叫称为重绘. 注意