个人秋招面经——字节

博主目前在蚂蚁集团-体验技术部，AntV/S2 是博主所在团队的开源项目——多维交叉分析表格，欢迎使用，感谢到 S2 github 仓库点赞 star，有任何关于前端面试、就业、技术问题都可给在文章后留言。

一面（2021/7/15）

一、position的几个属性

二、文档流、dom

文档流： 浏览器在页面上摆放HTML元素的方法，将窗口分为一行一行的，然后在每行中按照从左至右的顺序摆放元素。
dom树： 从网络传输给渲染引擎的HTML文本字节流是无法被直接理解的，需要将其转化为能够被理解的内部结构，这个结构就是dom树。
dom树的生成： 通过分词器将文本字节流转换为Token（栈结构，用于计算节点之间的父子关系），再将Token解析为dom节点，并将dom节点添加到dom树中。

三、浏览器渲染页面的过程（重排、重绘）

四、跨域

跨域是浏览器的一种特性，浏览器不允许直接访问另外一个“域”上的资源，只允许访问同一个“域”上的资源，这也是浏览器的“同源策略”，要求协议、域名、端口号一致。
<script>标签、<img>标签、<link>标签等是支持跨域的。
解决跨域的方法：JSONP、CORS、反向代理

五、<script> 和 <img> 标签可以接收跨域的资源吗

可以，还有<link> <audio> <video> <iframe>

六、父级div的宽、高各为100px，padding-top为20%，子div的高为多少？父级div设为absolute呢？

100px、100px

七、事件循环机制（例题）

八、HTTP缓存机制（强缓存和协商缓存）

九、<script /> 中的同步和异步。

由于提到了构建dom树的过程中，遇到script标签，dom树的构建会暂停，直至脚本执行完毕。
defer：延迟脚本，告诉浏览器下载脚本，但延迟执行，直到解析完HTML再执行脚本，再触发DOMContentLoaded事件。

<script type="text/javascript" defer src="test.js"></script>

async：异步脚本，异步下载引入js脚本，此时不会影响dom的构建，但一旦下载完成，无论是在dom解析阶段，还是DOMContentLoaded事件触发之后，一定会在load事件触发之前执行脚本。

<script type="text/javascript" async src="test1.js"></script>
<script type="text/javascript" async src="test2.js"></script>

十、px em rem % 的区别

十一、this的指向

十二、手写Function.prototype.call()

Function.prototype.call = function(context) {
    let obj = context || window;
    // 将调用call的方法赋值给obj对象
    obj.fn = this;
    // 传参数
    const args = [...arguments].slice(1);
    // 调用函数
    const result = obj.fn(...args);
    delete obj.fn;
    return result;
}

手写apply方法：

Function.prototype.apply = function(context) {
    let obj = context || window;
    obj.fn = this;
    let args = arguments[1] || [];
    let result = obj.fn(args);
    delete obj.fn;
    return result;
}

手写bind方法：

Function.prototype.bind = function(context) {
    let self = this;
    let args = [...arguments].slice(1);
    return function F() {
        if (this instanceof F) {
            return new self([...args, ...arguments]);
        }
        return self.apply(context, args.concat([...arguments]));
    }
}

十三、let a = {}; let b = new Object(); let c = Object.create({}); 的区别

字面量创建和new关键字创建的实例，原型指向Object.prototype，并继承内置对象Object；Object.create(proto[,propertiesObject])创建的对象的原型取决于proto，如果proto为null，新对象为空，没有原型，不继承任何对象，proto是指定对象，新对象的原型指向指定对象，继承指定对象。

十四、new 一个对象的过程

十五、算法题：将两个排序数组按顺序合并到一个数组中。

捞一面（2021/7/29）

一、vue 2.0和vue 3.0的区别。

二、vue 2.0 中的diff算法。

利用JS对象根据真实的DOM生成虚拟DOM，当虚拟DOM的某个节点发生变化时，会生成一个新的Vnode，然后对比新的newVnode和旧的oldVnode，把不同的地方修改到真实DOM上。
diff算法： 是对同一层级的节点单独进行比较。

1. 调用patch()方法。 判断新、老节点是否为同一节点。如果不是同一节点，直接替换；如果是同一节点，再调用patchVnode()方法比较子节点。
2. 调用patchVnode()方法比较子节点。如果不是同一节点，直接替换；如果是同一节点，分为（1）旧节点有子节点，新节点无子节点，删除旧节点的子节点；（2）旧节点无子节点，新节点有子节点，把新节点的子节点添加到旧节点上；（3）新、旧节点的子节点都是文本节点，直接替换文本；（4）都有子节点，调用updateChildren()函数。
3. 调用updateChildren()函数。 对于每一层节点，对新、旧节点都添加上首尾指针start和end，一一比较，如果旧节点的start > end，将新节点剩余的节点添加到旧节点上；如果新节点的start > end，将旧节点多余的节点删除。
   每个节点的比较方式（sameNode() 函数）： key、tag、注释信息、data信息（onclick、style等）、如果是input节点看type是否一致。

三、腾讯实习有没有遇到什么困难。文件上传怎么做，有没有分片。

四、localStorage和sessionStorage区别，cookie和session之间怎么建立联系的。

五、跨域。

六、浏览器安全攻击。

七、算法：去除字符串中的字符“b”，和连着的“a”、“c”，比如：“aabcd” -> “ad”、“aaabccc” -> “”