【winter重学前端笔记13】浏览器：一个浏览器是如何工做的？CSS计算

加载css

• 加载是异步，不会影响DOM树的构建，只是说在CSS没处理好以前，构建好的DOM并不会显示出来

  • 启发：因此CSS不能太大，页面一打开将会停留较长时间的白屏，因此把图片/字体等转成base64放到CSS里面是一种不太推荐的作法

• DOM去匹配css rule的时候必须先等页面的css都下载完成

  • 启发：head中的css是要下载完的，body中放CSS的话，会从新计算

css语法：选择器

• 在9课程中能够了解更多选择器：compound-selector
• 特色(css设计原则)：选择器的出现顺序，一定跟构建 DOM 树的顺序一致，即：保证选择器在 DOM 树构建到当前节点时，已经能够准确判断是否匹配，不须要后续节点信息 - 将来不可能会出现“父元素选择器”这种东西

• 流式渲染，每生成一个dom节点，便马上去匹配相应的css规则

  • 空格: 后代，选中它的子节点和全部子节点的后代节点

  • : 子代，选中它的子节点

  • +：直接后继选择器，选中它的下一个相邻节点
  • ~：后继，选中它以后全部的相邻节点
  • ||：列，选中表格中的一列
• winter不讲怎么解析css规则啦，词法分析和语法分析不作赘述

cssom

• CSSOM主要是DOM结构上的盒的描述，它基本上是依附于DOM树的，不要和css的语法树混淆
• cssom是有rule部分和view部分的，rule部分是在dom开始以前就构件完成的，而view部分是跟着dom同步构建的。

css选择器匹配流程

前进：一个 CSS 选择器按照 compound-selector来拆成数段，每当知足一段条件的时候，就前进一段。

后退：选择器的做用范围，匹配到本标签的结束标签时（做用范围边缘）回退。

• 后代选择器 “空格”
  规则：

  • 前进：找到了匹配 a#b 的元素时，咱们才会开始检查它全部的子代是否匹配 .cls(前进到.cls)
  • 后退：当遇到 时，必须使得规则 a#b .cls 回退一步(回退到a#b)这样第三个 span 才不会被选中 - 后代选择器的做用范围是父节点的全部子节点，所以规则是在匹配到本标签的结束标签时回退。

• a#b .cls {

  width: 100px;
  }
  
  <a id=b>
      <span>1<span>
      <span class=cls>2<span>
  </a>
  <span class=cls>3<span>

• 后继选择器“ ~ ”
  规则：给选择器的激活- 带上一个条件：父元素
  缘由：后继选择器只做用于一层.按照 DOM 树的构造顺序，4 在 3 和 5 中间，咱们就没有办法像前面讲的后代选择器同样经过激活或者关闭规则来实现匹配
  过程：当前半段的 .cls 匹配成功时，后续 * 所匹配的全部元素的父元素都已经肯定了（后继节点和当前节点父元素相同是充分必要条件

  .cls~* {
      border:solid 1px green;
  }
  <div>
  <span>1<span>
  <span class=cls>2<span>
  <span>
      3
      <span>4</span>
  <span>
  <span>5</span>
  </div>

• 子代选择器“ >”
  规则：拿当前节点的父元素做为父元素
  当 DOM 树构造到 div 时，匹配了 CSS 规则的第一段
  激活.cls而且指定父元素必须是当前 div

  div>.cls {
      border:solid 1px green;
  }
  <div>
  <span>1<span>
  <span class=cls>2<span>
  <span>
      3
      <span>4</span>
  <span>
  <span>5</span>
  </div>

• 直接后继选择器“ +”

  • 思路1：只对惟一一个元素生效，把 #id+.cls 都当作检查某一个元素的选择器
  • 思路2：给后继选择器加上一个 flag，使它匹配一次后失效
• 列选择器“ || ”
  专门针对表格的选择器，跟表格的模型创建相关，winter不讲这个啦

• 其余

  • CSS 选择器还支持逗号分隔

    视为两条规则的一种简易写法
    a#b, .cls {}
    a#b {}

  • 选择器可能有重合

    使用树形结构来进行一些合并
     #a .cls {}
     #a span {}
     #a>span {}
     
     #a 
         < 空格 >.cls
         < 空格 >span

• 总结：

  • CSS 计算：把 CSS 规则应用到 DOM 树上，为 DOM 结构添加显示相关属性的过程，获得了一棵带有 CSS 属性的树
  • 介绍了选择器的几种复合结构应该如何实现
• 扩展阅读：从Chrome源码看浏览器如何计算CSS
  https://zhuanlan.zhihu.com/p/...