有过移动端开发经验的人，想必都对文字垂直居中头痛不已，因为使用常规手段实现文字垂直居中在部分 Android 手机上会出现文字偏上的情况，往往需要配合 `line-height` 或者 `padding` 进行微调，苦不堪言。

在复杂的网页应用中，DOM 结构会频繁的发生变化，有的时候我们需要根据变化来进行相应的操作，以往通过 Mutation Events 来监听 DOM 的变化，目前它已经废弃了，被 MutationObserver 所取代。MutationObserver 的兼容性很好，可以放心大胆的使用。

如果我们需要监听某个元素是否出现在视口中，一般做法是监听 scroll 事件，然后查询元素离视口顶部的距离，但是监听 scroll 事件存在性能问题。浏览器原生提供了 IntersectionObserver 监听器，可以监听某个元素是否出现在视口中。

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。通常由用户拖拽鼠标经过文字而产生。Range对象表示包含节点和部分文本节点的文档片段。通过 selection 对象获得的 range 对象才是我们操作光标的重点。

神来之笔，使用 CSS 动画事件取代定时器