解析过程中：

1遇到link的外部css,遇到css的代码会进行css的加载，并行。

2遇到script标签的时候，会先去执行js的内容，直至脚本完成执行，然后继续构建DOM。

底部引用JavaScript代码的原因，或者说可以再头部引用，但是前提是加上async,defer,或者window.onload;

解析器遇到设置了async（异步）属性的script 开始下载脚本并继续解析文档，脚本会在她下载完成后尽快执行。而defer同样是异步但是她会再文档渲染完毕后，DOMcontentLoaded事件调用前执行，脚本会被延迟到整个页面都解析完毕后再运行。

async和defer都是异步的，并不影响我们整个DOM树的构建。

css有自己的解析器，每个css文件解析为样式表对象CSSStyleSheet。生成css树

构建渲染树：DOM树+CSS树

布局layout与绘制paint:计算对象之间的大小，距离确定每个节点再屏幕上的确切坐标，映射浏览器屏幕绘制。使用UI后端层绘制每个节点。

reflow(回流)：回流一定会重绘。相当于刷新页面

repaint(重绘)：不一定引起回流。局部改变背景色 字体颜色这些。

CSSOM树

DOM树加载的过程：
1 url，DNS域名解析，找到IP，向服务器发起请求
2 在服务器返回数据，浏览器接收文件（html、css、js...），二进制文件
  html：二进制转换为html
  构建DOM树，HTML解析器
       Tocken->Node->DOM

       Tocken词法解析，根是“document”对象
       Node：HTMLDivElement
       DOM：DOM和标签基本是一一对应的关系
   解析过程：
       1 遇到link的外部css，遇到css的代码会进行css的加载，并行
       2 遇到script标签，会先去执行js的内容，直至脚本完成执行，然后继续构建DOM；
         底部引入js的原因，或者在头部引用，需加上async、defer，或者window.onload：
         解析器遇到设置了async的script时，开始下载脚本并继续解析文档，脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载
         如果script标签设置了该属性，则浏览器会在异步的下载该文件并且不会影响后续DOM的渲染；
        如果有多个设置了defer的script标签存在，则会按照书讯执行所有的script
        defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行；脚本会被延迟到整个页面解析完毕后在运行
3 构建CSS树：CSS解析器
        每个css文件解析为样式表对象cssstylesheet，每个对象都包含CSSRule；CSSRule包含选择器和声明对象，已经其他与CSS语法对应的对象
        Tocken解析：css语法及语法文法
        Node->CSSOM

4 构建render树，渲染树=DOM树+css树
5 布局layout与绘制paint：计算对象之间的大小，距离确定每个节点在屏幕上的确切坐标，映射浏览器屏幕的绘制；使用UI后端层绘制每个节点
  reflow（回流）：当元素属性发生变化且影响布局时（宽度、高度、内外边距等），产生回流，相当于刷新页面
  repaint（重绘）：当元素属性发生改变且不影响布局时（背景颜色、透明度、字体样式等），产生重绘不一定引起回流，回流必将引起重绘

1.在浏览器中输入ur1,交给DNs域名解析,找到P,向服务器发起请求;(里面还有缓存ht协议,TcP,

2.服务器返回数据,浏览器接收文件(htm1, css,Js,ing..),二进制文件

htm1:二进制转换为htm1

构建Dom树:HTML解析器

Token ->Node->DOM

Token词法解析,根是“ document”对象

Node: HTMLDivElement

DoM:DoM和标签基本是一一对应的关系div

解析过程中:

1.遇到1ink的外部css,遇到css的代码会进行css加载,并行

2遇见 script标签的时候,会先去执行js的内容,直至脚本完成执行,然后继续构建DoM;

底部引入 javascript代码的原因。或者说可以在头部引用,但是前提是加上 async、 defer,或

window. onload;

解析器遇到设置了 async属性的 script时,开始下载脚本并继续解析文档。脚本会在它下载完成后尽

快执行,但是解析器不会停下来等它下载

如果 script标签设置了该属性,则浏览器会异步的下载该文件并且不会影响到后续Do网的渲染

如果有多个设置了 defer的 script标签存在,则会按照顺序执行所有的 script

defer脚本会在文档渲染完毕后, DOMContentloaded事件调用前执行;脚本会被延迟到整个页面都解析完毕后再运行

构建css树:CSs解析器 index.css

每个Css文件解析为样式表对象 CSSStyleSheet,每个对象都包含 CSSRule; CSSRule包含选择器和声明对象,以及其他与CSS语法对应的对象

Token解析:css的词法及语法文法

Node->CSSOM

构建 render:渲染树=DOM树+css树

布局layout与绘制 paint:计算对象之间的大小,距离确定每个节点在屏幕上的确切坐标:映射浏览器屏幕绘制;使用UI后端层绘制每个节点

reflow(回流):当元素属性发生改变且影响布局时(宽度、高度、内外边距等),产生回流,相当于

刷新贞面

repaint(重绘);当元素属性发生改变且不影响布局时(背景颜色、透明度、字体样式等),产生重

绘,相当于不刷新页面,动态更新内容

重绘不一定引起回流,回流必将引起重绘

DOM树加载

1. 在浏览器中输入url，交给DNS域名解析，找到IP，向服务器发起请求；

2. 构建DOM树和css树

3. 构建render树

重绘/回流

1. <script>可以在头部引用，但是前提是加上async、defer、window.onload
   

2. async和defer都是异步执行，不影响dom树的构建，async谁先加载完谁先执行，defer先加载先执行

3. 回流reflow：当元素属性发生改变且影响布局（宽、高、内外边距），产生回流，相当于刷新页面

4. 重绘repaint：当元素属性发生改变且不影响布局时（背景颜色，透明度，字体样式），产生重绘，相当于不刷新页面，动态更新内容。

5. 重绘不一定引起回流 回流必将引起重绘
   

深入理解DOM数加载过程

    1.在浏览器中输入url，交给DNS域名解析，找到IP，向服务器发起请求；(里面还有缓存，http协议，TCP...)

    2. 服务器返回数据，浏览器接收文件(html,css,js,img...)，二进制文件

            html:二进制转换为html

             构建DOM树：HTML解析器

                            Token->Node->DOM

                            Token词法解析，根是"document"对象

                             Node:HTMLDivElement

                             DOM:DOM和标签基本是一一对应的关系div

                解析过程中：

                            1.遇到link的外部css，遇到css的代码会进行css加载，并行解析

                            2.遇到script标签的时候，会先去执行js的内容，直至脚本完成执行，然后继续构建DOM；

                             底部引入Javascript代码的原因。或者说可以在头部引用，但是前提是加上async、defer,或window.onload:

                                解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载

                                如果script标签设置了该属性，则浏览器会异步下载该文件并且不会影响后续DOM的渲染；

                                如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script；

                                 defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行；脚本会被延迟到整个页面都解析完毕后再运行

                    构建css树：css解析器

                                        每个css文件解析为样式表对象scctyleSheet,每个对象都包含cssRule,cssRule包含选择器和声明对象，以及其他与css语法对应的对象。

                                        Token解析:css的词法及语法文法

                                         Node->CSSOM

                    构建render树：渲染树=DOM树+css树

                    布局layout与绘制paint:计算对象之间的大小，距离确定每个节点在屏幕上的确切坐标；映射浏览器屏幕绘制；使用UI后端层绘制每个节点

        reflow(回流)：当元素属性发生改变且影响布局时(宽度、高度、内外边距等)，产生回流，相当于刷新页面

        repaint(重绘)：当元素属性发生改变且不影响布局时(背景颜色，透明度，字体样式等)，产生重绘，相当于不刷新页面，动态更新内容。

HTML解析器和CSS解析器并行