在前端开发中，我们可能会面临需要处理大量数据并将其渲染到页面中的情况。但是在处理大量数据时，直接将它们全部渲染到页面上会导致性能问题和用户体验下降的风险。为了解决这个问题，可以使用 npm 包 clusterize.js。
什么是 clusterize.js
clusterize.js 是一个可帮助我们为大型列表和表格加载提供分页效果、懒加载以及搜索过滤功能的 JavaScript 库。它通过一种特殊的方式 - 将要显示的数据分成小块（cluster），然后只渲染可见部分，从而减少 DOM 操作和内存占用。同时，它具有很强的自定义能力，可以让我们根据实际需求来定制其行为和样式。
安装 clusterize.js
首先，我们需要在项目目录下使用 npm 来安装 clusterize.js：
npm install clusterize.js --save
使用 clusterize.js
使用 clusterize.js 具体分为以下四步：
1. 引入 clusterize.js
在 HTML 文件中引入 clusterize.min.css 和 clusterize.min.js 文件：
<head> <link rel="stylesheet" href="path/to/clusterize.min.css"> </head> <body> <!-- ... --> <script src="path/to/clusterize.min.js"></script> </body>
2. 定义 HTML 结构
在页面中定义一个外层容器和一个内层容器，这两个容器的 class 名称可以根据需要自己定义。内层容器用于存放数据块：
<div class="outer-container"> <div class="inner-container"> <!-- 数据块 --> </div> </div>
3. 初始化 clusterize.js
在 JavaScript 文件中进行初始化：
var clusterize = new Clusterize({ rows: [], // 要显示的数据块数组 scrollId: 'outer-container', contentId: 'inner-container' });
其中，scrollId 是指最外层容器的 ID 或者 class 名称，用于监听滚动事件；contentId 是指数据块所在的容器的 ID 或者 class 名称。
4. 更新数据
当需要更新数据时（例如搜索、分页等），只要将新的数据块数组传入 update 方法即可：
clusterize.update([ '<div class="data-block">...</div>', '<div class="data-block">...</div>', '<div class="data-block">...</div>', // ... ]);
自定义 clusterize.js
除了上面提到的四步之外，我们还可以通过以下方式来自定义 clusterize.js：
1. 配置项
在初始化时，可以传入一些配置项来定制其行为：
-- -------------------- ---- ------- --- ---------- - --- ------------ ----- --- --------- ------------------ ---------- ------------------ ------------------ --- -- -- ------- --------- ---------------------- -------------------- - ------ --- -- ------ ------- --------- -- -------------- ---------- -- -------------- ----- -- ------------ ----- -- ------------ ---------- - --------------- ---------- - -------------------- ---------- - - ---展开代码
可以通过配置项来定制每个 cluster 中包含的数据块数量、当没有数据时内层容器的样式等。
2. 样式
clusterize.js 默认提供了一些样式，但我们可以根据需要自定义其样式。例如：
.outer-container { height: 200px; overflow-y: > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/32851) ，转载请注明来源 [https://www.javascriptcn.com/post/32851](https://www.javascriptcn.com/post/32851)
