面试题打卡第八天（前端计算机网络篇）- 完整版

最新推荐文章于 2024-10-04 00:46:18 发布

海面有风

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量157

点赞数

分类专栏：我的小仓库文章标签：前端计算机网络网络

本文链接：https://blog.csdn.net/weixin_44659458/article/details/127457905

版权

我的小仓库专栏收录该内容

23 篇文章 0 订阅

订阅专栏

# http 和 https

1、http：超文本传输协议；https: 是以安全为目标的HTTP通道，在HTTP的基础下添加了SSL

2、http：明文传输；https：通过SSL进行加密，安全性比http要好

3、http是80端口；https是443端口

4、https：需要ca证书，费用高

5、https协议的工作原理

客户端使用 https url 访问服务器（要求web服务器建立ssl链接）
web服务器接收到客户端的请求后，会将网站的证书（证书包含了公钥），返回给客户端。
客户端接收后，客户端和web服务器开始协商 ssl 链接的安全等级（加密等级）
达成一致后，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送到网站
web服务器通过自己的私钥解密出会话密钥
web服务器通过会话密钥加密与客户端之间的通信

在这里插入图片描述

6、https的缺点

握手阶段比较费事
缓存不如http高效，会增加数据开销
SSL证书费用高

# TCP 和 UDP 的区别

1、TCP是面向连接；UDP是无连接的（即发送数据前无需先建立链接）‘

2、TCP提供可靠的服务（通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达）

3、UDP尽最大努力交付

4、TCP面向字节流；UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用）

5、TCP只能1对1的；UDP支持1对1，1对多

6、TCP的首部较大为20字节，而UDP只有8字节

# webSocket的实现和应用

1、什么是 WebSocket

WebSocket是一种协议，可以在单个TCP连接上进行全双工通信（可以让服务端主动向客户端推送数据）
在WebSocket中，浏览器与服务器只需要完成一次握手，两者之间就可以创建持久性的连接并进行双向数据传输

2、Websocket握手环节

客户端向服务端发送请求
服务端根据客户端的请求切换到WebSocket 协议
服务端告知客户端服务器可以发起WebSocket连接
客户端发起连接的约定
客户端检查服务端的响应
服务端处理客户端连接

在这里插入图片描述

# HEAD请求与GET请求的区别

HEAD请求跟GET请求相同，同样能够拿到响应头，但是不返回数据实体
HEAD请求通常是用来在下载文件之前，获取远程服务器上的文件信息

# BOM属性方法

1、location 对象

location.href – 返回或设置当前文档的URL
location.search – 返回URL中的查询字符串部分（?id=5&name=haohao）
location.hash – 返回 URL#后面的内容
location.host – 返回URL中域名部分（www.baidu.com）
location.hostname – 返回URL中主域名部分（baidu.com）
location.pathname – 返回URL域名后的部分（www.baidu.com/a 返回/a）
location.port – 端口号
location.port – 协议
location.assign – 设置当前文档的URL
location.replace – 设置当前文档的URL（并且在history对象的地址列表中移除这个url）
location.reload() – 重载当前页面

2、history 对象

history.go() – 前进或后退指定的页面数
history.back() – 后退一页
history.forward() – 前进一页

3、navigator 对象

navigator.useAgent – 返回用户代理头的字符串
navigator.cookieEnabled – 返回浏览器是否支持（启用）cookie

# HTML5 拖拽 api

dragstart：事件主体是被拖放元素，在开始拖放时触发
drag：事件主体是被拖放元素，正在拖放时触发
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发
dragover：事件主体是目标元素，在被拖放元素在某元素内移动时触发
dragleave：事件主体是目标元素，在被拖放元素移出某元素时触发
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

# http2.0

1、http2.0是基于1999年发布的http1.0之后的首次更新

2、请求资源所需时间更少，访问速度更快

3、二进制分帧（在应用层（HTTP）和传输层（TCP）之间增加一个二进制分帧层）

帧：HTTP2.0通信的最小单位，所有帧都共享一个8字节的首部
消息：比帧大的通信单位，是指逻辑上的HTTP消息，比如请求、响应等。由一个或多个帧组成
流：比消息大的通信得。是TCP连接中的一个虚拟通道，可以承载双向的消息。每一个流都有唯一的整数标识符

在 http1.x 中传输数据使用的是文本传输数据；基于文本传输数据存在很多缺陷。而二进制不同，只有0和1的组合

在http2.0中所有传输的数据都会被分割为更小的消息和帧，并采用二进制格式编码

在http1.x的首部信息会被封装到Headers帧中，而Rquest Body则封装搭配Data帧中。

4、首部压缩

http1.x中并不支持首部压缩；在http2.0中则支持，使用首部压缩的算法是HPACK算法

在http1.x中，使用的是文本形式进行传输，如果在header中需要携带cookie,则每次传输都传输重复数据

在http2.0中，除了通过使用压缩算法压缩首部信息外，在客户端以及服务端都会维护一张索引表（用于记录曾经出现过的header），在后面请求过程中可以重复使用header。而对于接收端就可以通过键名找到对应的值

5、多路复用

在http1.x中由于浏览器限制同一个域名下的请求数量。因此，在页面需要请求很多资源时，队头会出现阻塞，只有等待前面资源加载完毕后才会加载下一个资源。

而在http2.0中，基于二进制分帧，将http消息拆分成独立的帧（在不破坏信息的前提下），交错发出。而在另外一端根据流标识符和首部将这些帧重新组装。

6、请求优先级

把HTTP消息分为很多独立帧之后，就可以通过优化这些帧的交错和传输顺序进一步优化性能。

7、服务器推送

服务器可以对一个客户端请求发送多个响应

比如：

客户端请求资源1，服务端在响应资源1的同时再次推送资源2、资源3
如果该请求是从主页发出的，服务端可能会响应主页内容、logo以及样式表

缺点：所有推送资源必须遵守同源策略

# 400、401、403状态码

1、400：请求无效

可能产生的原因：前端提交数据的字段名称和字段类型与后台的实体没有保持一致

2、401：当前请求需要用户验证

3、403：服务器已经得到请求，但拒绝执行

# fetch 发送 2 次请求的原因

1、在跨域请求的情况下，fetch会先发送一个options请求，来确定服务器是否允许接受请求。服务区同意后，才会发送真正的请求。

2、在同源情况下不会出现请求2次的情况

# Cookie、sessionStorage、localStorage 的区别

1、共同点：都是保存在浏览器中，并且是同源的

2、不同点：

（1）存储位置及其传输

cookie：数据始终在同源的http请求中携带，并且cookie数据中有路径的概念，可以限制cookie只属于某一个路径下
sessionStorage：浏览器中（不会发送给服务器）
localStorage：浏览器中（不会发送给服务器）

（2）时效性

cookie：只要设置了过期时间，在这之前都有效
sessionStorage：仅在当前浏览器窗口关闭前有效
localStorage：持久保存，当窗口或者浏览器关闭也会一直保存

（3）共享性

cookie：在所有同源窗口中都是共享的
sessionStorage：在所有同源窗口中都是共享的
localStorage：在所有同源窗口中都是共享的

# web worker

Web Workers 使得一个Web应用程序可以在与主线程分离的后台线程中运行一个脚本。

这样做的好处在于可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞

它的作用就是给JS创造多线程运行环境，允许主线程创建worker线程，分配任务给后者，主线程运行的同时worker线程也在运行，相互不干扰，在worker线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行，这样主线程就会变得轻松，不会被阻塞或拖慢。这并不意味着JS语言本身支持了多线程能力，而是浏览器作为宿主环境提供了JS一个多线程运行的环境。

不过因为worker一旦新建，就会一直运行，不会被主线程的活动打断，这样有利于随时响应主线程的通性，但是也会造成资源的浪费，所以不应过度使用，用完注意关闭。或者说：如果worker无实例引用，该worker空闲后立即会被关闭；如果worker实列引用不为0，该worker空闲也不会被关闭。

# HTML5语义化标签

HTML5语义化标签指的是：在没有css的作用下，单纯通过html标签能够表达出网页的具体内容。比如：article标签用于段落，header为头部等等

# iframe 是什么？有什么缺点

1、iframe也称作嵌入式框架，可以把网页的内容嵌入到iframe

优点：

iframe 能够原封不动的把嵌入的网页展现出来
如果遇到加载缓慢的第三方内容（图标、广告），这些问题可以使用iframe来解决

缺点：

iframe会阻塞主页面的onload事件
iframe和主页面共享连接池，而浏览器对相同域的连接限制，所以会影响页面的并行加载。
代码复杂，无法被一些搜索引擎索引到
很多移动设备无法完全显示框架唉，设备兼容性差
iframe框架页面会增加服务器的http请求

# 什么是 Doctype？严格模式与混杂模式的区别？

1、声明位于文档中的最前面位置，处于标签之前

2、告知浏览器文档使用哪种HTML或XHTML规范

3、重点：告知浏览器按照何种规范解析页面

4、严格模式下：页面排版及JS解析是以该浏览器支持的最高标志来执行

5、混杂模式下：不严格按照标志执行，主要用来兼容旧浏览器，向后兼容

6、Doctype 不存在或格式不正确会导致文档以混杂模式呈现

# Cookie如何防范XSS攻击

XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本。

可以在头部设置set-cookie=httponly; secure

httponly：这个属性可以防止XSS，它会禁止javascript脚本来访问cookie
secure：这个属性告诉浏览器仅在请求为https的时候发送cookie

# http缓存

在这里插入图片描述

http缓存都是从第二次请求开始的

流程：

1、第一次请求资源时，服务器返回资源，并在响应头部中注入回传资源的缓存参数

如：

Cache-Control: max-age=31536000单位是s（http1.1）

expires （http1.0）

优先级：Cache-Control > expires

在这里插入图片描述

选项	解释
max-age=100	缓存100秒后过期，资源缓存在本地
no-cache	不使用本地缓存。使用协商缓存，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务器验证，如果资源未被更改，那可以避免重新下载
no-store	所有内容都不会被缓存，既不使用强制缓存也不使用协商缓存，每次用户请求该资源，都会向服务器发送请求，服务器再返回资源
public	可以被所有的用户缓存，包括客户端和代理服务器
private	只能被客户端缓存，不允许CDN等中继续存服务器对其缓存
s-maxage	覆盖max-age，作用与max-age一样，但只用于代理服务器中缓存

第一次请求：

在这里插入图片描述

2、第二次请求时（相同资源），浏览器会先查看该资源的缓存参数，通过判断 max-age=315360000是否过期，未过期则命中强缓存，不会向后端发送请求。否则就把请求参数注入到请求头部传给服务器

第二次请求：
在这里插入图片描述

补充知识点：

from memory cache 代表使用内存中的缓存
from disk cache 代表使用硬盘中的缓存

浏览器加载顺序为 memory -> disk

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中；而css文件存放在硬盘中的缓存中

在这里插入图片描述

在这里插入图片描述
强缓存的这种方式页面加载速度是最快的，性能也是最好的，但是在这期间必须保证线上资源没有被修改

3、到达服务器，看是否命中协商缓存，命中则返回304，否则服务器会返回新的资源

常见的http缓存只能缓存get请求响应的资源

# 协商缓存（对比缓存）

协商缓存是一种服务端缓存策略

流程：

1、如果服务器使用协商缓存，第一次发送请求从服务端获取到资源后，会将资源在本地进行缓存。并且服务端还会返回资源标识符。

2、再次发送请求时（会携带资源标识符）。此时服务器通过标识符判断浏览器中的资源版本是否与服务器中最新的资源版本是否一致。

3、若一致，服务器就会返回给浏览器304的状态码，重定向让浏览器直接从本地缓存中去取资源

4、若不一致，服务器就会返回给浏览器200的状态码，并且返回最新的资源和新的资源标识符

补充：

资源标识符：

Last-Modified/If-Modified-Since：指资源上一次修改的时间（精确到秒）
Etag/If-None-Match：资源对应的唯一字符串（只要文件内容不同，对应的Etag就一定会发生变化）

为什么需要使用Etag来判断文件是否修改

如果在浏览器本地缓存中缓存了文件，若后台打开了该文件，并进行编辑，但最终保存内容没有发生变化，但此时Last-Modified/If-Modified-Since已经更新修改时间。

再次请求该资源时，通过判断 Last-Modified/If-Modified-Since就会出现下载相同文件，浪费带宽。

因此Etag/If-None-Match就应运而生，服务器会先验证ETag，一致的情况下，才会判断Last-Modified/If-Modified-Since，最后才决定是否返回 304

# 强缓存和协商缓存的对比

	强缓存	协商缓存
缓存存放位置	本地浏览器	本地浏览器
http状态码	200	304
谁来决定	Cache-Control Expires	ETag/If-Not-Match Last-Modified/If-Modified-Since
操作是否有效	1、Ctrl+F5 强制刷新（无效） 2、F5刷新（无效） 3、地址栏回车（有效） 4、页面链接跳转（有效） 5、新开窗口（有效） 6、前进、后退（有效）	1、Ctrl+F5 强制刷新（无效） 2、F5刷新（有效） 3、地址栏回车（有效） 4、页面链接跳转（有效） 5、新开窗口（有效） 6、前进、后退（有效）

# 前端优化手段

降低请求量：合并资源，减少HTTP请求数，minify/gzip压缩，webP，lazyLoad
加快请求速度：预解析DNS，减少域名数，并行加载，CDN分发
缓存：HTTP协议缓存请求，离线缓存 manifest，离线数据缓存localStorage
渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline

# GET和POST的区别

GET 参数通过URL传递，POST参数放在 request body 中
GET 请求在URL中传递的参数是有长度限制的，而 POST 没有
POST 比 GET 更安全
GET 请求只能进行URL 编码，而 POST 支持多种编码方式
GET 请求参数会被完整保留在浏览历史记录里，而 POST 的参数不会被保留
GET 产生一个TCP数据包，POST 产生两个TCP数据包

对于 GET 浏览器会把 http header 和 data 一并发送出去，服务器返回数据

对于 POST 浏览器会先发送 header，再发送 data，服务器返回数据

# 301 和302的区别

301：永久重定向（被请求的资源已永久移动到新位置）
302：临时重定向（被请求的资源临时移动到新位置）

# HTML5 新增的元素

语义化标签：header、footer、nav、aside、section
表单：input增加了 color、email、data、range
存储：sessionStorage、localStorage、离线存储
多媒体：audio、vedio
地理定位
canvas画布
拖放
多线程编程的web worker
websocket协议

# 在地址栏里输入URL，到这个页面呈现出来，中间发生什么？

在这里插入图片描述

1、输入 url 后，需要通过 url 找到其服务器的 ip，为了找到该ip

2、浏览器会先寻找缓存，查看缓存中是否有记录（浏览器缓存 =》系统缓存 =》路由缓存）

3、若没找到，再次查找系统的 hosts文件中是否有记录

4、最终没有，则查询 DNS 服务器，得到 ip 后

5、浏览器会根据 ip 以及端口号，构造一个 http 请求，并将这个请求封装在一个TCP包中

6、这包会经过传输层，网络层，数据链路层，物理层，最终到达服务器

7、服务器接收到该请求后，进行解析，返回相应的html给到浏览器

8、浏览器根据 html 来构建 DOM 树，如果在构建过程中遇到js脚本或外部js链接，则会停止DOM树，来执行和下载js代码，这就会造成阻塞

9、之后，根据外部样式，内部样式，内联样式构建一个CSS对象模型树CSSOM树

10，构建完成后和 DOM 树合并为渲染树（这一步的操作只要是排除非视觉节点，比如script,meta以及displa为none的节点）

11、最后进行布局（确定各个元素的位置和尺寸）

12、由于hrml 文件可能存在图片，视频，音频等资源，在构建 DOM树过程中，遇到这些都会进行并行下载。

13、浏览器对每个于的并行下载数量有一定的限制（4~6）

14、在这下载过程优化的过程中，就可能涉及到强缓存或协商缓存

# CSRF 和 XSS

XSS（跨站脚本攻击）是一种代码注入攻击，攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行，获取敏感信息（Cookie、sessionID）

CSRF（跨站请求伪造）攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨域请求，利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击网站执行某项操作的目的

XSS预防手段：对输入的URL以及参数进行过滤，过滤掉导致脚本执行的相关内容；对动态输入到页面的内容进行html编码，使脚本无法在浏览器中执行

CSRF防御手段：验证HTTP Referer字段；在请求地址中添加token并验证；在HTTP头中自定义属性并验证

# HTTP 常用的请求方式，区别和用途

请求方式	用途
GET	对服务器资源获取的简单请求
POST	用于发送包含用户提交数据的请求
PUT	向服务器提交数据，以修改数据
HEAD	请求页面首部，获取资源的元信息
DELETE	删除服务器上的某些资源
CONNECT	用于ssl隧道的基于代理的请求
OPTIONS	返回所有可用的方法，常用于跨域
TRACE	追踪请求-响应的传输路径

# 网络端口及对应的服务

端口	服务
21	FTP（文件传输协议）
22	SSH
23	Telnet（远程登录）服务
53	DNS域名服务器
80	HTTP超文本传输协议
443	HTTPS
1521	Oracle数据库默认端口
3306	Mysql服务默认端口

# 计算机网络体系结构

在这里插入图片描述

# 在交互过程中如果数据传送完了，还不想断开连接怎么办，怎么维持？

在HTTP中响应体的Connection字段指定为keep-alive即可

# HTTP 的长连接与短连接

1、在长连接出现之前，http1.0中都是使用的短连接，其特点是一次http交互完成后就会断开连接。由于http协议是基于TCP协议的，而TCP协议有三次握手四次挥手来建立以及断开连接，那么面对多次的http请求，这种短连接就会造成多次的握手以及挥手资源浪费，正是因为这个问题才出现了长连接。

2、在http1.1中，出现了http长连接，其特点是保持连接特性，当一次http交互完后该TCP通道并不会关闭，而是会保持一段时间(在不同服务器上时间不一样，可以设置)，如果在这段时间内再次发起了http请求就可以直接复用，而不用重新进行握手，从而减少了资源浪费。目前http1.1中，都是默认使用长连接

3、设置长连接：在请求头上添加connection：keep-alive