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

ls0609 发布于2019-08-29 18:41 / 1845人阅读

摘要：选择器匹配流程前进一个选择器按照来拆成数段，每当满足一段条件的时候，就前进一段。后退选择器的作用范围，匹配到本标签的结束标签时作用范围边缘回退。

加载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;
}


    1
    2

3

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

.cls~* {
    border:solid 1px green;
}

1
2

    3
    4

5

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

div>.cls {
    border:solid 1px green;
}

1
2

    3
    4

5

直接后继选择器“ +”

思路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/...

GPU云服务器云服务器浏览器对和css3的支持如何关闭浏览器的webRTC 如何更改浏览器自带的webrtc 脚本qtp浏览器工作ie

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114500.html

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

摘要：选择器匹配流程前进一个选择器按照来拆成数段，每当满足一段条件的时候，就前进一段。后退选择器的作用范围，匹配到本标签的结束标签时作用范围边缘回退。加载css 加载是异步，不会影响DOM树的构建，只是说在CSS没处理好之前，构建好的DOM并不会显示出来启发：所以CSS不能太大，页面一打开将会停留较长时间的白屏，所以把图片/字体等转成base64放到CSS里面是一种不太推荐的做法 ...

cloud 2019-08-30 15:44 评论0 收藏0
重学前端学习笔记（十一）--浏览器工作解析（一）

摘要：紧跟在后面的是请求头，每行用冒号分隔名称和值按下两次回车，收到服务端回复响应部分第一行被称作，它也分为三个部分，协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的，原因是的状态被浏览器库直接处理掉了，不会让上层应用知晓。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...

paulli3 2019-08-02 16:17 评论0 收藏0
重学前端学习笔记（十一）--浏览器工作解析（一）

摘要：紧跟在后面的是请求头，每行用冒号分隔名称和值按下两次回车，收到服务端回复响应部分第一行被称作，它也分为三个部分，协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的，原因是的状态被浏览器库直接处理掉了，不会让上层应用知晓。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...

付永刚 2019-08-30 10:49 评论0 收藏0
重学前端学习笔记（十一）--浏览器工作解析（一）

摘要：紧跟在后面的是请求头，每行用冒号分隔名称和值按下两次回车，收到服务端回复响应部分第一行被称作，它也分为三个部分，协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的，原因是的状态被浏览器库直接处理掉了，不会让上层应用知晓。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...

alighters 2019-08-26 18:26 评论0 收藏0