关于dom树

Posted 2021-03-23 pengdt

当用户访问ip地址，比如 ==www. aa .com/bb/cc/dd.html==

正常情况下是访问一个叫aa.com的服务器里的bb文件夹里的cc文件夹里的dd.html这个文件（其实很多情况都是假的地址，做了服务器代理，前端路由等安全处理，就先这么理解吧！）

然后服务器读取本地的dd.html这个文件，通过网线传给用户的浏览器，浏览器通过自带的解析方式把dd.html解析
从上到下是html标签，title标签，meta标签，还有link,body,div等等，在解析到src和href时，会再去对应的ip地址请求到数据，一个网页的全部数据可以在F12里查看，如下图所示

一个Frames就是一个网页的意思，有时候一个页面里有很多个Frames，因为html有个标签叫<iframe>可以引入网页，这个标签不熟，没怎么用，在Frames里的Fonts是指文字样式文件，scripts是js文件，stylesheets是css文件，还会有image图片文件

解析文件的全过程

• 解析 HTML，构建 DOM Tree
• Bytes => characters => tokens => nodes => DOM
• 下载 CSS，解析 CSS，生成 CSS Tree
• Bytes => characters => tokens => nodes => CSSOM
• 合并 DOM Tree 和 CSS Tree，生成 Render Tree
• Render Tree 和 DOM Tree 相对应的，但不是严格意义上的一一对应，不可见的 DOM 元素不会插入到 Render Tree 中 display: none 等
• 对 Render Tree 的计算通常只需要遍历一次就可以完成，但 table 及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间
• CSS 下载时异步，不会阻塞浏览器构建 DOM Tree，但是会阻塞 Render Tree 渲染，
• 位于css加载语句前的那个js代码先执行了，但是位于css加载语句后面的代码迟迟没有执行， 直到css加载完成后，它才执行，css加载会阻塞后面的js语句的执行
• 当遇到 JS 时，Render Tree渲染过程会被吊起，因为他怕JS运行过程中修改DOM或者CSS，就白渲染了，所以等待 JS 执行完毕，这就是js加载会拦截DOM渲染，这也是为什么script标签需要被放在html的最下面的原因

下面就是Render Tree的理解模型

var html = {
  style:"", //样式
  attr:"",  //属性
  event:"", //方法
  child:[
    head:{
       ...
    },  
    body:{
       ... 
    }
  ]
}

初绘，重排，重绘

先解析后再根据样式，什么颜色，什么大小，什么位置画上浏览器被用户看到，这个绘制的过程叫做初绘

后续的页面会通过用户的使用而发生改变，比如按钮被点击后变色，比如添加一个输入框，删除一个输入框

元素的改变会引起三种变化，

1. 重绘（无关本身大小的变化，如颜色）
2. 重排（本身大小的变化，甚至会引起整个页面一起变化）
3. 回流（就是重绘 + 重排）

重排对浏览器的计算是非常大的，整个循环无异于再做一个初绘，所以减少页面的重排是非常有力的优化

1. 能通过改变一次的样式别改两次
2. 别把整个删了再重新添加上去
3. 通过fragment把多个元素一起添加上去
4. ....

上面的优化都是js方面的，学完js就能理解
有些极端的优化还讲究css的写法优先顺序，比如一个div先写width，再写定位是错的，因为浏览器先把div的宽度画出来后发现这个div是定位的，定位的默认宽度是0，于是浏览器把刚画的width擦掉了，等定位画完又去找到这个width，重新画了一次宽度，所以极端主义设计了css的书写规则

1. 先写定位/浮动/display，
2. 然后位置top，left，
3. 然后宽高，
4. 然后是内外边距/行高，
5. 最后是字体，颜色