理解DOM树的加载过程(js的问题)

简介: 理解DOM树的加载过程(js的问题)

浏览器发起请求过程

浏览器URL  -> DNS域名解析 -> IP所在服务器发起请求

浏览器处理响应过程

html:二进制转为html
 
构建DOM树:
    Html解析: Token -> Node -> DOM
        Token词法解析: 根是document对象 <div></div>
        Node:HTML div Element
        DOM: DOM和标签是一一对应的关系
 
解析过程中:
    link css并行下载
    script 先执行js,完成后继续构建DOM树
        底部引入js 
        头部引入js, 加async,defer
            async: 异步下载js文件,不影响DOM解析,下载完成后尽快执行js
            defer:文档渲染完后,DOMContentLoaded时间调用之前,按照顺序执行js
        windown.onload
 
构建css树:CSS解析器
    每个css文件解析为CSSStyleSheet样式表对象,每个对象都包含CSSRule, CSSRule包含选择器和声明对象
    Token解析->Node->CSSOM
 
构建Render树:渲染树 = DOM树 + CSS树
 
布局layout和绘制paint: 
    计算对象之间的大小,确定每个节点在屏幕上的坐标
    映射浏览器屏幕绘制,使用UI后端层绘制每个节点
 
    reflow 回流:元素属性发生变化且影响布局时(高、宽、内外边距等)
        相当于刷新页面
    repaint 重绘:元素属性发生变化且不影响布局时(颜色、透明度、字体样式等)
        相当于不刷新页面,动态更新内容
    重绘不一定引起回流,回流必将引起重绘
相关文章
|
17天前
|
JavaScript 前端开发 Go
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
|
18天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的DOM节点树。通过循环节点,可以访问并处理每个元素,如提取值。示例代码展示了加载XML字符串到`xmlDoc`后,遍历根元素的所有子节点,打印出节点名及文本值,例如:&quot;title: Everyday Italian&quot;、&quot;author: Giada De Laurentiis&quot;和&quot;year: 2005&quot;。
|
2天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过示例代码展示如何使用DOM解析XML,遍历根元素的所有子节点,打印出节点名称和文本值。实例中,XML包含书籍信息,程序遍历显示了标题、作者和年份。
|
3天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。示例代码展示了一个实例,它加载XML字符串到`xmlDoc`,遍历根元素的所有子节点,打印出节点名及文本值。
|
9天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍如何遍历XML文档的节点树。通过循环移动,提取每个元素的值。示例代码展示了一个实例,它加载XML字符串到`xmlDoc`,然后遍历根元素的所有子节点,打印出节点名称及文本值。输出包括:`title: Everyday Italian`, `author: Giada De Laurentiis`, `year: 2005`。
|
9天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
11 2
|
9天前
|
JavaScript Java
JavaSE精选-JS&DOM
JavaSE精选-JS&DOM
15 1
|
10天前
|
JavaScript Java
JS&DOM技术文章
JS&DOM技术文章
|
10天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
18 1
|
13天前
|
XML JavaScript 前端开发
XML DOM 遍历节点树
```markdown 遍历XML DOM节点树涉及在文档中循环移动。以下示例展示如何遍历并显示所有子节点的名称和值: ``` ```xml &lt;!DOCTYPE html&gt; &lt;output&gt; title: Everyday Italian author: Giada De Laurentiis year: 2005 &lt;/output&gt; ``` ```javascript // 加载XML到xmlDoc // 获取根元素子节点 // 对每个子节点,打印节点名和文本节点值 ```