BOM和DOM

关于DOM、BOM和diff算法

浏览器对象模型(Browser Object Model,简称BOM)和文档对象模型(Document Object Model,简称DOM)是Web开发中的两个核心概念,它们都与浏览器和网页的交互有关。以下是BOM和DOM的详细总结:

浏览器对象模型(BOM)

  1. 定义:BOM是Web页面与浏览器之间的接口,提供了与浏览器交互的方法和属性。

  2. 主要目的

    • 允许JavaScript操作浏览器窗口。
    • 访问浏览器的功能,如历史记录、地址栏、前进和后退按钮。
  3. 组成

    • window对象:BOM的顶级对象,代表浏览器窗口。
    • document对象:代表整个HTML文档,是DOM的入口点。
  4. 功能

    • 操作浏览器窗口,如打开新窗口、改变窗口大小等。
    • 访问浏览器历史记录(history对象)。
    • 访问浏览器的会话存储(sessionStorage)和本地存储(localStorage)。
    • 与浏览器的导航功能交互。
  5. 事件

    • 可以监听和触发浏览器事件,如resizescrollbeforeunload等。
  6. 局限性:BOM的实现依赖于浏览器,不同的浏览器可能有不同的BOM实现。

文档对象模型(DOM)

  1. 定义:DOM是HTML和XML文档的编程接口,提供了一种方式来访问和操作文档的结构、样式和内容。

  2. 主要目的

    • 允许JavaScript操作网页的元素和属性。
    • 允许动态修改网页内容。
  3. 组成

    • document对象:DOM的入口点,代表整个HTML文档。
    • 元素节点(Element Nodes):如divpa等HTML标签。
    • 属性节点(Attribute Nodes):元素的属性,如classid等。
    • 文本节点(Text Nodes):元素内的文本内容。
  4. 功能

    • 访问和修改HTML元素和属性。
    • 动态创建、删除和修改元素和文本。
    • 遍历和搜索元素。
  5. 事件

    • 可以监听和触发DOM事件,如clickmouseoverload等。
  6. 标准性:DOM是W3C的标准,大多数浏览器都遵循这个标准。

  7. 与CSSOM的关系:CSS对象模型(CSSOM)是DOM的一部分,用于操作CSS样式。

  8. 性能考虑:DOM操作可能影响页面性能,特别是在频繁操作时。

Diff算法在虚拟DOM(Virtual DOM)中扮演着核心角色,尤其是在现代前端框架如React中。以下是关于虚拟DOM和Diff算法的一些关键点:

虚拟DOM(Virtual DOM)

  1. 定义:虚拟DOM是一个轻量级的JavaScript对象,它代表了一个真实的DOM树的结构。它是一个JavaScript对象,而不是实际的DOM元素。

  2. 目的

    • 提供一种高效的方式来描述UI界面。
    • 避免直接操作真实的DOM,减少浏览器的重绘和回流。
  3. 工作原理

    • 当状态或属性发生变化时,框架创建一个新的虚拟DOM树。
    • 通过Diff算法比较新旧虚拟DOM树的差异。
    • 根据差异更新真实的DOM树,而不是重新渲染整个界面。
  4. 优势

    • 提高性能:减少DOM操作次数,避免不必要的重绘和回流。
    • 易于维护:开发者可以专注于JavaScript逻辑,而不是DOM操作。

Diff算法

  1. 定义:Diff算法是一种比较两棵树(在这种情况下是两棵虚拟DOM树)差异的算法。

  2. 目的

    • 找出两棵树之间的差异,以便只更新变化的部分。
  3. 工作原理

    • 从虚拟DOM树的根节点开始,递归地比较新旧树的节点。
    • 如果节点相同,继续比较子节点。
    • 如果节点不同,标记为需要更新或删除。
  4. 关键点

    • 同层比较:只比较相同层级的节点,忽略跨层级的变化。
    • 顺序优化:通过优化DOM元素的顺序来减少不必要的操作。
    • 组件化:组件的Diff算法可能包含特定的逻辑,以处理组件的特定行为。
  5. React中的Diff算法

    • React使用启发式的Diff算法,它在大多数情况下表现良好,但在某些极端情况下可能不是最优的。
    • React的Diff算法考虑了多种因素,如DOM类型、key属性等。
  6. 性能考虑

    • 虽然Diff算法可以显著提高性能,但在大型应用中,过度的Diff计算也可能成为性能瓶颈。
  7. 框架:React,Vue和Angular等都有自己的虚拟DOM和Diff算法实现。

作用:

虚拟DOM和Diff算法是现代前端框架提高性能的关键技术。通过使用虚拟DOM,框架可以避免直接操作DOM,减少浏览器的重绘和回流。Diff算法则确保只更新变化的部分,进一步提高了性能。这些技术使得开发者可以更高效地构建复杂的用户界面,同时保持代码的可维护性。

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

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

相关文章

Codeforces Round 955 E. Number of k-good subarrays【分治、记忆化】

E. Number of k-good subarrays 题意 定义 b i t ( x ) bit(x) bit(x) 为 x x x 的二进制表示下 1 1 1 的数量 一个数组的子段被称为 k − g o o d k-good k−good 的当且仅当:对于这个子段内的每个数 x x x,都有 b i t ( x ) ≤ k bit(x) \leq k…

鸿蒙开发管理:【@ohos.account.distributedAccount (分布式帐号管理)】

分布式帐号管理 本模块提供管理分布式帐号的一些基础功能,主要包括查询和更新帐号登录状态。 说明: 本模块首批接口从API version 7开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。开发前请熟悉鸿蒙开发指导文档&#xff…

自动化设备上位机设计 四

目录 一 设计原型 二 后台代码 一 设计原型 二 后台代码 using SimpleTCP; using SqlSugar; using System.Text;namespace 自动化上位机设计 {public partial class Form1 : Form{SqlHelper sqlHelper new SqlHelper();SqlSugarClient dbContent null;bool IsRun false;i…

C# 命名规范

开头bool类型的变量常用缩写 变量命名规范camelCase: 私有字段,局部变量,入参PascalCase: 命名空间、类名,方法名snake_ case、 kebab_case: 不使用 一般方法名称遵守PascalCase命名规范例外情况: 异步方法异步方法例外情况 合理选择单词选择…

【CSS】缩写属性place-items

place-items 是 CSS 中的一个简写属性,它允许在相关的布局(如 Grid 或 Flexbox)中同时沿着块级和内联方向对齐元素。这个属性是 align-items 和 justify-items 属性的简写形式。如果未提供第二个值,则第一个值将作为第二个值的默认…

论文翻译 | (DSP)展示-搜索-预测:为知识密集型自然语言处理组合检索和语言模型

摘要 检索增强式上下文学习已经成为一种强大的方法,利用冻结语言模型 (LM) 和检索模型 (RM) 来解决知识密集型任务。现有工作将这些模型结合在简单的“检索-读取”流程中,其中 RM 检索到的段落被插入到 LM 提示中。 为了充分发挥冻结 LM 和 RM 的…

ARM/Linux嵌入式面经(十一):地平线嵌入式实习

地平线嵌入式实习面经 1.自我介绍 等着,在给大哥们准备了。 2.spi与iic协议可以连接多个设备吗?最多多少个?通讯时序。 这是几个问题,在回答的时候。不要一问就开口,花几秒钟沉吟思考整理一下自己的思路。 这个问题问了几个点?每个点的回答步骤。 是我的话,我会采用以…

# Sharding-JDBC 从入门到精通(9)- 综合案例(二)添加商品

Sharding-JDBC 从入门到精通(9)- 综合案例(二)添加商品 一、Sharding-JDBC 综合案例-添加商品-dao 1、在 shopping 子工程(子模块)中,创建 dao 接口类 ProductDao.java /*** dbsharding\sh…

基于深度学习LightWeight的人体姿态之行为识别系统源码

一. LightWeight概述 light weight openpose是openpose的简化版本,使用了openpose的大体流程。 Light weight openpose和openpose的区别是: a 前者使用的是Mobilenet V1(到conv5_5),后者使用的是Vgg19(前10…

哈希表——C语言

哈希表(Hash Table)是一种高效的数据结构,能够在平均情况下实现常数时间的查找、插入和删除操作。 哈希表的核心是哈希函数,哈希函数是一个将输入数据(通常称为“键”或“key”)转换为固定长度的整数的函数…

Efficient Contrastive Learning for Fast and Accurate Inference on Graphs

发表于:ICML24 推荐指数: #paper/⭐⭐⭐ 创新点一颗星,证明三颗星(证明的不错,值得借鉴,但是思路只能说还行吧) 如图, 本文采取的创新点就是MLP用原始节点,GCN用邻居节点的对比学习.这样,可以加快运算速度 L E C L − 1 ∣ V ∣ ∑ v ∈ V 1 ∣ N ( v ) ∣ ∑ u ∈ N ( v )…

一篇文章Scala语言入门

Scala是一种现代编程语言,它结合了面向对象编程和函数式编程的特性,使得编写简洁、可扩展和高效的代码成为可能。 1. 什么是Scala? Scala(Scalable Language)是一种面向对象和函数式编程语言。它运行在JVM&#xff0…

k8s 部署 springboot 项目内存持续增长问题分析解决

写在前面 工作中遇到,请教公司前辈解决,简单整理记忆博文内容涉及一次 GC 问题的分析以及解决理解不足小伙伴帮忙指正 😃,生活加油 99%的焦虑都来自于虚度时间和没有好好做事,所以唯一的解决办法就是行动起来,认真做完…

语音识别FBank特征提取学习笔记

语音识别就是把一段语音信号转换成对应的文本信息,这一过程包括四个大的模块,分别是:特征提取、声学模型、语言模型、字典与解码。 本篇就来梳理一下特征提取模块的实现思路和方法。 常用的语音特征有: 梅尔频率倒谱系数&#x…

学生管理系统(通过顺序表,获取连续堆区空间实现)

将学生的信息,以顺序表的方式存储(堆区),并且实现封装函数 : 1】顺序表的创建, 2】判满、 3】判空、 4】往顺序表里增加学生信息、 5】遍历学生信息 6】任意位置插入学生信息 7】任意位置删除学生信…

0301STM32GPIO外设输出

STM32GPIO外设输出 STM32内部的GPIO外设GPIO简介基本结构GPIO位结构输入部分:输出部分: GPIO八种工作模式浮空/上拉/下拉输入模拟输入开漏/推挽输出复用开漏/推挽输出 手册寄存器描述GPIO功能描述外设的GPIO配置GPIO寄存器描述端口输入数据寄存器端口输出…

QT入门笔记-自定义控件封装 30

具体代码如下: QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c17# You can make your code fail to compile if it uses deprecated APIs. # In order to do so, uncomment the following line. #DEFINES QT_DISABLE_DEPRECATED_BEFORE0x060000 …

并查集(还有反集也在)

一.定义 定义: 并查集是一种树型的数据结构,用于处理一些不相交集合的合并及查询问题(即所谓的并、查)。比如说,我们可以用并查集来判断一个森林中有几棵树、某个节点是否属于某棵树等。 主要构成: 并查集…

PHP-实例-文件上传

1 需求 2 basename 在 PHP 中,basename() 函数用于返回路径中的文件名部分。如果路径中包含了文件扩展名,则该函数也会返回它。如果路径的结尾有斜杠(/)或反斜杠(\),则 basename() 函数会返回空…

Android计算器界面的设计——表格布局TableLayout实操

目录 任务目标任务分析任务实施 任务目标 使用TextView、Button等实现一个计算器界面,界面如图1所示。 图1 计算器界面效果图 任务分析 界面整体使用表格布局,第一行使用一个TextView控件,横跨4列,中间4行4列,最后一…