浏览器输入一个url到页面渲染出来都发生了什么？
主要分为三个过程：DNS解析，浏览器发起请求和服务器交互，浏览器接收到对应的html进行页面渲染
1.DNS解析：
浏览器向dns服务器发送域名，dns服务器查询到对应的ip地址返回给浏览器，浏览器获取到ip地址和参数一起发送给对应的服务器，发起http请求
什么是dns解析？为什么需要dns解析？
首先我们需要知道什么是IP，IP地址（internet protocol address）是互联网协议特有的一种地址，它是 IP 协议提供的一种统一的地址格式。IP地址为互联网上每一个网络和每一个主机分配的一个逻辑地址，以此来屏蔽物理地址的差异。
对于计算机来说，他既可以被赋予IP地址，也可以被赋予主机名和域名，但是我们通常都是使用域名来访问想要的网站，因为域名相对于IP地址来说更好记一些。
通俗一点来讲，IP地址就相当于门牌号，而域名相当于xxx家，显然我们平时更喜欢用后者的记法。但是对于快递员来说，他并不认识你，因此记忆前者对他来说更有必要。
为了解决IP地址和域名对应关系的问题，DNS服务应运而生，DNS（domain name server）可以通过我们输入的域名去查找对应的IP地址，或者逆向从IP地址查询域名。
DNS服务是怎么根据域名找到对应IP的呢？
- 浏览器缓存，先看看之前有没有访问过这个域名，浏览器会按照一定的频率缓存dns记录
- 系统缓存，如果浏览器中找不到缓存那就去操作系统中找
- 路由器缓存，路由器也有可能会有DNS缓存
- ISP的DNS服务器，ISP是网络运营商的简称，ISP有专门的DNS服务器对应DNS查询请求
- 根服务器，ISP的DNS服务器还找不到的话，就会向根服务器发起请求，进行递归查询
2.浏览器发送请求与服务器交互，建立TCP/IP链接
- 1.浏览器通过三次握手与服务器建立连接
- 2.浏览器根据解析得到的ip地址和端口号发起http get请求
- 3.服务器接收到get请求，查找对应的html文件，使用http返回响应报文
- 4.如果状态码是200，响应成功，浏览器接收到对应的页面，开始渲染
3.浏览器渲染页面
- 1.解析html生成dom树
- 2.解析css，构建cssom树
- 3.加载js
- 4.dom树和cssom树结合构成渲染（render）树
- 5.在渲染树的基础上进行布局，计算每一个节点的几何结构
- 6.将每一个节点绘制到屏幕上
tips: js阻塞加载和解析
浏览器在解析过程中，如果遇到请求外部资源，如图片、js文件等，将会重复上述操作来下载该资源。
虽然请求的过程是异步的，不会影响html文档的加载，但是如果在文档加载过程中遇到了JS文件，HTML文档会挂起渲染过程，不仅要等到JS加载完成完毕还要等待代码解析执行完毕才会继续渲染HTML。
因为JS有可能会修改DOM结构，也就是说在JS代码执行完成前是没有必要将HTML文档全部渲染出来，这就是JS阻塞后续资源下载的根本原因。
CSS文件的加载不影响JS文件的加载，但是却影响JS文件的执行。所以必须在JS代码执行前保证css文件已经下载并加载完毕。