已公布到 程序员小灰 公号

前言

有人说，如果你懂得浏览器的工作原理，你就能解决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协定，理解三次握手，四次挥手流程，感激浏览，如果你感觉这篇文章对你有帮忙的话，也欢送把它分享给更多的敌人。

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