一次渲染十万条数据：前端技术优化（上）

I have a lemon

已于 2024-09-18 17:26:44 修改

阅读量1k

点赞数 7

文章标签：前端

于 2024-09-18 17:15:51 首次发布

本文链接：https://blog.youkuaiyun.com/m0_37483148/article/details/142338599

版权

今天看了一篇文章，写的是一次性渲染十万条数据的方法，本文内容是对这篇文章的学习总结，以及知识点补充。

在现代Web应用中，前端经常需要处理大量的数据展示，例如用户评论、商品列表等。直接渲染大量数据会导致浏览器性能问题，如卡顿和延迟。本文将探讨几种优化策略，帮助开发者提高网页性能，优化用户体验。

方法一：通过document直接渲染十万条数据

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一次性渲染十万条数据</title>
</head>
<body>
  <ul id="app"></ul>
</body>
<script>
  const app = document.querySelector('#app')
  let now = Date.now()
  // 方法一：一次性渲染十万条数据
  for (let i = 0; i < 100000; i++) {
     
   const li = document.createElement('li')
   li.innerText = `我是第${
       i + 1}条数据`
   app.appendChild(li)
  }


  console.log('js运行耗时', Date.now() - now)

  setTimeout(() => {
     
    console.log('dom渲染耗时', Date.now() - now)
  })
  
</script>
</html>

结果

请添加图片描述

问题

当页面需要一次性渲染大量数据时，直接将所有数据渲染到DOM中会迅速消耗浏览器资源，造成性能瓶颈。这种方法虽然简单，但会导致浏览器响应缓慢，用户体验差。

补充知识1: JS事件循环之宏任务和微任务

在 JavaScript 中，事件循环是处理并发的机制，它允许执行非阻塞的操作。事件循环的核心概念包括宏任务（macro tasks）和微任务（micro tasks）。它们的执行顺序和机制十分重要，理解它们有助于更好地编写异步代码。

宏任务与微任务

宏任务 (Macro Task):
- 宏任务是较大粒度的任务，它通常由以下几部分组成：
  - 整个脚本（执行的上下文）
  - setTimeout
  - setInterval
  - I/O 操作（如网络请求）
- 宏任务的执行是按照创建顺序依次执行的。
微任务 (Micro Task):
- 微任务是相对较小粒度的任务，通常用于处理短小的异步操作，主要由以下几部分组成：
  - Promise 的 .then() 和 .catch()
  - MutationObserver
- 微任务在当前宏任务执行完毕后立即执行，且在浏览器进行下一次重绘之前完成所有微任务。这意味着微任务的优先级高于宏任务。

执行顺序

首先，事件循环从宏任务队列中取出一个宏任务并执行。
执行完宏任务后，查看微任务队列，执行所有微任务，直到微任务队列为空。
一旦微任务队列为空，浏览器会进行渲染（重绘），然后再从宏任务队列中取出下一个宏任务。
重复这个过程，直到所有任务都完成。

示例

下面是一个简单的示例，帮助理解宏任务和微任务的执行顺序：

console.log('Start');

setTimeout(() => {
   
  console.log('Timeout 1');
}, 0);

最低0.47元/天解锁文章