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

面试经典题——URL加载

1、涉及基本知识点：

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查询工做；
      • 递归服务器有本身的缓存，因此这个查询过程一般在这里完成，并将信息还回给用户；

   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地址和服务器进行链接创建。

4. TCPIP请求

   • http的本质就是TCPIP请求；
   • 须要经历3次握手创建链接，4次挥手断开链接；
   • TCP将http长报文划分为短报文，经过三次握手与服务器端创建链接，进行可靠传输。

   • 三次握手：

     • 客户端：你是XXX服务端吗？
     • 服务端： 我是XXX服务端，你是客户端吗？
     • 客服端： 是的，我是客户端
     • 创建链接成功后，接下来就能够进行正式的传输数据。

   • 四次挥手断开链接

     • 主动方：我已经关闭了向你那边的信息发送通道，只能被动接受信息了；
     • 被动方： 收到通道关闭的信息；
     • 被动方： 我如今也关闭了向你那边发送信息的通道
     • 主动方： 左后收到信息，链接断开，以后双方没法通讯

5. TCP/IP的并发限制：

   • 浏览器对同一个域名下并发的TCP链接是有限制的（2-10个不等）
   • 并且在http1.0中每每一个资源的下载就须要一个tcp/ip请求

---

2. 浏览器机制

（1）进程和线程的概念

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

（2）多进程的浏览器

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

• 浏览器主要进程：

1. Browser进程：浏览器的主进程，负责协调、主控，只有一个，做用：

   • 负责浏览器界面的显示、与用户交互（如前进、后退等）
   • 负责各个页面的管理，建立和销毁其余进程；
   • 将Renderer进程获得的内存中的Bitmap绘制到用户界面上
   • 网络资源的管理和下载等
2. 第三方插件进程： 每种类型的插件对应一个进程，仅当该插件使用时才建立；
3. GPU进程： 最多一个，用于3D绘制等；

4. 浏览器渲染进程（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引擎执行。

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

• 简洁版：

  • 浏览器根据请求的URL交给DNS域名解析，找到真实的IP，向服务器发起请求；
  • 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JavaScript等）；
  • 浏览器对加载到的资源（HTML、CSS、JavaScript等）进行语法解析，构建相应的内部数据结构（DOM树、CSS树、render树等）；
  • 载入解析到的资源文件、渲染页面、完成。

• 详细版：

  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控制进程进行显示。