在浏览器中输入url,发生了什么?

第一步、DNS域名解析(应用层协议)

  1. 在浏览器自身的DNS缓存上搜索
  2. 在操作系统的DNS缓存上搜索
  3. 读取系统hosts文件,查找是否有对应IP
  4. 向本地配置的首选DNS解析器发起域名解析请求

此步骤完后,你想访问的目的网络的IP地址已经获得。

第二步、建立TCP连接(传输层)

TCP建立连接时,采用三次握手的方式建立连接,发送端首先发送一个带SYN(请求连接的标志)的数据包给接收方,接收方收到后回复一个带有SYN/ACK(确认标志)的数据包给发送方以表示确认,最后发送方在回复给接收方一个ACK,此次握手结束。由于TCP保证可靠性,出现任何问题TCP都会重传数据包

第三步、发起HTTP请求 (应用层)

请求方法:get、post

get、post的区别?

  1. 发送数据时,get方法向url中添加数据,get数据在url中对所有人都是可见的。url的长度是受限制的,所以 get方法的长度受限
  2. 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。

猜你喜欢

转载自blog.csdn.net/zhao_miao/article/details/89977702