关于前端:面试官不讲武德一上来就问我Chrome底层原理和HTTP协议万字长文

已公布到 程序员小灰 公号

前言

有人说，如果你懂得浏览器的工作原理，你就能解决 80% 的前端难题。

是的，理解浏览器的工作原理，有助于你的工作；而理解 TCP/IP、HTTP 等网络协议，更是对你将来的职业倒退大有裨益。

上面，我总结了 4 个面试常考的对于浏览器和网络通信的问题，为你从新梳理浏览器，网络通信、页面渲染、JavaScript、浏览器平安等常识，从而让你对整个前端后端体系有全新的意识。

第一问：Chrome 为什么关上一个页面，会有 4 个过程？

学习把握：浏览器中的网络流程，页面渲染过程，JavaScript 执行流程，以及 Web 平安实践。上面开展问题理解多过程架构：

多过程架构的学习

过程和线程的概念混同

如计算来说，单线程就是一个接一个的计算，多线程就是同时解决多个计算。多线程是指程序中蕴含多个执行流，即在一个程序中能够同时运行多个不同的线程来执行不同的工作，就是说容许单个程序创立多个并行执行。

单线程是程序中的一个执行流，每个线程都有本人的专有寄存器(栈指针、程序计数器等)，但代码区是共享的，即不同的线程能够执行同样的函数。

多线程也是程序，所以线程须要占用内存，线程越多占用内存也越多，多线程须要协调和治理，所以须要 CPU 工夫跟踪线程；线程之间对共享资源的拜访会相互影响，必须解决竞用共享资源的问题；线程太多会导致管制太简单。

单线程在程序执行时，所走的程序都是依照间断程序下来的，后面的必须解决好，才会执行前面的。多线程运行就是一个过程内有多个绝对独立的并且实现特定的工作以竞争 CPU 的形式执行，宏观上是并发，实际上是分时执行，只是执行的工夫片较短。

每个正在运行的程序即是过程，至多蕴含一个线程，这个线程叫主线程，它在程序启动时被创立，用于执行 main 函数。只有一个主线程的程序，称为单线程程序。领有多个线程的程序，称为多线程程序。

过程是当一个程序开始运行时，它就是一个过程，过程包含运行中的程序和程序所应用到的内存和系统资源（一个过程又是由多个线程所组成的）

多线程的益处就是能够进步 CPU 的利用率，在多线程程序中，如果一个线程必须期待的时候，CPU 能够运行其它的线程而不是期待，这样能够大大地进步程序的效率。

所以，线程是不能独自存在的，它是由过程来启动和治理的，一个过程就是一个程序的运行实例。线程是依附于过程的，而过程中应用多线程并行处理能晋升运算效率。线程之间共享过程中的数据。当一个过程敞开后，操作系统会回收过程所占用的内存。

目前的多过程架构浏览器 Chrome 包含，1 个浏览器主过程，1 个 GPU 过程，1 个网络过程，多个渲染过程和多个插件过程。

so，关上一个页面，为啥有 4 个过程？因为关上 1 个页面：至多须要 1 个网络过程， 1 个浏览器过程， 1 个 GPU 过程 以及 1 个渲染过程。

尽管多过程模型晋升了浏览器的稳定性、流畅性和安全性，然而带来了更高的资源占用，更简单的体系架构。so，Chrome官网要构建一个更内聚，松耦合，易于保护和扩大的零碎。

第二问：TCP 协定是如何保障页面文件能被残缺送达浏览器的？

对于在网络中，咱们晓得一个文件通常会被拆分为很多数据包来进行传输，而数据包在传输过程中又有很大的可能会失落或者出错，保障页面文件残缺地送达浏览器是有必要的。

上面就这三方面开展形容：

1. 数据包如何送达到主机
2. 主机如何将数据包转交给利用
3. 数据是如何被残缺地送达到应用程序

数据包从主机 A 送到主机 B，数据包上会附加上主机 B 的 IP 地址信息，主机 A 自身的 IP 地址，这些附加的信息会被装进一个 IP 头的数据结构里（蕴含 IP 版本，源 IP 地址，指标 IP 地址，生存工夫等）

这些个别咱们都理解，上面次要阐明 TCP（Transmission Control Protocol），传输控制协议是一种 面向连贯的 ， 牢靠的 ，基于 字节流 的传输层通信协议，在简化的计算机网络 OSI 模型中，它实现第四层传输层所指定的性能。

用户数据报协定（UDP）是同一层内另一个重要的传输协定。

在因特网协定族中，TCP层是位于 IP 层之上的，TCP->IP，应用层之下的中间层，应用层 -> 中间层。不同主机的应用层 之间常常须要 牢靠的，像管道一样的连贯，然而 IP 层不提供这样的流机制，而是提供不牢靠的包进行替换。

TCP为了保障不产生丢包的状况，就给每个包一个序号，同时序号也保障了传送到接收端实体的包的按序接管。接收端实体对已胜利收到的包发回一个相应的确认信息（ACK），如果发送端实体在正当的往返时延（RTT）内未收到确认，那么对应的数据包就被假如为已失落并进行重传。

• 数据在 TCP 层称为流
• 数据分组称为分段

TCP 协定的运作：连贯创立，数据传送，连贯终止。

那你理解什么是 TCP 吗？这一点大部分人应该只会说它是一种协定。

TCP传输控制协议是 TCP/IP，传输控制协议 Internet 协定中的次要协定之一，TCP/IP 是一套通信协议，用于连贯 Internet 以及大多数其余计算机网络上的主机。

协定是一种共同商定的用于执行某件事的格局。对于计算机，最罕用于指一组规定，使计算机可能相互连接并传输数据，称为通信协议。

TCP 是一种面向连贯的协定，它在主机之间建设并保护虚构连贯，直到替换了一条音讯或要在其上运行的应用程序替换的音讯为止。数据包是 TCP/IP 网络上数据传输的最根本单位。

TCP 在传输层上运行，负责保护整个网络上牢靠的端到端通信，IP 是网络层协定，它是传输层正下方的层，在传输层运行的有：UDP(用户数据报协定)，RTP(实时传输协定)，SCTP(流控制传输协定)。

连贯创立

1. TCP 用三次握手过程创立一个连贯

三次握手协定的过程：

a. 客户端 向 服务器端 发送一个 SYN 包，申请一个被动关上。该包携带客户端为这个连贯申请设定的随机数 A 作为音讯列号。

b. 服务器端接管到一个 SYN 包后，把该包放入 SYN 队列中；回送一个 SYN/ACK。ACK 的确认码应为 A +1，SYN/ACK 包自身携带一个随机产生的序号 B。

c. 客户端收到 SYN/ACK 包后，发送一个 ACK 的包，该包的序号被设定为 A +1，而 ACK 的确认码为 B +1。当服务器端收到这个 ACK 包的时候，把申请帧从 SYN 队列中移出，搁置 ACCEPT 队列中。

场景：当服务器端接管到客户端发送过去的 SYN 后，回了 SYN-ACK 后，客户端掉线了，服务器端没有收到客户端回来的 ACK，那这个连贯 就 处于 一个中间状态，没胜利也没失败。

然而，服务器端如果在肯定工夫内没有收到 TCP 会从新发 SYN-ACK。

• 主机收到一个 TCP 包时，用两端的 IP 地址与端口号来标识这个 TCP 包属于哪个 session。
• 应用一张表来存储所有的 session，表中的每条称作 TCB。
• tcb 构造的定义含：连贯应用的源端口，目标端口，目标 ip，序号，应答序号，对方窗口大小，已方窗口大小，tcp 状态，tcp 输出 / 输入队列，应用层输入队列，tcp 的重传无关变量等。
• 服务器端的连贯数量是有限的，只受内存的限度。

数据传送

在每个 TCP 报文段中都有一对 序号和确认号。

TCP 报文发送者称本人的字节流的编号为序号，称接管到对方的字节流编号为确认号。通过应用序号和确认号，TCP 层能够把收到的报文段中的字节按正确的程序交付给应用层。

TCP 协定应用序号标识每端收回的字节程序，从另一端接收数据能够重建程序，无惧传输的包的乱序交付或丢包。

发送确认包 acks，携带接管对方发来的字节流的编号（确认号），通知对方曾经胜利接管的数据流的字节地位。

上图形容数据传输的过程图

数据包构造

上面让咱们来看看数据包结构图：

蕴含：偏移字节，起源连贯端口，目标连贯端口，序列号码，确认号码，校验和，紧急指针等。

• 起源连贯端口，16 位长，辨认发送连贯端口
• 目标连贯端口，16 位长，辨认接管连贯端口
• 序列号（seq,32 位长）
• 确认号（ack,32 位长），冀望收到的数据的开始序列号，也即曾经收到的数据的字节长度加 1
• 材料偏移（4 位长），以 4 字节为单位计算出的数据段开始地址的偏移值。
• 保留，须置 0
• ACK—为 1 示意确认号字段无效
• SYN—为 1 示意这是连贯申请或是连贯承受申请，用于创立连贯和使顺序号同步
• FIN—为 1 示意发送方没有数据要传输了，要求开释连贯
• RST—为 1 示意呈现重大过错。可能须要从新创立 TCP 连贯。还能够用于回绝非法的报文段和回绝连贯申请
• 紧急指针（16 位长）—本报文段中的紧急数据的最初一个字节的序号
• 窗口（WIN，16 位长）—示意从确认号开始，本报文的发送方能够接管的字节数，即接管窗口大小。用于流量管制
• 校验和（Checksum，16 位长）—对整个的 TCP 报文段，包含 TCP 头部和 TCP 数据，以 16 位字进行计算所得。这是一个强制性的字段

记住其中 IP 是把数据包送达目标主机的，数据包送达到主机。那么如何将数据包转交给利用的呢？

UDP 是把数据包送达应用程序的。

UDP 是基于 IP 之上开发能和利用打交道的协定，用户数据包协定，是决定把数据包交给哪个程序的，IP 只负责把数据包传送到对方电脑。

上面看一下 UDP 协定和 TCP 协定在 TCP/IP 体系中的地位：

看完地位，那么上面咱们来简略比照一下 UDP 和 TCP：

UDP: 无连贯；反对一对一，一对多，多对一和多对多交互通信；对应用层交付的报文间接打包；尽最大致力交付，也就是不牢靠；不应用流量管制和拥塞管制；首部开销小，仅 8 字节。

TCP：面向连贯；每一条 TCP 连贯只能有两个端点 EP，只能是一对一通信；面向字节流；牢靠传输，应用流量管制和拥塞管制；首部最小 20 字节，最大 60 字节。

让咱们看看 UDP 和 TCP 首部比照开销：

UDP 最重要的一点就是端口号，因为 UDP 是通过 端口号 把数据包分发给正确的程序，UDP 不能保证数据的可靠性，但传输速度快。

重要的解说是：数据是如何被残缺地送达到应用程序？

TCP 就是把数据残缺地送达应用程序。

TCP 是一种 面向连贯的，牢靠的，基于字节流的传输层通信协议，提供重传机制，引入了数据包排序机制（TCP 头，提供了排序的序列号，用来通过序号重排数据包）。

说到 TCP 连贯，就要说说常面试的TCP/IP 的三次握手，建设连贯；四次挥手，断开连接。

三次握手图：

实现了三次 TCP 握手：

女朋友发给男朋友：“在吗？”
男朋友回复女朋友：“我在！”
女朋友回复男朋友：“我晓得了！”

此时男朋友晓得了。

四次挥手图：

实现四次挥手：

女朋友发给男朋友：“离别吧！”
男朋友回复女朋友：“额？”
男朋友回复女朋友：“认真的吗？”
女朋友回复男朋友：“认真的！”

此时女朋友删除了男朋友的微信。

依照我形容的三次握手和四次挥手，我置信你懂了，哈哈！

第三问：HTTP 申请流程，为什么很多站点第二次关上速度会很快呢？

说到 HTTP 协定，它是建设在 TCP 连贯根底之上的，超文本传输协定，HTTP 是一种用于分布式，合作式和超媒体信息系统的应用层协定，HTTP 是万维网的数据通信的根底。

某人说：要想学好浏览器，就要深刻理解 HTTP。

浏览器是应用 HTTP 协定 作为应用层协定，用来封装申请的文本信息，应用 TCP/IP 作传输层协定将它发到网络上(http 的内容是通过 TCP 的传输数据阶段来实现的)。

• 域名和 IP 地址 - 映射关系，域名映射为 IP 的零碎叫作“域名零碎”，简称DNS。

域名零碎 DNS 是互联网的一项服务。它作为将域名和 IP 地址互相映射的一个分布式数据库，可能使人更不便地拜访互联网。

域名如：dadaqianduan.cn (URL 地址)

IP 地址为：xx.233.xxs.12 (拜访)

首先，第一步浏览器会申请 DNS 返回域名对应的 IP，浏览器还提供了 DNS 数据缓存服务，如果某个域名曾经被解析过了，浏览器就会缓存解析的构造，下次查问时间接应用，缩小一次网络申请。拿到 IP 后，就须要获取端口号，如果 url 没有明确指出端口号，HTTP 协定默认是 80 端口。

到这一步明确的清清楚楚了，IP 和端口号。那么让我说说HTTP 协定的形容，这里补充是为了更好的理解：

HTTP 是一个客户端和服务器端之间申请和应答的规范，通常应用 TCP 协定，通过应用网页浏览器，网咯爬虫或者其它的工具，客户端发动一个 HTTP 申请到服务器上指定端口，默认端口为 80。

应答的服务器上存储着一些资源，如 HTML 文件和图像等，源服务器；（客户端称为用户代理程序），用户代理和源服务器两头可能存在多个 ” 中间层 ”，比方 代理服务器，网关，隧道 等。

so，HTTP 服务器在端口监听客户端的申请，一旦收到申请，服务器会向客户端返回一个状态，如：”HTTP/1.1 200 OK“, 以及返回的内容，如申请的文件，谬误音讯，或者其它音讯。

到这里我先答复一下：浏览器发动 HTTP 申请流程：1. 构建申请(构建申请行信息)；2. 查找缓存（浏览器缓存是一种在本地保留资源正本，以供下次申请时间接应用的技术）；3. 筹备 IP 地址和端口；4. 期待 TCP 队列；5. 建设 TCP 连贯；6. 发送 HTTP 申请。

而后服务器解决申请，服务器返回申请，断开连接。

其实端口和 IP 地址筹备好后，不肯定间接建设 TCP 连贯的，因为在 Chrome 中有个机制，就是 同一个域名同时最多只能建设 6 个 TCP 连贯，如果在同一个域名下同时有 10 个申请产生，那么其中就有 4 个申请进入排队期待状态。

如果申请数量少于 6 个，就间接进入建设 TCP 连贯。

发送 HTTP 申请

下面都讲好了初步，那么浏览器是如何发送申请信息给服务器的呢？

来一张 post 申请抓包图：

来张浏览器发送申请到服务器端接管返回的过程：

形容：用户在浏览器输出申请的 url 地址，浏览器外部的外围代码会将这个 url 进行拆分解析，最终将 domain 发送到 DNS 服务器上，DNS 服务器会依据 domain 去查问相干的对应的 ip 地址，从而将 IP 地址返回给浏览器。

浏览器有了 ip 地址后就会晓得这个申请是发送到哪里的。通过（局域网，交换机，路由器，主干网咯）达到服务器。

对于常常理解 HTTP 的敌人应该理解上述表白，那接下来看看 HTTP 申请数据格式（可看上图 -> 来一张 post 申请抓包图）：

HTTP 申请数据格式：

浏览器首先向服务器发送申请行（申请办法；申请 URI；HTTP 协定版本）- 来通知服务器浏览器须要什么资源，罕用申请办法为 GET，申请头（用来通知一些浏览器的根底信息 - 浏览器所应用的操作系统、浏览器内核等信息，以及以后申请的域名信息、浏览器端的 Cookie 信息等），申请体（如罕用的 POST，用于发送一些数据给服务器，筹备的数据是通过申请体来发送的）。

服务器解决 HTTP 申请流程：

1. 返回申请；
2. 断开连接；
3. 重定向。

查看返回申请数据，-i，获取返回 响应行（蕴含协定版本和状态码），响应头，响应体数据。

个别状况下，服务器向客户端返回了申请数据，就要敞开 TCP 连贯。但其头信息中退出了该字段： Connection: Keep-Alive，让 TCP 连贯依然放弃连贯，能够持续同一个 TCP 连贯发送申请，能够省下次申请时须要建设连贯的工夫。

其实个别返回申请，断开连接就没了，但有一种就是你在浏览器中关上的 url，发现最终的页面地址不一样，那是因为有一个重定向操作。

如图：- I 示意只须要获取响应头和响应行数据

• location 字段时重定向的地址；

状态码 301 和 302 的区别

301 Moved Permanently 被申请的资源已永恒挪动到新地位，并且未来任何对此资源的援用都应该应用本响应返回的若干个 URI 之一。如果可能，领有链接编辑性能的客户端该当主动把申请的地址批改为从服务器反馈回来的地址。除非额定指定，否则这个响应也是可缓存的。

302 Found 申请的资源当初长期从不同的 URI 响应申请。因为这样的重定向是长期的，客户端该当持续向原有地址发送当前的申请。只有在 Cache-Control 或 Expires 中进行了指定的状况下，这个响应才是可缓存的。

字面上的区别：301 是永恒重定向，而 302 是长期重定向

302 重定向是临时的重定向，搜索引擎会抓取新的内容而保留旧的地址，因为服务器返回 302，所以搜寻搜索引擎认为新的网址是临时的。

301 重定向是永恒的重定向，搜索引擎在抓取新的内容的同时也将旧的网址替换为了重定向之后的网址。

接下来，让咱们梳理一下 HTTP 版本号，这一点，我置信在学习的过程中，大家也是想晓得的。

HTTP/0.9：

已过期。仅反对申请形式 GET，并且仅能申请拜访 HTML 格局的资源，没有在通信中指定版本号，且不反对申请头。

HTTP/1.0：

这是第一个在通信中指定版本号的 HTTP 协定版本，减少了申请形式 POST 和 HEAD；不再局限于 0.9 版本的 HTML 格局，依据 Content-Type 能够反对多种数据格式；包含状态码（status code）、多字符集反对、多局部发送（multi-part type）、权限（authorization）、缓存（cache）、内容编码（content encoding）等。

1.0 版本: 每次 TCP 连贯只能发送一个申请，当服务器响应后就会敞开这次连贯，下一个申请须要再次建设 TCP 连贯.

HTTP/1.1：

默认采纳继续连贯(TCP 连贯默认不敞开，能够被多个申请复用，不必申明Connection: keep-alive)，能很好地配合代理服务器工作。

一个 TCP 连贯能够容许多个 HTTP 申请

减少了 管道机制，在同一个 TCP 连贯里，容许多个申请同时发送，减少了并发性，进一步改善了 HTTP 协定的效率

1.1 版规定能够不应用 Content-Length 字段，而应用 ”分块传输编码 “- 只有申请或回应的头信息有Transfer-Encoding 字段，就表明回应将由数量未定的数据块组成。Transfer-Encoding: chunked

新增了申请形式 PUT、PATCH、OPTIONS、DELETE 等

• 分块传输编码：是超文本传输协定中的一种数据传输机制，容许 HTTP 由网页服务器发送给客户端利用的数据能够分成多个局部，分块传输编码只在 HTTP 协定 1.1 版本（HTTP/1.1）中提供。

同一个 TCP 连贯里，所有的数据通信是按秩序进行的。回应慢，会有许多申请排队，造成 ” 队头梗塞 ”。

HTTP/2：

于 2015 年 5 月作为互联网规范正式公布。加了双工模式，即不仅客户端可能同时发送多个申请，服务端也能同时解决多个申请，解决了 队头梗塞 的问题。

应用了多路复用的技术，做到同一个连贯并发解决多个申请，而且并发申请的数量比 HTTP1.1 大了好几个数量级。

减少服务器推送的性能，不经申请服务端被动向客户端发送数据。

HTTP1.1 相较于 HTTP1.0 协定区别：

1. 缓存解决
2. 带宽优化及网络连接的应用
3. 谬误告诉的治理
4. 音讯在网络中的发送
5. 互联网地址的保护
6. 安全性及完整性

最初的最初，说第二次站点的关上为啥速度快？

起因是第一次加载页面过程中，缓存了一些耗时的数据，次要缓存有 DNS 缓存 和 页面资源缓存 两个方面。

• 浏览器缓存

当第一次发送申请，服务器返回 HTTP 响应头给浏览器时，浏览器会通过响应头中 CacheControl 字段来设置是否缓存资源。通常还需设置一个缓存工夫，Cache-Control:Max-age=2000，在缓存没有过期的状况下，在发送申请申请该资源，会间接返回缓存中的资源给浏览器。如果缓存过期，浏览器则会持续发动网络申请。

盲点：

第四问：输出 URL 到页面展现产生了什么？

简略地说一下就是：

• 浏览器主过程提交 url 给网络过程
• 网络过程申请服务器，返回响应头行体，判断是否须要重定向
• 网络过程将页面类型的响应资源提交给渲染过程
• 渲染过程渲染完结，加载结束

分步骤简略说一下就是：

1. 首先是域名解析
2. 建设 TCP 链接
3. 建设 Http 申请
4. 服务器解决 Http 申请
5. 敞开 TCP 连贯
6. 浏览器解析资源
7. 浏览器渲染页面

在我的 GitHub 上也讲过：
从浏览器地址栏输出 url 到显示页面的步骤
https://github.com/webVueBlog…

本篇文章的最初，留给你一个面试题，就是下面说到的：“从输出 URL 到页面展现，这两头发送了什么？”这个问题，如果面试你，你又如何答复呢？

如果你作为面试官，又该考哪些点呢？

浏览材料

浏览器工作原理与实际
https://time.geekbang.org/col…

总结

以上就是明天要讲的内容，本文简略介绍了 Chrome 流程，梳理了 TCP 与 HTTP 协定，理解三次握手，四次挥手流程，感激浏览，如果你感觉这篇文章对你有帮忙的话，也欢送把它分享给更多的敌人。

喜爱本文的敌人，欢送关注，收看更多精彩内容