前端校招字节跳动面试第三篇

1. promise以及then方法相关。

参考一步一步实现自己的Promise

2. 使用构造函数创建对象相关。

(1). 使用new创建时JS都做了哪些事情。

(2). 如何自己实现new这个过程，包括创建空对象，如何将函数执行环境设置到该对象上，如何给它添加应该继承的方法，这里不能用 new Object或者对象字面量创建一个对象再将原型链连接上，因为new是需要自己实现的。

function newFunc(father, ...rest) {var result = {};result.__proto__ = father.prototype;var result2 = father.apply(result, rest);if ((typeof result2 === 'object' || typeof result2 === 'function') &&result2 !== null) {return result2;}return result;
}

3. 箭头函数和普通函数的区别，如果使用箭头函数作为构造函数是否会有不同。

箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：

1、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

4、不可以使用 new 命令，因为：

没有自己的 this，无法调用 call，apply。

没有 prototype 属性，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 proto

new 过程大致是这样的：


function newFunc(father, ...rest) {var result = {};result.__proto__ = father.prototype;var result2 = father.apply(result, rest);if ((typeof result2 === 'object' || typeof result2 === 'function') &&result2 !== null) {return result2;}return result;
}

4. 生成器相关。

1、异步操作的同步化表达

2、控制流管理

3、部署 Iterator 接口

4、作为数据结构

详细参考

5. http2 对 http1的的扩展。

四个特性

1.二进制传输:

HTTP/2 将请求和响应数据分割为更小的帧，并且它们采用二进制编码。

它把TCP协议的部分特性挪到了应用层，把原来的"Header+Body"的消息"打散"为数个小片的二进制"帧"(Frame),用"HEADERS"帧存放头数据、“DATA"帧存放实体数据。HTP/2数据分帧后"Header+Body"的报文结构就完全消失了，协议看到的只是一个个的"碎片”。

HTTP/2 中，同域名下所有通信都在单个连接上完成，该连接可以承载任意数量的双向数据流。每个数据流都以消息的形式发送，而消息又由一个或多个帧组成。多个帧之间可以乱序发送，根据帧首部的流标识可以重新组装。

2.Header 压缩

HTTP/2并没有使用传统的压缩算法，而是开发了专门的"HPACK”算法，在客户端和服务器两端建立“字典”，用索引号表示重复的字符串，还采用哈夫曼编码来压缩整数和字符串，可以达到50%~90%的高压缩率。

具体来说:

在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键-值对，对于相同的数据，不再通过每次请求和响应发送；

首部表在HTTP/2的连接存续期内始终存在，由客户端和服务器共同渐进地更新；

每个新的首部键-值对要么被追加到当前表的末尾，要么替换表中之前的值。

例如下图中的两个请求，请求一发送了所有的头部字段，第二个请求则只需要发送差异数据，这样可以减少冗余数据，降低开销。

3.多路复用

在 HTTP/2 中引入了多路复用的技术。多路复用很好的解决了浏览器限制同一个域名下的请求数量的问题，同时也接更容易实现全速传输，毕竟新开一个 TCP 连接都需要慢慢提升传输速度。

4.Server Push

HTTP2还在一定程度上改变了传统的“请求-应答”工作模式，服务器不再是完全被动地响应请求，也可以新建“流”主动向客户端发送消息。比如，在浏览器刚请求HTML的时候就提前把可能会用到的JS、CSS文件发给客户端，减少等待的延迟，这被称为"服务器推送"（ Server Push，也叫 Cache push）。

更多参考：【】

6. 实现给Array添加原型方法flat。

Array.prototype.flat = function () {let res = [];for (let i = 0; i < this.length; i++) {if (typeof this[i] == 'object') {res = res.concat(Array.prototype.flat.call(this[i]));} else {res.push(this[i]);}}return res;
};

更多参考第八题. 数组扁平化

7. 如何在改变一个对象的属性时对其进行拦截。

应该是用Object.defineProperty
Proxy

8. JS如何实现动画，实现后发现有掉帧如何进行优化。

有3种方法：

setTimeout、setInterval、requestAnimationFrame

结合页面渲染流程，这里将结合一些测试代码，分析动画的各种优化方案和效果：

JavaScript：优化JavaScript的执行效率

requestAnimationFrame代替setTimeout和setInterval
可并行的DOM元素更新划分为多个小任务
DOM无关的耗时操作放到Web Workers中

Style：降低样式计算复杂度和范围

降低样式选择器的复杂度
减少需要执行样式计算的元素个数

Layout：避免大规模、复杂的布局

避免频繁改变布局
用flexbox布局替代老的布局模型
避免强制同步布局事件

Paint/Composite：GPU加速

将移动或渐变元素由渲染层（RenderLayer）提升为合成层（Compositing Layer）
避免提升合成层的陷阱

9. JS中如何自定义事件。

1. Event()

Event()构造函数, 创建一个新的事件对象Event。

1.1 语法

let myEvent = new Event(typeArg, eventInit);

1.2 参数

typeArg  ：DOMString 类型，表示创建事件的名称；
eventInit ：可选配置项，包括：

1.3 演示示例

2. CustomEvent()

CustomEvent()构造函数, 创建一个新的事件对象CustomEvent。

2.1 语法

let myEvent = new CustomEvent(typeArg, eventInit);

2.2 参数

typeArg  ：DOMString类型，表示创建事件的名称；
eventInit：可选配置项，包括：

2.3 演示示例

3.兼容性：

分发事件时，需要使用dispatchEvent 事件触发，它在 IE8 及以下版本中需要进行使用fireEvent 方法兼容：

3. Event() 与 CustomEvent() 区别

从两者支持的参数中，可以看出：
Event()适合创建简单的自定义事件，而CustomEvent()支持参数传递的自定义事件，它支持detail 参数，作为事件中需要被传递的数据，并在EventListener获取。

注意:
当一个事件触发时，若相应的元素及其上级元素没有进行事件监听，则不会有回调操作执行。
当需要对于子元素进行监听，可以在其父元素进行事件托管，让事件在事件冒泡阶段被监听器捕获并执行。此时可以使用event.target获取到具体触发事件的元素。

应用场景及更详细内容参考第5题.什么是自定义事件

10. JS中0.1 + 0.2 不等于0.3的具体原因是什么，如何解决这个问题？

二进制能精确地表示位数有限且分母是2的倍数的小数，比如0.5，0.5在计算机内部就没有舍入误差。所以0.5 + 0.5 === 1

当代码被编译或解释后，0.1已经被四舍五入成一个与之很接近的计算机内部数字，以至于计算还没开始，一个很小的舍入错误就已经产生了。这也就是 0.1 + 0.2 不等于0.3 的原因。

解决方案：

将浮点数化为整数计算：将浮点数乘以10的N次方，再除以10的N次方。
允许误差。Math.abs(a-b)<Number.EPSILON