原理
1.通过监听滚动区域DOM的scroll事件, 计算出触底
// 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度
scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight
2.触底后触发列表添加, 列表添加使用createDocumentFragment, 将多次插入的DOM先存入内存, 最后一次填充进去, 提高性能, 也方便后面的MutationObserver监听
3.使用MutationObserver监听列表的DOM添加, 添加完毕后, 隐藏加载中提示
示例
https://codepen.io/klren0312/full/dybgayL
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
打开页面时，对比缓存中js中是否有需要加载的js，如果有直接用缓存中的js文件，不需加载否则，则需要加载传入一个随机参数和使用验证码一样在IE里
如果访问的URL在缓存中存在
浏览器不会再次加载
可以在引入时加个参数，这个参数一变化，就会去服务器加载js文件
<script
language="javascript"
src="pages/ceyl/js/myJs.js?date=XXX"></script>其中如果XXX发生变化就会重新加载js文件
