浏览器地址栏输入url到页面渲染发生了什么

关于从浏览器的地址栏输入url地址到服务器返回响应再到页面加载这一过程是如何的呢？

地址栏输入url…

1.首先进行DNS域名解析（url地址是与实际要找的IP地址相映射）
1） 浏览器缓存

当用户通过浏览器访问某域名时，浏览器首先会在自己的缓存中查找是否有该域名对应的IP地址（若曾经访问过该域名且没有清空缓存便存在）；

2） 系统缓存

当浏览器缓存中无域名对应IP则会自动检查用户计算机系统Hosts文件DNS缓存是否有该域名对应IP；

3） 路由器缓存

当浏览器及系统缓存中均无域名对应IP则进入路由器缓存中检查，以上三步均为客服端的DNS缓存；

4） ISP（互联网服务提供商）DNS缓存

当在用户客服端查找不到域名对应IP地址，则将进入ISP DNS缓存中进行查询。比如你用的是电信的网络，则会进入电信的DNS缓存服务器中进行查找；

5） 根域名服务器

当以上均未完成，则进入根服务器进行查询。全球仅有13台根域名服务器，1个主根域名服务器，其余12为辅根域名服务器。根域名收到请求后会查看区域文件记录，若无则将其管辖范围内顶级域名（如.com）服务器IP告诉本地DNS服务器；

6） 顶级域名服务器

顶级域名服务器收到请求后查看区域文件记录，若无则将其管辖范围内主域名服务器的IP地址告诉本地DNS服务器；

7） 主域名服务器

主域名服务器接受到请求后查询自己的缓存，如果没有则进入下一级域名服务器进行查找，并重复该步骤直至找到正确纪录；

8）保存结果至缓存

本地域名服务器把返回的结果保存到缓存，以备下一次使用，同时将该结果反馈给客户端，客户端通过这个IP地址与web服务器建立链接。

2.获得所需资源的IP地址后客户端和服务器建立TCP连接（三次握手）

3.客户端发送HTTP请求，包括请求行、请求头、请求正文，可以通过浏览器工具查看，请求被封装为HTTP的Request对象发送至服务器。

4.服务器处理HTTP请求并返回响应报文。此处主要关注返回体中的状态码，这是我们查找问题的关键，状态码分类如下

5.当客户端拿到所需的资源便准备进行页面渲染，假设返回HTML文档，首先HTML文档解析生成DOM TREE，css样式表解析CSSOM规则树，同时解析文档中的JS文件（此处涉及JS文件解析阻塞文档），文档解析完成后生成render渲染树，浏览器调用render函数进行布局和绘制渲染树。

为防止JS解析阻塞文档整体的解析，给它设置defer 和 async 属性以提高页面解析渲染效率
defer:解析文档时遇到JS文件开启新线程解析JS，等文档加载完成再执行JS脚本,所有加载完成的脚本顺序执行
async：同上也是开启新线程并继续解析文档，但是JS文件解析成功就立即执行，因为JS脚本执行顺序无法预测，所以要考虑脚本之间的依赖关系。

6.呈现最终渲染页面，关闭连接（四次挥手）

衍生知识点：本地DNS缓存 CDN缓存 浏览器缓存

，由于初次撰写博客所以此文章有借鉴别处博客的地方！有问题可以再下方留言指出或者与本人联系1255832747@qq.com。