重学前端学习笔记-浏览器工作原理

浏览器的工作就是把一个URL变成一个屏幕显示的网页。这个过程主要如下（除去dns查询）

1. 浏览器首先使用HTTP协议或者HTTPS协议，向服务器请求页面

2. 将请求回来的HTML代码进行解析，构成DOM树

3. 计算DOM上的CSS属性

4. 最后根据css属性对元素逐个渲染，得到内存中的位图

5. 合成之后，绘制到界面上

 

（一）HTTP协议

HTTP协议是基于TCP的应用层协议，TCP是传输层协议、

1.TCP协议经过三次握手后，形成一条双向的通道，HTTP在TCP的基础上，规定了Request-Response模式，这个模式规定了浏览器必定是先发起请求的。

2、http协议的格式主要如下

 

 

 

如何使用HTTP2

在服务器端配置就可以了。后面配置新服务器的时候进行配置。

 

（二）构建DOM树

1、当分析完所有的token之后，接收完所有的输入，栈顶就是最后的根节点，DOM树的产出，就是这个栈的第一项。（构建完一个节点就挂载在dom树上）

2、节点栈构建树的过程

• 栈顶元素是当前节点

• 遇到属性，就添加到当前节点

• 遇到文本节点，如果当前节点是文本节点就跟当前节点合并，否则入栈成为当前节点的子节点

• 遇到注释节点，作为当前节点的子节点

• 遇到tag start入栈，当前节点是它的父节点

• 遇到tag end就出栈一个节点

 

 

（三）计算DOM树上的css属性

这一步就是拿到上一步构造的元素，去检查它匹配了哪些规则，再根据规则的优先级，做覆盖和调整。

这里说一下选择器

css的选择器有如下几种

• “+”直接后继选择器，选中它下一个相邻的节点，两个操作数

例如a+b选中的是a后面的第一个b

• "~"后继，选中它所有后面的兄弟节点

例如a~b选中a后面所有的b

• “||”列选中表格中的一列

• 空格 后代选择器

• “*”所有元素

• “>”子代选择器，只选择儿子，不包括孙子和其他后代也是两个操作数

 

（1）后代选择器（空格）

后代选择器的作用范围是父节点的所有子节点，因此规则是匹配到本标签的结束标签时进行回退。

例如下面的代码

现在选择器如下

#b .cls{}

那么首先找到#b元素，然后检查它后代是否匹配.cls，但是当遇到

的结束标签，就进行回退。

 

（2）解析下面的代码

    1

    2

    

        3

        4

    

    5

 

.cls~*{}

 

那么这个选择器选中的是哪些呢？

 

 

（四）排版

1、把浏览器确定文字、图形、图片、表格等元素的位置的过程叫做排版

2、浏览器排版方案

• 正常流排版

• 绝对定位排版：把自身从正常流抽出，直接由top、left等元素确定它的位置，不参加排版计算，也不影响其它元素

• 浮动：使自己在正常流的位置向左或者向右移动到边界，并且占据一块排版空间。

3、把文字一次书写延伸方向叫做主轴或者主方向，换行延伸的方向叫做交叉轴或者交叉方向。

4、display为inline的元素中的文字会直接排入文字流中，Inline元素主轴方向的margin属性和border属性也会被计算进排版前进距离中

5、正常流中的盒

在正常流中，display不为inline的元素或者伪元素，会以盒的方式跟文字一起排版

• 行内盒：Inline和带有inline-前缀的称为行内盒，主轴方向由margin，border、padding、width等属性之和决定，vertical-height决定盒在交叉轴方向的高度，也会影响实际行高。

• 块级盒：单独占据一行，计算出交叉轴方向的高度就好。

 

6、绝对定位元素

Position属性的值为absolute的元素，我们需要根据它的包含块来决定位置，这是完全跟正常流无关的独立的排版模式，逐层找到其父级元素为position非static的元素既可.

 

7、浮动元素

浮动元素，先将其在正常流的位置向左或者向右（主轴方向）移动到边界，并且占据一块排版空间，float元素排版轴，float所在的行需要重新确定位置。

 

 

（五）渲染、合成、绘制

1、位图：在内存里建立一张二维表格，把每一个图片的每个像素对应的颜色保存进去，位图信息也是DOM树占据浏览器内存最多的信息。

 

2、浏览器中渲染的过程，就是讲每一个元素对应的盒变成位图，一个元素可以对应多个盒，每一个盒对应一张位图，

 

3、合成：把一部分的位图变成合成层

 

4、绘制：把合成层显示到屏幕：写到显存。

 

 

我的另一篇文章，讲解浏览器渲染原理的。

https://blog.csdn.net/krysliang/article/details/85840864