输入一个url全过程详解
1. 用户在浏览器中输入url,浏览器接收到url。
2.浏览器接收到这个url之后,会根据这个url会先查看缓存,如果有缓存且没有过期的话直接提供给客户端,完成页面渲染。
3.否则浏览器就会通过DNS解析url ,获得协议名、主机名、端口号。
DNS解析详解:
输入域名时,操作系统会先检查自己本地host文件中是否有这个网址的映射关系,如果有,就调用这个IP地址映射,完成域名解析。
如果host没有这个域名的映射,则查找本地的DNS解析器缓存,是否有这个网址映射关系,如果有,直接返回,完成域名解析。
如果本地解析器缓存没有的话,则查找本地DNS服务器,如果要查询的域名包含在本地配置资源中,则完成域名解析。
如果本地DNS服务器没有的话,就会请求根服务器,根服务器就会返回一个负责该区域的主服务器IP
本地域名服务器根据主服务器IP,链接到这个主域名服务器,如果有这个域名的话,就调用这个IP地址映射,完成域名解析。如果没有的话,则递归请求下一级域名服务器,直到找到对应的域名
4.然后浏览器就会根据这个IP跟对应的服务端建立tcp连接
TCP三次握手:
第一次握手:客户端向服务器发送一个 SYN=1 报文,并指定客户端的初始化序列号 seq=x。此时客户端处于SYN_Sent 状态
第二次握手:服务器接收到客户端的 SYN=1 报文后,同意连接的话,会发出一段确定报文。确定报文中应该ACK= 1,SYN= 1,确认号是ack=x+1,同时也要为自己初始化一个序列号seq=y.此时服务器处于 SYN-RCVD
第三次握手:客户端接收到 SYN 报文之后,还会向服务器发送确定。确定报文的 ACK=1,ack=y+1 ,自己的序列号变成 x+1。TCP 连接建立,客户端处于 已连接状态 。
5.当服务器接受到客户端的确认后也进入了 已连接状态 。此时双方就可以开始通信了
6.接下来就是浏览器向服务器发送HTTP请求
TCP 连接建立之后,浏览器端会构建请求行、 请求头等信息,并把和该域名相关的 Cookie 等数据附加到请求头中,然后向服务器发送构建的请求信息。如果是 HTTPS
,还需要进行 TSL
协商。服务器还会检查 HTTP 的请求头,看是否包含缓存信息。
7.服务器接受并解析这个请求然后发送一个数据包给浏览器
8.关闭浏览器与服务器之间的连接
TCP四次挥手:
- 第一次挥手:客户端向服务端发送一个FIN报文,报文中指定一个序列号。此时,客户端处于 FIN_WAIT-1状态
- 第二次挥手:服务端收到客户端 发送的 FIN报文后,会将客户端的序列号+1 作为ACK报文的序列号值发送给客户端,表明收到了客户端的报文。然后服务器就会处于 CLOSE-WAIT-1状态
- 第三次挥手:服务端向客户端发送 FIN报文,且指定一个序列号。此时,服务端处于 LAST_ACK状态
- 第四次挥手:客户端收到服务端发送的FIN报文后,会将服务端的序列号+1 作为ACK报文的序列号值发送给服务端,此时客户端处于 TIME_WAIT 状态。需要等服务端确定收到自己的ACK报文后才会进入 CLOSED 状态
- 服务端接收到 ACK报文后,就关闭连接,处于 CLOSED 状态。
9.浏览器就会根据这个数据包解析HTML文档,构建DOM树,构建CSSOM树,解析js脚本,下载资源
渲染的具体过程:
浏览器会通过 HTML Parser (HTML解析器)根据深度遍历的原则,将html解析成 DOM tree (DOM 树)。
浏览器会通过 CSS Parser (CSS解析器)将CSS 解析成 CSS Rule Tree(CSSOM 树)。
浏览器会将 javascript 通过 DOM API 或者 CSSOM API 将 JS代码进行解析并应用到布局中,且会呈现出响应式的结果。
根据 DOM 树 与 CSSOM 树构建出响应的 render Tree。
接下来就是进行重排(reflow)与重绘(repaint)。当页面中任意一个节点的几何尺寸发生变化的时候,就会触发重排,就会重新计算页面中所有的节点的位置。当页面中任意元素的样式属性发生变化时(几何尺寸不发生变化),就会发生重绘,重新绘画发生变化的元素。重排一定会触发重绘,而重绘不一定会有重排。
paint:绘制。遍历render Tree,并调用硬件图形API 来绘制每个节点到页面上。
10.最终就会显示出这个页面
最新文章
- Guest Speaker on 2015 WinHEC Shenzhen 秋季大会
- linux查看一条命令的执行结果是1还是0
- oracle 的 nubmer 类型与 C# 的 float double decimal 对应关系
- SHELL实现同时操作多个服务器:服务器批量管理
- 分布式环境下rabbitmq发布与订阅端
- Linq to 泛型集合查询集合包括大写M和年龄小于等于18
- Url中處理空格、特殊字符
- Android Handler处理机制 ( 三 ) ——Handler,Message,Looper,MessageQueue
- csv格式
- Jdbc 连接MySQL数据库的方法和问题
- Oracle高级查询,事物,过程及函数
- 与众不同 windows phone (3) - Application Bar(应用程序栏)
- Cracking the Coding Interview 第二章
- IOS开发常见错误
- 安装Oracle之后在DOS命令下不能使用sqlplus命令启动Oracle?
- 【大数据和云计算技术社区】分库分表技术演进&;最佳实践笔记
- Python 爬虫 解析库的使用 --- XPath
- YOLO2(1)配置安装win10+openvc2413+VS2013 简单测试官例
- xe5 android sample 中的 SimpleList 是怎样绑定的 [转]
- 洛谷P2613有理数取余
热门文章
- 增删改查- 万能map- 模糊查询
- vue3 vite 系统标题 系统名称统一配置
- 【python疫情可视化】用pyecharts开发全国疫情动态地图,效果酷炫!
- 830. Positions of Large Groups - LeetCode
- MQ 简介
- vue3常见问题及解决方案(四)父组件切换行,然后子组件切换tab,子组件内的数据不刷新
- Python Beautiful Soup库
- autohotkey(AHK)实现箭头映射
- 动态线程池框架 DynamicTp v1.0.6版本发布。还在为Dubbo线程池耗尽烦恼吗?还在为Mq消费积压烦恼吗?
- web自动化之元素定位篇