从输入URL到页面加载发生了什么?

原文:https://segmentfault.com/a/1190000014872028

一、涉及基本知识点

1.计算机网络

(1)五层因特尔协议栈:
  • 应用层(dns、http):DNS解析成IP并完成http请求发送;
  • 传输层(tcp、udp):三次握手四次挥手模式建立tcp连接;
  • 网络层(IP、ARP):IP寻址;
  • 数据链路层(PPP):将请求数据封装成帧;
  • 物理层:利用物理介质传输比特流(传输的时候通过双绞线、电磁波等)
  • OIS七层框架:多了两层即,会话层(处理两个通信系统中交换信息的表示方式)和表示层(管理不同用户和进程之间的对话)
(2)get和post的区别:
  • get产生一个tcp数据包,post产生两个;
  • get请求时会把headers和data数据一起发送出去;
  • post请求时,浏览器先发送headers,服务器100继续,浏览器再发送data。
(3)DNS查询得到IP:
  1. 请求信息:首先查看域名的本地DNS缓存,该缓存存储计算机最近检索到的信息,如果计算机不知道答案,那么就需要执行一个DNS查询来查找答案;
  2. 询问递归式DNS服务器:
  • 如果信息不存储在本地,计算机会联系您的ISP(网络提供商)的递归DNS服务器;
  • 这些专用计算机会为你执行一个DNS查询工作;
  • 递归服务器有自己的缓存,所以这个查询过程通常在这里完成,并将信息还回给用户;
  1. 询问根域名服务器
  • 如果递归服务器没有答案,他们会查询根域名服务器;
  • 根域名服务器是一种计算机,它扮演着一种DNS的电话接线员的角色,他们不知道答案,但可以将我们的疑问指向知道在哪里可以找到答案的人。
  1. 询问TLD域名服务器:
  • 根域名服务器将查看请求的第一部分,按从右到左的顺序,从www.dyn.com中找到.com,并将请求指向.com对应的顶级域名服务器(TLD).com;
  • 每个TLD,如(.com,.org,.us)都有自己的顶级域名服务器;
  • 这些服务器没有我们需要的信息,但他们可以直接将我们引导到有信息的服务器。
  1. 询问权威的DNS服务器
  • TLD域名服务器会继续检查请求的下一部分(dyn)www.dyn.com,并将查询指向负责此特定域名的服务器;
  • 这些权威的服务器将负责了解关于特定域的所有信息,并将信息存储在DNS记录。
  1. 找回记录:
    -递归服务器从权威服务器中检索dyn.com的记录,并将记录存储在本地缓存;
  • 如果其他任何人请求dyn.com的主机记录,递归服务器已经有答案了,并不需要再次进行查找;
  • 所有记录都有一个期限,一段时间后,递归服务器将需要要求一个新的记录副本,以确保信息不回过时。
  1. 接收答案:
  • 有了答案,递归服务器将记录返回到计算机,
  • 您的计算机将记录存储在缓存中,从记录中读取IP地址,然后将这些信息传递给浏览器;
  • 然后浏览器就可以根据IP地址和服务器进行连接建立。
(4)TCP/IP请求:
  • http的本质就是TCPIP请求;
  • 需要经历3次握手建立连接,4次挥手断开连接;
  • TCP将http长报文划分为短报文,通过三次握手与服务器端建立连接,进行可靠传输。
三次握手:
  • 主机A通过向主机B发送一个含有同步序列号标志位SYN的数据段,向主机B请求建立连接;
  • 主机B收到主机A的请求后,用一个带有确认应答ACK和同步序列号SYN的数据段响应主机A;
  • 主机A收到这个数据段后,在发送一个确认应答ACK,确认已收到主机B的数据段,连接建立成功。
四次挥手:
  • 主机A完成数据传输后,将控制位FIN置为1,向主机B发送停止TCP连接的请求;
  • 主机B收到FIN后,对其作出响应,将ACK置为1,发回主机A;
  • 由B端再提出反方向的关闭请求,将FIN置为1,发给A;
  • 主机A对主机B的请求进行确认,将ACK置为1,双方向的关闭结束。
(5)TCP/IP的并发限制:
  • 浏览器对同一个域名下并发的TCP连接是有限制的(2-10个不等);
  • 而且在http1.0中往往一个资源的下载就需要一个tcp/ip请求。

2.浏览器机制

(1)进程和线程的概念
  • 进程是CPU资源分配的最小单位,是能拥有资源和独立运行的最小单位;
  • 线程是CPU调度的最小单位,线程是建立在进程的基础上的一次程序运行单位,一个进程可以拥有多个线程;
  • 通俗的讲:进程是一个工厂,工厂有它独立的资源,工厂之间相互独立->进程之间相互独立,线程是工厂中的工人,多个工人之间可以协作完成任务,工厂内有一个或多个工人,工人之间共享空间。
(2)多进程的浏览器

浏览器是多进程的,有一个主控进程,以及每一个tab页面都会开一个进程(某些情况下多个tab由于优化策略会合并)

浏览器主要进程:
  1. Browser进程:浏览器的主进程,负责协调、主控,只有一个,作用:
  • 负责浏览器界面的显示、与用户交互(如前进、后退等)
  • 负责各个页面的管理,创建和销毁其他进程;
  • 将Renderer进程得到的内存中的Bitmap绘制到用户界面上;
  • 网络资源的管理和下载等
  1. 第三方插件进程:每种类型的插件对应一个进程,仅当该插件使用时才创建;

  2. GPU进程: 最多一个,用于3D绘制等;

  3. 浏览器渲染进程(Renderer进程、浏览器内核、内部是多线程):

  • 默认每打开一个tab页面,就会启动一个Renderer进程;
  • 负责页面的渲染,脚本的执行,事件的处理。
浏览器多进程的优势:
  • 避免单个page crash影响整个浏览器;
  • 避免第三方插件crash影响整个浏览器;
  • 多进程充分利用多核优势;
  • 方便使用沙盒模型隔离插件等进程,提高浏览器稳定性。
浏览器内核(渲染进程):浏览器渲染进程内部是多线程
  1. GUI渲染线程:

(1)负责浏览器界面的渲染,解析HTML、CSS,构建DOM树和RenderObject树,布局和绘制等;
(2) 当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时该线程会执行;
注意:GUI渲染线程和JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会保存在一个队列中等JS引擎空闲时立即执行。

  1. JS引擎线程:
  • JS内核,负责处理JavaScript脚本程序(V8引擎)
  • 负责解析JavaScript脚本,运行代码;
  • JS引擎一直等待着任务队列中的任务到来,然后加以处理,一个tab页面(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序;

注意:由于GUI渲染线程和JS引擎线程是互斥的,所以如果JS程序运行时间过长,这样会导致页面渲染不连贯,导致页面渲染加载阻塞;

  1. 事件触发线程:
  • 归属于浏览器,而不是JS引擎,用来控制事件循环;
  • 当JS引擎执行代码块如setTimeOut时(也可以来自浏览器内核的其他线程,如鼠标单击事件、AJAX异步请求等),会将对应的任务添加到事件线程中;
  • 当对应的事件符合触发条件被触发时,该线程就会把事件添加到JS的待处理队列的队尾,等待JS引擎的处理;

注意:由于JS的单线程的关系所以这些待处理队列中的事件都得排队等待JS引擎处理(当JS引擎空闲时才会去执行)。

  1. 定时触发器线程:
  • setTimeOut与setInterval所在的线程;
  • 浏览器的定时计数器并不是由JavaScript引擎计数的,(因为JavaScript是单线程,如果处于阻塞状态就会影响计时的准确)因此通过单独的线程来计时并触发定时(计时完毕后,添加到事件队列,等待JS引擎空闲时执行)
  1. 异步http请求线程:
  • 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求的;
  • 将检测到状态变更时,如果设置有回调函数,异步线程就将产生状态变更事件,将这个回调在放到事件队列中,再由JavaScript引擎执行。

二、从输入URL到加载显示完成,这个过程发生了什么?

简单过程:

  1. DNS解析
  2. TCP连接
  3. 发送HTTP请求
  4. 服务器处理请求并返回HTTP报文
  5. 浏览器渲染解析页面
  6. 连接结束

详细过程:

  1. 首先浏览器开启一个线程来处理这个请求,对URL分析判断,如果是http协议 就按照Web方式来处理;
  2. 其次浏览器会对URL进行解析,一般包括(协议头、主机域名或IP地址、端口号、请求路径、查询参数、hash等),然后开启网络线程发出一个完整到http请求;
  3. 当然一般我们输入的URL是服务器域名,这时就需要DNS通过域名查询得到对应的IP;
  4. DNS首先会查看浏览器DNS缓存,没有就查询计算机本地DNS缓存,还没有就询问递归式DNS服务器(即网络提供商,一般这个服务器都会有自己的缓存,所以IP查询一般在这里完成),如果没有缓存,那就需要通过根域名和TLD域名服务器指到对应的权威DNS服务器找回记录,并缓存到递归式服务器,然后递归服务器在将记录返回给本地。
  5. 有了IP地址,此时网络层便会通过IP地址寻的对应服务器的物理地址
  6. 寻得服务器地址,客户端在网络传输层便可以和服务器通过三次握手建立tcpip连接
  7. 连接建立后网络数据链路层将数据包装成帧;
  8. 最后物理层利用物理介质进行传输;
  9. 到了服务器,就会通过相反的方式将数据一层一层的还原回去;
  10. 请求到了后台服务器,一般会有统一的验证,如安全验证、跨域验证等,验证未通过就直接返回相应的http报文
  11. 验证通过后,就会进入后台代码,此时程序收到请求,然后执行对应的操作(如查询数据库等);
  12. 如果浏览器访问过,且缓存上有对应的资源,便会与服务器最后修改时间对比,一致便返回304,告诉浏览器可使用本地缓存;
  13. 前端浏览器接收到响应成功的报文后便开始下载网页
  14. 下载完的网页将被交给浏览器内核(渲染进程)进行处理:
    (1)根据顶部定义的DTD类型进行对应的解析方式;
    (2)渲染进程内部是多线程的,网页的解析将会被交给内部的GUI渲染线程处理;
    (3)首先渲染线程中的HTML解释器,将HTML网页和资源从字节流解释转换成字符流;
    (4)再通过词法分析器将字符流解释成词语;
    (5)之后经过语法分析器根据词语构建成节点;最后通过这些节点组建一个DOM树;
    (6)这个过程中,如果遇到的DOM节点是JavaScript代码,就会调用JavaScript引擎对JavaScript代码进行解释执行,此时由JavaScript引擎和GUI渲染线程的互斥,GUI渲染线程就会被挂起,渲染过程停止;如果JavaScript代码的运行中对DOM树进行了修改,那么DOM的构建需要从新开始;
    (7)如果节点需要依赖其他资源,如(图片,CSS等),便会调用网络模块的资源加载器来加载它们,但它们是异步的,不会阻塞当前DOM树的构建;
    (8)如果遇到的是JavaScript资源URL(没有标记异步),则需要停止当前DOM的构建,直到JavaScript的资源加载并被JavaScript引擎执行后才继续构建DOM;
    (9)对于CSS,CSS解释器会将CSS文件解释成内部表示结构,生成CSS规则树;
    (10)然后合并CSS规则树和DOM树,生成render渲染树;
    (11)最后对render树进行布局和绘制,并将结果通过IO线程传递给Browser控制进程进行显示。

你可能感兴趣的:(从输入URL到页面加载发生了什么?)