js给dom分页

news2025/1/3 2:18:06

减少js操作dom

js引擎与渲染引擎相互独立,

  • js操作dom过程开销大
  • 操作到了dom层面会触发渲染树的变化,触发回流与重绘开销大

让js给dom分压

js处理完操作后,最后给dom

  1. 缓存变量
let container = document.getElementById('container')
let content = ''
for(let count=0;count<10000;count++){ 
  // 先对内容进行操作
  content += '<span>我是一个小测试</span>'
} 
// 内容处理好了,最后再触发DOM的更改
container.innerHTML = content

  1. DOM Fragment 对象 代替真实的dom元素
let container = document.getElementById('container')
// 创建一个DOM Fragment对象作为容器
let content = document.createDocumentFragment()
for(let count=0;count<10000;count++){
  // span此时可以通过DOM API去创建
  let oSpan = document.createElement("span")
  oSpan.innerHTML = '我是一个小测试'
  // 像操作真实DOM一样操作DOM Fragment对象
  content.appendChild(oSpan)
}
// 内容处理好了,最后再触发真实DOM的更改
container.appendChild(content)

  1. 事件循环

js运行过程中,会先将全局上下文压入执行栈,然后执行同步代码,遇到异步代码则放入任务队列,当执行栈空,会从任务队列中取出任务执行,这个过程就是事件循环,
执行完毕,渲染页面

任务队列分为macro(宏任务)队列和 micro(微任务)队列。
常见的 macro-task 比如: setTimeout、setInterval、 setImmediate、script(整体代码)、 I/O 操作、UI 渲染等。
常见的 micro-task 比如: process.nextTick、Promise.then、MutationObserver 等。
取异步任务的时候先微再宏
在这里插入图片描述

更新 DOM 的时间点,应该尽可能靠近渲染的时机。当我们需要在异步任务中实现 DOM 修改时,把它包装成 micro 任务是相对明智的选择

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2267829.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习——神经网络中前向传播、反向传播与梯度计算原理

一、前向传播 1.1 概念 神经网络的前向传播&#xff08;Forward Propagation&#xff09;就像是一个数据处理的流水线。从输入层开始&#xff0c;按照网络的层次结构&#xff0c;每一层的神经元接收上一层神经元的输出作为自己的输入&#xff0c;经过线性变换&#xff08;加权…

秒鲨后端之MyBatis【2】默认的类型别名、MyBatis的增删改查、idea中设置文件的配置模板、MyBatis获取参数值的两种方式、特殊SQL的执行

别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01;! ! ! 下篇更新&#xff1a; 秒鲨后端之MyBatis【3】自定义映射resultMap、动态SQL、MyBatis的缓存、MyBatis的逆向工程、分页插件。 默认的类型别名 MyBatis的增删改查 添加 <!--int insertUs…

瑞芯微全新芯片平台RK3506优势详解,高集成低功耗,为工业而生 触觉智能测评

RK3506是瑞芯微Rockchip在2024年第四季度全新推出的Arm嵌入式芯片平台&#xff0c;三核Cortex-A7单核Cortex-M0多核异构设计&#xff0c;CPU频率达1.5Ghz, M0 MCU为200Mhz。 而RK3506芯片平台下的工业级芯片型号RK3506J&#xff0c;具备-40-85℃的工业宽温性能、发热量小&#…

AIOps平台的功能对比:如何选择适合的解决方案?

定义与概念 AIOps&#xff0c;即人工智能运维&#xff08;Artificial Intelligence for IT Operations&#xff09;&#xff0c;是将人工智能技术应用于 IT 运维领域&#xff0c;以实现自动化、智能化的运维管理。它通过整合大数据、机器学习等先进技术&#xff0c;对海量运维数…

Python + 深度学习从 0 到 1(03 / 99)

希望对你有帮助呀&#xff01;&#xff01;&#x1f49c;&#x1f49c; 如有更好理解的思路&#xff0c;欢迎大家留言补充 ~ 一起加油叭 &#x1f4a6; 欢迎关注、订阅专栏 【深度学习从 0 到 1】谢谢你的支持&#xff01; ⭐ 神经网络的数据表示 – 张量 你可能对矩阵很熟悉&a…

Lumos学习王佩丰Excel第二十三讲:饼图美化与PPT图表

一、双坐标柱形图的补充知识 1、主次坐标设置 2、主次坐标柱形避让&#xff08;通过增加两个系列&#xff0c;挤压使得两个柱形挨在一起&#xff09; 增加两个系列 将一个系列设置成主坐标轴&#xff0c;另一个设成次坐标轴 调整系列位置 二、饼图美化 1、饼图美化常见设置 …

基于Vue+SSM+SpringCloudAlibaba书籍管理系统

功能要求 一、登录功能&#xff08;http://localhost:8080/#/login&#xff09; 输入账号和密码(admin/admin)进行登录&#xff1a; 如果密码错误&#xff0c;给出提示信息 如果密码正确&#xff0c;跳转到主页 账号或密码错误&#xff1a; 账号密码正确&#xff1a;跳转到…

【优先算法】滑动窗口 --(结合例题讲解解题思路)(C++)

目录 ​编辑 1.什么是滑动窗口&#xff1f; 2. 滑动窗口例题 2.1 例题1&#xff1a;长度最小的子数组 2.1.1 解题思路 2.1.2 方法一&#xff1a;暴力枚举出所有的子数组的和 2.1.3 方法二&#xff1a;使用 “同向双指针” 也就是滑动窗口来进行优化 2.2 例题2&#xff1a;无重…

VS Code 从命令行启动

在 VS Code 中&#xff0c;code 命令允许你在命令行中快速打开文件、文件夹或新窗口。 安装 原本地址&#xff1a;https://code.visualstudio.com/docs/setup/mac 使用 使用 code 命令 打开文件&#xff1a;你可以通过在命令行输入 code 文件名 来直接打开一个文件。 打开文…

微服务-配置管理

文章目录 1.什么是配置管理2.配置共享添加共享配置拉取共享配置 3.配置热更新添加配置到Nacos配置热更新 4.动态路由监听Nacos配置变更 1.什么是配置管理 到目前为止我们已经解决了微服务相关的几个问题&#xff1a; 微服务远程调用微服务注册、发现微服务请求路由、负载均衡…

ArrayList 和LinkedList的区别比较

前言 ‌ArrayList和LinkedList的主要区别在于它们的底层数据结构、性能特点以及适用场景。‌ArrayList和LinkedList从名字分析&#xff0c;他们一个是Array&#xff08;动态数组&#xff09;的数据结构&#xff0c;一个是Linked&#xff08;链表&#xff09;的数据结构&#x…

MySQL--》如何在SQL中巧妙运用函数与约束,优化数据处理与验证?

目录 函数使用 字符串函数 数值函数 日期函数 流程函数 约束 外键约束 约束规则 函数使用 函数是指一段可以直接被另一段程序调用的程序或代码&#xff0c;在mysql当中有许多常见的内置函数&#xff0c;接下来开始对这些内置函数及其作用进行简单的讲解和使用&#xf…

一文大白话讲清楚CSS盒子模型和块级格式化上下文(BFC)

一文大白话讲清楚CSS盒子模型和块级格式化上下文&#xff08;BFC&#xff09; 1.啥是个CSS盒子 鞋盒你家总有吧&#xff0c;方方正正&#xff0c;有长度有高度。css盒子跟这个八九不离十当我们编写html页面时&#xff0c;写了很多的元素&#xff0c;比如"div",&quo…

Docker 快速搭建 GBase 8s数据库服务

1.查看Gbase 8s镜像版本 可以去到docker hub网站搜索&#xff1a;gbase8s liaosnet/gbase8s如果无法访问到该网站&#xff0c;可以通过docker search搜索 docker search gbase8s2.拉取Gbase 8s镜像 以下演示的版本是目前官网最新版本Gbase8sV8.8_3.5.1 docker pull liaosn…

密钥登录服务器

1. 生成 SSH 密钥对 如果您还没有生成密钥对&#xff0c;可以使用以下命令生成&#xff1a; ssh-keygen 在 root 用户的家目录中生成了一个 .ssh 的隐藏目录&#xff0c;内含两个密钥文件&#xff1a;id_rsa 为私钥&#xff0c;id_rsa.pub 为公钥。 在提示时&#xff0c;您可…

王佩丰24节Excel学习笔记——第二十讲:图表基础

【以 Excel2010 系列学习&#xff0c;用 Office LTSC 专业增强版 2021 实践】 【本章技巧】 课件图片有问题&#xff0c;不能随隐藏熟悉各个图表小部件的功能&#xff0c;需要修改都是选中右键进行更改。 一、认识图表中的元素 图表标题&#xff1a;主坐标&#xff08;横坐标&…

华为交换机配置本地端口流量镜像

端口镜像&#xff08;Port Mirroring&#xff09;是网络监控的一种重要技术&#xff0c;通过复制流经特定端口的报文&#xff0c;并将其传送到指定的观察端口&#xff0c;以便对网络流量进行分析和监控。下面将详细介绍如何在华为交换机上配置本地端口镜像&#xff0c;以N:1镜像…

IDEA设置作者信息 日期等

file -> setting 或 ctrl alt s找到如下 然后添加注释即可 可以直接编辑5处的文字&#xff0c;在 author 后放自己的名字即可 /*** author 你的名字* date ${DATE} ${TIME})*/当然 整体不止这些 &#xff0c;看下面的描述中&#xff0c;还有很多其他选项 也可以 4 这…

【stm32can】

can时钟 can波特率计算&#xff08;位同步内容&#xff09; ss是固定的1tq&#xff0c; pts&#xff0c;pbs1&#xff0c;pbs2是用户设定值 同步时间段的理解有误&#xff1f; 原文出处 数据帧 遥控帧

【论文笔记】Contrastive Learning for Sign Language Recognition and Translation

&#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;为万世开太平。 基本信息 标题: Contrastive Learning for…