什么是文档碎片？

是什么：一个容器，用于暂时存放创建的dom元素，使用 document.createDocumentFragment() 创建
有什么用：将需要添加的大量元素先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大减少dom操作，提高性能例子

var oFragmeng = document.createDocumentFragment();
for(var i=0;i<10000;i++)
{

    var op = document.createElement("span");

    var oText = document.createTextNode(i);

    op.appendChild(oText);

    //先附加在文档碎片中

    oFragmeng.appendChild(op);

}
//最后一次性添加到document中
document.body.appendChild(oFragmeng);

⭐ JS 中元素视图的各个尺寸？

offsetParent —— 是最接近的 CSS 定位的祖先，或者是 td，th，table，body。
offsetLeft/offsetTop —— 是相对于 offsetParent 的左上角边缘的坐标。
offsetWidth/offsetHeight —— 元素的”外部” width/height，边框（border）尺寸计算在内。
clientLeft/clientTop —— 从元素左上角外角到左上角内角的距离。对于从左到右显示内容的操作系统来说，它们始终是左侧/顶部 border 的宽度。而对于从右到左显示内容的操作系统来说，垂直滚动条在左边，所以 clientLeft 也包括滚动条的宽度。
clientWidth/clientHeight —— 内容的 width/height，包括 padding，但不包括滚动条（scrollbar）。
scrollWidth/scrollHeight —— 内容的 width/height，就像 clientWidth/clientHeight 一样，但还包括元素的滚动出的不可见的部分。
scrollLeft/scrollTop —— 从元素的左上角开始，滚动出元素的上半部分的 width/height。

来源：https://zh.javascript.info/size-and-scroll

属性	说明
offsetLeft	获取当前元素到定位父节点的left方向的距离
offsetTop	获取当前元素到定位父节点的top方向的距离
offsetWidth	获取当前元素 width + 左右padding + 左右border-width
offsetHeight	获取当前元素 height + 上下padding + 上下border-width
clientWidth	获取当前元素 width + 左右padding
clientHeight	获取当前元素 height + 上下padding
scrollWidth	当前元素内容真实的宽度，内容不超出盒子宽度时为盒子的clientWidth
scrollHeight	当前元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight

https://codepen.io/JingW/pen/gOQRZaw

Window 视图的各个尺寸？

属性	说明
innerWidth	innerWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏）
innerHeight	innerWidth 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏）

Document 文档视图的各个尺寸？

属性	说明
document.documentElement.clientWidth	浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏、滚动条）
document.documentElement.clientHeight	浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏、滚动条）
document.documentElement.offsetHeight	获取整个文档的高度（包含body的margin）
document.body.offsetHeight	获取整个文档的高度（不包含body的margin）
document.documentElement.scrollTop	返回文档的滚动top方向的距离（当窗口发生滚动时值改变）
document.documentElement.scrollLeft	返回文档的滚动left方向的距离（当窗口发生滚动时值改变）

⭐ offsetWidth/offsetHeight，clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别