一个页面从输入URL到加载显示完成，发生了什么？

Posted 2020-11-22 baimeishaoxia

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个页面从输入URL到加载显示完成，发生了什么？相关的知识，希望对你有一定的参考价值。

面试经典题——URL加载

一、涉及基本知识点：

1. 计算机网络

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

2. 浏览器机制

（1）进程和线程的概念

进程是CPU资源分配的最小单位，是能拥有资源和独立运行的最小单位；
线程是CPU调度的最小单位，线程是建立在进程的基础上的一次程序运行单位，一个进程可以拥有多个线程；
通俗的讲：进程是一个工厂，工厂有它独立的资源，工厂之间相互独立->进程之间相互独立，线程是工厂中的工人，多个工人之间可以协作完成任务，工厂内有一个或多个工人，工人之间共享空间。

（2）多进程的浏览器

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

浏览器主要进程：

Browser进程：浏览器的主进程，负责协调、主控，只有一个，作用：
- 负责浏览器界面的显示、与用户交互（如前进、后退等）
- 负责各个页面的管理，创建和销毁其他进程；
- 将Renderer进程得到的内存中的Bitmap绘制到用户界面上
- 网络资源的管理和下载等
第三方插件进程：每种类型的插件对应一个进程，仅当该插件使用时才创建；
GPU进程：最多一个，用于3D绘制等；
浏览器渲染进程（Renderer进程、浏览器内核、内部是多线程）：
- 默认没打开一个tab页面，就会启动一个Renderer进程；
- 负责页面的渲染，脚本的执行，事件的处理。

浏览器多进程的优势
1. 避免单个page crash影响整个浏览器；
2. 避免第三方插件crash影响整个浏览器
3. 多进程充分利用多核优势；
4. 方便使用沙盒模型隔离插件等进程，提高浏览器稳定性

简单点理解：如果浏览器是单进程，那么某个tab页或第三方插件崩溃了，就会导致整个浏览器崩溃，体验度极差，不过多进程内存消耗会更大，有点用空间换时间。

浏览器内核（渲染进程）

浏览器渲染进程内部是多线程，包含主要线程有：

1.GUI渲染线程：

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

2.JS引擎线程：

JS内核，负责处理javascript脚本程序（V8引擎）
负责解析JavaScript脚本，运行代码；
JS引擎一直等待着任务队列中的任务到来，然后加以处理，一个tab页面（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序；
注意：由于GUI渲染线程和JS引擎线程是互斥的，所以如果JS程序运行时间过长，这样会导致页面渲染不连贯，导致页面渲染加载阻塞；

3.事件触发线程：

归属于浏览器，而不是JS引擎，用来控制事件循环；
当JS引擎执行代码块如setTimeOut时（也可以来自浏览器内核的其他线程，如鼠标单击事件、AJAX异步请求等），会将对应的任务添加到事件线程中；
当对应的事件符合触发条件被触发时，该线程就会把事件添加到JS的待处理队列的队尾，等待JS引擎的处理；
注意：由于JS的单线程的关系所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）。

4.定时触发器线程：

setTimeOut与setInterval所在的线程；
浏览器的定时计数器并不是由JavaScript引擎计数的，（因为JavaScript是单线程，如果处于阻塞状态就会影响计时的准确）因此通过单独的线程来计时并触发定时（计时完毕后，添加到事件队列，等待JS引擎空闲时执行）

5.异步http请求线程：

在XMLHttpRequest在连接后是通过浏览器新开一个线程请求的
将检测到状态变更时，如果设置有回调函数，异步线程就将产生状态变更事件，将这个回调在放到事件队列中，再由JavaScript引擎执行。