前端面试 - 网络部分总结（总结ing力求完备）

get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过?连接，通过&进行参数分割。psot将参数存放在HTTP的包体内;
get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制;, 即使用Get请求发送数据量小,Post请求发送数据量大
get回退不会有影响，post回退会重新进行提交;
get请求可以被缓存，post不可以被缓存;
get请求只URL编码，post支持多种编码方式;
get只支持ASCII字符，post提交没有字符类型限制;
get请求的记录会留在历史记录中，post请求不会留在历史记录;

安全性：使用Get请求安全性低，会被缓存，而Post请求反之，post易于防止CSRF

使用场景：get一般用于查询操作，post一般用于用户提交操作

5. HTTP的请求报文和响应报文包含哪些部分？

请求报文
1. 请求行，包含请求方法、URL、HTTP协议版本，它们之间用空格分隔（比如GET /data/info.html HTTP/1.1）
2. 请求首部字段
3. 空行：告诉服务器请求头部到此为止
4. 请求内容实体：若方法是GET，此项为空；若方法是POST，此项放置要提交的数据
响应报文
1. 响应（状态）行，包含HTTP协议版本、状态码及其描述，它们之间用空格分隔
2. 响应首部字段
3. 响应内容实体：如果请求纯数据就返回纯数据，请求HTML页面就返回HTML代码，请求JS就返回JS代码

6. HTTP状态码

2xx - 表示成功处理请求，如200
3xx - 需要重定向，浏览器直接跳转，如301（永久重定向） 302（临时重定向） 304（资源未改变）
4xx - 客户端请求错误，如404（请求地址有误） 403（客户端没有权限）
5xx - 服务器端有误

7. 什么是HTTP持久连接？

在HTTP1.0中，当建立连接后，客户端发送一个请求，服务器端返回一个信息后就关闭连接，下次请求时又要建立连接
在HTTP1.1中，默认使用持久连接，只要客户端或服务端没有明确指出断开TCP连接，就一直保持连接，可以多次发送HTTP请求

8. 什么是HTTP管线化？

HTTP管线化是HTTP1.1协议支持的机制，管线化后，请求和响应不再是依次交替的，可以一次性发送多个请求，并一次性接收多个响应
只有GET与HEAD请求可以进行管线化，POST有限制
初次创建连接时不应该启动管线机制，因为服务器不一定支持该协议

9. HTTP和HTTPS区别是什么

HTTP的默认端口是80，HTTPS的默认端口是443
HTTP传输采用明文不加密的方式；HTTPS传输采用密钥加密的方式
HTTP不验证通信方身份，无法验证报文完整性
而HTTPS是HTTP + 加密处理 + 认证 + 完整性保护

10. 对称加密是什么？

对称加密指：信息的发送方和接收方使用同一个密钥去加密和解密数据
特点：算法公开、加密和解密速度快，适合于对大数据量进行加密
加密过程：明文 + 加密算法 + 密钥 = 密文
解密过程：密文 + 加密算法 + 密钥 = 明文
缺点：由于对称加密的算法是公开的，所以一旦密钥被泄露，那么密文就很容易被破解

11. 非对称加密是什么？

非对称加密指：使用一对密钥进行加密，即公钥和私钥，私钥自己保存，公钥公开
被公钥加密过的密文只能被私钥解密，被私钥加密过的密文只能被公钥解密
缺点：加密和解密花费时间长、速度慢，只适合对少量数据进行加密

12. HTTPS的通信过程

HTTPS协议 = HTTP协议 + SSL/TLS协议
在HTTPS数据传输的过程中，需要用SSL/TLS对数据进行加密和解密，需要用HTTP对加密后的数据进行传输
HTTPS为了兼顾安全与效率，同时使用了对称加密和非对称加密
对数据进行对称加密，而对称加密所要使用的密钥通过非对称加密传输到服务器端

（SSL安全套接字协议层，SSL是基于HTTP之下TCP之上的一个协议层，是基于HTTP标准并对TCP传输数据时进行加密，TLS（传输层安全）是更为安全的升级版 SSL。TLS/SSL是一种加密通道的规范，它利用对称加密、公私钥不对称加密及其密钥交换算法，CA系统进行加密且可信任的信息传输）

13. HTTP浏览器缓存

缓存机制无处不在，有客户端缓存，服务端缓存，代理服务器缓存等。在HTTP中具有缓存功能的是浏览器缓存。我们认为浏览器存在一个缓存数据库，用于储存一些不经常变化的静态文件（图片、css、js等）。我们将缓存分为强制缓存和协商缓存。

强制缓存当缓存数据库中已有所请求的数据时。客户端直接从缓存数据库中获取数据。当缓存数据库中没有所请求的数据时，客户端的才会从服务端获取数据。
协商缓存又称对比缓存，客户端会先从缓存数据库中获取到一个缓存数据的标识，得到标识后请求服务端验证是否失效（新鲜），如果没有失效服务端会返回304，此时客户端直接从缓存中获取所请求的数据，如果标识失效，服务端会返回更新后的数据。

缓存的方案：我们知道浏览器和服务器进行交互的时候会发送一些请求数据和响应数据，我们称之为HTTP报文。报文中包含首部header和主体部分body。与缓存相关的规则信息就包含在header中。boby中的内容是HTTP请求真正要传输的部分。

参考链接：https://juejin.im/post/5a1d4e546fb9a0450f21af23

二、TCP和UDP

14. 什么是TCP？

TCP即传输控制协议
TCP协议是面向连接的，可靠的，基于字节流的传输协议
在基于 TCP 进行通信时，通信双方需要先建立一个 TCP 连接，建立连接需要经过三次握手，断开连接的时候需要经过四次挥手

15. 三次握手

（1）第一次握手：客户端发送一个SYN=1的包表示请求连接，以及初始序号X，保存在包头的数据序号字段里

客户端进入SYN-SENT状态

（2）第二次握手：服务端发回确认包应答。即SYN和ACK标志位均为1，同时确认序号设置为X+1，自身的数据序号设置为Y

服务端进入SYN-RECEIVED状态

（3）第三次握手：客户端再次发送确认包，ACK=1，同时确认序号设置为Y+1，数据序号设置为X+1

客户端发送后进入ESTABLISHED状态，服务端收到后也进入ESTABLISHED状态

16. 为什么不用两次握手？

为了防止已经失效的连接请求报文仍然使服务端建立起连接
假设客户端发送的第一个请求连接没有丢失，但被滞留的时间太长，由于客户端迟迟没有收到确认报文，以为服务器没收到，重新发送报文
而现在第一个请求到达服务端，虽然已经报废了，但仍然使服务端建立起连接
如果采用三次握手，就算那一次失效的报文传到了服务端，服务端收到并回复了确认报文，但客户端不会再发出确认，服务器收不到确认，就不会建立连接

17. 四次挥手（四次挥手都设置ACK=1）

（1）第一次挥手：客户端发送FIN=1的包，请求释放连接，并设置数据序号为X，确认序号为Y

客户端进入FIN_WAIT状态

（2）第二次挥手：服务端发回确认包应答，同时设置确认序号为X+1，数据序号为Y

服务端进入CLOSE_WAIT状态

（3）第三次挥手：服务端发送FIN=1的包，请求释放连接，并设置数据序号为Z，确认序号为X+1

服务端进入LAST-ACK状态

（4）第四次挥手：客户端发回确认包应答，同时设置数据序号为X+1，确认序号为Z+1

客户端发回后，进入TIME-WAIT状态，该状态持续2MSL后，如果没有收到服务端的重发请求，就进入CLOSED状态
当服务端收到确认包应答后，也进入CLOSED状态

18. 为什么三次握手四次挥手

建立连接的时候，服务端在LISTEN状态下，收到建立连接请求的SYN报文后，把ACK和SYN放在一个报文里发送给客户端
而关闭连接时，服务器收到对方的FIN报文时，仅仅表示对方不再发送数据了但是还能接收数据，而自己也未必把全部数据都发送给对方了

19. TCP中的流量控制和拥塞控制

流量控制主要针对的是端到端传输中控制流量大小并保证传输可靠性（未收到ack就不滑动）。流量控制往往是指点对点通信量的控制，所要做的是抑制发送端发送数据的速率。
拥塞控制主要是一个全局性过程，涉及到所有主机，路由器，以及与降低网络传输性能有关的所有因素。防止过多的数据注入到网络中。如果有发生丢包则通过拥塞控制减小窗口，确定出合适(慢启动拥塞避免快重传快恢复)的拥塞窗口（增性加乘性减）。

20. 什么是UDP？

UDP又叫用户数据包协议
UDP是一个无连接的、不可靠的、基于数据报的传输协议
UDP只是报文的搬运工，不会对报文进行任何拆分和拼装

21. TCP和UDP区别

传输控制协议 TCP（Transmisson Control Protocol）--提供面向连接的，可靠的数据传输服务。
用户数据协议 UDP（User Datagram Protocol）--提供无连接的，尽最大努力的数据传输服务（不保证数据传输的可靠性）
TCP是面向连接的，UDP是无连接的；
TCP是可靠的，UDP不可靠；
TCP只支持点对点通信，UDP支持一对一、一对多、多对一、多对多；
TCP是面向字节流的，UDP是面向报文的；

22. TCP相比UDP为什么是可靠的

（1）确认和重传机制 建立连接时三次握手同步双方的“序列号 + 确认号 + 窗口大小信息”，是确认重传、流控的基础；传输过程中，如果Checksum校验失败、丢包或延时，发送端重传
（2）数据排序 TCP有专门的序列号SN字段，可提供数据re-order
（3）流量控制 窗口和计时器的使用。TCP窗口中会指明双方能够发送接收的最大数据量
（4）拥塞控制 TCP的拥塞控制由4个核心算法组成。（“慢启动”（Slow Start）“拥塞避免”（Congestion avoidance）“快速重传 ”（Fast Retransmit）“快速恢复”（Fast Recovery））

23. TCP和UDP的应用场景

TCP：当对网络通讯质量有要求的时候，比如：整个数据要准确无误的传递给对方，这往往用于一些要求可靠的应用，比如HTTP、HTTPS、FTP等传输文件的协议，POP、SMTP等邮件传输的协议。
在日常生活中，常见使用TCP协议的应用如：浏览器，用的HTTP；FlashFXP，用的FTP；Outlook，用的POP、SMTP；Putty，用的Telnet、SSH；QQ文件传输

UDP：当强调传输性能而不是传输的完整性时，要求网络通讯速度能尽量的快。如：QQ语音 QQ视频等。

24. TCP对应的协议和UDP对应的协议

TCP对应的协议：FTP文件传输协议、Telnet用于远程登陆的端口、SMTP邮件传送协议、HTTP从Web服务器传输超文本到本地浏览器的传送协议
UDP对应的协议：DNS域名解析服务、SNMP简单网络管理协议，、TFTP简单文件传输协议

三、前端存储

25. 什么是cookie

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）一个cookie就是存储在用户主机浏览器中的一小段文本文件。Cookie是一段加密的数据，存储在客户端，为了让网站或者服务器用来识别用户身份和读取用户相关信息，Cookie是由网站服务器生成后发送给客户端的。

当我们访问网站时，浏览器会发送一个HTTP请求到服务器
服务器会发送一个HTTP响应到浏览器，通过设置set-cookie这个响应头，将cookie信息返回给浏览器
浏览器将cookie信息保存在本地，下次访问网站时，发送HTTP请求会携带之前的cookie
服务器从收到的cookie中识别用户身份，从而保证返回的数据属于该用户
cookie是键值对，可以设置多个

Cookie 主要用于以下三个方面：

会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）；
个性化设置（如用户自定义设置、主题等）；
浏览器行为跟踪（如跟踪分析用户行为等）。

Cookie 的特点：

Cookie 的大小受限，一般为 4 KB；
同一个域名下存放 Cookie 的个数是有限制的，不同浏览器的个数不一样，一般为 20 个；
Cookie 支持设置过期时间，当过期时自动销毁；
每次发起同域下的 HTTP 请求时，都会携带当前域名下的 Cookie；
支持设置为 HttpOnly，防止 Cookie 被客户端的 JavaScript 访问。

26. 什么是session

存放在服务器中，一种用来存放用户数据的类似Hash表的结构
浏览器第一次发送HTTP请求时，服务器自动生成Hash表和sessionID来唯一标识这个Hash表，并将sessionID放在响应的cookie中发送到浏览器
浏览器第二次发送请求时，会将前一次收到的sessionID随着cookie发送到服务器，服务器提取sessionID，找到这个用户的Hash表
当用户在应用程序的web页面间跳转时，存储在session对象中的变量不会丢失，而是在整个用户会话中一直存在下去
session依赖于cookie，因为sessionID是放在cookie中的

27. cookie与session的区别

cookie存在客户端中，session存在服务端中
cookie在客户端中存放，容易伪造，不如session安全
session会消耗大量服务器资源，cookie在每次HTTP请求中都会带上，影响网络性能
域的支持范围不一样，比方说a.com的Cookie在a.com下都能用，而www.a.com的session在api.a.com下都不能用

28. 什么是localStorage

一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。它是采用键值对的方式存储数据，按域名将数据分别保存到对应数据库文件里。相比 Cookie 来说，它能保存更大的数据。

localStorage 的特点：

大小限制为 5MB ~10MB；
在同源的所有标签页和窗口之间共享数据；
数据仅保存在客户端，不与服务器进行通信；
数据持久存在且不会过期，重启浏览器后仍然存在；
对数据的操作是同步的。

29. 什么是sessionStorage

与服务端的 session 类似，sessionStorage 是一种会话级别的缓存，关闭浏览器时数据会被清除。需要注意的是 sessionStorage 的作用域是窗口级别的，也就是说不同窗口之间保存的 sessionStorage 数据是不能共享的。

sessionStorage 的特点：

sessionStorage 的数据只存在于当前浏览器的标签页；
数据在页面刷新后依然存在，但在关闭浏览器标签页之后数据就会被清除；
与 localStorage 拥有统一的 API 接口；
对数据的操作是同步的。

30. 描述cookie localStorage区别

（1）容量 Cookie存储大小最大为4KB，而 localStorage sessionStorage 最大可存5M

（2）API易用性 Cookie只可用document.cookie=’...’来修改; localStorage sessionStorage有俩个setItem getItem简单易用API

（3）是否跟随http请求发送出去 Cookie当HTTP请求时需要发送到服务器端； localStorage sessionStorage不会随着http请求被发送出去

31. localStorage和sessionStorage区别

localStorage和sessionStorage都是window对象提供的全局属性，用途都是在浏览器中存储key/value对的数据。
从使用的角度来看，两者的唯一区别在于时效性。
sessionStorage在关闭窗口或标签页之后将会删除这些数据。
而localStorage则没有这样的特性，任何时候都可以使用，除非手动删除。
如果你想在浏览器窗口关闭后还保留数据，请使用localStorage。
如果你是想用于临时保存同一窗口（或标签页）的数据，请使用sessionStorage。

32. 什么是Web SQL

Web SQL 数据库 API 实际上不是 HTML5 规范的一部分，而是一个单独的规范，它引入了一组 API 来使用 SQL 来操作客户端数据库。需要注意的是，HTML5 已经放弃 Web SQL 数据库。

Web SQL Database 规范中定义的三个核心方法：

openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象；
transaction：这个方法允许我们根据情况控制事务的提交或回滚；
executeSql：这个方法用于执行真实的 SQL 语句。

Web SQL 的特点（相比 Cookie、localStorage 与 sessionStorage）：

Web SQL 能方便进行对象存储；
Web SQL 支持事务，能方便地进行数据查询和数据处理操作。

33. 什么是indexedDB

IndexedDB 是一种底层 API，用于客户端存储大量结构化数据，包括文件、二进制大型对象。该 API 使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太好用。IndexedDB 提供了一个解决方案。

IndexedDB 的特点：

存储空间大：存储空间可以达到几百兆甚至更多；
支持二进制存储：它不仅可以存储字符串，而且还可以存储二进制数据；
IndexedDB 有同源限制，每一个数据库只能在自身域名下能访问，不能跨域名访问；
支持事务型：IndexedDB 执行的操作会按照事务来分组的，在一个事务中，要么所有的操作都成功，要么所有的操作都失败；
键值对存储：IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以 “键值对” 的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
数据操作是异步的：使用 IndexedDB 执行的操作是异步执行的，以免阻塞应用程序。

参考链接：https://mp.weixin.qq.com/s/aSsHeIDHSgsI1L85Iok27g

四、计算机网络基础

34. OSI七层协议

应用层：为应用提供通信服务
表示层：定义数据格式以及加密
会话层：定义了如何开始、控制、结束一个会话，包括对多个双向消息的控制和管理。
传输层：选择差错恢复协议还是无差错恢复协议 TCP、UDP
网络层：到端包传输。路由选择、包分解成更小的包
数据链路层：定义单个链路上如何传输数据
物理层：传输介质相关

35. TCP/IP协议

1.链路层（数据链路层/网络接口层）：包括操作系统中的设备驱动程序、计算机中对应的网络接口卡
2.网络层（互联网层）：处理分组在网络中的活动，比如分组的选路。
3.运输层：主要为两台主机上的应用提供端到端的通信。
4.应用层：负责处理特定的应用程序细节。

36. 网络各层常用的协议

物理层：RJ45、CLOCK、IEEE802.3
数据链路：PPP、FR、HDLC、VLAN、MAC
网络层：IP、ICMP、ARP、RARP、OSPF、IPX、RIP、IGMP
传输层：TCP、UDP、SPX
会话层：RPC 、SQL、NETBIOS、NFS
表示层：JPEG、MPEG、ASCII、MIDI
应用层：RIP、BGP、FTP、DNS、Telnet、SMTP、HTTP、WWW、NFS
常见协议的端口：http 80，ftp 20、21，telnet 23，SMTP 25。

37. IP地址和MAC地址

硬件地址MAC地址是数据链路层和物理层使用的地址，而IP地址是网络层和以上各层使用的地址，是一种逻辑地址。

发送数据时，数据从高层下到低层，然后才到通信链路上传输。使用IP地址的IP数据报一旦交给了数据链路层，就被封装成了MAC帧。MAC帧在传送时使用的源地址和目的地址都是硬件地址，这两个硬件地址都写在MAC帧的首部。
连接在通信链路上的设备在接受MAC帧时，其根据是MAC帧首部中的硬件地址。在数据链路层看不见隐藏在MAC帧的数据中的IP地址。只有在剥去了MAC帧的首部和尾部后把MAC层的数据上交给网络层后，网络层才能在IP数据报的首部中找到源IP地址和目的IP地址。

38. IP协议

IP 协议是网络层的协议，它是为了实现相互连接的计算机进行通信设计的协议，它实现了自动路由功能，即自动寻径功能。

39. ARP 协议

它解决的是同一局域网内部的主机或路由器的IP 地址和其对应的硬件地址的映射问题。根据ARP 协议, 主机A 无法解析其他网络中的主机的硬件地址。

ARP 是地址解析协议，工作原理：

首先，每个主机都会在自己的 ARP 缓冲区中建立一个 ARP 列表，以表示 IP 地址和 MAC 地址之间的对应关系。
当源主机要发送数据时，首先检查 ARP 列表中是否有对应 IP 地址的目的主机的 MAC 地址，如果有，则直接发送数据，如果没有，就向本网段的所有主机发送 ARP 数据包，该数据包包括的内容有：源主机 IP 地址，源主机 MAC 地址，目的主机的 IP 地址。
当本网络的所有主机收到该 ARP 数据包时，首先检查数据包中的 IP 地址是否是自己的 IP 地址，如果不是，则忽略该数据包，如果是，则首先从数据包中取出源主机的 IP 和 MAC 地址写入到 ARP 列表中，如果已经存在，则覆盖，然后将自己的 MAC 地址写入 ARP 响应包中，告诉源主机自己是它想要找的 MAC 地址。
源主机收到 ARP 响应包后。将目的主机的 IP 和 MAC 地址写入 ARP 列表，并利用此信息发送数据。如果源主机一直没有收到 ARP 响应数据包，表示 ARP 查询失败。广播发送 ARP 请求，单播发送 ARP 响应。

40. DNS解析过程

域名系统(Domain Name System 缩写 DNS，Domain Name 被译为域名)是因特网的一项核心服务，它作为可以将域名和 IP 地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的 IP 数串。（百度百科）例如：一个公司的 Web 网站可看作是它在网上的门户，而域名就相当于其门牌地址，通常域名都使用该公司的名称或简称。

第一步：检查浏览器缓存中是否缓存过该域名对应的IP地址
第二步：如果在浏览器缓存中没有找到IP，那么将继续查找本机系统是否缓存过IP
第三步：向本地域名解析服务系统发起域名解析的请求
第四步：向根域名解析服务器发起域名解析请求
第五步：根域名服务器返回gTLD域名解析服务器地址
第六步：向gTLD服务器发起解析请求
第七步：gTLD服务器接收请求并返回Name Server服务器
第八步：Name Server服务器返回IP地址给本地服务器
第九步：本地域名服务器缓存解析结果
第十步：返回解析结果给用户

41. 差错检测

答：循环冗余检验 CRC ，计算出的结果叫做帧检验序列 FCS 。循环冗余检验序列 CRC 差错检测技术只能做到无差错接受，即凡是接收端数据链路层接受的帧，我们都能以非常接近于 1 的概率认为这些帧在传输过程中没有产生差错，但是要做到可靠传输（即发送什么就收到什么），也就是说，传输到接收端的帧无差错、无丢失、无重复，同时还按发送的顺序接收，这时就必须再加上确认和重传机制。

42. CDN

CDN的全称是Content Delivery Network，即内容分发网络。CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响

五、浏览器工作原理

43. 进程与线程

进程是资源分配的基本单位，用来管理资源（例如：内存，文件，网络等资源）；线程是独立调度的基本单位；一个进程中可以有多个线程，它们共享进程资源。

进程（process）是程序的一次执行过程，是一个动态概念，是程序在执行过程中分配和管理资源的基本单位，线程（thread）是CPU调度和分派的基本单位，它可与同属一个进程的其他的线程共享进程所拥有的全部资源。

根本区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位
在开销方面：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。
所处环境：在操作系统中能同时运行多个进程（程序）；而在同一个进程（程序）中有多个线程同时执行（通过CPU调度，在每个时间片中只有一个线程执行）
内存分配方面：系统在运行的时候会为每个进程分配不同的内存空间；而对线程而言，除了CPU外，系统不会为线程分配内存（线程所使用的资源来自其所属进程的资源），线程组之间只能共享资源。
包含关系：没有线程的进程可以看做是单线程的，如果一个进程内有多个线程，则执行过程不是一条线的，而是多条线（线程）共同完成的；线程是进程的一部分，所以线程也被称为轻权进程或者轻量级进程

浏览器属于一个应用程序，而应用程序的一次执行，可以理解为计算机启动了一个进程，进程启动后，CPU会给该进程分配相应的内存空间，当我们的进程得到了内存之后，就可以使用线程进行资源调度，进而完成我们应用程序的功能。

44. 浏览器的多进程

假如我们去开发一个浏览器，它的架构可以是一个单进程多线程的应用程序，也可以是一个使用IPC通信的多进程应用程序。

不同的浏览器使用不同的架构。在Chrome中，主要的进程有4个：

浏览器进程 (Browser Process)：负责浏览器的TAB的前进、后退、地址栏、书签栏的工作和处理浏览器的一些不可见的底层操作，比如网络请求和文件访问。
渲染进程 (Renderer Process)：负责一个Tab内的显示相关的工作，也称渲染引擎。
插件进程 (Plugin Process)：负责控制网页使用到的插件
GPU进程 (GPU Process)：负责处理整个应用程序的GPU任务

首先，当我们是要浏览一个网页，我们会在浏览器的地址栏里输入URL，这个时候Browser Process会向这个URL发送请求，获取这个URL的HTML内容，然后将HTML交给Renderer Process，Renderer Process解析HTML内容，解析遇到需要请求网络的资源又返回来交给Browser Process进行加载，同时通知Browser Process，需要Plugin Process加载插件资源，执行插件代码。解析完成后，Renderer Process计算得到图像帧，并将这些图像帧交给GPU Process，GPU Process将其转化为图像显示屏幕。

45. 多进程架构的好处

第一，更高的容错性。WEB应用HTML，JavaScript和CSS日益复杂，多进程架构使得每一个渲染引擎运行在各自的进程中，相互之间不受影响。
第二，更高的安全性和沙盒性（sanboxing）。渲染引擎会经常性的在网络上遇到恶意代码，对不同进程限制了不同的权限，并为其提供沙盒运行环境，使其更安全更可靠
第三，更高的响应速度。在单进程的架构中，各个任务相互竞争抢夺CPU资源，使得浏览器响应速度变慢，而多进程架构正好规避了这一缺点。

46. 从输入URL到页面加载完成的过程

（1）DNS解析

（2）TCP三次握手

（3）浏览器向服务器发送http请求 一旦建立了TCP链接，web浏览器就会向web服务器发送请求命令。

（4）浏览器发送请求头信息 浏览器发送其请求命令之后，还要以头信息的形式想web服务器发送一些别的信息，之后浏览器发送了一空白行开通知服务器，它已经结束了该头信息的发送。

（5）服务器处理请求 服务器收到http请求之后，确定用相应的一眼来处理请求。读取参数并进行逻辑操作后，生成指定的数据。

（6）服务器做出响应 客户端向服务器发送请求后，服务端向客户端做出应答。

（7）服务器发送应答头信息 正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据以及被请求的文档。

（8）服务器发送数据 web服务器向浏览器发送信息后，它会发送一个空白行来表示头信息的发送到此结束。接着，它会以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。

（9）TCP关闭（四次挥手）一般情况下，一旦web服务器向浏览器发送了请求数据，它就要关闭tcp链接。如果浏览器或服务器在其头信息加入了Connection:keep-alive,则会保持长连接状态，也就是TCP链接在发送后仍保持打开状态，浏览器可以继续通过仙童的链接发送请求。

47. 页面渲染过程

览器从网络或硬盘中获取HTML字节数据，构建DOM Tree
浏览器解析遇到标签，就开始解析CSS，构建CSSOM Tree
DOM Tree和CSSOM Tree 结合在一起，构建Render Tree
Layout计算出每个节点在浏览器窗口的确切位置和大小
Layout布局完成后，浏览器立即发出Paint事件，将Render Tree绘制成像素
绘制完成后，页面的最终效果才能在屏幕中呈现出来

参考链接：https://mp.weixin.qq.com/s/Ej8LuE7HGtcg2aV8MkOzjg （很详细，极度推荐）

48. 缓存过程分析

浏览器与服务器通信的方式为应答模式，即：浏览器发起HTTP请求 –> 服务器响应该请求
浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
如果没有，就向服务器发起HTTP请求，服务器返回请求结果和缓存标识
浏览器将返回的请求结果和缓存标识存入浏览器缓存中

49. 浏览器缓存放在哪里

打开浏览器网页时，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，当刷新页面时，只需直接从内存缓存中读取(from memory cache)
而css文件则会存入硬盘文件中，所以每次渲染页面（包括打开页面和刷新页面）都需要从硬盘读取缓存(from disk cache)

50. 获取当前页面url参数

（1）传统方法，查找Location.search

（2）URLSearchParams

六、跨域

51. 什么是同源策略

浏览器的同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。端口相同；域名相同；协议相同就是同源。

不同源的客户端脚本，不能互相读写对方的资源，也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

举例：http://www.example.com:80/dir/page.html 协议http，域名www.example.com，端口80

52. 同源策略限制以下几种行为

1.) Cookie、LocalStorage和 IndexDB无法读取

2.) DOM 和 Js对象无法获得

3.) AJAX 请求不能发送

53. 跨域的解决方案

(1) 通过jsonp跨域。 基本思想：网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源策略限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
(2) 通过修改document.domain来跨子域，将其设置为相同即可。 这种方法只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 无法通过这种方法，规避同源政策
(3) 使用window.name来进行跨域解决跨域窗口的通信问题。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。
(4) 使用HTML5中新引进的window.postMessage方法来跨域传送数据 。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。通过window.postMessage，读写其他窗口的 LocalStorage 也成为了可能。
(5) 使用代理服务器, 使用代理方式跨域更加直接，通过代理方式将前端页面和后端接口代理成为同源服务（即浏览器访问前端页面和后端接口的ip主机相同、port端口相同），这样前端页面请求接口时就不会因为同源策略限制出现跨域问题。
(6) CORS全称是"跨域资源共享"（Cross-origin resource sharing),CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

54. 代理

（1）代理，也称正向代理，是指一个位于客户端和目标服务器(target server)之间的服务器，为了从目标服务器取得内容，客户端向代理发送一个请求并指定目标(目标服务器)，然后代理向目标服务器转交请求并将获得的内容返回给客户端。数据流程：

数据请求过程：浏览器-》代理服务器-》目标服务器
数据返回过程：目标服务器-》代理服务器-》浏览器

实现原理：对正向代理服务器进行配置，当获取非接口数据时，让代理服务器指向开发者本机的资源。当访问接口时，访问后端接口数据。

（2）反向代理（Reverse Proxy）是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。数据流程：

数据请求过程：浏览器-》【反向代理服务器-》处理数据的服务器】
数据返回过程：【处理数据的服务器-》反向代理服务器】-》浏览器

实现原理：服务器端进行处理。首先修改hosts文件，将域名指向开发者的电脑本身，把自己伪装成服务端，再通过nginx对不同的请求进行转发，把静态资源指向开发者本地电脑的资源，将接口指向实际的服务器。

（3）对比：

使用charles等正向代理方式比较简单，需要掌握的知识点也比较少。但相应的其可配置性较弱，仅适合中小型项目使用。
使用nginx的反向代理则相对复杂一些，需要了解基本的nginx配置。但其可配置性较强，支持URL的正则匹配，设置优先级等，适合复杂的项目使用。

参考链接：https://segmentfault.com/a/1190000010719058

55. CORS

全称是跨域资源共享，允许浏览器向跨源服务器发出XMLHTTP Request请求，从而克服了ajax只能同源使用的策略，实现cors的关键是服务器，只要服务器实现了cors接口，就可以跨域通信.

前端逻辑很简单，正常发起ajax请求即可，成功的关键在于服务器 Access-Control-Allow-Origin 是否包含请求页面的域名，如果不包含的话，浏览器将认为这是一次失败的异步请求，将会调用 xhr.onerror 中的函数。

特点： Cros使用简单，支持POST方式，但是存在兼容问题, 复杂请求的时候得先做一个预检，再发真实的请求，发了两次请求会有性能上的损耗。

浏览器将请求分为两类，一类是简单请求，一类是非简单请求

简单请求：一次请求
非简单请求：两次请求，在发送数据之前会先发第一次请求做预检，只有预检通过后在发一次请求作为数据传输。

56. JSONP

JSONP，全称为json with padding，解决老版本浏览器跨域数据访问问题，原理是web页面调用JS文件不受浏览器同源策略限制，所以通过script标签可以进行跨域请求，流程如下：

首先前端设置好回调参数，并将其作为URL的参数

服务器端收到请求后，通过该参数获取到回调函数名，并将数据放在参数中返回

收到结果后因为是script标签，所以浏览器当做脚本运行，

57. 常见的Web前端攻击方式有哪些

（1）XSS跨站请求攻击

攻击者向Web页面里插入恶意HTML标签或者JS代码

攻击者在论坛中放一个看似安全的链接，骗取用户点击并窃取cookie中的用户信息

（解决方法：替换特殊字符。直接显示，而不会作为脚本执行，并且前端（显示时）后端（存储时）都需要替换）

（2）XSRF跨站请求伪造

击者欺骗用户的浏览器去访问一个自己曾经认证过的网站，并执行一些操作

由于浏览器曾经认证过，被访问的网站会认为是真正的用户操作而去运行

（解决方法：使用post接口；Get请求不对数据进行修改；增加验证，例如密码、短信验证码、指纹等）

（3）XSS 与 CSRF 的区别是什么？

XSS攻击用于获取信息，不需要提取知道其它用户页面的代码和数据包

CSRF攻击用于代替用户完成指定的动作，需要知道其它用户页面的代码和数据包

（4）SQL注入

通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串中，欺骗服务器执行恶意的SQL命令

（解决方法：不要相信用户的输入，要对用户的输入进行校验；不要动态拼装SQL，可以使用参数化的SQL；不要把机密信息用明文存放，应该加密；不要使用管理员权限的数据库连接）

小白Rachel

关注

8
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端面试 - 网络部分总结（总结ing力求完备）

1. 什么是cookie当我们访问网站时，浏览器会发送一个HTTP请求到服务器服务器会发送一个HTTP响应到浏览器，通过设置set-cookie这个响应头，将cookie信息返回给浏览器浏览器将cookie信息保存在本地，下次访问网站时，发送HTTP请求会携带之前的cookie 服务器从收到的cookie中识别用户身份，从而保证返回的数据属于该用户 cookie是键值对，可以设置多个2.什么是session存放在服务器中，一种用来存放用户数据的类似Hash表的结构浏览器第一次发送.
复制链接

扫一扫