关于前端:滴滴前端一面必会面试题

当在浏览器中输出 Google.com 并且按下回车之后产生了什么？

（1）解析 URL： 首先会对 URL 进行解析，剖析所须要应用的传输协定和申请的资源的门路。如果输出的 URL 中的协定或者主机名不非法，将会把地址栏中输出的内容传递给搜索引擎。如果没有问题，浏览器会查看 URL 中是否呈现了非法字符，如果存在非法字符，则对非法字符进行本义后再进行下一过程。

（2）缓存判断： 浏览器会判断所申请的资源是否在缓存里，如果申请的资源在缓存里并且没有生效，那么就间接应用，否则向服务器发动新的申请。

（3）DNS 解析： 下一步首先须要获取的是输出的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果有则应用，如果没有则向本地 DNS 服务器发动申请。本地 DNS 服务器也会先查看是否存在缓存，如果没有就会先向根域名服务器发动申请，取得负责的顶级域名服务器的地址后，再向顶级域名服务器申请，而后取得负责的权威域名服务器的地址后，再向权威域名服务器发动申请，最终取得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给申请的用户。用户向本地 DNS 服务器发动申请属于递归申请，本地 DNS 服务器向各级域名服务器发动申请属于迭代申请。

（4）获取 MAC 地址： 当浏览器失去 IP 地址后，数据传输还须要晓得目标主机 MAC 地址，因为应用层下发数据给传输层，TCP 协定会指定源端口号和目标端口号，而后下发给网络层。网络层会将本机地址作为源地址，获取的 IP 地址作为目标地址。而后将下发给数据链路层，数据链路层的发送须要退出通信单方的 MAC 地址，本机的 MAC 地址作为源 MAC 地址，目标 MAC 地址须要分状况解决。通过将 IP 地址与本机的子网掩码相与，能够判断是否与申请主机在同一个子网里，如果在同一个子网里，能够应用 APR 协定获取到目标主机的 MAC 地址，如果不在一个子网里，那么申请应该转发给网关，由它代为转发，此时同样能够通过 ARP 协定来获取网关的 MAC 地址，此时目标主机的 MAC 地址应该为网关的地址。

（5）TCP 三次握手： 上面是 TCP 建设连贯的三次握手的过程，首先客户端向服务器发送一个 SYN 连贯申请报文段和一个随机序号，服务端接管到申请后向服务器端发送一个 SYN ACK 报文段，确认连贯申请，并且也向客户端发送一个随机序号。客户端接管服务器的确认应答后，进入连贯建设的状态，同时向服务器也发送一个 ACK 确认报文段，服务器端接管到确认后，也进入连贯建设状态，此时单方的连贯就建设起来了。

（6）HTTPS 握手： 如果应用的是 HTTPS 协定，在通信前还存在 TLS 的一个四次握手的过程。首先由客户端向服务器端发送应用的协定的版本号、一个随机数和能够应用的加密办法。服务器端收到后，确认加密的办法，也向客户端发送一个随机数和本人的数字证书。客户端收到后，首先查看数字证书是否无效，如果无效，则再生成一个随机数，并应用证书中的公钥对随机数加密，而后发送给服务器端，并且还会提供一个后面所有内容的 hash 值供服务器端测验。服务器端接管后，应用本人的私钥对数据解密，同时向客户端发送一个后面所有内容的 hash 值供客户端测验。这个时候单方都有了三个随机数，依照之前所约定的加密办法，应用这三个随机数生成一把秘钥，当前单方通信前，就应用这个秘钥对数据进行加密后再传输。

（7）返回数据： 当页面申请发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接管到响应后，开始对 html 文件进行解析，开始页面的渲染过程。

（8）页面渲染： 浏览器首先会依据 html 文件构建 DOM 树，依据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建设好后，依据它们来构建渲染树。渲染树构建好后，会依据渲染树来进行布局。布局实现后，最初应用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示进去了。

（9）TCP 四次挥手： 最初一步是 TCP 断开连接的四次挥手过程。若客户端认为数据发送实现，则它须要向服务端发送连贯开释申请。服务端收到连贯开释申请后，会通知应用层要开释 TCP 链接。而后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明客户端到服务端的连贯曾经开释，不再接管客户端发的数据了。然而因为 TCP 连贯是双向的，所以服务端仍旧能够发送数据给客户端。服务端如果此时还有没发完的数据会持续发送，结束后会向客户端发送连贯开释申请，而后服务端便进入 LAST-ACK 状态。客户端收到开释申请后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态。该状态会继续 2MSL（最大段生存期，指报文段在网络中生存的工夫，超时会被摈弃）工夫，若该时间段内没有服务端的重发申请的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入 CLOSED 状态。

说说浏览器缓存

缓存能够缩小网络 IO 耗费，进步访问速度。浏览器缓存是一种操作简略、效果显著的前端性能优化伎俩
很多时候，大家偏向于将浏览器缓存简略地了解为“HTTP 缓存”。但事实上，浏览器缓存机制有四个方面，它们依照获取资源时申请的优先级顺次排列如下：Memory Cache
Service Worker Cache
HTTP Cache
Push Cache

缓存它又分为强缓存和协商缓存。优先级较高的是强缓存，在命中强缓存失败的状况下，才会走协商缓存
    实现强缓存，过来咱们始终用 expires。当服务器返回响应时，在 Response Headers 中将过期工夫写入 expires 字段，当初个别应用 Cache-Control 两者同时呈现应用 Cache-Control         协商缓存，Last-Modified 是一个工夫戳，如果咱们启用了协商缓存，它会在首次申请时随着 Response Headers 返回：每次申请去判断这个工夫戳是否发生变化。从而去决定你是 304 读取缓存还是给你返回最新的数据

常⽤的 meta 标签有哪些

meta 标签由 name 和 content 属性定义，用来形容网页文档的属性 ，比方网页的作者，网页形容，关键词等，除了 HTTP 规范固定了一些name 作为大家应用的共识，开发者还能够自定义 name。

罕用的 meta 标签：
（1）charset，用来形容 HTML 文档的编码类型：

<meta charset="UTF-8" >

（2）keywords，页面关键词：

<meta name="keywords" content="关键词" />

（3）description，页面形容：

<meta name="description" content="页面形容内容" />

（4）refresh，页面重定向和刷新：

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，适配挪动端，能够管制视口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中，content 参数有以下几种：

• width viewport：宽度(数值 /device-width)
• height viewport：高度(数值 /device-height)
• initial-scale：初始缩放比例
• maximum-scale：最大缩放比例
• minimum-scale：最小缩放比例
• user-scalable：是否容许用户缩放(yes/no）

（6）搜索引擎索引形式：

<meta name="robots" content="index,follow" />

其中，content 参数有以下几种：

• all：文件将被检索，且页面上的链接能够被查问；
• none：文件将不被检索，且页面上的链接不能够被查问；
• index：文件将被检索；
• follow：页面上的链接能够被查问；
• noindex：文件将不被检索；
• nofollow：页面上的链接不能够被查问。

对 AJAX 的了解，实现一个 AJAX 申请

AJAX 是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的 异步通信，从服务器获取 XML 文档从中提取数据，再更新以后网页的对应局部，而不必刷新整个网页。

创立 AJAX 申请的步骤：

• 创立一个 XMLHttpRequest 对象。
• 在这个对象上 应用 open 办法创立一个 HTTP 申请，open 办法所须要的参数是申请的办法、申请的地址、是否异步和用户的认证信息。
• 在发动申请前，能够为这个对象 增加一些信息和监听函数。比如说能够通过 setRequestHeader 办法来为申请增加头信息。还能够为这个对象增加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变动时会触发 onreadystatechange 事件，能够通过设置监听函数，来解决申请胜利后的后果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接管实现，这个时候能够通过判断申请的状态，如果状态是 2xx 或者 304 的话则代表返回失常。这个时候就能够通过 response 中的数据来对页面进行更新了。
• 当对象的属性和监听函数设置实现后，最初调 用 sent 办法来向服务器发动申请，能够传入参数作为发送的数据体。

const SERVER_URL = "/server";
let xhr = new XMLHttpRequest();
// 创立 Http 申请
xhr.open("GET", url, true);
// 设置状态监听函数
xhr.onreadystatechange = function() {if (this.readyState !== 4) return;
  // 当申请胜利时
  if (this.status === 200) {handle(this.response);
  } else {console.error(this.statusText);
  }
};
// 设置申请失败时的监听函数
xhr.onerror = function() {console.error(this.statusText);
};
// 设置申请头信息
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");
// 发送 Http 申请
xhr.send(null);

应用 Promise 封装 AJAX：

// promise 封装实现：function getJSON(url) {
  // 创立一个 promise 对象
  let promise = new Promise(function(resolve, reject) {let xhr = new XMLHttpRequest();
    // 新建一个 http 申请
    xhr.open("GET", url, true);
    // 设置状态的监听函数
    xhr.onreadystatechange = function() {if (this.readyState !== 4) return;
      // 当申请胜利或失败时，扭转 promise 的状态
      if (this.status === 200) {resolve(this.response);
      } else {reject(new Error(this.statusText));
      }
    };
    // 设置谬误监听函数
    xhr.onerror = function() {reject(new Error(this.statusText));
    };
    // 设置响应的数据类型
    xhr.responseType = "json";
    // 设置申请头信息
    xhr.setRequestHeader("Accept", "application/json");
    // 发送 http 申请
    xhr.send(null);
  });
  return promise;
}

HTTPS是如何保障平安的？

先了解两个概念：

• 对称加密：即通信的双⽅都使⽤同⼀个秘钥进⾏加解密，对称加密尽管很简略性能也好，然而⽆法解决⾸次把秘钥发给对⽅的问题，很容易被⿊客拦挡秘钥。
• ⾮对称加密：
• 私钥 + 公钥 = 密钥对
• 即⽤私钥加密的数据, 只有对应的公钥能力解密, ⽤公钥加密的数据, 只有对应的私钥能力解密
• 因为通信双⽅的⼿⾥都有⼀套⾃⼰的密钥对, 通信之前双⽅会先把⾃⼰的公钥都先发给对⽅
• 而后对⽅再拿着这个公钥来加密数据响应给对⽅, 等到到了对⽅那⾥, 对⽅再⽤⾃⼰的私钥进⾏解密

⾮对称加密尽管安全性更⾼，然而带来的问题就是速度很慢，影响性能。

解决⽅案：

联合两种加密⽅式，将对称加密的密钥使⽤⾮对称加密的公钥进⾏加密，而后发送进来，接管⽅使⽤私钥进⾏解密失去对称加密的密钥，而后双⽅能够使⽤对称加密来进⾏沟通。

此时⼜带来⼀个问题，两头⼈问题：
如果此时在客户端和服务器之间存在⼀个两头⼈, 这个两头⼈只须要把本来双⽅通信互发的公钥, 换成⾃⼰的公钥, 这样两头⼈就能够轻松解密通信双⽅所发送的所有数据。

所以这个时候须要⼀个平安的第三⽅颁发证书（CA），证实身份的身份，防⽌被两头⼈攻打。证书中包含：签发者、证书⽤途、使⽤者公钥、使⽤者私钥、使⽤者的 HASH 算法、证书到期工夫等。

然而问题来了，如果两头⼈篡改了证书，那么身份证明是不是就⽆效了？这个证实就⽩买了，这个时候须要⼀个新的技术，数字签名。

数字签名就是⽤ CA ⾃带的 HASH 算法对证书的内容进⾏ HASH 失去⼀个摘要，再⽤ CA 的私钥加密，最终组成数字签名。当别⼈把他的证书发过来的时候, 我再⽤同样的 Hash 算法, 再次⽣成音讯摘要，而后⽤ CA 的公钥对数字签名解密, 失去 CA 创立的音讯摘要, 两者⼀⽐, 就晓得两头有没有被⼈篡改了。这个时候就能最⼤水平保障通信的平安了。

如果一个构造函数，bind 了一个对象，用这个构造函数创立出的实例会继承这个对象的属性吗？为什么？

不会继承，因为依据 this 绑定四大规定，new 绑定的优先级高于 bind 显示绑定，通过 new 进行结构函数调用时，会创立一个新对象，这个新对象会代替 bind 的对象绑定，作为此函数的 this，并且在此函数没有返回对象的状况下，返回这个新建的对象

快排 – 工夫复杂度 nlogn~ n^2 之间

题目形容: 实现一个快排

实现代码如下:

function quickSort(arr) {if (arr.length < 2) {return arr;}
  const cur = arr[arr.length - 1];
  const left = arr.filter((v, i) => v <= cur && i !== arr.length - 1);
  const right = arr.filter((v) => v > cur);
  return [...quickSort(left), cur, ...quickSort(right)];
}
// console.log(quickSort([3, 6, 2, 4, 1]));

浏览器的渲染过程

浏览器渲染次要有以下步骤：

• 首先解析收到的文档，依据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
• 而后对 CSS 进行解析，生成 CSSOM 规定树。
• 依据 DOM 树和 CSSOM 规定树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个蕴含有色彩和大小等属性的矩形，渲染对象和 DOM 元素绝对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM 元素对应几个可见对象，它们个别是一些具备简单构造的元素，无奈用一个矩形来形容。
• 当渲染对象被创立并增加到树中，它们并没有地位和大小，所以当浏览器生成渲染树当前，就会依据渲染树来进行布局（也能够叫做回流）。这一阶段浏览器要做的事件是要弄清楚各个节点在页面中的确切地位和大小。通常这一行为也被称为“主动重排”。
• 布局阶段完结后是绘制阶段，遍历渲染树并调用渲染对象的 paint 办法将它们的内容显示在屏幕上，绘制应用 UI 根底组件。

大抵过程如图所示：

留神： 这个过程是逐渐实现的，为了更好的用户体验，渲染引擎将会尽可能早的将内容出现到屏幕上，并不会等到所有的 html 都解析实现之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

原型批改、重写

function Person(name) {this.name = name}
// 批改原型
Person.prototype.getName = function() {}
var p = new Person('hello')
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // true
// 重写原型
Person.prototype = {getName: function() {}}
var p = new Person('hello')
console.log(p.__proto__ === Person.prototype)        // true
console.log(p.__proto__ === p.constructor.prototype) // false

能够看到批改原型的时候 p 的构造函数不是指向 Person 了，因为间接给 Person 的原型对象间接用对象赋值时，它的构造函数指向的了根构造函数 Object，所以这时候p.constructor === Object，而不是p.constructor === Person。要想成立，就要用 constructor 指回来：

Person.prototype = {getName: function() {}}
var p = new Person('hello')
p.constructor = Person
console.log(p.__proto__ === Person.prototype)        // true
console.log(p.__proto__ === p.constructor.prototype) // true

常见的位运算符有哪些？其计算规定是什么？

古代计算机中数据都是以二进制的模式存储的，即 0、1 两种状态，计算机对二进制数据进行的运算加减乘除等都是叫位运算，行将符号位独特参加运算的运算。

常见的位运算有以下几种：

1. 按位与运算符（&）

定义： 加入运算的两个数据 按二进制位 进行“与”运算。运算规定：

0 & 0 = 0  
0 & 1 = 0  
1 & 0 = 0  
1 & 1 = 1

总结：两位同时为 1，后果才为 1，否则后果为 0。
例如：3&5 即：

0000 0011 
   0000 0101 
 = 0000 0001

因而 3&5 的值为 1。
留神：正数按补码模式加入按位与运算。

用处：

（1）判断奇偶

只有依据最未位是 0 还是 1 来决定，为 0 就是偶数，为 1 就是奇数。因而能够用 if ((i & 1) == 0) 代替 if (i % 2 == 0) 来判断 a 是不是偶数。

（2）清零

如果想将一个单元清零，即便其全副二进制位为 0，只有与一个各位都为零的数值相与，后果为零。

2. 按位或运算符（|）

定义： 加入运算的两个对象按二进制位进行“或”运算。

运算规定：

0 | 0 = 0
0 | 1 = 1  
1 | 0 = 1  
1 | 1 = 1

总结：加入运算的两个对象只有有一个为 1，其值为 1。
例如：3| 5 即：

0000 0011
  0000 0101 
= 0000 0111

因而，3| 5 的值为 7。
留神：正数按补码模式加入按位或运算。

3. 异或运算符（^）

定义： 加入运算的两个数据按二进制位进行“异或”运算。

运算规定：

0 ^ 0 = 0  
0 ^ 1 = 1  
1 ^ 0 = 1  
1 ^ 1 = 0

总结：加入运算的两个对象，如果两个相应位雷同为 0，相异为 1。
例如：3| 5 即：

0000 0011
  0000 0101 
= 0000 0110

因而，3^5 的值为 6。
异或运算的性质:

• 交换律：(a^b)^c == a^(b^c)
• 结合律：(a + b)^c == a^b + b^c
• 对于任何数 x，都有 x^x=0，x^0=x
• 自反性: a^b^b=a^0=a;

4. 取反运算符 (~)

定义： 加入运算的一个数据按二进制进行“取反”运算。

运算规定：

~ 1 = 0~ 0 = 1

总结：对一个二进制数按位取反，行将 0 变 1，1 变 0。
例如：~6 即：

0000 0110= 1111 1001

在计算机中，负数用原码示意，正数应用补码存储，首先看最高位，最高位 1 示意正数，0 示意负数。此计算机二进制码为正数，最高位为符号位。
当发现按位取反为正数时，就 间接取其补码，变为十进制：

0000 0110   = 1111 1001 反码：1000 0110 补码：1000 0111

因而，~6 的值为 -7。

5. 左移运算符（<<）

定义： 将一个运算对象的各二进制位全副左移若干位，右边的二进制位抛弃，左边补 0。
设 a=1010 1110，a = a<< 2 将 a 的二进制位左移 2 位、右补 0，即得 a =1011 1000。
若左移时舍弃的高位不蕴含 1，则每左移一位，相当于该数乘以 2。

6. 右移运算符（>>）

定义： 将一个数的各二进制位全副右移若干位，负数左补 0，正数左补 1，左边抛弃。
例如：a=a>>2 将 a 的二进制位右移 2 位，左补 0 或者 左补 1 得看被移数是正还是负。
操作数每右移一位，相当于该数除以 2。

7. 原码、补码、反码

下面提到了补码、反码等常识，这里就补充一下。
计算机中的 有符号数 有三种示意办法，即原码、反码和补码。三种示意办法均有符号位和数值位两局部，符号位都是用 0 示意“正”，用 1 示意“负”，而数值位，三种示意办法各不相同。

（1）原码

原码就是一个数的二进制数。例如：10 的原码为 0000 1010

（2）反码

• 负数的反码与原码雷同，如：10 反码为 0000 1010
• 正数的反码为除符号位，按位取反，即 0 变 1，1 变 0。

例如：-10

原码：1000 1010
反码：1111 0101

（3）补码

• 负数的补码与原码雷同，如：10 补码为 0000 1010
• 正数的补码是原码除符号位外的所有位取反即 0 变 1，1 变 0，而后加 1，也就是反码加 1。

例如：-10

原码：1000 1010
反码：1111 0101
补码：1111 0110

对 sticky 定位的了解

sticky 英文字面意思是粘贴，所以能够把它称之为粘性定位。语法：position: sticky; 基于用户的滚动地位来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出指标区域时，它的体现就像 position:fixed;，它会固定在指标地位。元素定位体现为在逾越特定阈值前为绝对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位失效。否则其行为与绝对定位雷同。

代码输入问题

function Parent() {
    this.a = 1;
    this.b = [1, 2, this.a];
    this.c = {demo: 5};
    this.show = function () {console.log(this.a , this.b , this.c.demo);
    }
}

function Child() {
    this.a = 2;
    this.change = function () {this.b.push(this.a);
        this.a = this.b.length;
        this.c.demo = this.a++;
    }
}

Child.prototype = new Parent();
var parent = new Parent();
var child1 = new Child();
var child2 = new Child();
child1.a = 11;
child2.a = 12;
parent.show();
child1.show();
child2.show();
child1.change();
child2.change();
parent.show();
child1.show();
child2.show();

输入后果：

parent.show(); // 1  [1,2,1] 5

child1.show(); // 11 [1,2,1] 5
child2.show(); // 12 [1,2,1] 5

parent.show(); // 1 [1,2,1] 5

child1.show(); // 5 [1,2,1,11,12] 5

child2.show(); // 6 [1,2,1,11,12] 5

这道题目值得神帝，他波及到的知识点很多，例如 this 的指向、原型、原型链、类的继承、数据类型 等。

解析：

1. parent.show()，能够间接取得所需的值，没啥好说的；
2. child1.show()，Child的构造函数本来是指向 Child 的，题目显式将 Child 类的原型对象指向了 Parent 类的一个实例，须要留神 Child.prototype 指向的是 Parent 的实例 parent，而不是指向Parent 这个类。
3. child2.show()，这个也没啥好说的；
4. parent.show()，parent是一个 Parent 类的实例，Child.prorotype指向的是 Parent 类的另一个实例，两者在堆内存中互不影响，所以上述操作不影响 parent 实例，所以输入后果不变；
5. child1.show()，child1执行了 change() 办法后，产生了怎么的变动呢?
6. this.b.push(this.a)，因为 this 的动静指向个性，this.b 会指向 Child.prototype 上的 b 数组,this.a 会指向 child1 的a属性, 所以 Child.prototype.b 变成了[1,2,1,11];
7. this.a = this.b.length，这条语句中 this.a 和this.b的指向与上一句统一，故后果为 child1.a 变为4;
8. this.c.demo = this.a++，因为 child1 本身属性并没有 c 这个属性，所以此处的 this.c 会指向 Child.prototype.c，this.a 值为 4，为原始类型，故赋值操作时会间接赋值，Child.prototype.c.demo 的后果为 4，而this.a 随后自增为5(4 + 1 = 5)。
9. child2执行了 change() 办法, 而 child2 和child1均是 Child 类的实例，所以他们的原型链指向同一个原型对象 Child.prototype, 也就是同一个parent 实例，所以 child2.change() 中所有影响到原型对象的语句都会影响 child1 的最终输入后果。
10. this.b.push(this.a)，因为 this 的动静指向个性，this.b 会指向 Child.prototype 上的 b 数组,this.a 会指向 child2 的a属性, 所以 Child.prototype.b 变成了[1,2,1,11,12];
11. this.a = this.b.length，这条语句中 this.a 和this.b的指向与上一句统一，故后果为 child2.a 变为5;
12. this.c.demo = this.a++，因为 child2 本身属性并没有 c 这个属性，所以此处的 this.c 会指向 Child.prototype.c，故执行后果为Child.prototype.c.demo 的值变为 child2.a 的值 5，而child2.a 最终自增为6(5 + 1 = 6)。

HTTPS 通信（握手）过程

HTTPS 的通信过程如下：

1. 客户端向服务器发动申请，申请中蕴含应用的协定版本号、生成的一个随机数、以及客户端反对的加密办法。
2. 服务器端接管到申请后，确认单方应用的加密办法、并给出服务器的证书、以及一个服务器生成的随机数。
3. 客户端确认服务器证书无效后，生成一个新的随机数，并应用数字证书中的公钥，加密这个随机数，而后发给服 务器。并且还会提供一个后面所有内容的 hash 的值，用来供服务器测验。
4. 服务器应用本人的私钥，来解密客户端发送过去的随机数。并提供后面所有内容的 hash 值来供客户端测验。
5. 客户端和服务器端依据约定的加密办法应用后面的三个随机数，生成对话秘钥，当前的对话过程都应用这个秘钥来加密信息。

说一下常见的 HTTP 状态码? 说一下状态码是 302 和 304 是什么意思？你在我的项目中呈现过么？你是怎么解决的？

    <!-- 状态码：由 3 位数字组成，第一个数字定义了响应的类别 -->
    <!-- 1xx：批示音讯, 示意申请已接管，持续解决 -->
    <!-- 2xx：胜利, 示意申请已被胜利接管，解决 -->
    <!-- 200 OK：客户端申请胜利
         204 No Content：无内容。服务器胜利解决，但未返回内容。个别用在只是客户端向服务器发送信息，而服务器不必向客户端返回什么信息的状况。不会刷新页面。206 Partial Content：服务器曾经实现了局部 GET 申请（客户端进行了范畴申请）。响应报文中蕴含 Content-Range 指定范畴的实体内容
 -->
    <!-- 3xx 重定向 -->
    <!-- 301 Moved Permanently：永恒重定向，示意申请的资源曾经永恒的搬到了其余地位。302 Found：长期重定向，示意申请的资源长期搬到了其余地位
         303 See Other：长期重定向，应应用 GET 定向获取申请资源。303 性能与 302 一样，区别只是 303 明确客户端应该应用 GET 拜访
         307 Temporary Redirect：长期重定向，和 302 有着雷同含意。POST 不会变成 GET
         304 Not Modified：示意客户端发送附带条件的申请（GET 办法申请报文中的 IF…）时，条件不满足。返回 304 时，不蕴含任何响应主体。尽管 304 被划分在 3XX，但和重定向一毛钱关系都没有
 -->
    <!-- 4xx：客户端谬误 -->
    <!-- 400 Bad Request：客户端申请有语法错误，服务器无奈了解。401 Unauthorized：申请未经受权，这个状态代码必须和 WWW-Authenticate 报头域一起应用。403 Forbidden：服务器收到申请，然而回绝提供服务
         404 Not Found：申请资源不存在。比方，输出了谬误的 url
         415 Unsupported media type：不反对的媒体类型
 -->
    <!-- 5xx：服务器端谬误，服务器未能实现非法的申请。-->
    <!-- 500 Internal Server Error：服务器产生不可预期的谬误。503 Server Unavailable：服务器以后不能解决客户端的申请，一段时间后可能恢复正常，-->

代码输入后果

function runAsync (x) {const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
    return p
}

Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then(res => console.log(res))

输入后果如下：

1
2
3
[1, 2, 3]

首先，定义了一个 Promise，来异步执行函数 runAsync，该函数传入一个值 x，而后距离一秒后打印出这个 x。

之后再应用 Promise.all 来执行这个函数，执行的时候，看到一秒之后输入了 1，2，3，同时输入了数组[1, 2, 3]，三个函数是同步执行的，并且在一个回调函数中返回了所有的后果。并且后果和函数的执行程序是统一的。

抉择排序 – 工夫复杂度 n^2

题目形容: 实现一个抉择排序

实现代码如下:

function selectSort(arr) {
  // 缓存数组长度
  const len = arr.length;
  // 定义 minIndex，缓存以后区间最小值的索引，留神是索引
  let minIndex;
  // i 是以后排序区间的终点
  for (let i = 0; i < len - 1; i++) {
    // 初始化 minIndex 为以后区间第一个元素
    minIndex = i;
    // i、j 别离定义以后区间的上下界，i 是左边界，j 是右边界
    for (let j = i; j < len; j++) {
      // 若 j 处的数据项比以后最小值还要小，则更新最小值索引为 j
      if (arr[j] < arr[minIndex]) {minIndex = j;}
    }
    // 如果 minIndex 对应元素不是目前的头部元素，则替换两者
    if (minIndex !== i) {[arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
    }
  }
  return arr;
}
// console.log(quickSort([3, 6, 2, 4, 1]));

new 操作符的实现原理

new 操作符的执行过程：

（1）首先创立了一个新的空对象

（2）设置原型，将对象的原型设置为函数的 prototype 对象。

（3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象增加属性）

（4）判断函数的返回值类型，如果是值类型，返回创立的对象。如果是援用类型，就返回这个援用类型的对象。

具体实现：

function objectFactory() {
  let newObject = null;
  let constructor = Array.prototype.shift.call(arguments);
  let result = null;
  // 判断参数是否是一个函数
  if (typeof constructor !== "function") {console.error("type error");
    return;
  }
  // 新建一个空对象，对象的原型为构造函数的 prototype 对象
  newObject = Object.create(constructor.prototype);
  // 将 this 指向新建对象，并执行函数
  result = constructor.apply(newObject, arguments);
  // 判断返回对象
  let flag = result && (typeof result === "object" || typeof result === "function");
  // 判断返回后果
  return flag ? result : newObject;
}
// 应用办法
objectFactory(构造函数, 初始化参数);

说一下 SPA 单页面有什么优缺点？

长处：1. 体验好，不刷新，缩小 申请  数据 ajax 异步获取 页面流程；2. 前后端拆散

3. 加重服务端压力

4. 共用一套后端程序代码，适配多端

毛病：1. 首屏加载过慢；2.SEO 不利于搜索引擎抓取

哪些操作会造成内存透露？

• 第一种状况是因为应用未声明的变量，而意外的创立了一个全局变量，而使这个变量始终留在内存中无奈被回收。
• 第二种状况是设置了 setInterval 定时器，而遗记勾销它，如果循环函数有对外部变量的援用的话，那么这个变量会被始终留在内存中，而无奈被回收。
• 第三种状况是获取一个 DOM 元素的援用，而前面这个元素被删除，因为咱们始终保留了对这个元素的援用，所以它也无奈被回收。
• 第四种状况是不合理的应用闭包，从而导致某些变量始终被留在内存当中。

对浏览器的缓存机制的了解

浏览器缓存的全过程：

• 浏览器第一次加载资源，服务器返回 200，浏览器从服务器下载资源文件，并缓存资源文件与 response header，以供下次加载时比照应用；
• 下一次加载资源时，因为强制缓存优先级较高，先比拟以后工夫与上一次返回 200 时的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，间接从本地读取资源。如果浏览器不反对 HTTP1.1，则应用 expires 头判断是否过期；
• 如果资源已过期，则表明强制缓存没有被命中，则开始协商缓存，向服务器发送带有 If-None-Match 和 If-Modified-Since 的申请；
• 服务器收到申请后，优先依据 Etag 的值判断被申请的文件有没有做批改，Etag 值统一则没有批改，命中协商缓存，返回 304；如果不统一则有改变，间接返回新的资源文件带上新的 Etag 值并返回 200；

• 如果服务器收到的申请没有 Etag 值，则将 If-Modified-Since 和被申请文件的最初批改工夫做比对，统一则命中协商缓存，返回 304；不统一则返回新的 last-modified 和文件并返回 200；

  很多网站的资源前面都加了版本号，这样做的目标是：每次降级了 JS 或 CSS 文件后，为了避免浏览器进行缓存，强制扭转版本号，客户端浏览器就会从新下载新的 JS 或 CSS 文件，以保障用户可能及时取得网站的最新更新。