前端Elment resize检测

近来有需求要做分页，听起来可能有点Low。 所以我要把Low的事情做得有点逼格。

分页本身没啥，但是数据量起来了，比如十万。 要是不做点处理， 那你的页面估计爽得很，机器也爽得很。 放心，我不会让你这么爽。

大量数据展现方案

比较流行的当然是虚拟滚动（无限滚动）。

1. 始终展示的是有限的固定节点。
2. 外层创建滚动层。

一句话，就是反复利用固定节点展现数据。

其中还有两个点

何时需要加载新的分页数据

1. scrollTop , clientHeight, scrollHeight
2. IntersectionObserver (chrome 55+)

如何知道容器宽高变化

本文就围绕着这个展开

因为使用的是react框架，使用了 react-window , react-window就是用来展现海量数据的react列表组件。

因为项目需要，还要不通尺寸一行展现不同数量的数据。 肯定有人就说，监听window.resize。

没错，监听resize一定程度，但是window.resize, 并不能让我知道容器本身的尺寸，当

然可以通过getComputedStyle获取。 要是window没有resize的情况呢。

我就想实时的知道尺寸的变化。

尺寸变化监测方案

Cross-Browser, Event-based, Element Resize Detection

这个思路是创建一个 type为text/html的节点，通过监听该节点的resize事件达到目的。

javascript-detect-element-resize

创建三个子元素，利用scroll事件来监测变化。

ResizeObserver

原生自带的方案

resize-observer-polyfill 基于resze和MutationOberver的polyfill

此外

当然，我觉得还有定时器 + getComputedStyle 也是很低成本的实现。