web前端入门到实战：html页面加载海量数据的实现

最新推荐文章于 2023-06-18 21:28:57 发布

魔方编程

最新推荐文章于 2023-06-18 21:28:57 发布

阅读量606

点赞数

文章标签： web前端前端开发前端 html 前端工程师

本文链接：https://blog.csdn.net/wewfdf/article/details/99111724

版权

10w 条记录的数组，一次性渲染到页面上，如何处理可以不冻结UI？

具体化

页面上有个空的无序列表节点 ul ，其 id 为 list-with-big-data ，现需要往列表插入 10w 个 li ，每个列表项的文本内容可自行定义，且要求当每个 li 被单击时，通过 alert 显示列表项内的文本内容。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>页面加载海量数据</title>
</head>

<body>
  <ul id="list-with-big-data">100000 数据</ul>
  <script>
    // 此处添加你的代码逻辑
  </script>
</body>

</html>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法

分析

可能在看到这个问题的第一眼，我们可能会想到这样的解决办法：获取 ul 元素，然后新建 li 元素，

最低0.47元/天解锁文章

魔方编程

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端入门到实战：html页面加载海量数据的实现

10w 条记录的数组，一次性渲染到页面上，如何处理可以不冻结UI？具体化页面上有个空的无序列表节点 ul ，其 id 为 list-with-big-data ，现需要往列表插入 10w 个 li ，每个列表项的文本内容可自行定义，且要求当每个 li 被单击时，通过 alert 显示列表项内的文本内容。<!DOCTYPE html><html lang="en">...
复制链接

扫一扫