2023高薪前端面试题（一、前端基础——HTTP/HTML/浏览器）

• 说一下http和https？

http：超文本传输协议，是一个基于请求与响应、无状态的应用层协议，以明文方式发送信息，最初设计目的是提供一种发布和接收 HTML 页面的方法。

https：是http的安全版，它的安全基础是SSL。通俗来讲就是外层加了一个SSL加密协议的http。是一种通过计算机网络进行安全通信的传输协议，经由http进行通信，利用SSL和TLS建立安全通道，来进行加密数据包。https主要就是用来提供对服务器的身份认证，同时对进行传输的内容进行加密。SSL协议又分为记录协议和握手协议。

区别：

1、HTTPS  协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)

2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

---

• tcp三次握手，一句话概括？

一句话概括:确认双方的接收与发送能力是否正常。

从图片可以得到三次握手可以简化为：C发起请求连接S确认，S也发起请求连接C确认

每次握手的作用：
第一次握手： S只可以确认 自己可以接收C发送的报文段
（客户端给服务器发送一个 SYN 报文）
（服务器收到 SYN 报文之后，会应答一个 SYN+ACK 报文。）

第二次握手：C可以确认 S收到了自己的报文段，并且可以确认自己可以接受S发送的报文段
（客户端收到 SYN+ACK 报文之后，会回应一个 ACK 报文。）

第三次握手：S可以确认C收到了自己发送的报文段
（服务器收到 ACK 报文之后，三次握手建立完成。）

---

• TCP 和 UDP 的区别

TCP和UPD协议，是提供拥塞，错误和流量控制的协议。

TCP: 传输控制协议（TCP）是TCP/IP模型的传输层协议。它是一个面向连接的协议。因此，协议首先在源和目标之间建立连接。此外，源和目标开始通过此已建立的路径进行通信。

UDP  或用户数据报协议是 TCP/IP 模型传输层的无连接协议。它既不建立连接，也不检查目标计算机是否已准备好接收。该协议只是将数据发送到目标计算机。

TCP 实现三次握手协议，有助于流量控制、错误控制和拥塞控制，这使得TCP高度可靠。因为它需要确认发送的信息。此外，重新发送丢失的数据包（如果有）。保证以相同的顺序传递数据包。

UDP不太可靠，在UDP的情况下，如果数据包丢失，它不会请求重新传输，目标计算机会收到损坏的数据。因此，UDP 是一种不可靠的协议。

	tcp	udp
概念	面向连接（即需要建立连接）	面向无连接
	保证数据顺序	无法保证数据顺序
	只支持点对点通讯	支持一对一、一对多、多对多通讯
	有拥塞机制	无拥塞机制
	头部20-60个字节	头部8个字节
传输速度	要求实时性低，准确度高	要求实时性高，准确度低
	面向字节流（发送数据时会将数据分解为多个小的数据报文进行发送）	基于数据报（发送数据时会直接打上UDP头部将整个报文发送出去）
类型	HTTP（超文本传输协议） HTTPS（超文本传输协议安全） FTP（文件传输协议） SMTP（简单邮件传输协议）等	BOOTP（Bootstrap Protocol）， DHCP（动态主机配置协议）， DNS（域名服务器）， TFTP（简单文件传输协议）等
应用场景	发送或接收邮件（POP IMAP SMTP 对数据准确性要求高，非紧急应用），远程登录（TELNET SSH 对数据准确性有一定要求，有连接的概念）等	即时通信（QQ聊天 对数据准确性和丢包要求比较低，但速度必须快），在线视频（RTSP 速度一定要快，保证视频连续，但是偶尔花了一个图像帧，人们还是能接受的），网络语音电话（VoIP 语音数据包一般比较小，需要高速发送，偶尔断音或串音也没有问题），发送音频和视频文件等等，
	有三次握手可以保证数据传输的可靠性	传输数据可能存在丢包
错误检查	只有 TCP 可以纠正错误，因为它同时具有拥塞和流量控制。	UDP只可以检查，不可以纠正错误

---

• WebSocket 的实现和应用

(1)什么是 WebSocket?

WebSocket 是 HTML5 中的协议，支持持久连续，http 协议不支持持久性连接。Http1.0

和 HTTP1.1 都不支持持久性的链接，HTTP1.1 中的 keep-alive，将多个 http 请求合并

为 1 个

(2)WebSocket 是什么样的协议，具体有什么优点？

HTTP 的生命周期通过 Request 来界定，也就是 Request 一个 Response，那么在

Http1.0 协议中，这次 Http 请求就结束了。在 Http1.1 中进行了改进，是的有一个

connection：Keep-alive，也就是说，在一个 Http 连接中，可以发送多个 Request，

接收多个 Response。但是必须记住，在 Http 中一个 Request 只能对应有一个

Response，而且这个 Response 是被动的，不能主动发起。

WebSocket 是基于 Http 协议的，或者说借用了 Http 协议来完成一部分握手，在握手阶

段与 Http 是相同的。我们来看一个 websocket 握手协议的实现，基本是 2 个属性，

upgrade，connection。

WebSocket是一种协议，可以在单个TCP连接上进行全双工通信。该协议使客户端与服务器之间数据交换变得更加简单，可以让服务器端主动向客户端推送数据。

在WebSocket API中，浏览器与服务器只需要完成一次握手，两者之间就可以创建持久性的连接并进行双向数据传输。

首先，http协议的特点是无状态连接。即http的前一次连接与后一次连接是相互独立的。

交互是双方的事情，怎么能限定一方发数据，另一方接数据呢？

websocket的解决方案： 建立固定连接，适用于项目中存在需要S端向C/B端发送数据的情形。

应用场景

1.数据传输实时性要求较高的场景，比如网页聊天室，直播。

2.推送信息，比如网站消息通知，邮箱新邮件提醒等。

3.监控在线状态，统计在线时长，比如在线考试等。

4.远程调试代码、云指令系统，比如云服务器。

5.其它也可用于网络渗透技术，多玩家网络游戏。

6.账户余额等数据的实时更新。

实际的使用，其实就是服务端自己调用WebSocket的sendInfo接口。当然也可以自己扩展更为细致的逻辑，方法等。

---

• HTTP 请求的方式，HEAD 方式

head：类似于 get 请求，只不过返回的响应中没有具体的内容，用户获取报头

options：允许客户端查看服务器的性能，比如说服务器支持的请求方式等等。

---

• 一个图片 url 访问后直接下载怎样实现？

参考回答：

请求的返回头里面，用于浏览器解析的重要参数就是 OSS 的 API 文档里面的返回 http

头，决定用户下载行为的参数。

下载的情况下：

1. x-oss-object-type:

Normal

2. x-oss-request-id:

598D5ED34F29D01FE2925F41

3. x-oss-storage-class:

Standard

---

• 说一下 web Quality（无障碍）

参考回答：

能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。

残障人士指的是那些带有残疾或者身体不健康的用户。

使用 alt 属性：

<img src="person.jpg" alt="this is a person"/>

有时候浏览器会无法显示图像。具体的原因有：

用户关闭了图像显示

浏览器是不支持图形显示的迷你浏览器

浏览器是语音浏览器（供盲人和弱视人群使用）

如果您使用了 alt 属性，那么浏览器至少可以显示或读出有关图像的描述。

---

• 几个很实用的 BOM 属性对象方法?

参考回答：

什么是 Bom? Bom 是浏览器对象。有哪些常用的 Bom 属性呢？

(1)location 对象

location.href-- 返回或设置当前文档的 URL

location.search -- 返回 URL 中的查询字符串部分。例

如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的

内容?id=5&name=dreamdu

location.hash -- 返回 URL#后面的内容，如果没有#，返回空

location.host -- 返回 URL 中的域名部分，例如 www.dreamdu.com

location.hostname -- 返回 URL 中的主域名部分，例如 dreamdu.com

location.pathname -- 返回 URL 的域名后的部分。例

如 http://www.dreamdu.com/xhtml/ 返回/xhtml/

location.port -- 返回 URL 中的端口部分。例

如 http://www.dreamdu.com:8080/xhtml/ 返回 8080 location.protocol -- 返回 URL 中的协议部分。例

如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容 http:

location.assign -- 设置当前文档的 URL

location.replace() -- 设置当前文档的 URL，并且在 history 对象的地址列表中移除

这个 URL location.replace(url);

location.reload() -- 重载当前页面

(2)history 对象

history.go() -- 前进或后退指定的页面数 history.go(num);

history.back() -- 后退一页

history.forward() -- 前进一页

(3)Navigator 对象

navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等

的字符串)

navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

---

• 说一下 HTML5 drag api

参考回答：

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

  ---

• 说一下 http2.0

参考回答：

首先补充一下，http 和 https 的区别，相比于 http,https 是基于 ssl 加密的 http 协

议

简要概括：http2.0 是基于 1999 年发布的 http1.0 之后的首次更新。

提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比 http1.0）

允许多路复用：多路复用允许同时通过单一的 HTTP/2 连接发送多重请求-响应信息。

改善了：在 http1.1 中，浏览器客户端在同一时间，针对同一域名下的请求有一定数

量限制（连接数量），超过限制会被阻塞。

二进制分帧：HTTP2.0 会将所有的传输信息分割为更小的信息或者帧，并对他们进行二

进制编码

首部压缩

服务器端推送

---

• fetch 发送 2 次请求的原因

参考回答：

fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功？

原因很简单，因为你用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个

Options 请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发

送真正的请求。

---

• Cookie、sessionStorage、localStorage 的区别

参考回答：

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

webstorage是本地存储，存储在客户端，包括 localStorage和sessionStorage。

区别：

1、数据传递不同

• cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。
• sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

2、生命周期不同

就是数据的有效期不同。

• cookie：可以设置失效时间；如果没有设置失效时间，浏览器关闭后数据会失效
• localStorage：数据会永久保存，除非手动清除
• sessionStorage：会话当前数据有效就是在浏览器窗口关闭之前有效，浏览器关闭后数据会被清除

3、存储大小限制不同

• cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下,存储的大小很小只有 4K 左右。 （key：可以在浏览器和服务器端来回传递