element.getBoundingClientRect
判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用，当element.getBoundingClientRect.Top<=document.documentElement.clientHeight时表示该元素在可视范围内。
详细介绍
IntersectionObserver对象
异步监听目标元素与其祖先或视窗的位置信息，通常用于替代element.getBoundingClientRect+window.scroll的方案。
详细介绍
window.requestAnimationFrame
将多个可能会导致回流或重绘的操作放在一起一次性执行，避免滚动或操作页面时页面出现卡顿和空白，该方法免除了开发者自己编写“函数防抖”或“函数节流”的麻烦。
详细介绍
“函数防抖”或“函数节流”介绍
element.scrollIntoViewIfNeeded(opt_center)
把某个元素滚动到可视区域，例如手机页面底部的表单输入框获取焦点时，软键盘会遮挡元素。这时就应该使用该特性。
DocumentFragment对象
DocumentFragment 接口表示一个没有父级文件的最小文档对象，它不是真实 DOM 树的其中一部分，它的变化不会引起 DOM 树的重新渲染操作(reflow) ，因此不会导致性能问题。
当我们需要对dom进行频繁的写入操作时，可以用document.createDocumentFragment()创建一个对象，在此对象上进行添加(append)或被插入(inserted)操作，然后再插入真实的dom节点。因为所有的节点会被一次性插入到文档中，而这个操作仅发生一个重渲染的操作，可以大大提高性能。
详细介绍
js滚动及可视区域的相关的操作
原文地址：https://www.cnblogs.com/94pm/p/9112657.html