第一步、DNS域名解析(应用层协议)
- 在浏览器自身的DNS缓存上搜索
- 在操作系统的DNS缓存上搜索
- 读取系统hosts文件,查找是否有对应IP
- 向本地配置的首选DNS解析器发起域名解析请求
此步骤完后,你想访问的目的网络的IP地址已经获得。
第二步、建立TCP连接(传输层)
TCP建立连接时,采用三次握手的方式建立连接,发送端首先发送一个带SYN(请求连接的标志)的数据包给接收方,接收方收到后回复一个带有SYN/ACK(确认标志)的数据包给发送方以表示确认,最后发送方在回复给接收方一个ACK,此次握手结束。由于TCP保证可靠性,出现任何问题TCP都会重传数据包
第三步、发起HTTP请求 (应用层)
请求方法:get、post
get、post的区别?
- 发送数据时,get方法向url中添加数据,get数据在url中对所有人都是可见的。url的长度是受限制的,所以 get方法的长度受限
- post方法比get方法安全,get发送的数据时url的一部分,在发送密码或者其他敏感信息使绝不要使用get
HTTP报头携带的一些重要信息:
- HOST:请求资源所处的互联网主机名和端口号
- User_Agent:声明用户的操作系统和浏览器的版本信息
- Accept-Encoding、Accept-Language:客户端所有识别的编码语言
- Connection:keep-alive:代表此次连接使用长连接
- Content-length:正文长度
第四步:接收响应结果
一些常见的状态码
- 1** 信息状态码(接收的请求正在处理)
- 2** 成功状态码
200 OK 请求正常处理
204 No Content请求处理成功,但是没有资源可返回
206 Partial Content对资源的某一部分请求 - 3** 重定向状态码
301 永久重定向
302 临时重定向 - 4** 客户端错误状态码
400 请求报文中存在语法错误
403 访问被拒绝
404 无法找到资源
- 5** 服务器错误状态码
500 服务器在执行时发生错误
503 服务器处于超负载或者正在进行停机维护
第五步、浏览器解析html
浏览器按顺序解析html文件,构建DOM树,在解析到外部的css和js文件时,向服务器发起请求下载资源,若是下载css文件,则解析器会在下载的同时继续解析后面的html文件来构建DOM树,在下载js文件和执行它时,解析器会停止对html的解析,这便出现了js阻塞问题
预加载器
当浏览器被脚本文件阻塞时,预加载器(一个轻量级的解析器)会继续解析后面的html,寻找需要下载的资源,如果发现有需要下载的资源,预加载器开始接受这个资源。预加载器只能检索HTML标签中的URL、无法检测到使用脚本添加的URL,这些代码要等脚本代码执行时才会获取。
预解析并不改变Dom树、它将这个工作留给主解析过程
这个过程是逐步完成的,浏览器引擎会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完了再去构建和布局。它是解析完一部分内容就显示一部分内容
第六步、浏览器布局渲染
**布局:**通过计算得到每个渲染对象在可视区域中的具体位置信息
**绘制:**将计算好的每个像素点信息绘制在屏幕上
在页面显示的过程中会多次进行Reflow和Repaint操作,而Reflow的成本比Repaint的成本高得多的多。因为Repaint只是将某个部分进行重新绘制而不用改变页面的布局,如:改变了某个元素的背景颜色。而如果将元素的display属性由block改为none则需要Reflow。