在前端开发中，经常会遇到需要展示大量数据的情况，而表格是最常见的数据展示方式之一。但是，当数据量过大时，会严重影响页面的性能和用户体验。为了解决这个问题，我们需要采取一些优化方案。
1. 分页展示
分页展示是最常见的解决方案之一。将数据分为多页，每页只展示部分数据，可以减少数据量，提高页面加载速度和渲染性能。同时，分页也可以提高用户体验，使用户更容易找到自己需要的数据。
示例代码：
// www.javascriptcn.com code example
<div id="table"></div>
<div id="pagination"></div>
<script>
const tableData = [
{ id: 1, name: 'Alice', age: 23 },
{ id: 2, name: 'Bob', age: 25 },
{ id: 3, name: 'Charlie', age: 27 },
{ id: 4, name: 'David', age: 29 },
{ id: 5, name: 'Emily', age: 31 },
{ id: 6, name: 'Frank', age: 33 },
{ id: 7, name: 'Grace', age: 35 },
// ... 10000+ rows
];
const table = new Tabulator('#table', {
data: tableData.slice(0, 10), // only show the first 10 rows
pagination: 'local',
paginationSize: 10,
paginationSizeSelector: [10, 20, 50],
layout: 'fitColumns',
columns: [
{ title: 'ID', field: 'id' },
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age' },
],
});
const pagination = new Tabulator('#pagination', {
data: tableData,
pagination: 'local',
paginationSize: 10,
paginationSizeSelector: [10, 20, 50],
layout: 'fitColumns',
columns: [
{ title: 'ID', field: 'id' },
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age' },
],
});
</script>2. 虚拟滚动
虚拟滚动是一种优化方案，可以在不影响用户体验的情况下展示大量数据。它通过只渲染可见区域内的数据，来减少渲染量和提高性能。这种方案适用于需要展示大量数据但用户只需要浏览其中一小部分的情况。
示例代码：
// www.javascriptcn.com code example
<div id="table"></div>
<script>
const tableData = [
{ id: 1, name: 'Alice', age: 23 },
{ id: 2, name: 'Bob', age: 25 },
{ id: 3, name: 'Charlie', age: 27 },
{ id: 4, name: 'David', age: 29 },
{ id: 5, name: 'Emily', age: 31 },
{ id: 6, name: 'Frank', age: 33 },
{ id: 7, name: 'Grace', age: 35 },
// ... 10000+ rows
];
const table = new Tabulator('#table', {
data: tableData,
virtualDom: true,
virtualDomBuffer: 20, // only render 20 rows outside of the visible area
layout: 'fitColumns',
columns: [
{ title: 'ID', field: 'id' },
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age' },
],
});
</script>3. 延迟加载
延迟加载是一种优化方案，可以在用户需要时再加载数据，而不是一次性加载所有数据。这种方案适用于需要展示大量数据但用户不需要一次性浏览全部数据的情况。
示例代码：
// www.javascriptcn.com code example
<div id="table"></div>
<script>
const table = new Tabulator('#table', {
ajaxURL: 'http://example.com/data',
ajaxProgressiveLoad: 'scroll',
layout: 'fitColumns',
columns: [
{ title: 'ID', field: 'id' },
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age' },
],
});
</script>4. 数据缓存
数据缓存是一种优化方案，可以将数据缓存到本地，减少请求次数和数据传输量，提高性能和用户体验。这种方案适用于需要频繁展示同一批数据的情况。
示例代码：
// www.javascriptcn.com code example
<div id="table"></div>
<script>
const table = new Tabulator('#table', {
ajaxURL: 'http://example.com/data',
ajaxResponse: function (url, params, response) {
// save the data to the local storage
localStorage.setItem(url, JSON.stringify(response));
return response;
},
ajaxLoader: false,
data: JSON.parse(localStorage.getItem('http://example.com/data')),
layout: 'fitColumns',
columns: [
{ title: 'ID', field: 'id' },
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age' },
],
});
</script>结语
以上是表格展示大量数据的性能优化方案，不同的方案适用于不同的场景。在实际开发中，我们需要根据具体情况选择最合适的方案。同时，我们也需要注意不要过度优化，以免影响代码的可读性和维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d350f5a941bf7134643e3c