浏览器原理:7.1DOM树的构建
DOM树的构建
- DOM树是什么
- DOM 树是怎样生成的?
- 当HTML解析器遇见 script标签内嵌JS代码时
- 当HTML解析器遇见外部加载JS代码的script标签时
DOM树是什么
众所周知,现代浏览器采取的是客户端+服务端的形式,客户端向服务端发送请求,服务端响应请求,将请求的内容放在响应主体里面。但浏览器中的网络进程收到从服务端发送过来的数据一般是 HTML 文件字节流,这是无法被浏览器中的渲染引擎直接读取响应的,所以需要对这个HTML文件进行转换,将其转换为渲染引擎能够理解的结构,就比如我们写的高级语言都需要通过编译/解释后才能被CPU来执行。渲染引擎能够理解的这个结构就是DOM树。
在渲染引擎中,DOM的作用
- DOM 是生成页面的基础数据结构
- DOM向JS提供了接口,使JS可以对DOM结构进行访问,从而动态改变DOM
- DOM是一道安全防护,一些不安全的内容在 DOM 解析阶段就被拒绝了
DOM 树是怎样生成的?
在渲染引擎内部,存在一个 HTLM 解析器(html parser)的模块,专门负责将HTML字节流转换为DOM结构,但注意,HTML解析器采取的是边加载数据边解析的方式。解析详细流程如下
- 网络进程在接收到响应头后,根据响应头的 content-type 字段判断文件类型,若是 text/html,浏览器会判断这是一个 html 类型的文件
- 浏览器接着就会为该文件准备一个渲染进程,可能是选择已有的,也可能是fork一个新的
- 渲染进程准备好之后,网络进程和渲染进程之间就会建立起一个共享数据的管道,用来传输HTML字节流,同时渲染进程也会边接受,边加载。
关于HTML字节流如何转换成DOM树,则涉及到编译原理的内容。
当HTML解析器遇见 script标签内嵌JS代码时
因为 HTML 有 script标签,且script标签几乎可以插在任何地方,当HTML解析器遇到script标签时,它会暂停自己的工作,将控制权交给JS引擎,并执行script标签中的JS代码,当JS代码执行完成后,控制权交还给HTML解析器,继续解析,直至生成最终的DOM树
当HTML解析器遇见外部加载JS代码的script标签时
当 HTML 解析器执行到script标签时,还是会暂停自己的工作,但是这里因为没有JS代码,所以无法执行,需要先去下载该代码,下载完成后再来执行JS代码,后面的流程就跟上面基本一样了。但是浏览器这样的抉择无疑会带来性能问题,即JS代码的下载,阻塞了DOM树的解析,阻塞了页面的生成。所以现代浏览器对于这一块做了大量的优化,Chrome采取的最主要的优化就是预解析操作。
- 当渲染引擎接受到字节流之后,会开启一个预解析线程,用来分析HTML文件中的JS文件、CSS等相关文件
- 解析到这些文件之后,该线程会提前下载这些文件,这样就能够缩减DOM解析的时间
同样,开发者也可以采取设置异步加载JS的方式来优化,通过 async 或者 defer 来设置,二者的区别在于
- async 标志的脚本文件一旦加载完成就会立刻执行
- defer 标记的需要在 DOMCotentLoaded 事件之前执行
浏览器原理:7.1DOM树的构建相关推荐
- knn之KD树深度构建原理
K临近算法之KD树构造 在使用k近邻法进行分类时,对新的实例,根据其k个最近邻的训练实例的类别,通过多数表决的方式进行预测.由于k近邻模型的特征空间一般是n维实数向量,所以距离的计算通常采用的是欧式距 ...
- 写了这么久前端,你知道浏览器原理吗?
最近发现了一篇不错的文章,分享给大家,对于写了很久前端代码但不了解浏览器原理的朋友应该有很大帮助. 这是一篇全面介绍 Webkit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量 ...
- 深入理解浏览器原理和架构|硬核
本文用47张图带你了解「浏览器的发展史」.「浏览器的架构」.「浏览器的基本原理」以及 「浏览器的其它小知识」 ???? 正文开始 浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示HTML文档. ...
- 前端面试题之浏览器原理篇
前端面试题之浏览器原理篇 一.浏览器安全 1. 什么是 XSS 攻击? (1)概念 (2)攻击类型 2. 如何防御 XSS 攻击? 3. 什么是 CSRF 攻击? (1)概念 (2)攻击类型 4. 如 ...
- 前端面试 浏览器原理
一.浏览器安全 1. 什么是 XSS 攻击? (1)概念 XSS 攻击指的是跨站脚本攻击,是一种代码注入攻击.攻击者通过在网站注入恶意脚本,使之在用户的浏览器上运行,从而盗取用户的信息如 cooki ...
- 前端面试-浏览器原理
一.浏览器 什么是URL 组成部分: protocol:协议,表明浏览器必须使用何种协议 domain:域名,表示正在请求哪个服务器 port:端口 path:网络服务器上资源的路径 paramete ...
- 浏览器原理及HTTP网络协议基础简答题
## 浏览器原理 **有兴趣读一下** 常⻅的浏览器内核有哪些? Trident (IE内核) Gecko(firefox) webkit(Safari) Chromium/Bink(chrome) ...
- 2020最全前端面试系列(浏览器原理)(最容易忽视的面试隐藏大杀器)
2020前端面试系列(浏览器原理) 浏览器输入URL到返回页面的全过程 浏览器渲染步骤 重排和重绘 触发reflow情形 减少reflow方法 浏览器本地存储方案的比较 cookie localSto ...
- 【浏览器】浏览器原理及常见考点
浏览器原理及常见考点 一.浏览器安全 1.XSS(跨站脚本)攻击 2.CSRF攻击 3.中间人攻击 4.哪些操作会引起浏览器安全问题??? 5.网络劫持有哪几种?如何防范? 二. 进程与线程 1.进程 ...
最新文章
- 杜鹃演绎奢华春装大片
- oracle votedisk ocr,Oracle RAC 重建OCR和Votedisk
- 百度地图SDK使用注意其代理的处理
- vue-cli学习入门_byKL
- jquery粘贴按钮_实现前端点击按钮自动复制剪贴板功能
- 推荐一款颜值逆天且功能齐全的开源Shell工具
- 纯真ip数据库 linux,Python读取纯真IP数据库
- SPSS Modeler18.0数据挖掘软件教程(六):聚类分析-K-means
- LaTeX公式编辑器数学、化学、物理公式编辑器
- 基于matlab的科学计算器设计,MATLAB科学计算器设计
- 开启霍比特人之意外内核优化旅行 -- 专栏序言
- nrf51822 按键蓝牙通知 例程 加入 串口 打印 log
- wait-ify工作原理(学习笔记)
- 键盘输入突然混乱,敲击字母或空格,变为打开菜单栏的项目
- 苹果犯了“围师必阙”大忌
- Navicat Premium 12安装激活教程_不需要激活工具直接激活
- 简体中文设置<html lang=“zh-cmn-Hans“> //简体中文
- ps ps aux 和ps -aux和 ps -ef的选择
- 2021年中国潮流玩具市场现状分析,乘Z世代人群消费东风产业快速扩张「图」
- CorelDRAW 批量导出jpg文件的方法
热门文章
- 铁乐学python-shelve模块详解
- Unity骚操作:更改u3d导出apk时候所使用的 gradle、GradleTemplates、VisualStudioGradleTemplates、minifyEnabled是否开启混淆等
- 培训出身的程序员如何实现转行成功?
- 用C语言模拟实现字符函数与字符串函数
- unreal-教程-第十七章:上半身动画和下半身动画的混合
- NPDP(New Product Development Professional)
- 正整数如何分解质因数(C++)
- 最新的linux学习路线图
- nginx 多配置(.conf)的使用
- PDMReader 数据字典快速浏览工具