【Knowledge】浏览器从输入URL到页面呈现都发生了什么
知识点：
- 寻找ip
- 构建http请求
- http响应
- 构建DOM树
- 构建CSSOM树
- 构建渲染树
- layout回流
- painting重绘
- 页面渲染
1 寻找IP
在浏览器中输入URL之后，浏览器需要先去寻找这个URL对应的IP地址。浏览器会先查看缓存中是否有相应的记录，查找缓存的顺序为：
- 缓存：浏览器缓存 > 系统缓存 > 路由器缓存
- 查找hosts文件
- 查询DNS服务器
2 构建http请求
浏览器根据刚刚找到的IP以及对应的端口号，构建一个http请求。
一个http请求报文由四个部分组成：请求行、请求头、空行、请求体。
其中，
请求行：由请求方法（GET、POST等）、URL、和http协议版本组成，之间用空格隔开。
请求头：由关键字/值对组成，没对占一行，典型的请求头有：
1 | User-Agent：产生请求的浏览器类型 |
空行：最后一个请求头之后是一个回车符和换行符，用来告诉服务器后面不再有请求头。
请求包体：此部分不再GET方法中使用，而是在例如POST方法中使用。与请求包体相关的最常使用的是包体类型Content-type和包体长度Content-length。
http请求构造好之后，会被封装在一个tcp包中。
3 http响应
封装好tcp包，会依次经过传输层、网络层、数据链路层、物理层，最后到达服务器，服务器对这个请求作出响应，返回响应的数据–http响应报文。
一个http响应报文也由四个部分组成：状态行、响应头部、空行、响应包体。
其中，
状态行：由http协议版本字段、状态码、状态码的描述组成，之间用空格隔开。
响应头部：
响应头部可能包括：
location：Location响应报头用于重定向接受者到一个新的位置。
vary：指示不可缓存的请求头列表。
connection：连接方式（对于请求来说close表示告诉服务器在完成本次请求的响应后断开连接；对于响应来说，close表示已经关闭）。
空行：作用同http请求报文
响应包体：服务器返回给客户端的文本信息。
4 创建DOM树
浏览器在对服务器返回的数据进行解析处理，首先处理的是html文档，因为html文档是一个树形结构，浏览器会根据这个html来创建DOM树，中途遇到js脚本和外部JS链接，则先下载和执行完对应的脚本再继续往下创建DOM树。
在解析DOM的资源时，html的文字、图片、视频等资源会并行下载，浏览器对每个域的并行下载有数量限制，一般是4-6个。
5 创建CSSOM树
CSSOM树和DOM树的创建方式一样，在DOM树创建完成后，加载内部样式和外部样式，内联样式来构建CSSOM树。
6 构建渲染树（render树）
在DOM树和CSSOM树创建完成之后，把两者合并为渲染树。渲染树的主要作用是排除非视觉节点。比如设置了display: none;属性。
构建完渲染树之后就是进行页面的绘制，主要包括回流和重绘。
7 layout回流（reflow）
在第一次绘制页面的时候会进行一次最大规模的回流，根据上面的渲染树计算设备使用时确切的位置，在页面上进行布局，然后渲染页面。
什么是回流？当渲染树中的一部分（或全部）因为元素的规模、尺寸、布局、隐藏等改变而需要重新构建。这就称为回流。每个页面至少要经历一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中收到影响的部分失效，并重新构建这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，这个过程被称为重绘。
产生回流的操作：
1.第一次渲染页面（内容和文字都发生改变）
2.浏览器窗口尺寸改变
3.页面元素位置和尺寸大小的改变
4.新增和删除元素
5.一些style属性发生变化导致元素变化：如边框、下划线、css伪类等
如何避免和减少回流和重绘：
1.减少DOM和样式的修改，不多次修改样式
2.样式集中，尽量使用外部样式表和外部JS，读写分离，这样有利于服务器和浏览器缓存
3.能使用css的就不用js操作样式：（每次js操作都会导致重绘和回流）
4.页面中多次需要重排的元素，position使用absolute或fixed
5.尽量不使用表表格布局（无固定宽高的表格高由最后一行决定，绘制到最后一行不合理的时候会反复进行计算回流）
8 painting重绘
9 页面渲染
上述步骤都完成后，把像素发送给电脑的GPU，开始绘制页面。