重学前端学习笔记-浏览器工做原理
浏览器的工做就是把一个URL变成一个屏幕显示的网页。这个过程主要以下（除去dns查询）css
-
浏览器首先使用HTTP协议或者HTTPS协议，向服务器请求页面浏览器
-
将请求回来的HTML代码进行解析，构成DOM树服务器
-
计算DOM上的CSS属性dom
-
最后根据css属性对元素逐个渲染，获得内存中的位图spa
-
合成以后，绘制到界面上.net
（一）HTTP协议blog
HTTP协议是基于TCP的应用层协议，TCP是传输层协议、token
1.TCP协议通过三次握手后，造成一条双向的通道，HTTP在TCP的基础上，规定了Request-Response模式，这个模式规定了浏览器一定是先发起请求的。dns
二、http协议的格式主要以下图片
如何使用HTTP2
在服务器端配置就能够了。后面配置新服务器的时候进行配置。
（二）构建DOM树
一、当分析完全部的token以后，接收完全部的输入，栈顶就是最后的根节点，DOM树的产出，就是这个栈的第一项。（构建完一个节点就挂载在dom树上）
二、节点栈构建树的过程
-
栈顶元素是当前节点
-
遇到属性，就添加到当前节点
-
遇到文本节点，若是当前节点是文本节点就跟当前节点合并，不然入栈成为当前节点的子节点
-
遇到注释节点，做为当前节点的子节点
-
遇到tag start入栈，当前节点是它的父节点
-
遇到tag end就出栈一个节点
（三）计算DOM树上的css属性
这一步就是拿到上一步构造的元素，去检查它匹配了哪些规则，再根据规则的优先级，作覆盖和调整。
这里说一下选择器
css的选择器有以下几种
-
“+”直接后继选择器，选中它下一个相邻的节点，两个操做数
例如a+b选中的是a后面的第一个b
-
"~"后继，选中它全部后面的兄弟节点
例如a~b选中a后面全部的b
-
“||”列选中表格中的一列
-
空格 后代选择器
-
“*”全部元素
-
“>”子代选择器，只选择儿子，不包括孙子和其余后代也是两个操做数
（1）后代选择器（空格）
后代选择器的做用范围是父节点的全部子节点，所以规则是匹配到本标签的结束标签时进行回退。
例以下面的代码
<div id="b"><span class="cls"></span></div>
如今选择器以下
#b .cls{}
那么首先找到#b元素，而后检查它后代是否匹配.cls，可是当遇到</div>的结束标签，就进行回退。
（2）解析下面的代码
<div>
<span>1</span>
<span class="cls">2</span>
<span>
3
<span>4</span>
</span>
<span>5</span>
</div>
.cls~*{}
那么这个选择器选中的是哪些呢？
（四）排版
一、把浏览器肯定文字、图形、图片、表格等元素的位置的过程叫作排版
二、浏览器排版方案
-
正常流排版
-
绝对定位排版：把自身从正常流抽出，直接由top、left等元素肯定它的位置，不参加排版计算，也不影响其它元素
-
浮动：使本身在正常流的位置向左或者向右移动到边界，而且占据一块排版空间。
三、把文字一次书写延伸方向叫作主轴或者主方向，换行延伸的方向叫作交叉轴或者交叉方向。
四、display为inline的元素中的文字会直接排入文字流中，Inline元素主轴方向的margin属性和border属性也会被计算进排版前进距离中
五、正常流中的盒
在正常流中，display不为inline的元素或者伪元素，会以盒的方式跟文字一块儿排版
-
行内盒：Inline和带有inline-前缀的称为行内盒，主轴方向由margin，border、padding、width等属性之和决定，vertical-height决定盒在交叉轴方向的高度，也会影响实际行高。
-
块级盒：单独占据一行，计算出交叉轴方向的高度就好。
六、绝对定位元素
Position属性的值为absolute的元素，咱们须要根据它的包含块来决定位置，这是彻底跟正常流无关的独立的排版模式，逐层找到其父级元素为position非static的元素既可.
七、浮动元素
浮动元素，先将其在正常流的位置向左或者向右（主轴方向）移动到边界，而且占据一块排版空间，float元素排版轴，float所在的行须要从新肯定位置。
（五）渲染、合成、绘制
一、位图：在内存里创建一张二维表格，把每个图片的每一个像素对应的颜色保存进去，位图信息也是DOM树占据浏览器内存最多的信息。
二、浏览器中渲染的过程，就是讲每个元素对应的盒变成位图，一个元素能够对应多个盒，每个盒对应一张位图，
三、合成：把一部分的位图变成合成层
四、绘制：把合成层显示到屏幕：写到显存。
个人另外一篇文章，讲解浏览器渲染原理的。