admin 管理员组文章数量: 887021
-
说一下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头部将整个报文发送出去） | |
| 类型 |
|
|
| 应用场景 | 发送或接收邮件（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/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的 内容?id=5&name=dreamdu location.hash -- 返回 URL#后面的内容，如果没有#，返回空 location.host -- 返回 URL 中的域名部分，例如 www.dreamdu location.hostname -- 返回 URL 中的主域名部分，例如 dreamdu location.pathname -- 返回 URL 的域名后的部分。例 如 http://www.dreamdu/xhtml/ 返回/xhtml/ location.port -- 返回 URL 中的端口部分。例 如 http://www.dreamdu:8080/xhtml/ 返回 8080 location.protocol -- 返回 URL 中的协议部分。例 如 http://www.dreamdu: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：可以在浏览器和服务器端来回传递
版权声明：本文标题：2023高薪前端面试题（一、前端基础——HTTPHTML浏览器） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1725920048h892849.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论