前端面试查漏补缺--(十二) 从输入URL到看到页面发生的全过程(含三握手,四挥手详解)

时间 2019-11-06

标签前端面试补缺十二输入 url 看到页面发生全过程握手挥手详解栏目快乐工作繁體版

原文原文链接

前言

本系列最开始是为了本身面试准备的.后来发现整理愈来愈多,差很少有十二万字符,最后决定仍是分享出来给你们.html

为了分享整理出来,花费了本身大量的时间,起码是只本身用的三倍时间.若是喜欢的话,欢迎收藏,关注我!谢谢!前端

文章连接

合集篇:

前端面试查漏补缺--Index篇(12万字符合集) 包含目前已写好的系列其余十几篇文章.后续新增值文章不会再在每篇添加连接,强烈建议议点赞,关注合集篇!!!!,谢谢!~vue

后续更新计划

后续还会继续添加设计模式,前端工程化,项目流程,部署,闭环,vue常考知识点 等内容.若是以为内容不错的话欢迎收藏,关注我!谢谢!web

求一分内推

目前本人也在准备跳槽,但愿各位大佬和HR小姐姐能够内推一份靠谱的武汉前端岗位!邮箱:bupabuku@foxmail.com.谢谢啦!~面试

从输入URL到看到页面发生的全过程

整体来讲分为如下几个过程:算法

1.浏览器的地址栏输入URL并按下回车。数据库

2.浏览器查找当前URL是否存在缓存，并比较缓存是否过时。json

3.DNS解析URL对应的IP。segmentfault

4.根据IP创建TCP链接（三次握手）。设计模式

5.HTTP发起请求。

6.服务器处理请求，浏览器接收HTTP响应。

7.浏览器解析渲染页面。

8.关闭TCP链接（四次挥手）。

1, 输入URL并按下回车。

url通常包含这几个部分.能够顺带提如下知识点

知识点:

协议：主要是HTTP协议，HTTPS协议，FTP协议，FILe协议
域名：定义因特网域名，好比 google.com
端口号：一般默认都是隐藏的 http默认端口号为80 https默认端口号为443
补充: 同源策略 - 在前端进行数据请求时，因为浏览器的同源策略，协议，域名，端口号有一个不一样会存在跨域请求，须要进行跨域处理

2.浏览器查找当前URL是否存在缓存，并比较缓存是否过时。

浏览器首先查询当前URL是否有缓存,有的话,再查询是否过时,没过时则读缓存.过时了则访问web服务器.

知识点: 详细解释能够看本系列的"浏览器缓存"这节.

3.DNS解析URL对应的IP。

解析过程:

1.首先浏览器会查看本身的DNS缓存是否存在.

2.若是没有找到,浏览器会先查找本地hosts文件是否有这个网址映射关系，若是有就调用这个IP地址映射，完成域名解析。

3.若是没有找到,则会在操做系统缓存中查找本地的DNS解析器缓存，若是找到则返回。

4.若是没有找到,则会在路由器缓存中进行查找,若是找到则返回。

5.若是仍是没有找到,则会按ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址.

为何要DNS解析

互联网上每一台计算机的惟一标识是它的IP地址，可是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。因此互联网设计者须要在用户的方便性与可用性方面作一个权衡，这个权衡就是一个网址到IP地址的转换，这个过程就是DNS解析，即实现了网址到IP地址的转换

IP 地址

IP 地址是指互联网协议地址，是 IP Address 的缩写。IP 地址是 IP 协议提供的一种统一的地址格式，它为互联网上的每个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差别。IP 地址是一个 32 位的二进制数，好比 127.0.0.1 为本机 IP。

域名就至关于 IP 地址乔装打扮的假装者，带着一副面具。它的做用就是便于记忆和沟通的一组服务器的地址。用户一般使用主机名或域名来访问对方的计算机，而不是直接经过 IP 地址访问。由于与 IP 地址的一组纯数字相比，用字母配合数字的表示形式来指定计算机名更符合人类的记忆习惯。但要让计算机去理解名称，相对而言就变得困难了。由于计算机更擅长处理一长串数字。为了解决上述的问题，DNS 服务应运而生。

什么是域名解析

DNS 协议提供经过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。DNS 是一个网络服务器，咱们的域名解析简单来讲就是在 DNS 上记录一条信息记录。

例如 baidu.com  220.114.23.56（服务器外网IP地址）80（服务器端口号）
复制代码

4.根据IP创建TCP链接（三次握手）

三次握手的过程:

客户端发送一个syn包:即带有 SYN=1，Seq=x 的数据包到服务器端口，并进入SYN_SENT状态，等待服务器确认；（第一次握手，由浏览器发起，告诉服务器我要发送请求了）
服务器收到syn包，必须确认客户的SYN，同时发回一个带 SYN=1， ACK=x+1， Seq=y 的响应包以示传达确认信息,即SYN+ACK包，此时服务器进入SYN_RECV状态；（第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶忙发送吧）
客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK,即回传一个带 ACK=y+1， Seq=Z 的数据包，表明“握手结束”（第三次握手，由浏览器发送，告诉服务器，我立刻就发了，准备接受吧）

完成TCP链接后开使向服务器进行请求

为啥须要三次握手

谢希仁著《计算机网络》中讲“三次握手”的目的是“为了防止已失效的链接请求报文段忽然又传送到了服务端，于是产生错误”。

5.HTTP发起请求 && 6.服务器处理请求，浏览器接收HTTP响应。

完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。

服务器在收到浏览器发送的HTTP请求以后，会将收到的HTTP报文封装成HTTP的Request对象，并经过不一样的Web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。
综合起来,完整的HTTP请报文通常包括了：通用头部，请求/响应头部，请求/响应体

通用头部

包括以下：

//General 

Request Url: 请求的web服务器地址

Request Method: 请求方式
（Get、POST、OPTIONS、PUT、HEAD、DELETE、CONNECT、TRACE）

Status Code: 请求的返回状态码，如200表明成功

Remote Address: 请求的远程服务器地址（会转为IP）

Referrer Policy: (引用策略)用来监管哪些访问来源信息 (IE暂不支持)
复制代码

请求/响应头部:

经常使用的请求头部（部分）：

Accept: 接收类型，表示浏览器支持的MIME类型
（对标服务端返回的Content-Type）
Accept-Encoding：浏览器支持的压缩类型,如gzip等,超出类型不能接收
Content-Type：客户端发送出去实体内容的类型
Cache-Control: 指定请求和响应遵循的缓存机制，如no-cache
If-Modified-Since：对应服务端的Last-Modified，用来匹配看文件是否变更，只能精确到1s以内，http1.0中
Expires：缓存控制，在这个时间内不会请求，直接使用缓存，http1.0，并且是服务端时间
Max-age：表明资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存，http1.1中
If-None-Match：对应服务端的ETag，用来匹配文件内容是否改变（很是精确），http1.1中
Cookie: 有cookie而且同域访问时会自动带上
Connection: 当浏览器与服务器通讯时对于长链接如何进行处理,如keep-alive
Host：请求的服务器URL
Origin：最初的请求是从哪里发起的（只会精确到端口）,Origin比Referer更尊重隐私
Referer：该页面的来源URL(适用于全部类型的请求，会精确到详细页面地址，csrf拦截经常使用到这个字段)
User-Agent：用户客户端的一些必要信息，如UA头部等

复制代码

经常使用的响应头部（部分）：

Access-Control-Allow-Headers: 服务器端容许的请求Headers
Access-Control-Allow-Methods: 服务器端容许的请求方法
Access-Control-Allow-Origin: 服务器端容许的请求Origin头部（譬如为*）
Content-Type：服务端返回的实体内容的类型
Date：数据从服务器发送的时间
Cache-Control：告诉浏览器或其余客户，什么环境能够安全的缓存文档
Last-Modified：请求资源的最后修改时间
Expires：应该在何时认为文档已通过期,从而再也不缓存它
Max-age：客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效
ETag：请求变量的实体标签的当前值
Set-Cookie：设置和页面关联的cookie，服务器经过这个头部把cookie传给客户端
Keep-Alive：若是客户端有keep-alive，服务端也会有响应（如timeout=38）
Server：服务器的一些相关信息
复制代码

通常来讲，请求头部和响应头部是匹配分析的。

譬如，请求头部的Accept要和响应头部的Content-Type匹配，不然会报错

譬如，跨域请求时，请求头部的Origin要匹配响应头部的Access-Control-Allow-Origin，不然会报跨域错误

譬如，在使用缓存时，请求头部的If-Modified-Since、If-None-Match分别和响应头部的Last-Modified、ETag对应

请求/响应实体:

http请求时，除了头部，还有消息实体，通常来讲

请求实体中会将一些须要的参数都放入进入（用于post请求）。

譬如实体中能够放参数的序列化形式（a=1&b=2这种），或者直接放表单对象（Form Data对象，上传时能够夹杂参数以及文件），等等

而通常响应实体中，就是放服务端须要传给客户端的内容

通常如今的接口请求时，实体中就是对于的信息的json格式，而像页面请求这种，里面就是直接放了一个html字符串，而后浏览器本身解析并渲染。

7.浏览器解析渲染页面

流程简述

浏览器内核拿到内容后，渲染步骤大体能够分为如下几步：

1. 解析HTML，构建DOM树

2. 解析CSS，生成CSS规则树

3. 合并DOM树和CSS规则，生成render树

4. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算

5. 绘制render树（paint），绘制页面像素信息

6. 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上

PS:
reflow：也称做layout，中文叫回流，通常意味着元素的内容、结构、位置或尺寸发生了变化，须要从新计算样式和渲染树，这个过程称为reflow。

repaint：中文重绘，意味着元素发生的改变只是影响了元素的一些外观之类的时候(例如：背景色，边框颜色，文字颜色等)，此时只须要应用新样式绘制这个元素就能够了。

复制代码

1.根据 HTML 解析 DOM 树

根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的全部子节点，再构建下一个兄弟节点。
在读取 HTML 文档，构建 DOM 树的过程当中，若遇到 script 标签，则 DOM 树的构建会暂停，直至脚本执行完毕。

2.根据 CSS 解析生成 CSS 规则树

解析 CSS 规则树时 js 执行将暂停，直至 CSS 规则树就绪。
浏览器在 CSS 规则树生成以前不会进行渲染。

3.结合 DOM 树和 CSS 规则树，生成渲染树

DOM 树和 CSS 规则树所有准备好了之后，浏览器才会开始构建渲染树。
精简 CSS 并能够加快 CSS 规则树的构建，从而加快页面相应速度。

4.根据渲染树计算每个节点的信息（布局）

布局：经过渲染树中渲染对象的信息，计算出每个渲染对象的位置和尺寸
回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就须要倒回去从新渲染。

5.根据计算好的信息绘制页面

绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。
重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引发浏览器的重绘。
回流：某个元素的尺寸发生了变化，则需从新计算渲染树，从新渲染。

8.关闭TCP链接（四次挥手）

经过四次挥手关闭链接(FIN ACK, ACK, FIN ACK, ACK)。

第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。(第一次挥手：由浏览器发起的，发送给服务器，我请求报文发送完了，你准备关闭吧)

第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。(第二次挥手：由服务器发起的，告诉浏览器，我请求报文接受完了，我准备关闭了，你也准备吧)

第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。(第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完了，你准备关闭吧)

第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。(第四次挥手：由浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧)