导航


HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

算法

UI、组件库

Node

业务技能

针对性攻坚

公共类

基础设施

AI


🔥 介绍一下你对浏览器内核的理解

主要分成两部分:

渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。

详细文章:浏览器内核的解析和对比

graph LR;
浏览器内核-->渲染引擎
浏览器内核-->JS引擎

判断浏览器类型

function isAndroid() {
  return /Android/.test(navigator.userAgent);
}
function isiPhone() {
  return /iPhone/.test(navigator.userAgent);
}
function isiPad() {
  return /iPad/.test(navigator.userAgent);
}
function isiOS() {
  return /(iPhone)|(iPad)/i.test(navigator.userAgent);
}

🔥 Ajax、Axios、Fetch 有啥区别?

🔥 application/json 和 application/x-www-form-urlencoded 在数据请求和处理上,有什么区别?

🔥 Content-Type: application/json VS application/x-www-form-urlencoded

介绍下 http1.0http1.1http2.0 协议的区别?

首先说 http1.0

它的特点是每次请求和响应完毕后都会销毁 TCP 连接,同时规定前一个响应完成后才能发送下一个请求。这样做有两个问题:

  1. 无法复用连接

    每次请求都要创建新的 TCP 连接,完成三次握手和四次挥手,网络利用率低

  2. 队头阻塞

    如果前一个请求被某种原因阻塞了,会导致后续请求无法发送。

然后是 http1.1

http1.1 是 http1.0 的改进版,它做出了以下改进:

  1. 长连接

    http1.1 允许在请求时增加请求头 connection: keep-alive,这样便允许后续的客户端请求在一段时间内复用之前的 TCP 连接

  2. 管道化

    基于长连接的基础,管道化可以不等第一个请求响应继续发送后面的请求,但响应的顺序还是按照请求的顺序返回。

  3. 缓存处理

    新增响应头 cache-control,用于实现客户端缓存。

  4. 断点传输

    在上传/下载资源时,如果资源过大,将其分割为多个部分,分别上传/下载,如果遇到网络故障,可以从已经上传/下载好的地方继续请求,不用从头开始,提高效率

最后是 http2.0

http2.0 进一步优化了传输效率,它主要有以下改进:

  1. 二进制分帧

    将传输的消息分为更小的二进制帧,每帧有自己的标识序号,即便被随意打乱也能在另一端正确组装

  2. 多路复用

    基于二进制分帧,在同一域名下所有访问都是从同一个 tcp 连接中走,并且不再有队头阻塞问题,也无须遵守响应顺序

  3. 头部压缩

    http2.0 通过字典的形式,将头部中的常见信息替换为更少的字符,极大的减少了头部的数据量,从而实现更小的传输量

  4. 服务器推送

    http2.0 允许服务器直接推送消息给客户端,无须客户端明确的请求

为什么 HTTP1.1 不能实现多路复用(腾讯)

HTTP/1.1 不是二进制传输,而是通过文本进行传输。由于没有流的概念,在使用并行传输(多路复用)传递数据时,接收端在接收到响应后,并不能区分多个响应分别对应的请求,所以无法将多个响应的结果重新进行组装,也就实现不了多路复用。

简单讲解一下 http2 的多路复用(网易)

在 HTTP/2 中,有两个非常重要的概念,分别是帧(frame)和流(stream)。 帧代表着最小的数据单位,每个帧会标识出该帧属于哪个流,流也就是多个帧组成的数据流。 多路复用,就是在一个 TCP 连接中可以存在多条流。换句话说,也就是可以发送多个请求,对端可以通过帧中的标识知道属于哪个请求。通过这个技术,可以避免 HTTP 旧版本中的队头阻塞问题,极大的提高传输性能。

🔥 说下单点登录

🔥 单点登录