如何请求后台1000条数据不卡

(function () {
    const ulContainer = document.getElementById("list-data");
    //const ulContainer = _this.$refs.list;

    // 防御性编程
    if (!ulContainer) return;

    const total = 10000; // 插入数据的总数
    const batchSize = 4; // 每次批量插入的节点个数,个数越多,界面越卡顿
    const batchCount = total / batchSize; // 批处理的次数
    let batchDone = 0;  // 已完成的批处理个数

    function appendItems() {
        // 使用 DocumentFragment 减少 DOM 操作次数,对已有元素不进行回流
        const fragment = document.createDocumentFragment();

        for (let i = 0; i < batchSize; i++) {
            console.log(i);
            const liItem = document.createElement("li");
            liItem.innerText = batchDone * batchSize + i + 1;
            fragment.appendChild(liItem);
        }

        // 每次批处理只修改 1 次 DOM
        ulContainer.appendChild(fragment);
        batchDone++;
        doAppendBatch();
    }

    function doAppendBatch() {
        if (batchDone < batchCount) {
            // 在重绘之前,分批插入新节点
            window.requestAnimationFrame(appendItems);
        }
    }

    // kickoff
    doAppendBatch();

    // 使用 事件委托 ,利用 JavaScript 的事件机制,实现对海量元素的监听,有效减少事件注册的数量
    ulContainer.addEventListener("click", function (e) {
        const target = e.target;

        if (target.tagName === "LI") {
            alert(target.innerText);
        }
    });
})();

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在使用 el-table 渲染大量数据时,会发现渲染速度很慢,甚至会卡死。这是因为 el-table 默认是将所有数据渲染到页面上,当数据量很大时,会导致页面渲染速度极慢,甚至卡死。 解决方法有以下几种: 1. 使用分页功能。el-table 提供了分页功能,可以将大量数据分成多个页面,每次只渲染当前页面的数据,减少内存消耗。 2. 使用虚拟滚动。el-table 还提供了虚拟滚动功能,可以在滚动滚动时才渲染数据,减少内存消耗。 3. 使用数据预加载。当数据量很大,分页和虚拟滚动都无法满足要求时,可以使用数据预加载的方式。在用户滚动到底部时,再加载下一页数据。 示例代码如下: ``` <template> <div> <el-table :data="tableData" height="500" @scroll="handleScroll" > <el-table-column prop="name" label="Name" ></el-table-column> <el-table-column prop="age" label="Age" ></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [], currentPage: 1, perPage: 10, total: 0, isLoading: false } }, created() { this.loadData() ### 回答2: 如果使用el-table组件渲染10000数据导致页面卡死,可以尝试以下几种解决方法: 1. 分页加载数据:可以将数据分成多个分页,每次只加载当前显示的分页数据,减少一次性加载大量数据的压力。可以使用el-pagination组件实现分页功能。 2. 虚拟滚动:可以使用el-table的虚拟滚动功能,只渲染当前可见区域的数据,而不是全部数据。这样可以减少DOM元素的数量,提高性能。可以通过设置el-table的属性::virtual-scroll="true",并根据实际情况调整每页渲染的行数。 3. 后台分批加载数据:如果从后台获取数据,可以通过分批加载的方式减轻前端的渲染压力。可以设置每次请求数据量适当增加,然后通过监听滚动事件来动态加载下一批数据。 4. 异步渲染:可以将渲染任务放入浏览器的异步队列中执行,避免阻塞主线程。可以使用setTimeout或requestAnimationFrame等方法来实现异步渲染。 5. 数据过滤和搜索:可以根据实际需求对数据进行筛选和搜索,只展示符合件的数据,而不是全部数据。 需要根据具体的业务场景和数据量来选择合适的解决方法,并结合其他性能优化措施来提升页面的渲染速度和用户体验。 ### 回答3: 当el-table渲染10000数据时容易卡死,这是因为浏览器无法快速处理这么大数量级的DOM元素。为了解决这个问题,一种常用的方法是将数据分页显示。可以通过设置el-table组件的pageSize属性来限制每页显示的数据数,这样就可以避免页面卡死的情况。 另外,对于大量数据的渲染,应使用虚拟滚动技术。el-table组件提供了"fixed"属性,可以设置表格的固定高度,同时需要设置表格的max-height属性,以确保表格出现滚动。这样就能实现在页面上只渲染可见区域的数据,有效减少DOM的数量,提高页面渲染性能。 以下是一个示例代码片段,演示了如何使用分页和虚拟滚动来解决el-table渲染大量数据卡死的问题: ``` <template> <el-table :data="tableData" :max-height="tableHeight" height="100%"> <!-- 表格列定义 --> </el-table> </template> <script> export default { data() { return { tableData: [], // 用于存储总数据 currentPage: 1, // 当前页数 pageSize: 50, // 每页显示的数据数 tableHeight: '500px', // 表格的高度,需要根据实际情况调整 }; }, created() { // 模拟获取10000数据请求 this.getData(); }, methods: { getData() { // 模拟请求后端接口获取数据 // 假设接口返回的数据格式为 { data: [/* 数据数组 */], total: /* 总数据数 */ } const response = /* 发送请求并获取响应 */; this.tableData = response.data; }, handleCurrentChange(val) { // 分页改变时触发该方法 this.currentPage = val; this.getData(); // 重新获取数据 }, }, }; </script> ``` 在以上示例中,我们使用了el-table组件的分页功能,每页显示50数据。并且设置了表格的高度为500px,超出部分将自动显示滚动。同时在handleCurrentChange方法中,需要重新获取当前页的数据,保证只渲染当前页的数据,以提高渲染性能。 通过以上的方法,就可以解决el-table渲染大量数据卡死的问题。当然,具体的解决方案还需要根据实际场景进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值