关于前端:高级前端二面高频面试题合集

所有一般的 [[Prototype]] 链最终都会指向内置的 Object.prototype，其蕴含了 JavaScript 中许多通用的性能
为什么能创立“类”，借助一种非凡的属性：所有的函数默认都会领有一个名为 prototype 的共有且不可枚举的属性，它会指向另外一个对象，这个对象通常被称为函数的原型

function Person(name) {this.name = name;}

Person.prototype.constructor = Person

在产生 new 结构函数调用时，会将创立的新对象的 [[Prototype]] 链接到 Person.prototype 指向的对象，这个机制就被称为原型链继承
办法定义在原型上，属性定义在构造函数上
首先要说一下 JS 原型和实例的关系：每个构造函数（constructor）都有一个原型对象（prototype），这个原型对象蕴含一个指向此构造函数的指针属性，通过 new 进行结构函数调用生成的实例，此实例蕴含一个指向原型对象的指针，也就是通过 [[Prototype]] 链接到了这个原型对象
而后说一下 JS 中属性的查找：当咱们试图援用实例对象的某个属性时，是依照这样的形式去查找的，首先查找实例对象上是否有这个属性，如果没有找到，就去结构这个实例对象的构造函数的 prototype 所指向的对象下来查找，如果还找不到，就从这个 prototype 对象所指向的构造函数的 prototype 原型对象下来查找
什么是原型链：这样逐级查找形似一个链条，且通过 [[Prototype]] 属性链接，所以被称为原型链
什么是原型链继承，类比类的继承：当有两个构造函数 A 和 B，将一个构造函数 A 的原型对象的，通过其 [[Prototype]] 属性链接到另外一个 B 构造函数的原型对象时，这个过程被称之为原型继承。

标准答案更正确的解释

什么是原型链？

当对象查找一个属性的时候，如果没有在本身找到，那么就会查找本身的原型，如果原型还没有找到，那么会持续查找原型的原型，直到找到 Object.prototype 的原型时，此时原型为 null，查找进行。
这种通过通过原型链接的逐级向上的查找链被称为原型链

什么是原型继承？

一个对象能够应用另外一个对象的属性或者办法，就称之为继承。具体是通过将这个对象的原型设置为另外一个对象，这样依据原型链的规定，如果查找一个对象属性且在本身不存在时，就会查找另外一个对象，相当于一个对象能够应用另外一个对象的属性和办法了。

JavaScript 应用 Number 类型来示意数字（整数或浮点数），遵循 IEEE 754 规范，通过 64 位来示意一个数字（1 + 11 + 52）

1 符号位，0 示意负数，1 示意正数 s
11 指数位（e）
52 尾数，小数局部（即有效数字）

最大平安数字：Number.MAX_SAFE_INTEGER = Math.pow(2, 53) – 1，转换成整数就是 16 位，所以 0.1 === 0.1，是因为通过 toPrecision(16) 去无效位之后，两者是相等的。

在两数相加时，会先转换成二进制，0.1 和 0.2 转换成二进制的时候尾数会产生有限循环，而后进行对阶运算，JS 引擎对二进制进行截断，所以造成精度失落。

所以总结：精度失落可能呈现在进制转换和对阶运算中

DNS 服务器解析域名的过程：

首先会在 浏览器的缓存 中查找对应的 IP 地址，如果查找到间接返回，若找不到持续下一步
将申请发送给 本地 DNS 服务器，在本地域名服务器缓存中查问，如果查找到，就间接将查找后果返回，若找不到持续下一步
本地 DNS 服务器向 根域名服务器 发送申请，根域名服务器会返回一个所查问域的顶级域名服务器地址
本地 DNS 服务器向 顶级域名服务器 发送申请，承受申请的服务器查问本人的缓存，如果有记录，就返回查问后果，如果没有就返回相干的下一级的权威域名服务器的地址
本地 DNS 服务器向 权威域名服务器 发送申请，域名服务器返回对应的后果
本地 DNS 服务器将返回后果保留在缓存中，便于下次应用
本地 DNS 服务器将返回后果返回给浏览器

比方要查问 IP 地址，首先会在浏览器的缓存中查找是否有该域名的缓存，如果不存在就将申请发送到本地的 DNS 服务器中，本地 DNS 服务器会判断是否存在该域名的缓存，如果不存在，则向根域名服务器发送一个申请，根域名服务器返回负责 .com 的顶级域名服务器的 IP 地址的列表。而后本地 DNS 服务器再向其中一个负责 .com 的顶级域名服务器发送一个申请，负责 .com 的顶级域名服务器返回负责 .baidu 的权威域名服务器的 IP 地址列表。而后本地 DNS 服务器再向其中一个权威域名服务器发送一个申请，最初权威域名服务器返回一个对应的主机名的 IP 地址列表。

形容：应用setTimeout 模仿实现 setInterval 的性能。

实现：

const mySetInterval(fn, time) {
    let timer = null;
    const interval = () => {timer = setTimeout(() => {fn();  // time 工夫之后会执行真正的函数 fn
            interval();  // 同时再次调用 interval 自身}, time)
    }
    interval();  // 开始执行
    // 返回用于敞开定时器的函数
    return () => clearTimeout(timer);
}

// 测试
const cancel = mySetInterval(() => console.log(1), 400);
setTimeout(() => {cancel();
}, 1000);  
// 打印两次 1

HTTP1.0 中默认是在每次申请 / 应答，客户端和服务器都要新建一个连贯，实现之后立刻断开连接，这就是 短连贯 。当应用 Keep-Alive 模式时，Keep-Alive 性能使客户端到服务器端的连贯继续无效，当呈现对服务器的后继申请时，Keep-Alive 性能防止了建设或者从新建设连贯，这就是 长连贯。其应用办法如下：

HTTP1.0 版本是默认没有 Keep-alive 的（也就是默认会发送 keep-alive），所以要想连贯失去放弃，必须手动配置发送 Connection: keep-alive 字段。若想断开 keep-alive 连贯，需发送 Connection:close 字段；
HTTP1.1 规定了默认放弃长连贯，数据传输实现了放弃 TCP 连接不断开，期待在同域名下持续用这个通道传输数据。如果须要敞开，须要客户端发送 Connection：close 首部字段。

Keep-Alive 的 建设过程：

客户端向服务器在发送申请报文同时在首部增加发送 Connection 字段
服务器收到申请并解决 Connection 字段
服务器回送 Connection:Keep-Alive 字段给客户端
客户端接管到 Connection 字段
Keep-Alive 连贯建设胜利

服务端主动断开过程（也就是没有 keep-alive）：

客户端向服务器只是发送内容报文（不蕴含 Connection 字段）
服务器收到申请并解决
服务器返回客户端申请的资源并敞开连贯
客户端接管资源，发现没有 Connection 字段，断开连接

客户端申请断开连接过程：

客户端向服务器发送 Connection:close 字段
服务器收到申请并解决 connection 字段
服务器回送响应资源并断开连接
客户端接管资源并断开连接

开启 Keep-Alive 的 长处：

较少的 CPU 和内存的使⽤（因为同时关上的连贯的缩小了）；
容许申请和应答的 HTTP 管线化；
升高拥塞管制（TCP 连贯缩小了）；
缩小了后续申请的提早（⽆需再进⾏握⼿）；
报告谬误⽆需敞开 TCP 连；

开启 Keep-Alive 的毛病：

长时间的 Tcp 连贯容易导致系统资源有效占用，节约系统资源。

（1）line-height 的概念：

line-height 指一行文本的高度，蕴含了字间距，实际上是下一行基线到上一行基线间隔；
如果一个标签没有定义 height 属性，那么其最终体现的高度由 line-height 决定；
一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
把 line-height 值设置为 height 一样大小的值能够实现单行文字的垂直居中；
line-height 和 height 都能撑开一个高度；

（2）line-height 的赋值形式：

带单位：px 是固定值，而 em 会参考父元素 font-size 值计算本身的行高
纯数字：会把比例传递给后辈。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
百分比：将计算后的值传递给后辈

CSS3 中的盒模型有以下两种: 规范盒模型、IE 盒模型
盒模型都是由四个局部组成的, 别离是 margin、border、padding 和 content
规范盒模型和 IE 盒模型的区别在于设置 width 和 height 时, 所对应的范畴不同
1、规范盒模型的 width 和 height 属性的范畴只蕴含了 content
2、IE 盒模型的 width 和 height 属性的范畴蕴含了 border、padding 和 content
能够通过批改元素的 box-sizing 属性来扭转元素的盒模型；1、box-sizing：content-box 示意规范盒模型（默认值）2、box-sizing：border-box 示意 IE 盒模型（怪异盒模型）

加载性能：

（1）css 压缩：将写好的 css 进行打包压缩，能够减小文件体积。

（2）css 繁多款式：当须要下边距和右边距的时候，很多时候会抉择应用 margin:top 0 bottom 0；但 margin-bottom:bottom;margin-left:left; 执行效率会更高。

（3）缩小应用 @import，倡议应用 link，因为后者在页面加载时一起加载，前者是期待页面加载实现之后再进行加载。

选择器性能：

（1）要害选择器（key selector）。选择器的最初面的局部为要害选择器（即用来匹配指标元素的局部）。CSS 选择符是从右到左进行匹配的。当应用后辈选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

（2）如果规定领有 ID 选择器作为其要害选择器，则不要为规定减少标签。过滤掉无关的规定（这样款式零碎就不会浪费时间去匹配它们了）。

（3）防止应用通配规定，如 *{}计算次数惊人，只对须要用到的元素进行抉择。

（4）尽量少的去对标签进行抉择，而是用 class。

（5）尽量少的去应用后辈选择器，升高选择器的权重值。后辈选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的应用类来关联每一个标签元素。

（6）理解哪些属性是能够通过继承而来的，而后防止对这些属性反复指定规定。

渲染性能：

（1）谨慎应用高性能属性：浮动、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规定：{}。空规定的产生起因一般来说是为了预留款式。去除这些空规定无疑能缩小 css 文档体积。

（4）属性值为 0 时，不加单位。

（5）属性值为浮动小数 0.**，能够省略小数点之前的 0。

（6）标准化各种浏览器前缀：带浏览器前缀的在前。规范属性在后。

（7）不应用 @import 前缀，它会影响 css 的加载速度。

（8）选择器优化嵌套，尽量避免层级过深。

（9）css 雪碧图，同一页面相近局部的小图标，方便使用，缩小页面的申请次数，然而同时图片自身会变大，应用时，优劣思考分明，再应用。

（10）正确应用 display 的属性，因为 display 的作用，某些款式组合会有效，徒增款式体积的同时也影响解析性能。

（11）不滥用 web 字体。对于中文网站来说 WebFonts 可能很生疏，国外却很风行。web fonts 通常体积宏大，而且一些浏览器在下载 web fonts 时会阻塞页面渲染伤害性能。

可维护性、健壮性：

（1）将具备雷同属性的款式抽离进去，整合并通过 class 在页面中进行应用，进步 css 的可维护性。

（2）款式与内容拆散：将 css 代码定义到内部 css 中。

V8 实现了精确式 GC，GC 算法采纳了分代式垃圾回收机制。因而，V8 将内存（堆）分为新生代和老生代两局部。

（1）新生代算法

新生代中的对象个别存活工夫较短，应用 Scavenge GC 算法。

在新生代空间中，内存空间分为两局部，别离为 From 空间和 To 空间。在这两个空间中，必然有一个空间是应用的，另一个空间是闲暇的。新调配的对象会被放入 From 空间中，当 From 空间被占满时，新生代 GC 就会启动了。算法会查看 From 空间中存活的对象并复制到 To 空间中，如果有失活的对象就会销毁。当复制实现后将 From 空间和 To 空间调换，这样 GC 就完结了。

（2）老生代算法

老生代中的对象个别存活工夫较长且数量也多，应用了两个算法，别离是标记革除算法和标记压缩算法。

先来说下什么状况下对象会呈现在老生代空间中：

新生代中的对象是否曾经经验过一次 Scavenge 算法，如果经验过的话，会将对象从新生代空间移到老生代空间中。
To 空间的对象占比大小超过 25 %。在这种状况下，为了不影响到内存调配，会将对象从新生代空间移到老生代空间中。

老生代中的空间很简单，有如下几个空间

enum AllocationSpace {// TODO(v8:7464): Actually map this space's memory as read-only.
  RO_SPACE,    // 不变的对象空间
  NEW_SPACE,   // 新生代用于 GC 复制算法的空间
  OLD_SPACE,   // 老生代常驻对象空间
  CODE_SPACE,  // 老生代代码对象空间
  MAP_SPACE,   // 老生代 map 对象
  LO_SPACE,    // 老生代大空间对象
  NEW_LO_SPACE,  // 新生代大空间对象
  FIRST_SPACE = RO_SPACE,
  LAST_SPACE = NEW_LO_SPACE,
  FIRST_GROWABLE_PAGED_SPACE = OLD_SPACE,
  LAST_GROWABLE_PAGED_SPACE = MAP_SPACE
};

在老生代中，以下状况会先启动标记革除算法：

某一个空间没有分块的时候
空间中被对象超过肯定限度
空间不能保障新生代中的对象挪动到老生代中

在这个阶段中，会遍历堆中所有的对象，而后标记活的对象，在标记实现后，销毁所有没有被标记的对象。在标记大型对内存时，可能须要几百毫秒能力实现一次标记。这就会导致一些性能上的问题。为了解决这个问题，2011 年，V8 从 stop-the-world 标记切换到增量标记。在增量标记期间，GC 将标记工作合成为更小的模块，能够让 JS 应用逻辑在模块间隙执行一会，从而不至于让利用呈现进展状况。但在 2018 年，GC 技术又有了一个重大突破，这项技术名为并发标记。该技术能够让 GC 扫描和标记对象时，同时容许 JS 运行。

革除对象后会造成堆内存呈现碎片的状况，当碎片超过肯定限度后会启动压缩算法。在压缩过程中，将活的对象向一端挪动，直到所有对象都挪动实现而后清理掉不须要的内存。

Promise.resolve = function(value) {
    // 1. 如果 value 参数是一个 Promise 对象，则一成不变返回该对象
    if(value instanceof Promise) return value;
    // 2. 如果 value 参数是一个具备 then 办法的对象，则将这个对象转为 Promise 对象，并立刻执行它的 then 办法
    if(typeof value === "object" && 'then' in value) {return new Promise((resolve, reject) => {value.then(resolve, reject);
        });
    }
    // 3. 否则返回一个新的 Promise 对象，状态为 fulfilled
    return new Promise(resolve => resolve(value));
}

JSON 是一种基于文本的轻量级的数据交换格局。它能够被任何的编程语言读取和作为数据格式来传递。

在我的项目开发中，应用 JSON 作为前后端数据交换的形式。在前端通过将一个合乎 JSON 格局的数据结构序列化为
JSON 字符串，而后将它传递到后端，后端通过 JSON 格局的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。

因为 JSON 的语法是基于 js 的，因而很容易将 JSON 和 js 中的对象弄混，然而应该留神的是 JSON 和 js 中的对象不是一回事，JSON 中对象格局更加严格，比如说在 JSON 中属性值不能为函数，不能呈现 NaN 这样的属性值等，因而大多数的 js 对象是不合乎 JSON 对象的格局的。

在 js 中提供了两个函数来实现 js 数据结构和 JSON 格局的转换解决，

JSON.stringify 函数，通过传入一个合乎 JSON 格局的数据结构，将其转换为一个 JSON 字符串。如果传入的数据结构不合乎 JSON 格局，那么在序列化的时候会对这些值进行对应的非凡解决，使其符合规范。在前端向后端发送数据时，能够调用这个函数将数据对象转化为 JSON 格局的字符串。
JSON.parse() 函数，这个函数用来将 JSON 格局的字符串转换为一个 js 数据结构，如果传入的字符串不是规范的 JSON 格局的字符串的话，将会抛出谬误。当从后端接管到 JSON 格局的字符串时，能够通过这个办法来将其解析为一个 js 数据结构，以此来进行数据的拜访。

如果依赖其余脚本和 DOM 后果，应用 defer
如果与 DOM 和其余脚本依赖不强时，应用 async

function Foo(){Foo.a = function(){console.log(1);
    }
    this.a = function(){console.log(2)
    }
}

Foo.prototype.a = function(){console.log(3);
}

Foo.a = function(){console.log(4);
}

Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

输入后果：4 2 1

解析：

Foo.a() 这个是调用 Foo 函数的静态方法 a，尽管 Foo 中有优先级更高的属性办法 a，但 Foo 此时没有被调用，所以此时输入 Foo 的静态方法 a 的后果：4
let obj = new Foo(); 应用了 new 办法调用了函数，返回了函数实例对象，此时 Foo 函数外部的属性办法初始化，原型链建设。
obj.a() ; 调用 obj 实例上的办法 a，该实例上目前有两个 a 办法：一个是外部属性办法，另一个是原型上的办法。当这两者都存在时，首先查找 ownProperty，如果没有才去原型链上找，所以调用实例上的 a 输入：2
Foo.a() ; 依据第 2 步可知 Foo 函数外部的属性办法已初始化，笼罩了同名的静态方法，所以输入：1

function A(){}
function B(a){this.a = a;}
function C(a){if(a){this.a = a;}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;

console.log(new A().a);
console.log(new B().a);
console.log(new C(2).a);

输入后果：1 undefined 2

解析：

console.log(new A().a)，new A()为构造函数创立的对象，自身没有 a 属性，所以向它的原型去找，发现原型的 a 属性的属性值为 1，故该输入值为 1；
console.log(new B().a)，ew B()为构造函数创立的对象，该构造函数有参数 a，但该对象没有传参，故该输入值为 undefined;
console.log(new C(2).a)，new C()为构造函数创立的对象，该构造函数有参数 a，且传的实参为 2，执行函数外部，发现 if 为真，执行 this.a = 2, 故属性 a 的值为 2。

CSRF 攻打能够应用以下办法来防护：

进行同源检测，服务器依据 http 申请头中 origin 或者 referer 信息来判断申请是否为容许拜访的站点，从而对申请进行过滤。当 origin 或者 referer 信息都不存在的时候，间接阻止申请。这种形式的毛病是有些状况下 referer 能够被伪造，同时还会把搜索引擎的链接也给屏蔽了。所以个别网站会容许搜索引擎的页面申请，然而相应的页面申请这种申请形式也可能被攻击者给利用。（Referer 字段会通知服务器该网页是从哪个页面链接过去的）
应用 CSRF Token 进行验证，服务器向用户返回一个随机数 Token，当网站再次发动申请时，在申请参数中退出服务器端返回的 token，而后服务器对这个 token 进行验证。这种办法解决了应用 cookie 繁多验证形式时，可能会被冒用的问题，然而这种办法存在一个毛病就是，咱们须要给网站中的所有申请都增加上这个 token，操作比拟繁琐。还有一个问题是个别不会只有一台网站服务器，如果申请通过负载平衡转移到了其余的服务器，然而这个服务器的 session 中没有保留这个 token 的话，就没有方法验证了。这种状况能够通过扭转 token 的构建形式来解决。
对 Cookie 进行双重验证，服务器在用户拜访网站页面时，向申请域名注入一个 Cookie，内容为随机字符串，而后当用户再次向服务器发送申请的时候，从 cookie 中取出这个字符串，增加到 URL 参数中，而后服务器通过对 cookie 中的数据和参数中的数据进行比拟，来进行验证。应用这种形式是利用了攻击者只能利用 cookie，然而不能拜访获取 cookie 的特点。并且这种办法比 CSRF Token 的办法更加不便，并且不波及到分布式拜访的问题。这种办法的毛病是如果网站存在 XSS 破绽的，那么这种形式会生效。同时这种形式不能做到子域名的隔离。
在设置 cookie 属性的时候设置 Samesite，限度 cookie 不能作为被第三方应用，从而能够防止被攻击者利用。Samesite 一共有两种模式，一种是严格模式，在严格模式下 cookie 在任何状况下都不可能作为第三方 Cookie 应用，在宽松模式下，cookie 能够被申请是 GET 申请，且会产生页面跳转的申请所应用。

右边能够是任意值，左边只能是函数

'hello tuture' instanceof String // false

HTTP/ 3 基于 UDP 协定实现了相似于 TCP 的多路复用数据流、传输可靠性等性能，这套性能被称为 QUIC 协定。

流量管制、传输可靠性性能：QUIC 在 UDP 的根底上减少了一层来保障数据传输可靠性，它提供了数据包重传、拥塞管制、以及其余一些 TCP 中的个性。
集成 TLS 加密性能：目前 QUIC 应用 TLS1.3，缩小了握手所破费的 RTT 数。
多路复用：同一物理连贯上能够有多个独立的逻辑数据流，实现了数据流的独自传输，解决了 TCP 的队头阻塞问题。
疾速握手：因为基于 UDP，能够实现应用 0 ~ 1 个 RTT 来建设连贯。

关于前端:高级前端二面高频面试题合集

说一下原型链和原型链的继承吧

0.1 + 0.2 === 0.3 嘛？为什么？

DNS 残缺的查问过程

setTimeout 模仿 setInterval

对 keep-alive 的了解

对line-height 的了解及其赋值形式

说一下你对盒模型的了解?

CSS 优化和进步性能的办法有哪些？

V8 的垃圾回收机制是怎么的

Promise.resolve

对 JSON 的了解

js 脚本加载问题，async、defer 问题

代码输入后果

代码输入问题

如何进攻 CSRF 攻打？

instance 如何应用

说一下 HTTP 3.0

Just My Socks（注册教程内含优惠码）

关于前端:高级前端二面高频面试题合集

说一下原型链和原型链的继承吧

0.1 + 0.2 === 0.3 嘛？为什么？

DNS 残缺的查问过程

setTimeout 模仿 setInterval

对 keep-alive 的了解

对line-height 的了解及其赋值形式

说一下你对盒模型的了解?

CSS 优化和进步性能的办法有哪些？

V8 的垃圾回收机制是怎么的

Promise.resolve

对 JSON 的了解

js 脚本加载问题，async、defer 问题

代码输入后果

代码输入问题

如何进攻 CSRF 攻打？

instance 如何应用

说一下 HTTP 3.0

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）