0.DNS（domain name system)解析（网址到IP地址的转换）
打开浏览器，输入一个域名。发出一个DNS请求到本地DNS服务器（本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动）。
本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
根DNS服务器没有的话，会告诉本地DNS服务器一个域服务器的地址。
本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，告诉本地DNS服务器，你的域名的解析服务器的地址。
最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。
1.浏览器查看缓存，如果有缓存且新鲜，转到转码步骤。如果无缓存，发起新请求，如果有缓存但已失效，请求服务端验证。
2.浏览器解析协议，主机，端口，path, 组装一个http请求报文
https协议是对http用ssl协议（secure socket layer）加密，因为http报文是明文，有泄露的风险
3.获取主机ip地址，向目标ip地址，端口建立TCP连接，过程如下：
①客户端发送seq=x （标志位SYN=1, ACK=0）
②服务端发送ack=x+1 seq=y （标志位SYN=1,ACK=1)
③客户端发送ack=y+1
4.TCP连接后发送HTTP请求（请求行put，post等，请求头，请求正文（如JSON数据等））
5.服务器接受请求并解析，转发到处理程序
6.检查http请求头是否包含缓存验证信息
7.处理程序读取完整请求，准备HTTP响应
8.服务器将响应报文（状态码，响应报头，响应报文（HTML,CSS,JS,图片等））通过TCP连接返回给浏览器
状态码：
1xx：请求已接收，继续处理
2xx：成功--请求已被接受，理解
3xx：重定向--要完成请求必须进行进一步操作
4xx：客户器端错误
5xx：服务器端错误
200：请求成功 204：请求执行成功，但是没有数据，浏览器不用刷新页面.也不用导向新的页面
301：被请求的资源已永久移动到新位置（永久重定向）资源已经不存在 302：请求的资源现在临时从不同的 URI 响应请求（暂时重定向），资源仍然存在
304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容并没有改变，则服务器应当返回这个状态码
400：语义有误或者请求参数错误 401：请求需要用户授权 403：禁止访问 404：找不到
500：服务器出错
9.浏览器接收响应，根据情况选择关闭连接或者保留重用，关闭TCP流程：
①浏览器发送FIN，seq=x，停止发送数据
②服务端发送ack=x+1
③服务端发送FIN, seq=y， 停止发送数据
④浏览器发送ack=y+1
10.浏览器检查响应码状态
11.如果资源可缓存，进行缓存
12.对响应进行解码
13根据资源类型决定如何处理（如果为html，解析html结构，加载JS, CSS）
14.显示页面
页面解析过程：
解析HTML，构建DOM树（这里遇到外链，此时会发起请求）
解析CSS，生成CSS规则树
合并DOM树和CSS规则，生成render树
布局render树（Layout/reflow），负责各元素尺寸、位置的计算
绘制render树（paint），绘制页面像素信息
浏览器会将各层的信息发送给GPU，GPU将各层合成（composite），显示在屏幕上
在上述渲染过程中，前3点可能要多次执行，比如js脚本去操作dom、更改css样式时，浏览器又要重新构建DOM、CSSOM树，重新render，重新layout、paint；
Layout在Paint之前，因此每次Layout重新布局（reflow 回流）后都要重新出发Paint渲染，这时又要去消耗GPU；
Paint不一定会触发Layout，比如改个颜色改个背景；（repaint 重绘）
reflow(回流): 根据Render Tree布局(几何属性)，意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树；
repaint(重绘): 意味着元素发生的改变只影响了节点的一些样式（背景色，边框颜色，文字颜色等），只需要应用新样式绘制这个元素就可以了；reflow回流必定引起repaint重绘，重绘可以单独触发
为什么一再强调将css放在头部，将js文件放在尾部
构建Render树需要DOM和CSSOM，所以HTML和CSS都会阻塞渲染。所以需要让CSS尽早加载JS会阻塞浏览器的解析，需等待脚本下载完成并执行后才会继续解析HTML。
async 异步加载，加载完立即执行
defer 异步加载，但是得等到所有元素加载完成之后再执行