浏览器的工作原理：输入URL后，Web页面是如何呈现的？

重学JavaScript01 ----- 浏览器工作原理

---

---

前言

面试官常常会问这些问题：

大家有没有深入思考过

我们在网页浏览器的地址栏输入URL后，Web页面是如何呈现的？

JavaScript代码，在浏览器中又是如何被执行的？

本篇文章会详细解答这两个问题，

一、 网络模型

首先我们需要了解下OSI模型，网络模型

应用层：

应用层决定了向用户提供应用服务时通信的活动。

浏览器会先使用dns解析域名服务，把域名变成ip地址，再通过http协议生成针对目标WEB服务器的HTTP请求报文（DNS和HTTP协议它们都在应用层）。

传输层：

传输层对上层应用层提供处于网络连接中的两台计算机之间的数据传输。在传输层有两个性质不同的协议：TCP和UDP协议

TCP：传输控制协议，面向报文传输，可靠的传输，面向连接

UDP:用户数据报协议，面向字节流传输，不可靠的传输，无连接。

TCP协议的运行流程：

为了方便通信，TCP协议会进一步将HTTP请求报文分割成多个报文段

TCP协议会按序号把HTTP请求报文分为多个报文段

再把每个报文段可靠的传给对方，TCP不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。（三次握手策略， TCP标志：SYN和ACK）

发送端首先发送一个带SYNC标志的数据包给对方，接收端收到后回传一个SYN/ACK标志的数据包以表示收到确认信息。最后发送端再回传一个ACK标志代表握手结束。

如果握手过程某个阶段莫名其妙的中断了，TCP协议会再次以相同顺序发送相同数据包。重点：（这也是TCP协议的缺点之一，每次请求每个请求都要反复握手导致建立耗时长，如果是HTTPS的加密网站，那么还需要经过TLS四次握手，用户等待的越长体验越差）

网络层：

网络层用于处理在网络上的流动数据包。数据包是网络传输最小的数据单位。该层规定了怎样的路径到达对方的计算机，并把数据包传送给对方。

IP协议：

IP协议位于网络层。IP协议不是IP地址的意思，它的作用是把各种数据包传送给对方。简单来说，IP协议会给用户分配最快的路径，经过各个代理服务器中转，最后把数据包传送到对方的服务器上。

数据链路层：

用来处理网络的硬件部分。物理寻址，同时将原始比特流转换成逻辑传输线路。

物理层：

机械、电子、定时接口通信信道上的原始比特流传输。

二、实际案例：

我们以访问百度举例，看一下浏览器是怎么运行的：

1. 通过DNS服务解析出百度www.baidu.com所对应的ip地址

2. 生成针对百度服务器IP地址的HTTP请求报文

3. 通过TCP协议将报文请求按序号分割成多个报文段，通过三次握手确认每个报文段都可靠的发送到了百度服务器上

4. 通过IP协议搜索对方的地址，一边中转一边传送数据包

5. 通过TCP协议从对方那里收到报文段，通过序号重组原来的请求报文段

6. 通过HTTP协议对Web服务器请求的内容处理，找到相应的资源

7. 请求结果确认，同样的利用TCP/IP协议原理进行原路返回回传数据

8. 用户的服务器接收到百度传回来的资源进行渲染，首先浏览器会加载html资源（但是在这个执行过程中，HTML解析的时候遇到了JavaScript标签和link标签中的js和css资源，应该怎么办呢？）

9. 停止解析HTML，而去加载和执行JavaScript代码和CSS代码（那么JS代码又是由谁来执行呢？）

   解析过程：
   

10. JavaScript V8引擎解析js代码（Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出）

11. 浏览器渲染完页面后，关闭TCP连接，4次挥手

第十步：v8引擎的执行细节，会在后续系列中更新