Element.getBoundingClientRect()

Element.getBoundingClientRect()方法用来返回元素相对于视口的位置。

语法：

var rectObject = object.getBoundingClientRect();

返回值是一个DomRect对象,就是该对象的边框大小信息。

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。
如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过 window.scrollX 和 window.scrollY），这样就可以获取与当前的滚动位置无关的值。

示例：

// rect 是一个具有四个属性 left、top、right、bottom 的 DOMRect 对象
var rect = obj.getBoundingClientRect();
console.log(rect.top);
console.log(rect.right);

针对这个属性，可以再进一步做web性能优化中的图片按需加载。