js 什么是repaint和reflow

JavaScript013

js 什么是repaint和reflow,第1张

Repaint又叫Redraw,重绘,它是指一种不影响当前dom结构的和布局的一种重绘动作。

以下的动作都会促发Repaint:

不可见或可见(visibility)

颜色和图片改变(background,border-color,color之类的属性);

不改变页面元素大小,形状和位置,但改变其外观的变化。

Reflow,又叫重构, 比起 Repaint 来讲就是一种更加显著的变化了。它主要发生在 DOM 树被操作的时候,任何改变 DOM 的结构和布局都会产生 Reflow。但一个元素的 Reflow 操作发生时,它的所有父元素和子元素都会发生 Reflow,最后 Reflow 必然会导致 Repaint 的产生。举例说明,如下动作会产生 Repaint 动作:

浏览器窗口的变化;

DOM 节点的添加删除操作;

一些改变页面元素大小,形状和位置的操作的触发。

减少 Reflow

通过 Reflow 和 Repaint 的介绍可知,每次 Reflow 比其 Repaint 会带来更多的资源消耗,我们应该尽量减少 Reflow 的发生,或者将其转化为只会触发 Repaint 操作的代码。

重绘(repaint或redraw):当盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来之后,浏览器便把这些原色都按照各自的特性绘制一遍,将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。触发重绘的条件:改变元素外观属性。如:color,background-color等。

重排(重构/回流/reflow):当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候。重绘和重排的关系:在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘。所以,重排必定会引发重绘,但重绘不一定会引发重排。

1.如果是本地新建或编辑的文件,还没有commit就删除了,那只能到回收站找找看了;

2.如果是已经commit过的文件被删除了,删除后还没有commit,只要update上层文件夹一下就回来了;

3.如果是删除了原本在webstorm文件,并且随后commit了,就查看历史日志,找到commit之前的版本号,然后update到那个版本