client-*,scroll-*,offset-*的区别

offsetWidth、offsetHeight   （width + padding + border + 滚动条）
offsetTop、offsetLeft     (距离父元素的距离，从父元素的padding算起，本元素的border) 即left+marginLeft

clientWidth、clientHeight (width + padding, 不包含滚动条)
clientTop、clientLeft(通常这些值就等于左边和上边的边框宽度, 即border-left-widht、border-top-width)


scrollWidth、scrollHeight （如果没有滚动条和clientWidth的一致）
scrollTop、scrollLeft 用于设置滚动条的位置

offsetParent属性指定这些属性所相对的父元素，如果offsetParent为null，则这些属性都是文档坐标

//用offsetLeft和offsetTop来计算e的位置
function getElementPosition(e){
    var x = 0,y = 0;
    while(e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
    return {
        x : x,
        y : y
    };
}

 

重绘和回流（https://github.com/chenjigeng/blog/issues/4）

浏览器会使用队列来储存多次修改，进行优化。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新

// 错误例子
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = box.offsetWidth + 'px';
    }
}

//优化代码
const width = box.offsetWidth;
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = width + 'px';
    }
}