前端面试知识点整理—

前端面试知识点整理——网络

文章目录

一、进程（process）和线程（thread）
二、浏览器属于一种多进程的架构
三、CRP，关键渲染路径（critical rendering path）
四、回流（reflow）与重绘（repaint）
五、前端性能优化
五、图片格式
六、http与https
七、cdn
八、get、post、put
九、TCP三次握手和四次挥手
十、前端工程化的理解
十一、bootstrap与webpack相关知识
十二、websocket
十三、前中后序遍历应用
十四、TCP和UDP的区别
十五、http如何保持状态
十六、http1.0 和 http1.1 的区别
十七、http1.1 和 http2.0 的区别
十八、http常见状态码

一、进程（process）和线程（thread）

进程是 CPU 资源分配的最小单位（是能拥有资源和独立运行的最小单位）。

线程是 CPU 调度的最小单位（是建立在进程基础上的一次程序运行单位）。

现代操作系统都是可以同时运行多个任务的,比如:用浏览器上网的同时还可以听音乐。
对于操作系统来说,一个任务就是一个进程,比如打开一个浏览器就是启动了一个浏览器进程,打开一个 Word 就启动了一个 Word 进程。
有些进程同时不止做一件事,比如 Word,它同时可以进行打字、拼写检查、打印等事情。在一个进程内部,要同时做多件事,就需要同时运行多个“子任务”,我们把进程内的这些“子任务”称为线程。
由于每个进程至少要做一件事,所以一个进程至少有一个线程。系统会给每个进程分配独立的内存,因此进程有它独立的资源。同一进程内的各个线程之间共享该进程的内存空间（包括代码段,数据集,堆等）。

二、浏览器属于一种多进程的架构

例如，我们默认打开一个tab页面，就会新建一个进程，不同的tab页面是不同的进程，因此单个tab页面的崩溃是不会影响到整个浏览器的。可以充分利用现代CPU多核的优势，但是相应的，内存和CPU的资源消耗会更大。

浏览器的主要进程和职责：

主进程：负责浏览器界面的显示与交互。各个页面的管理,创建和销毁其他进程。网络的资源管理、下载等。
第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建。
GPU进程：最多只有一个，用于3D绘制
渲染进程（浏览器内核）：内部是多线程的。主要负责页面渲染，脚本执行，事件处理等。

GUI渲染线程：负责渲染界面，解析html、css，构建dom树和render树，布局和绘制。重绘和回流时，该线程会执行
JS引擎线程：解析js代码
注意：GUI渲染线程和JS引擎线程是互斥的。
问：为什么js是单线程的？
答：如果是多线程就会出现UI操作的冲突，例如，假设存在两个线程同时处理一个dom，一个负责修改一个负责删除，那么这时候就需要浏览器来裁决如何生效哪个线程执行的结果。这其实可以使用锁来解决，但是为了避免因为引入锁带来更大的复杂性，js在最初就选择了单线程。
事件触发线程、定时器触发线程、异步http请求线程：我的理解是他们都是在事件准备好的时候把事件放入任务队列当中，等待js引擎来执行，可以说是用来辅助js引擎工作的

浏览器渲染流程：

解析 HTML 文件,构建 DOM 树,同时浏览器主进程负责下载 CSS 文件
CSS 文件下载完成,解析 CSS 文件成树形的数据结构,然后结合 DOM 树合并成 RenderObject 树
布局 RenderObject 树（Layout/reflow）,负责 RenderObject 树中的元素的尺寸,位置等计算
绘制 RenderObject 树（paint）,绘制页面的像素信息
浏览器主进程将默认的图层和复合图层交给 GPU 进程,GPU 进程再将各个图层合成（composite）,最后显示出页面

js是可操作dom和css样式的，因此不能同时修改元素属性和渲染界面，因为可能会出现渲染前后数据不一致的情况。因此浏览器把GUI渲染线程与JS引擎线程互斥，因此在执行js时，渲染被阻塞，同样的，css也会阻塞后面js的执行
dom树和cssom树是并行构建的，因此，css不会阻塞dom的解析
但是render树的构建必须依赖于dom树和cssom树，因此，css会阻塞dom的渲染

总结：css加载会阻塞dom的渲染和后面js的执行，js会阻塞dom解析

三、CRP，关键渲染路径（critical rendering path）

关键渲染路径是浏览器将 HTML CSS JavaScript 转换为在屏幕上呈现的像素内容所经历的一系列步骤。也就是我们上面说的浏览器渲染流程。
为尽快完成首次渲染,我们需要最大限度减小以下三种可变因素:

关键资源的数量: 可能阻止网页首次渲染的资源。
关键路径长度: 获取所有关键资源所需的往返次数或总时间。
关键字节: 实现网页首次渲染所需的总字节数,等同于所有关键资源传送文件大小的总和。

优化方案：
dom：删除不必要的代码和注释、gzip压缩文件、http缓存文件
cssom：同上、减少关键css元素数量、关注媒体查询的类型
js：async、defer、动态创建dom方式、使用setTimeout延迟、让js最后加载、jquery的getscript（）方法（注意他们的区别）
总结：dom和cssom的优化都是为了减少渲染的时间，而js延迟是为了防止它阻塞渲染，导致浏览器显示页面时出现延迟。

四、回流（reflow）与重绘（repaint）

当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等）,浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。

导致回流的操作：页面首次渲染、浏览器窗口大小改变、元素尺寸改变、字体大小改变、删除添加可见dom元素等等
防止：
css：避免使用table布局、在dom树的最末端改变class、避免设置多层内联样式、将动画效果应用到绝对定位或固定定位的元素上、避免使用calc（）
js：避免频繁操作样式，一次性更改为宜、可以先把元素设置为display:none，改完之后再显示出来、避免频繁读取会引发回流/重绘的属性，如果需要多次使用，就用一个变量缓存起来、对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流

五、前端性能优化

缓存：强缓存、协商缓存
渲染机制方面原理
js会阻塞dom解析
css会阻塞dom渲染和之后的js执行
优化方案：
dom：删除不必要的代码和注释、gzip压缩文件、http缓存文件
cssom：同上、减少关键css元素数量、关注媒体查询的类型
js：async、defer、动态创建dom方式、使用setTimeout延迟、让js最后加载、jquery的getscript（）方法（注意他们的区别）
总结：dom和cssom的优化都是为了减少渲染的时间，而js延迟是为了防止它阻塞渲染，导致浏览器显示页面时出现延迟。
回流与重绘方面
防抖与节流方面
事件委托
图片懒加载
当向下滚动时图片资源才被请求到，延迟加载，优先加载可视区里面的内容
通过满足offsetTop - scrollTop < clientHeight后再来加载图片
注意代码实现
精灵图

五、图片格式

JPG/JPEG：兼容性高、传输速度快、内存小、有损压缩，存在失真的情况
PNG：压缩不失真、透明背景、渐变图像
GIF：静态的GIF和JPG无异，而动态的GIF图片则是由多幅图片保存为一个图片形成动画效果而制成的，图片质量较差
BMP：Windows电脑系统的标准图片格式，内存较大、未经压缩、保存了每个像素的信息
TIF：可以保证图片在不失真的情况下压缩，且保留图片的分层或是透明信息
PSD：Photoshop专属图片格式
SVG：矢量图，文本文件，体积小，压缩性更强，图片可无限放大且不失真，兼容性好
WebP：是谷歌开发的一种新图片格式，同时支持无损和有损压缩，具有更小的文件体积
-在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
-在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
-WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

六、http与https

https主要是在http的基础上，利用了SSL/TLS来建立安全信道进行数据包的传输。https在这个过程中主要使用了对称加密（有DES、AES等）、非对称加密（RSA）、哈希算法（MD5）和数字证书（CA颁发）等技术，通过这些技术保证了数据传输的完整性、机密性和确保了身份认证（防止中间人攻击）。

SSL握手的过程：

客户端向服务器发送支持的协议版本号、支持的加密算法和一个随机数1
服务端发送确认要使用的加密算法、随机数2，以及自己的数字证书
客户端验证这个数字证书
若证书有效，使用证书里面的公钥来对随机数3（预主密钥）加密，发送给服务端
服务端使用自己的私钥来解密这个随机数3
这时候其实客户端和服务器端都可以使用约定好的加密算法，来对这三个随机数进行加密，生成一个密钥k，这个k就是之后使用对称加密进行对话的密钥值

CA签发证书的过程（申请SSL证书）：
我的理解：其实这个数字证书的目的就是保证了申请人的公钥的权威性，避免中间人攻击

申请者向CA发送签名请求，就是想要获得一个证书认证
CA会对这个申请者做一些验证。通过之后，CA会利用自己的私钥来对证书生成数字签名。
证书中有这样一些信息：证书颁发机构、证书序列号、有效期、证书签名算法、申请者的公钥、数字签名等等

客户端验证数字证书的过程：

客户端首先会对证书的颁发机构、有效期进行检查，通过查找操作系统内置的受信任的证书发布机构，来确定证书的可信任性。找不到对应的机构浏览器报错，说明证书不可信任。
如果可信任，那么浏览器会从操作系统取出CA的公钥，使用公钥对数字签名进行解密，并与服务端发来的报文摘要相比较，如果相同，则证书合法，取出里面的公钥，用于后序的加密。

七、cdn

八、get、post、put

1、GET方法：对这个资源的查操作。

2、DELETE方法：对这个资源的删操作。但要注意：客户端无法保证删除操作一定会被执行，因为HTTP规范允许服务器在不通知客

户端的情况下撤销请求。

3、HEAD方法：与GET方法的行为很类似，但服务器在响应中只返回实体的主体部分。这就允许客户端在未获取实际资源的情

况下，对资源的首部进行检查，使用HEAD，我们可以更高效的完成以下工作：

在不获取资源的情况下，了解资源的一些信息，比如资源类型；

通过查看响应中的状态码，可以确定资源是否存在；

通过查看首部，测试资源是否被修改；

4、TRACE方法：会在目的服务器端发起一个“回环”诊断，我们都知道，客户端在发起一个请求时，这个请求可能要穿过防火墙、代理、网关、或者其它的一些应用程序。这中间的每个节点都可能会修改原始的HTTP请求，TRACE方法允许客户端在最终将请求发送服务器时，它变成了什么样子。由于有一个“回环”诊断，在请求最终到达服务器时，服务器会弹回一条TRACE响应，并在响应主体中携带它收到的原始请求报文的最终模样。这样客户端就可以查看HTTP请求报文在发送的途中，是否被修改过了。

5、OPTIONS方法：用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。

区别：

1、PUT和POST

PUT和POST都有更改指定URI的语义.但PUT被定义为idempotent（幂等的）的方法，POST则不是.idempotent的方法:如果一个方法重复执行多次，产生的效果是一样的，那就是idempotent的。也就是说：

PUT请求：如果两个请求相同，后一个请求会把第一个请求覆盖掉。（所以PUT用来改资源）

Post请求：后一个请求不会把第一个请求覆盖掉。（所以Post用来增资源）

2、get和post

1、GET参数通过URL传递，POST放在Request body中。

2、GET请求会被浏览器主动cache，而POST不会，除非手动设置。

3、GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

4、Get 请求中有非 ASCII 字符，会在请求之前进行转码，POST不用，因为POST在Request body中，通过 MIME，也就可以传输非 ASCII 字符。

5、一般我们在浏览器输入一个网址访问网站都是GET请求

6、HTTP的底层是TCP/IP。HTTP只是个行为准则，而TCP才是GET和POST怎么实现的基本。GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。但是请求的数据量太大对浏览器和服务器都是很大负担。所以业界有了不成文规定，（大多数）浏览器通常都会限制url长度在2K个字节，而（大多数）服务器最多处理64K大小的url。

7、GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

8、在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。但并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。
————————————————

九、TCP三次握手和四次挥手

三次握手：
1.建立TCP连接时，客户端向服务器端发送一段TCP报文，标志位为SYN，序号为seq = x，并进入SYN_SENT阶段
2.服务器收到TCP报文后，结束LISTEN阶段，并返回一段TCP报文，标志位为SYN和ACK，序号为seq = y，确认号为ack = x + 1，进入SYN_RCVD阶段。这表明服务器端确认收到客户端的连接请求，并同意建立连接。
3.客户端收到服务器端的确认报文之后，明确了从客户端到服务器端的数据传输是正常的，结束SYN-SENT阶段，并返回最后一段TCP报文，标志位为ACK，序号为seq = x + 1 ，确认号为ack = y + 1，之后客户端和服务器端进入ESTABLISHED阶段。

四次挥手：
1.客户端想要释放连接，向服务器端发送一段TCP报文，标志位为FIN，序号为seq = U，随后客户端进入FIN-WAIT-1阶段，即半关闭阶段。
2.服务器端接受到报文后，确认了客户端想要释放连接，服务器端结束ESTABLISHED阶段，进入CLOSE-WAIT阶段，并返回一段TCP报文，标志位为ACK，序号为seq = V，确认号为 ack = U + 1
3.客户端接受到TCP报文之后，结束FIN-WAIT-1，进入FIN-WAIT-2阶段。
4.服务器端从发出ACK确认报文之后，经过CLOSE-WAIT阶段，做好了释放连接的准备，再次向客户端发送TCP报文，标志位为FIN，序号为 seq = W，确认号为ack = U + 1，进入LAST-ACK阶段。
5.客户端收到报文后，确认了服务器端已经做好释放连接的准备，结束FIN-WAIT-2阶段，进入TIME-WAIT阶段，并在2MSL之后，进入CLOSED。
6.服务器收到报文后，立刻进入CLOSED阶段。

为什么建立3次，释放4次？
答：这是因为在TCP建立过程中，当服务器第一次收到客户端的请求时，服务器可以立刻发送SYN+ACK作为标志位的报文，但是，在释放连接的过程中，当服务器端接受到客户端的释放连接请求时，服务器端并不能立刻释放，还要处理一些数据，因此先返回了带有ACK的确认报文，在准备就绪之后，再发了FIN报文，因此挥手要多一次。

为什么不能用两次握手？（三次握手的作用）
答：作用是实现数据的可靠传输、防止服务器端保持开启一些无用的连接而增加服务器开销，以及防止已失效的连接请求报文段突然又传到了服务器而产生错误，三次握手是双方确认的必备过程。
如果只是两次握手，那么，只有发起方的起始序列号能被确认，另一方的序列号得不到确认。

为什么客户端要等待2MSL？
答：MSL是一段TCP报文在传输过程中的最大生命周期，等待2MSL是客户端为了确认服务端是否收到了请求，若服务端在1MSL内没有收到，那么他会再次向客户端发送FIN报文，最长时间不会超过2MSL。

如果已经建立连接，但是客户端突然出现故障怎么办？
答：TCP还设有一个保活计时器，显然，客户端如果出现故障，服务器不能一直等下去，白白浪费资源。服务器每收到一次客户端的请求后都会重新复位这个计时器，时间通常是设置为2小时，若两小时还没有收到客户端的任何数据，服务器就会发送一个探测报文段，以后每隔75秒钟发送一次。若一连发送10个探测报文仍然没反应，服务器就认为客户端出了故障，接着就关闭连接。

十、前端工程化的理解

1.前端工程化目的是为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。（工程化可以理解为软件工程方面的东西）
2.前端工程化包括：模块化、组件化、规范化和自动化
3.模块化：就是把一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。
e.g.webpack
4.组件化：模块化只是在文件层面上对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。是一种分治思想。
e.g.vue、react、angular
5.规范化：规范的制定会直接影响到后期的开发质量
目录结构的制定、编码规范、前后端职责分离、文档规范等等
6.自动化：图标合并、持续集成、自动化构建、自动化部署、自动化测试

十一、bootstrap与webpack相关知识

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

十二、websocket

WebSocket是html5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务器主动向客户端推送数据。在WebSocketAPI中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

websocket可以用来做聊天室，建立在tcp之上，连接机制与https相似

十三、前中后序遍历应用

前序遍历：广度优先、深度优先搜索
中序遍历：顺序输出、加减乘除等一些表达式的运算
后序遍历：先遍历叶子节点、可以用来删除节点、从下往上整合数据

十四、TCP和UDP的区别

1.tcp是面向连接的，udp是无连接的
2.tcp通过校验和、重传控制、序号标识、滑动窗口和累计确认来保证数据可靠传输，udp不可靠，到达的数据包可能是乱序的
3.tcp要三次握手和四次挥手，因此速度慢
4.tcp数据包报头大小是20字节，udp是8字节
5.tcp有流量控制和拥塞控制，udp没有
6.tcp是面向字节流的，udp面向报文
7.tcp连接只能是点对点的，udp支持一对一、一对多和多对多的交互通信
8.tcp适用于一些文件传输（http、https、ftp）、邮件（pop、smtp）、远程登录等对准确性要求较高的场景，udp应用于即时通信、在线视频等要求速度快的场景

十五、http如何保持状态

http是一种无状态协议，即服务器不保留与客户交易时的任何状态，上一次的请求对这次的请求没有任何影响，服务端也不会对客户端上一次的请求进行任何记录处理。

1.cookie：cookie是客户端的存储空间，由浏览器来维持。具体来说cookie机制采用的是在客户端保持状态的方案。cookie会根据从服务器端发送的响应报文内的一个叫做set-cookie的首部字段信息，通知客户端保存cookie，当下次客户端再往该服务端发送请求时，客户端会自动在请求报文中加入cookie值后发送出去。也就是cookie是服务器生成的，但是发送给客户端，并且有客户端来保存。每次请求加上cookie就行了。服务端发现客户端发送过来的cookie之后，会去检查究竟是从哪一个客户端发来的连接请求，然后对比服务器上的记录，最后得到之前的状态信息。

2.session：session是另一种记录客户状态的机制，保存在服务器上。虽然session保存在服务器，对客户端是透明的，他的正常运行仍然需要客户端浏览器的支持。在会话开始时，服务端就会把会话状态保存起来，然后分配一个sessionid给客户端，这个会话标识一般保存在客户端的cookie中，以后每次浏览器发送http请求都会带上sessionid，服务器拿到之后就与之前存在服务端的状态信息与会话联系起来，实现会话保持。

十六、http1.0 和 http1.1 的区别

1.长连接：1.1默认开启长连接keep-alive，减少了每次建立和关闭tcp连接的损耗，1.0需要使用keep-alive参数来设置长连接。
2.节约带宽：1.0存在浪费带宽的情况，例如客户端只是需要某个对象的一部分，而服务器却将整个对象都发过来了，并且不支持断点续传的功能。1.1支持先发送header消息，如果服务端认为客户端有权限请求服务器，则返回100，然后客户端再发送body部分，否则返回401。
3.host域：1.0认为一个主机对应一个ip地址，因此没有host域。随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机，并且他们共享一个ip地址。1.1的请求信息和响应信息都支持host域，如果没有包含，则会报告一个错误400.
4.缓存处理：1.0主要使用expires、if-modified-since，1.1新增了cache-control、etag等缓存头来控制缓存策略
5.错误通知：1.1新增了24个错误状态响应码

十七、http1.1 和 http2.0 的区别

1.多路复用：2.0可以实现多路复用，使用同一个tcp连接并发处理多个请求，而且并发请求的数量比1.1大了好几个数量级。1.1也可以通过建立多个tcp连接来处理并发的请求，但是创建tcp连接本身也是有开销的。
2.头部数据压缩：http1.1只支持消息体的压缩而不支持头部的压缩，2.0则使用HPACK算法对header的数据进行压缩，这样数据体积小了，在网络上传输就会更快。
3.服务端推送：1.1中，网络中的每个资源（html、样式表、脚本、图片等等）都必须明确的请求，时间较长。2.0引入了server push，它允许服务端推送特定资源给客户端。

十八、http常见状态码

100 continue：http1.1 表示发出的请求服务器接收，应当继续发送请求的其余部分
200 ok：请求成功
204 no content：没有新文档
301 moved permanently：文档被永久移除，新的url在location头当中给出，浏览器应该自动访问新的url
302 moved temporately：和301类似，但是url是临时性的替代，而不是永久性的
304 not modified：表示所请求的资源没有被修改，可以继续使用缓存
400 bad request：请求出现语法错误
401 unauthorized：请求需要身份认证
403 forbidden：拒绝执行此请求
404 not found：被请求的文档不在服务器上
500 internal server error：服务器遇到了意想不到的情况，不能完成客户端的请求
505 httpversion not supported：服务器不支持请求中所指明的http版本

参考文章：
从 8 道面试题看浏览器渲染过程与性能优化
原生js实现图片懒加载（lazyLoad）
前端性能优化（一）
【web安全3】【硬核】HTTPS原理全解析：讲得很好！
HTTPS详解：结合上面视频理解会更好
CDN是什么？使用CDN有什么优势？
CDN最通俗易懂的CDN解释
HTTP中GET，POST和PUT的区别
前端工程化的理解
HTML5 WebSocket
WebSocket实现在线聊天