浏览器重拍、重绘与getBoundingClientRect

getBoundingClientRect

getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。

执行 object.getBoundingClientRect();会得到元素的top、right、bottom、left、width、height属性，这些属性以一个对象的方式返回。

这对象是获取元素到窗口之间的距离，和offsetHeight等不一样。

不过它和position:fixed配合使用，挺不错的。

重排:

　　重排必会重绘。

　　一般DOM树的结构发生变化就会影响渲染树，而出现重排的现象，浏览器的文档流里出现布局的改变如某元素宽高发生变化等都会重排。　

　　详细资料

　　从详细资料中可以知道，获取某些信息也会发生重排，而因浏览器优化原因重排重绘部分会存起来一起执行可能影响当前部分的功能无效，

　　如动画等，所以display:block后动画无效的原因，但可以在动画之前获取信息强制刷新重排，如获取offsetHeight，那么就会强制进入下一

　　个重排，这样当前元素就会在浏览器一下完成重排重绘，而元素的存在就可以实现动画部分，不是浏览器会把发生重排重绘部分存起来一

　　次执行，这就是为什么display:block后动画无效的原因,因为元素都不存在，怎么动画。

　　

　　还有重排重绘很耗内存，所以有必要可以优化这部分，详细资料里有。

 

转载于:https://www.cnblogs.com/zhangzhicheng/p/7858226.html