重排版与重绘

Posted 2020-11-05 豆豆飞

今天被一大神给刺激了，感觉他基础掌握很扎实，以后有机会也尽量研究源码及原理

以下内容借鉴：https://www.cnblogs.com/fangsmile/p/7060497.html


重排版与重绘 ：当DOM 改变影响到元素的几何属性（宽和高）==》就是改变了一个元素的宽或者高，或者字数的改变==》都会导致浏览器计算元素的几何属性==》同时也会应道其他元素的几何属性和位置==》所以之前渲染的部分就会失效==》然后就会重构（这里我理解为重新渲染）==》这个过程就叫“重排版”==》完成重排版时==》页面要重新绘制一遍被影响的那个部分（浏览器在一个重绘进程中重新绘制屏幕上受影响的部分）。

           几何属性没变，但是背景色变了/字体颜色变了这种==》就不会重排版==》直接重绘

            简介：  就是dom元素宽高大小改变了（几何属性），然后就会影响到页面的部分布局，就得重新排版，排完版再重绘，反正只要有改变就要重绘，只有元素的几何属性改变的时候才会触发重排版


发生重排版的情况：添加删除可见的dom元素、元素为位置、元素的宽高大小边距、内容改变、浏览器窗口

改变整个排版：使用了这些属性会导致，offsetTop.offsetLeft,offsetWidth,offsetHeight,scrollTop.scrollLeft,scrollWidth,

                              scrollHeight,clientTop,clientLeft,clientWidth,clientHeight,getComputedStyle()

                           1.从文档流中摘除该元素
                           2.对其应用多重改变====>在这里尽量多的操作
                          3.将元素带回文档中