浏览器输入URL回车后发生了什么(简略版)

网上看了一些文章，很多时候也是记不住，于是特地写下这篇文章摘取一些重要的部分记录(简略版)，方便自己更加容易理解。

我的思考是输入url后，这个过程中间涉及到的一些知识点，然后通过这个过程对前端的一些问题对应的解决方案(能解决什么问题)，把知识点和对应的问题的解决方案串联起来，会更加便于自己理解。

1. URL的解析

我们在输入URL回车后，首先我们要了解URL的构成，进行一个解析
一个完整的URL主要包含的部分 (例如 https://www.xxxx.com/list/detail.html?id=12#news)

1. 协议 (https或者http协议)
2. 域名 (www.xxxx.com)
3. 目录名(list)
   4 文件名（detail.html）
4. 参数 （id）
5. 锚(news)

2. DNS解析

DNS解析又称为域名解析，每一个域名对应了一个IP地址，使用专用的域名解析服务器来完成解析(这个过程是域名解析服务器自动完成解析)。
(浏览器中可以输入域名也可以输入IP地址，但IP一般难记，所以更多的使用域名)

1. 直接输入IP地址，则是直接调用主机上的内容
2. 域名解析一般都会有一些过程，域名解析成IP地址，即域名解析服务器指向对应的主机IP地址，然后再调用内容。(域名解析过程暂不做说明，后面单独补充文章记录说明)

3. TCP链接(三次握手)

通过三次握手，建立起客户端与服务端的链接，然后接着会进行数据传输。

4. HTTP Request请求

1. 请求方式
2. Header

5. 服务端返回HTTP响应

1. 状态码
2. 响应头
3. 响应正文

6. 浏览器中HTML的解析

1. 浏览器自上而下解析html，会构建dom树，如果遇到css文件则向服务器发起请求下载css文件，同时也会解析html(不会造成阻塞)，如果遇到js文件则发起请求下载js文件(停止解析html，造成阻塞)。

2. 浏览器解析css，构建cssom树，当dom树和cssom树构建完成后，JS引擎会通过dom树和cssom树构建出render树。然后渲染出可视化dom节点。

7. 布局和绘制

布局：得到每个渲染树的具体大小和位置。
绘制：将得到的像素点绘制在屏幕上

页面在渲染的过程中，可能会涉及到不断的重排和重绘(重排的性能消耗比重绘的性能消耗大的多)，一般不会轻易改变布局。(解决方案一般就是使用transform来实现动画，不会引起重绘。使用fixed或者absolute定位，因为跳出了文档流，不用重排)