元素的尺寸

元素尺寸问题由来

前端开发中，由于页面的元素渲染要经过一些流程，通过不同的方法会获取到不同流程阶段的元素的信息(主要是尺寸信息)，这部分信息由于随着渲染阶段的改变，信息也可能会发生改变(当然也可能不变)，因此元素的尺寸就有必要介绍了

下面就从不同阶段介绍元素尺寸

渲染步骤

元素渲染过程中，会经过下面步骤

1. dom 树，此时 dom 树的属性就是我们设置的初始属性，可以直接获取dom读取，dom.style.width, 例如：style="width: 200px"
2. cssom 计算树，样式计算阶段，也就是 通过 getComputedStyle 获取样式计算后的数据，比如我们设置了 200px，但其是基准属性，在弹性盒子中，可能会被压缩，因此会发生变化
3. layout tree 布局树，浏览器通过几何布局计算出来的树，里面包含了布局出来的实际几何属性，可以通过 clientWidth(content+padding 元素宽度)、offsetWidth(content+padding+scroll+border内容+边界偏移)、scrollWidth(visibile+invisibile出现滚动内容，滚动内容)等，此时已经生成布局树，为了避免频繁更新布局树，更新操作会合并后回流，但为了准确读取到布局树准确信息，因此获取 dom 的这些信息也会强制渲染回流，因此也会浪费性能，可以根据情况使用
4. 合成阶段，此时才能看到展现到用户眼中的尺寸，layout tree 看不到变换后的效果，transform 不在布局树中，它属于变换，例如： transform: scale(2, 2)； 变成了两倍，前面的 200px就变成了 400px，或者旋转后，包围盒子也会变宽等，使用 dom.getBoundingClientRect() 方法可以获取元素展现时的尺寸，由于已经合成完毕，为了获取更准确的信息，需要强制回流，有些浪费性能，可以根据情况使用