700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 前端校招字节跳动面试 第三篇

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

时间:2020-10-23 18:09:08

相关推荐

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

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.definePropertyProxy

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

有3种方法

setTimeoutsetIntervalrequestAnimationFrame

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。