客户端有私钥 A + 公钥 A；服务器有私钥 B + 公钥 B；
规则——私钥 A+公钥 A = 密钥对 A（公钥 A 加密的内容只有私钥 A 可以解密！）；
为了建立安全的通信道路（不被坏人篡改、冒名顶替（窃听就木有办法辣，不过也不怕！我们这个是非对称加密！被窃听了也不会被破解的）），客户端把手里的公钥发送给服务器；
服务器使用拿到的公钥 A 进行重要报文（也就是图解 HTTP 提到的 “稍后的共享密钥加密中要使用的密钥”）的加密，之后再发给客户端；
客户端手里有私钥 A，直接解密这个重要报文，安全地获得共享密钥！妙啊！
这样互联网上的不法分子就没辙辣！

另外还可以使用数字证书解决公开密钥的传输问题 – 图解 HTTP 很香啊！

JS 基础

说下 JS 有哪些数据类型？

Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。

那引用数据类型和原始数据类型有什么区别么？

栈：原始数据类型（Undefined、Null、Boolean、Number、String）
堆：引用数据类型（对象、数组和函数）

两种类型的区别在于存储位置的不同：

原始数据类型直接存储在栈（stack）中的简单数据段
- 占据空间小、大小固定
- 属于被频繁使用数据，所以放入栈中存储；
引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。
- 如果存储在栈中，将会影响程序运行的性能；
- 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。
- 当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

说一下 new 一个构造函数过程中发生了什么？

说了一下在红宝书看到过 bulabulabula

另外拓展了一下——判断构造函数的返回值类型，如果 res 为对象类型，new Person 的最终结果为 res 而非我们想要的那个实例对象！

追问-刚才说的第三步提到了 this，那么 new 过以后，this 指向哪里呢？

指向这个新创建的对象（红宝书提到了）。

浏览器原理

这里被问了蛮多的~可能也是因为我在第一个问题的时候说得内容（挖的坑）太多吧！

浏览器的渲染过程

解析 HTML 构建 DOM 树；
解析 CSS 构建 CSSOM 树；
利用上面两个树构建渲染树（渲染树的节点即为“渲染对象”）；
渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以被称作“回流”）这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”；
上述几步过后，布局结束；最后进行绘制，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。

记住这张图：

完整过程中的一些细节——

首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。

然后对 CSS 进行解析，生成 CSSOM 规则树。

根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM 元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。

当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。

布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。

追问-解析文档（HTML）过程中，是将 HTML 都解析完了再去生成渲染树麽？

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

追问-script 中的脚本文件、link 中的 css 文件的解析/执行会阻塞文档解析麽？如何阻塞？

脚本的加载会阻塞文档解析

如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

下图可以直观的看出三者之间的区别:

蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析

所以script 要放在底部/加 async defer 关键字

拓展学习：

JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。

也就是说，如果想要首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。

当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。

CSS 如何阻塞文档解析？

理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们。

面试官也提到了这里，CSS 的解析并不阻塞文档~

但是可以拓展一下，JS 的脚本会因为 CSSOM 树没被构建好而延迟执行，所以！要把 script 放在底部/加 async defer 关键字

然而，存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息（比如根据样式获取元素节点），如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。所以——

如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析。这样就会间接阻塞了文档解析。

追问-什么情况会阻止浏览器渲染

前面问的细节，这个问题比较全面了就

要明确——首先渲染的前提是生成渲染树。

所以 HTML 和 CSS 肯定会阻塞渲染。

如果你想渲染的越快，你越应该降低一开始需要渲染的文件大小，并且扁平层级，优化选择器。

浏览器在解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。

也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。

拓展知识

并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性

当 script 标签加上 defer 属性以后，表示该 JS 文件会并行下载，但是会放到 HTML 解析完成后顺序执行，所以对于这种情况你可以把 script 标签放在任意位置。

同理，对于没有任何依赖的 JS 文件可以加上 async 属性，表示 JS 文件下载和解析不会阻塞渲染（async 属性不能保证 JS 文件的执行是按顺序的~）。

记住下面这个图就好~

蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析

框架

说下 Vue 中的 key 有啥用？

这个因为 Vue 没咋学过，说得比较模糊，但是结合之前学习 React 残留下来的一点记忆强答了一波

官方文档——

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

面试官给出解释——如果不用 key 的话，在列表增删的时候，渲染效率会出问题（和虚拟 DOM 有关）

但是如果 key 使用错误了，在列表顺序需要变更时，则容易发生顺序错误！

其他

了解 CDN 麽？

听说过这个，在一些开源仓库的 readme 中一些资源是挂在 cdn 上的，比如图片和视频。

面试官说 cdn 是用来存储一些资源的类似服务器的东西，一些上线的项目会就近使用这其中的资源，比较快~
CDN 的全称是：

Content Delivery Network，即内容分发网络。

CDN 是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。

算法题

删除字符串-力扣 easy 中稍难一些的一题

与 leetcode1047（利用栈可以巧妙解决）类似，但是要麻烦一些

想了一两分钟，先说思路，使用双指针挨个删除，面试官说可以，让我写代码

然后噩梦开始😂

几分钟吧大概代码就写好了，但是第一遍运行超时，就开始慌了。

现在想想不应该慌，应该从头，从 while 循环（很明显是超时的罪魁祸首）一点点看！但是当时也是因为紧张，就瞎改一堆，越改越乱！反省！

既然难以做到一遍 AC，就应该建立起完整的找错体系！

超时：找 while 循环是不是推出条件错了

答案与结果不符合：把数据代入代码走一遍！

正确答案（自我反省）如下：

/* 删除字符串中出现大于等于 2 的相邻字符 */
function removeDuplicates(str){
    let i = 0, j = 1;
    // 主要错误 1：while(str[j] !== null) 链表写多了！！
    // 退出条件写成这样了我晕！主要就错这里了...还是有点慌
    while(str[j]){
        if(str[i] === str[j]){
            str = deleteStr(str, i, j);
            i = 0;
            j = 1;
        }
        else{
            i++;
            j++;
        }
    }
    return str;
}
function deleteStr(str, i, j){
    // 删除[i,j]范围内的字符串
    let start = i;
    let end;
    while(str[i] === str[j]){
        i++;
        j++;
    }
    end = i;
    // 主要错误 2：删除字符串[i,j]范围内的数居然一时间忘记了！我晕！
    // 当时这么写的：str.split("").splice(start, end-start+1).join("")
    // 这根本改不掉字符串啊...当时我在想啥...
    // 主要是超时我也不太好 console.log()来 debug，
    // 所以下回出现超时问题时第一时间把 while 那里的问题全弄掉！
    let arr = str.split("");
    arr.splice(start, end - start + 1)
    str = arr.join("");
    return str;
}
console.log(removeDuplicates("abbbaca"));// "ca"

作者：敲代码的小提琴手

原文：点击这里

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！