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

川长思鸟来 2022-03-02 07:08 349阅读 0赞

浏览器的工作就是把一个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协议的格式主要如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 3][]

如何使用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，但是当遇到</div>的结束标签，就进行回退。

（2）解析下面的代码

<div>

<span>

</span>

</div>

.cls~\*\{\}

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 4][]

（四）排版

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][https_blog.csdn.net_krysliang_article_details_85840864]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220302/17b46b6ce6494cf3a04c26d9665628e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20220302/983550a2419e4eefbdf58086c89484a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2]: /images/20220302/fd8fb2a36332432a88c22738420470ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 3]: /images/20220302/e49384b1b44e4bbb80aa9c9df7fbf6af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 4]: /images/20220302/e6343b717d664dee94a016501c96f5b8.png
[https_blog.csdn.net_krysliang_article_details_85840864]: https://blog.csdn.net/krysliang/article/details/85840864