浏览器从输入url到页面加载发什么了

基本流程 

1、浏览器的地址栏输入URL并按下回车。

2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。

3、DNS解析URL对应的IP。

4、根据IP建立TCP连接(三次握手)。

5、HTTP发起请求。

6、服务器处理请求,浏览器接收HTTP响应。

7、渲染页面,构建DOM树。

8、关闭TCP连接(四次挥手)。

HTTP默认端口80,HTTPS默认端口443

DNS域名解析

我们知道在地址栏输入的域名并不是最后资源所在的真实位置,域名只是与IP地址的一个映射。网络服务器的IP地址那么多,我们不可能去记一串串的数字,因此域名就产生了,域名解析的过程实际是将域名还原为IP地址的过程。

  首先浏览器先检查本地hosts文件是否有这个网址映射关系,如果有就调用这个IP地址映射,完成域名解析。

  如果没找到则会查找本地DNS解析器缓存,如果查找到则返回。

  如果还是没有找到则会查找本地DNS服务器,如果查找到则返回。

  最后迭代查询,按根域服务器 ->顶级域,.cn->第二层域,hb.cn ->子域,www.hb.cn的顺序找到IP地址。

  递归查询,按上一级DNS服务器->上上级->....逐级向上查询找到IP地址。

五、浏览器向服务器发送HTTP请求

  完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。

六、浏览器接收响应

  服务器在收到浏览器发送的HTTP请求之后,会将收到的HTTP报文封装成HTTP的Request对象,并通过不同的Web服务器进行处理,处理完的结果以HTTP的Response对象返回,主要包括状态码,响应头,响应报文三个部分。

  状态码主要包括以下部分

  1xx:指示信息–表示请求已接收,继续处理。

  2xx:成功–表示请求已被成功接收、理解、接受。

  3xx:重定向–要完成请求必须进行更进一步的操作。

  4xx:客户端错误–请求有语法错误或请求无法实现。

  5xx:服务器端错误–服务器未能实现合法的请求。

  响应头主要由Cache-Control、 Connection、Date、Pragma等组成。

  响应体为服务器返回给浏览器的信息,主要由HTML,css,js,图片文件组成。

七、页面渲染

  如果说响应的内容是HTML文档的话,就需要浏览器进行解析渲染呈现给用户。整个过程涉及两个方面:解析和渲染。在渲染页面之前,需要构建DOM树和CSSOM树。

  在浏览器还没接收到完整的 HTML 文件时,它就开始渲染页面了,在遇到外部链入的脚本标签或样式标签或图片时,会再次发送 HTTP 请求重复上述的步骤。在收到 CSS 文件后会对已经渲染的页面重新渲染,加入它们应有的样式,图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。这里就涉及了两个重要概念:Reflow和Repaint。

  Reflow,也称作Layout,中文叫回流,一般意味着元素的内容、结构、位置或尺寸发生了变化,需要重新计算样式和渲染树,这个过程称为Reflow。

  Repaint,中文重绘,意味着元素发生的改变只是影响了元素的一些外观之类的时候(例如,背景色,边框颜色,文字颜色等),此时只需要应用新样式绘制这个元素就OK了,这个过程称为Repaint。

  所以说Reflow的成本比Repaint的成本高得多的多。DOM树里的每个结点都会有reflow方法,一个结点的reflow很有可能导致子结点,甚至父点以及同级结点的reflow。

posted @ 2021-02-27 15:45  爱晒太阳的懒猫。。  阅读(103)  评论(0编辑  收藏  举报