前端渲染几十万条数据不卡顿

最新推荐文章于 2024-08-01 21:40:22 发布
最新推荐文章于 2024-08-01 21:40:22 发布
阅读量1.8k 收藏 11
点赞数 2
文章标签： javascript html html5 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48728668/article/details/110780086
版权
本文探讨如何在前端渲染几十万条数据时保持页面流畅，重点介绍了利用createDocumentFragment方法创建文档碎片节点以减少DOM操作次数，以及使用requestAnimationFrame优化动画性能，确保在浏览器刷新频率下集中执行DOM更新，降低CPU、GPU和内存使用。
摘要由CSDN通过智能技术生成

前端渲染几十万条数据不卡顿

渲染大数据时,合理使用createDocumentFragment和requestAnimationFrame,将操作分为一小段执行.

createDocumentFragment()方法

  1. 用来创建一个虚拟的节点对象,或者说说是用来创建文档碎片节点,可以包含各种类型的节点,在创建之初是空的.
  2. 创建的节点不属于文档树,继承的parentNode属性总是null,当请求把一个DocumentFragment节点插入文档树,插入的不是DocumentFragment自身,而是它的子孙节点,插入的是括号里的节点.它有利于实现文档的剪切,复制和粘贴.
  3. 当需要添加多个dom元素时,如果先将这些元素添加到DocumentFragment中,在统一将DocumentFragment添加到页面,会减少页面渲染dom的次数,效率会明显提升.

requestAnimationFrame

requestAnimationFrame比起setTimeout,setInterval的优势主要是两点:

  1. requestAnimationFrame会把每一帧中的所有dom操作集中起来,在一次重绘和回流中完成,并且重绘或回流的时间间隔紧紧会随浏览器的刷新频率,一般来说频率为每帧60秒
  2. 在隐藏不可见元素中,requestAnimationFrame将不会进行重绘或回流.有更少的cpu,gpu和内存使用量.
<body>
   <ul></ul>
   <script>
      const total = 100000
最低0.47元/天 解锁文章
57993
关注
js 渲染十万条数据卡顿优化方法。请求帧渲染
PrimaryColor
12-18 3157
函数： 1.window.requestAnimationFrame(callback) callback：下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。 作用：告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行 2.document.createdocumentfragment() 作用：创建了一虚拟的节点对象，节点对象包含所有属性和方法。减少添加dom的次数..
通过浏览器渲染过程来进行前端优化
weixin_30486037的博客
05-29 103
通过浏览器渲染过程来进行前端优化 介绍 　　做web开发，我个人觉得必须要弄清楚浏览器的渲染过程，否则我们很难进行前端优化。 　　我今天就简单说一下页面加载和前端优化。 页面加载 我按照最简单的方式进行描述，实际上更复杂，不管是在浏览器端还是服务端，比如dns解析，代理服务器，负载均衡器等等。 ...
前端页面渲染优化
weixin_34037515的博客
03-13 187
1.禁止使用iframe（阻塞父文档onload事件）； *iframe会阻塞主页面的Onload事件； *搜索引擎的检索程序无法解读这种页面，不利于SEO; *iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javas...
vue大数据量列表渲染性能优化：虚拟滚动原理
最新发布
felix_alone2012的博客
08-01 673
前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下，我们讲了两种实现方式来提高渲染性能：前端分页和节点数据懒加载。关于扁平化结构Tree和嵌套结构Tree组件的渲染嵌套结构的Tree组件是一种递归渲染，性能上比起列表结构的v-for渲染比较一般。对于这种渲染方式，在数据量很大的情况下，只有通过懒加载可以提高渲染性能；而扁平化结构则有更多的选择，前端分页是一种方式，还有一种更好的选择，就是本节介绍的虚拟滚动。
前端优化之如何做到渲染几十万条数据不卡帧
lannieZ的博客
03-29 706
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body.
前端浏览器渲染优化
weixin_33763244的博客
02-01 314
By Jordan Irabor | January 17 2019 原文 介绍 我们生活在一个强调快速提供网络服务的时代。由于web应用的负载传输不断增加，开发者必须采取最佳实践来确保数据包被即刻分发，以此提供给用户拉稀般的网络体验 如今被web开发广泛采用的最佳实践是图片压缩、代码压缩、代码打包（webpack打包）等等。这些实践已经被证明了能有效提高用户体验，如果开发者能够深入理解浏览器渲染...
前端性能优化之渲染优化
qq_33198051的博客
03-21 4515
1.知识体系 1.1从URL输入到页面加载 打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？现在带大家来看看流程。 首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户 总体来
前端渲染几十万条数据不卡顿.html
06-29
前端渲染几十万条数据不卡顿.html
高性能渲染十万条数据：时间分片、虚拟列表、懒加载
qq_38110274的博客
10-26 861
对于大量数据的渲染，可以采用时间分片和虚拟列表和懒加载的处理方式。
基于vue实现web端超大数据量表格的卡顿解决
10-17
本文将详细介绍如何基于Vue来优化这种情况，确保即使面对数十万条数据，表格也能流畅运行。 首先，解决思路来源于实际项目需求。例如，某公司的定位系统会产生大量的定位数据，如果一次性展示这些数据，会导致表格...
前端页面渲染优化——performance工具分析优化
qq_41308489的博客
01-13 1510
首先这是一个代码运行计算大量逻辑的优化。 场景 当JS中存在大量数据的逻辑计算时 非静态资源优化 代码层次上的优化 工具 Chrome Devtools 的performance, 在浏览器按下F12就可以找到。 情况 当我们的页面在进行大量的数据逻辑运算时，我们的页面要等待数据计算完毕后才开始渲染加载完毕。首先这是因为页面渲染它是一个宏任务，在我们的task任务里面。主线程的main包含的task里也要进行js的计算，所以就造成了阻塞。 我们创建一个页面，代码如下 <!DOCTYPE htm
渲染优化
yinmeizhuang的博客
06-19 359
渲染优化 禁止使用iframe（阻塞父文档onload事件） - iframe会阻塞主页面的Onload事件 - 搜索引擎的检索程序无法解读这种页面，不利于SEO - iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载 - 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript，动态给iframe添加src属性值...
vue 1000条数据 前端做分页
qq_39041201的博客
01-21 2110
某些需求后台会返回大量数据,可能会上万条,如果前端一次渲染完毕 性能体验会非常不好,这时候就需要前端来做分页了, 代码如下: html <ul> <li :id="i+1" v-for="(item,i) in data" :key="i"> <div>{{item.stock_name}}<p>{{item.stock_code}}</p></div> <div>{{item.new_price}
面对大数据量渲染，前端工程师如何保证页面流畅性 _前端百万数据渲染处理
2401_84166536的博客
05-01 146
具体来说,我们可以在列表容器添加滚动监听,当滚动结束后,计算出当前可见区域的起始和结束索引,然后只渲染这个截断后的范围,复用之前的 DOM 元素。对于含大量图表的页面,我们也可以只渲染当前可视区域的图表,其他图表用一个 div 占位。一开始只加载第一页数据,当用户滚动到底部时,再加载下一页数据。对于特别复杂的图表,我们甚至可以只渲染简化的低像素占位预览图,真正渲染高清图表只有当图表可见时才进行。使用该组件时,只需要渲染 container,滚动时组件内部实现优化,大大减少 DOM 操作。
前端性能优化——渲染优化
军火库
11-14 340
浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。深拷贝拷贝多层，每一级别的数据都会拷贝。
前端性能优化--渲染优化
m0_68324632的博客
10-27 707
之前文章有讲过《浏览器的工作原理：输入URL后，Web页面是如何呈现的？》《【V8引擎】JavaScript变量提升》我们需要进一步了解浏览器的渲染过程，才能更好的进行渲染优化。
前端1万条数据怎么渲染不卡
06-10
前端渲染大量数据时，需要考虑以下几点来优化性能： 1. 虚拟滚动：只渲染当前可见区域内的数据，滚动时再渲染后续数据，可以减少页面元素数量，提升性能。 2. 分页加载：将数据分页加载，每次只加载当前页的数据，可以避免一次性加载大量数据。 3. 数据缓存：将数据缓存在本地或者在请求数据时进行缓存，可以减少网络请求次数，提升性能。 4. 使用 Web Worker：将数据处理放在 Web Worker 中，可以避免阻塞主线程，提升性能。 5. 使用合适的数据结构：使用合适的数据结构，如哈希表、树、堆等，可以优化数据的访问和处理过程。 综上所述，可以通过以上方法来优化前端渲染大量数据时的性能，使得页面不会卡顿。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值