首页 > 其他分享 >浏览器文档对象模型是如何生成的

浏览器文档对象模型是如何生成的

时间:2024-01-01 22:32:02浏览次数:30  
标签:解析器 浏览器 字节 DOM 模型 Token HTML 文档 节点

从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的,所以要将其转化为渲染引擎能够理解的内部结构,这个结构就是 DOM。DOM 提供了对 HTML 文档结构化的表述。在渲染引擎中,DOM 有三个层面的作用。

  • 从页面的视角来看,DOM 是生成页面的基础数据结构。
  • 从 JavaScript 脚本视角来看,DOM 提供给 JavaScript 脚本操作的接口,通过这套接口,JavaScript 可以对 DOM 结构进行访问,从而改变文档的结构、样式和内容。
  • 从安全视角来看,DOM 是一道安全防护线,一些不安全的内容在 DOM 解析阶段就被拒之门外了。

简言之,DOM 是表述 HTML 的内部数据结构,它会将 Web 页面和 JavaScript 脚本连接起来,并过滤一些不安全的内容。

在渲染引擎内部,有一个叫 HTML 解析器(HTMLParser)的模块,它的职责就是负责将 HTML 字节流转换为 DOM 结构。

HTML 解析器并不是等整个文档加载完成之后再解析的,而是网络进程加载了多少数据,HTML 解析器便解析多少数据。

网络进程接收到响应头之后,会根据响应头中的 content-type 字段来判断文件的类型,比如 content-type 的值是“text/html”,那么浏览器就会判断这是一个 HTML 类型的文件,然后为该请求选择或者创建一个渲染进程。渲染进程准备好之后,网络进程和渲染进程之间会建立一个共享数据的管道,网络进程接收到数据后就往这个管道里面放,而渲染进程则从管道的另外一端不断地读取数据,并同时将读取的数据“喂”给 HTML 解析器。你可以把这个管道想象成一个“水管”,网络进程接收到的字节流像水一样倒进这个“水管”,而“水管”的另外一端是渲染进程的 HTML 解析器,它会动态接收字节流,并将其解析为 DOM。

字节流转换为 DOM

浏览器文档对象模型是如何生成的_文档对象模型

从图中你可以看出,字节流转换为 DOM 需要三个阶段。

第一个阶段,通过分词器将字节流转换为 Token。

V8 编译 JavaScript 过程中的第一步是做词法分析,将 JavaScript 先分解为一个个 Token。解析 HTML 也是一样的,需要通过分词器先将字节流转换为一个个 Token,分为 Tag Token 和文本 Token。

至于后续的第二个和第三个阶段是同步进行的,需要将 Token 解析为 DOM 节点,并将 DOM 节点添加到 DOM 树中。

HTML 解析器维护了一个 Token 栈结构,该 Token 栈主要用来计算节点之间的父子关系,在第一个阶段中生成的 Token 会被按照顺序压到这个栈中。具体的处理规则如下所示:

  • 如果压入到栈中的是 StartTag Token,HTML 解析器会为该 Token 创建一个 DOM 节点,然后将该节点加入到 DOM 树中,它的父节点就是栈中相邻的那个元素生成的节点。
  • 如果分词器解析出来是文本 Token,那么会生成一个文本节点,然后将该节点加入到 DOM 树中,文本 Token 是不需要压入到栈中,它的父节点就是当前栈顶 Token 所对应的 DOM 节点。
  • 如果分词器解析出来的是 EndTag 标签,比如是 EndTag div,HTML 解析器会查看 Token 栈顶的元素是否是 StarTag div,如果是,就将 StartTag  div 从栈中弹出,表示该 div 元素解析完成。

通过分词器产生的新 Token 就这样不停地压栈和出栈,整个解析过程就这样一直持续下去,直到分词器将所有字节流分词完成。

标签:解析器,浏览器,字节,DOM,模型,Token,HTML,文档,节点
From: https://blog.51cto.com/key3feng/9058603

相关文章

  • Apple Safari 16.5 发布- macOS 专属浏览器 (独立安装包下载)
    AppleSafari16.5-macOS专属浏览器(独立安装包下载)Safari浏览器16formacOSMontery,BigSur作者主页:sysin.org之前Safari浏览器伴随macOS更新一起发布,需要系统更新才能体验到新版,现在库克终于带来了独立安装包,无需更新系统也可感受最新的卓越Web体验。当今世界是......
  • Java基础-JavaDoc生成文档
    JavaDocjavadoc命令是用来生成自己API文档的 参数信息@author作者名@version版本号@since指明需要最早使用的jdk版本@param参数名@return返回值情况@throws异常抛出情况 packagecom.wang.base;​/***@outhorWang*@version1.0*......
  • 安卓期末大作业Android studio-记单词app(资源链接在文末,含注册登录,含设计报告,含导出ap
    安卓期末大作业Androidstudio-记单词app(注册登录、增删改查)1、注册登录界面2.用户点击加号按钮输入单词,键盘会自动弹出并焦点在输入框,用户输入英文和中文释义,单词本上将在最上面显示这个单词,并会有下拉动画。用户可以通过上方放回箭头取消输入。2.用户可以通过单词盘边的按钮来关......
  • 10.基于模型的测试方法 Model-based Testing
    Model-basedTesting介绍 Model-basedTestingisanapplicationofmodel-baseddesignfordesigningandoptionallyalsoexecutingartifactstoperformsoftwaretestingorsystemtesting.Modelscanbeusedtorepresentthedesiredbehaviorofasystemu......
  • 定时小助手帮助文档
         定时小助手融入极简思维,融入了自动化和人工智能等技术,基于“六大定时周期”、“四种定时任务模式”、“两种执行模式”及“个性化自定义”专为教师教育教学而设计的(详情请下载程序,然后从“分享工具”栏目进入,仔细参看功能特性栏目),里面还内置了几百款极简教育工具。......
  • 文档编写10要素
    1、明确文档目的在开始编写文档之前,确保清楚了解文档的目的和受众,以便能够更好地针对他们的需求和期望进行编写。2、计划和组织在开始编写文档之前,进行计划和组织,列出要讨论的主题和子主题,并确定适当的文档结构。这可以帮助更好地组织思路,并确保文档具有清晰的逻辑和易于理解。......
  • tdsql(pg版本)安装文档
    tdsql(pg版本)安装文档一、安装的前置条件:1、需要在开通oss机器的80和8080端口;2、准备NAS,大小为2T.二、安装前检查:1、部署DN节点的服务器数据盘必须是SSD,不能用HDD:通过cat/sys/block/sda/queue/rotational进行查看,返回值0即为SSD;返回1即为HDD。lsblk-d-oname,rota2、如果使......
  • 模型初始化和激活函数
    简介在深度学习中,由于层的叠加会出现梯度爆炸和梯度消失两种情况,需要我们去解决合理的权重初始化和激活函数......
  • Keras的 Transfer Learning:预训练模型的使用和优化
    1.背景介绍深度学习已经成为处理复杂数据和模式的首选方法。随着数据规模的增加,深度学习模型也在不断增长。然而,这些模型需要大量的数据和计算资源来训练,这可能是一个挑战。在这种情况下,TransferLearning(传输学习)成为了一种有效的解决方案。TransferLearning是一种机器学习方法,......
  • Apache Calcite 的文档与教程:学习资源汇总
    1.背景介绍ApacheCalcite是一个高性能的SQL引擎,它可以处理大规模的数据集,并提供一个灵活的查询语言。Calcite的设计目标是提供一个通用的查询引擎,可以用于各种数据源,如关系数据库、NoSQL数据库、流式数据、图数据库等。Calcite的核心组件是一个基于Java的查询引擎,它可以与......