当前位置: 首页 > news >正文

对 Dom 树的理解

什么是 DOM

从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的,所以要将其转化为渲染引擎能够理解的内部结构,这个结构就是 DOM。

DOM 提供了对 HTML 文档结构化的表述。

在渲染引擎中,DOM 有三个层面的作用:

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

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

DOM树如何生成

HTML 解析器(HTMLParser): 负责将 HTML 字节流转换为 DOM 结构。

那么网络进程是如何将数据传给HTML解析器的呢?

 

从图中我们可以知道,网络进程和渲染进程之间有一个共享数据通道,网络进程加载了多少数据, 就将数据传给HTML解析器进行解析。

HTML解析器接收到数据(字节流)之后,字节流将转化成DOM,过程如下:

 

有三个阶段:

1、通过分词器将字节流转化为Token。 分词器先将字节流转换为一个个 Token,分为 Tag Token 和文本 Token。

注意,这里的Token并不是我们之前理解的Token,这里就是一个片段。

2、Token解析为DOM节点。

3、将 DOM节点添加到DOM树中。

JavaScript影响DOM的生成

JavaScript可以修改DOM,它也会影响DOM的生成。

1、内嵌 JavaScript 脚本 比如我们嵌入了一段<script>标签的代码,之前的解析过程都一样,但是解析到script标签时, 渲染引擎判断这是一段脚本,此时 HTML 解析器就会暂停 DOM 的解析, 因为接下来的 JavaScript 可能要修改当前已经生成的 DOM 结构。

暂停解析之后,JavaScript 引擎介入,并执行<script>标签中的这段脚本。 脚本执行完成之后,HTML 解析器恢复解析过程,继续解析后续的内容,直至生成最终的 DOM。

2、引入 JavaScript 文件 基本上跟之前是一致的,不同点在于,暂停解析之后执行JavaScript 代码,需要先下载这段 JavaScript 代码

相关文章:

对 Dom 树的理解

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

电商搜索入门

一、搜索用途通常一个电商平台里面的商品&#xff0c;少则几十万多则上千万甚至上亿的sku&#xff0c;在这么多的商品中&#xff0c;如何让用户可以快速查找到自己想要的商品&#xff0c;那么就需要用到搜索功能来实现。通过分析数据发现&#xff0c;接近40%的点击率是直接通过…...

4.3.1初阶数据结构(C语言)(无头不循环单链表)

1.完整的单链表注释&#xff1a; #pragma once #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> #include<stdlib.h>typedef int SLTDateType; // 重定义数据类型typedef struct SListNode // 定义结构体类型的节点 {SLTDateType data;str…...

一文深度解读音视频行业技术发展历程

从1948年的香农定律&#xff0c;到音视频的今天。IMMENSE、36氪&#xff5c;作者 北京时间2月28日凌晨&#xff0c;FIFA年度颁奖典礼在巴黎举行。梅西荣膺年度最佳球员&#xff0c;斯卡洛尼当选年度最佳男足主帅&#xff0c;马丁内斯荣获年度最佳男足门将&#xff01;阿根廷因…...

面向对象拓展贴

1. 类和对象的内存分配机制 1.1 分配机制  Java 内存的结构分析 栈&#xff1a; 一般存放基本数据类型(局部变量)堆&#xff1a; 存放对象(Cat cat , 数组等)方法区&#xff1a;常量池(常量&#xff0c;比如字符串)&#xff0c; 类加载信息示意图 [Cat (name, age, price)]…...

Android仿QQ未读消息拖拽粘性效果

效果图原理分析首先是在指定某个位置画一个圆出来&#xff0c;手指按到这个圆的时候再绘制一个可以根据手指位置移动的圆&#xff0c;随着手指的移动两个圆逐渐分离&#xff0c;分离的过程中两圆中间出现连接带&#xff0c;随着两圆圆心距的增大&#xff0c;半径也是根据某一比…...

Linux 打包压缩解压指令 gzip bzip2 tar

总结自鸟哥Linux私房菜 Linux压缩文件的扩展名大多是&#xff1a;“.tar, .tar.gz, .tgz, .gz, .Z, .bz2, *.xz”&#xff0c; 不同压缩文件使用了不同的算法&#xff0c;不能通用压缩或解压 常见扩展名&#xff1a; *.Z compress 程序压缩的文件&#xff1b; *.zip zip 程序…...

系统升级丨分享返佣,助力商企实现低成本高转化营销

秉承助力传统经济数字化转型的长远理念 酷雷曼VR再次在VR全景营销中发力 创新研发“分享返佣”功能 进一步拓宽商企VR全景营销渠道 助力商企搭建低成本、高传播、高转化 的VR营销体系 01、什么是“分享返佣”&#xff1f; ●“分享返佣”即“推广”返佣&#xff0c;是酷…...

机试代码模板

文章目录进制转换高精度加/乘法搜索BFSDFS树二叉树遍历图Dijkstra算法Kruskal算法动态规划最长公共子序列(LCS)最长上升子序列(LIS)KMP算法进制转换 #include <iostream> #include <string> #include <cmath> #include <iomanip> #include <algori…...

Java性能优化-垃圾回收算法-理解CMS回收器

垃圾回收算法 理解 CMS回收器 三个基本操作 1.回收新生代&#xff08;同时暂停所有的应用线程&#xff09; 2.运行并发周期来清理老年代数据 3.如果有必要则FULL GC压缩老年代 当发生新生代回收 &#xff0c; 如果老年代没有足够的空间容纳晋升的对象则执行FULL GC,所有线程停…...

Oracle11G的表空间数据文件大小限制问题处理

1.表空间数据文件容量 oracle11g的表空间数据文件容量与DB_BLOCK_SIZE有关&#xff0c;在初始建库时&#xff0c;DB_BLOCK_SIZE要根据实际需要&#xff0c;设置为 4K,8K、16K、32K、64K等几种大小&#xff0c;ORACLE的物理文件最大只允许4194304个数据块&#xff08;由操作系统…...

计算机三级|网络技术|备考指南|网络系统结构与设计的基本原则|1

一、网络系统结构与设计的基本原则宽带城域网的关键技术p1 p2 p3设计一个宽带城域网涉及“三个平台一个出口”&#xff0c;即网络平台、业务平台、管理平台和城市宽带出口。宽带城域网&#xff1a;宽带城域网划分为三个层次&#xff1a;核心层、汇聚层、接入层。核心层承担高速…...

基于 TI Sitara系列 AM64x核心板——程序自启动说明

前 言 本文主要介绍AM64x的Cortex-A53、Cortex-M4F和Cortex-R5F核心程序自启动使用说明。默认使用AM6442进行测试演示,AM6412测试步骤与之类似。 本说明文档适用开发环境如下: Windows开发环境:Windows 7 64bit、Windows 10 64bit 虚拟机:VMware15.5.5 Linux开发环境:Ubun…...

自学5个月Java找到了9K的工作,我的方式值得大家借鉴 第一部分

我是去年9月22日才正式学习Java的&#xff0c;因为在国营单位工作了4年&#xff0c;在天津一个月工资只有5000块&#xff0c;而且看不到任何晋升的希望&#xff0c;如果想要往上走&#xff0c;那背后就一定要有关系才行。而且国营单位的气氛是你干的多了&#xff0c;领导觉得你…...

微电影广告的内容突破方案

微电影作为新媒体时代背景的产物&#xff0c;深受大众的欢迎&#xff0c;同时&#xff0c;微电影广告在微电影模式环境下应运而生&#xff0c;以自己独特的传播优势&#xff0c;俘获了大量企业主的青睐&#xff0c;也获得了广大青年群体的喜爱。微电影广告欲确保可持续发展&…...

茌平区为什么越来越多的企业由请高新技术企业?山东同邦科技分享

茌平区为什么越来越多的企业由请高新技术企业?山东同邦科技分享 近年来&#xff0c;越来越多的企业开始申报高新技术企业&#xff0c;认定为国家高新技术企业能获得非常多的好处&#xff0c;那么具体都有哪些呢? 一、国际高新技术企业认定的好处: 1、财政补贴: 获得高新企业…...

谷歌优化排名怎么做出来的?谷歌排名多久做上去?

本文主要分享谷歌排名的算法机制&#xff0c;让你很容易地用更短的时间把Google的自然排名做到首页。 本文由光算创作&#xff0c;有可能会被剽窃和修改&#xff0c;我们佛系对待这种行为吧。 谷歌优化排名怎么做出来的&#xff1f; 答案是&#xff1a;持续更新原创优质内容…...

字节跳动青训营--Webpack

文章目录前言一、为什么要学习Webpack&#xff1f;二、什么是Webpack&#xff1f;1. 产生背景2. 基础概念三、使用Webpack1. 安装2. 编辑配置文件3. 执行编译命令核心流程四、如何使用Webpack流程类配置配置总览五、理解Loader六、理解插件插件钩子课外关注资料前言 此文章仅用…...

微信多媒体文件speex格式转为mp3文件格式

1、安装speex环境 wget https://ftp.osuosl.org/pub/xiph/releases/speex/speex-1.2.0.tar.gz tar -zxvf speex-1.2.0.tar.gz -C /usr/local/ cd /usr/local/speex-1.2.0/ ./configure make make install 2、配置path到/usr/lib 因为安装的speex生成的可执行文件默认在/usr…...

IAP初探

IAP(In-Application Programming)在应用编程&#xff0c;浅显易懂&#xff0c;按照字面意思即是在程序不关闭情况下&#xff0c;对应用进行再次写入程序&#xff0c;对程序的写入需要传输数据&#xff0c;而传输数据的前提是通信&#xff0c; IAP对代码进行更新可以简要分为以…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

基于江科大stm32屏幕驱动,实现OLED多级菜单(动画效果),结构体链表实现(独创源码)

引言 在嵌入式系统中&#xff0c;用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例&#xff0c;介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单&#xff0c;执行相应操作&#xff0c;并提供平滑的滚动动画效果。 本文设计了一个…...

CTF show 数学不及格

拿到题目先查一下壳&#xff0c;看一下信息 发现是一个ELF文件&#xff0c;64位的 ​ 用IDA Pro 64 打开这个文件 ​ 然后点击F5进行伪代码转换 可以看到有五个if判断&#xff0c;第一个argc ! 5这个判断并没有起太大作用&#xff0c;主要是下面四个if判断 ​ 根据题目…...