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

没有 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. 如何在改变一个对象的属性时对其进行拦截。

---

1. 应该是用Object.defineProperty

2. 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。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
-1715889424951)]

[外链图片转存中…(img-xSyUinwG-1715889424951)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！