Angular 是一种流行的前端框架，它的 ng-repeat 指令可以循环渲染一个数组或对象的元素，这是开发 Web 应用程序时非常常见的用法。然而，当还原元素很多时，ng-repeat 渲染有性能问题。在这篇文章中，我们将分享一些优化大数据集渲染的技巧。
渲染大数据集的性能问题
由于 JavaScript 只能在单独的主线程中运行，大型数据集上的渲染可能会导致网页内容的卡顿和不响应。在 ng-repeat 指令中，当需要渲染数千个以上的元素时，因为需要对每个元素进行脏检查，所以渲染和绑定数据的时间可能会很长，这会阻塞主线程，造成页面卡顿和用户体验下降。
优化大数据集的渲染性能
1. 使用 track by
在使用 ng-repeat 渲染时，可以使用 track by 选项来指定一个属性来快速识别条目，从而避免实际 DOM 中的重复元素。这可以优化渲染性能。
例如，在以下代码中，*ngFor 通过提供 track by 选项以标识每个元素：
<div *ngFor="let item of items; trackBy: trackByIdentity">...</div>
在 .ts 文件中，定义该函数：
trackByIdentity(index, item) {
return item.id;
}该函数只需返回显示的对象的唯一标识符即可。
2. 使用 bind-once
在数据不经常更改的情况下，可以使用一次性绑定（Bind-once）技术来提高渲染性能和用户体验。
例如，在以下代码中，ng-repeat 使用 :: 操作符指定绑定一次：
<div ng-repeat="item in ::items">...</div>
这意味着在使用 ng-repeat 渲染元素时，必须在渲染期间绑定数据。这可以优化渲染性能。
3. 使用 virtual-repeat
如果您需要在一个固定的高度窗口中渲染大量的元素，则可以考虑使用虚拟滚动（Virtual Scrolling）来改善性能。虚拟滚动只会渲染当前屏幕上可见的元素，而不是所有元素。
在 Angular 中，可以使用第三方库 ng-virtual-repeat，它支持虚拟滚动，并且与 ng-repeat 用法相同。
首先，使用 npm 安装 ng-virtual-repeat：
npm install ng-virtual-repeat --save
然后，在模板中使用以下代码：
<div ng-virtual-repeat="item in items"></div>
4. 使用 Web Workers
Web Workers 可以使用多个线程运行脚本，从而解决长时间的计算和操作而不阻塞主线程。在处理大型数据集时，可以使用 Web Workers 来进行计算和绑定，并将结果返回给主线程，以避免页面卡顿和用户体验不佳。
在 Angular 中，可以使用微型化框架 Comlink 来实现与 Web Workers 的通信。
首先，使用 npm 安装 comlink 和 worker-loader：
npm install comlink worker-loader --save
然后，创建 web worker 文件，在该文件中计算和绑定数据，例如：
-- -------------------- ---- -------
-- ---------
------ ------- ---- ----------
----- ----- - ------------------------
----- ------ - -
---------------------- -
-- ---
------ -------
-
--
-----------------------最后，从 Angular 控制器内部使用 Comlink 创建和连接 Web Workers：
-- -------------------- ---- -------
-- -----------------
------ ------ ---- ----------------------------
------ ----- ------------- -
----------------------- -
-- ---
----------- - ------------------------
-
--------- -
-- ---
------ -----------------------------------
-
-结论
在使用 Angular 进行大型数据集渲染时，可能会遇到性能问题，以及页面卡顿和用户体验不佳。本文提供了一些技巧用于优化 ng-repeat 的性能，其中包括使用 track by、使用一次性绑定、使用虚拟滚动和使用 Web Workers。希望这些方法可以帮助您更有效地处理大型数据集，并提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67748a026d66e0f9aaedf57f