流程概要
看了《重学前端》总结了一下，从用户输入网址发起请求到页面渲染显示的过程：
通过url请求获得字符流，把字符流变成词（token）流，把词（token）流构造成DOM树，把不含样式信息的DOM树应用CSS规则，变成包含样式信息的DOM树，并且根据样式信息，计算了每个元素的位置和大小。最后根据这些样式信息和大小信息，为每个元素在内存中渲染它的图形，并且把它绘制到页面对应的位置。
1. http请求
- 接受HTTP请求后，就产生了流式的数据，后续的DOM树构建、CSS计算、渲染、合成、绘制，都是尽可能地流式处理前一步的产出：即不需要等到上一步骤完全结束，就开始处理上一步的输出，这样我们在浏览网页时，才会看到逐步出现的页面。
- 301和302两个状态表示当前资源已经被转移，只不过一个是永久性转移，一个是临时性转移。实际上301更接近于一种报错，提示客户端下次别来了。
- 503：服务端暂时性错误，可以一会再试。
- 常见的HTTP头，这些头是我认为前端工程师应该做到不需要查阅，看到就可以知道意思
- 客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成； HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。
- HTTPS有两个作用，一是确定请求的目标服务端身份，二是保证传输的数据不会被网络中间节点窃听或者篡改。
- TLS加密通道，TLS构建于TCP协议之上，它实际上是对传输的内容做一次加密，所以从传输内容上看，HTTPS跟HTTP没有任何区别
- 在HTTP 1.0中，客户端的每一个HTTP请求都必须通过独立的TCP连接进行处理，2.0可以支持TCP连接复用和服务端推送
2. 解析与构建
- 标签（body字符流）拆分成词（token）的过程
1 <p“标签开始”的开始；
2 class=“a” 属性；
3 > “标签开始”的结束；
4 text text text 文本；
5 </p>标签结束
- 使用栈来构建DOM树
3. CSS规则应用
- DOM构建过程中，每拿到一个新构建好的元素就去检查，它匹配到了哪些规则，再根据规则的优先级，做覆盖和调整。是一个流式的过程
- 选择器的出现顺序，必定跟构建DOM树的顺序一致（父元素–>子元素）
- 选择器连在一起写
4. 页面排版
- “排版”这个概念最初来自活字印刷，是指我们把一个一个的铅字根据文章顺序，放入板框当中的步骤，排版的意思是确定每一个字的位置。
- 浏览器支持元素和文字的混排，元素被定义为占据长方形的区域，还允许边框、边距和留白，这个就是所谓的盒模型。
- 正常流、绝对定位元素、浮动定位元素
- 浏览器支持改变排版方向，不一定是从左到右从上到下，所以我们把文字依次书写的延伸方向称为主轴，换行延伸的方向，跟主轴垂直交叉，称为交叉轴。
- 表格相关排版、flex排版和grid排版，它们有一个显著的特点，那就是子元素之间具有关联性
5. 渲染
- “渲染”，是个非常有意思的翻译，中文里“渲染”这个词是一种绘画技法，是指沾清水把墨涂开的意思。
- 它在图形学的意义，也就是把模型变成位图（栅格）的过程。浏览器中渲染这个过程，就是把每一个元素对应的盒变成位图。