Distinction *, offset- * of - client - *, scroll

offsetWidth, offsetHeight (width + padding + border + scroll bar) 
the offsetTop, the offsetLeft (distance from the parent element, measured from the padding of the parent element, the element border) i.e., left + marginLeft 

the clientWidth, the clientHeight (width + padding, does not contain scrollbar) 
clientTop, clientLeft (usually equal to the values of the left and top border width, i.e. border -left-widht, TOP- border- width) 


scrollWidth, the scrollHeight (if not the scroll bar and consistent clientWidth) 
scrollTop, for the scrollLeft set the scroll bar position

offsetParent attribute specifies the parent element of these attributes are relative, if offsetParent is null, these attributes are the coordinates of documents

// with offsetLeft e and calculates the position of offsetTop 
function getElementPosition (e) {
     var X = 0, Y = 0 ;
     the while (! E = null ) { 
        X + = e.offsetLeft; 
        Y + = e.offsetTop; 
        e = e.offsetParent; 
    } 
    return { 
        X: X, 
        Y: Y 
    }; 
}

 

Redraw and reflux ( https://github.com/chenjigeng/blog/issues/4 )

The browser will use the queue to store a number of modifications to optimize. Browser will modify the operation put into the queue, or until a period of time of operation reaches a threshold value, the queue was empty. but! When you get the layout information of the operation when the refresh will be forced to queue

// 错误例子
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';
    }
}