字节跳动_前端实习视频面试_内推一面

前言

第一次视频面试，十分紧张。不过还好面试官没有一开始就问很难的问题，答得上来的题目尽量回答的全面，答不上来的题目我说我不太了解面试官也不会继续追问。而且我发现一面面试官会根据你回答的内容，把你回答的某个知识点抓住，然后继续追问，直到你回答不了为止。（这可能就是挖深度吧）

一进来面试官要我做一个简单的自我介绍，介绍完身份之后又问我平时是怎么学习技术的，我说是看视频居多，最近也在看那本红宝书《javascript 高级程序设计》。

记录一下面试过程和面试题目，查漏补缺。

面试时长：1小时，以下是能记起来的全部问题

1.看了你的简历，你在项目中使用了vue，说下为什么学习 vue

2.你刚刚说了angular的controller，了解过MVC吗，说下对MVC的理解

3.vue的生命周期

4.*vue的虚拟dom

5.*说下vue里面的 computed 和 watch 的区别

6.你项目里面用了 gulp ，描述一下还有哪些提高http 请求速度的方法

7.*那你有了解过http缓存机制吗

8.了解闭包吗，简单实现一个闭包

9.盒子模型

10.*你有了解过 视口 meta 元标签

11.*http协议你了解多少，描述一下 http的报文头 和 http 的报文体

12.说一下你知道的http的状态码

13.*你说3开头的一般是重定向，那你有了解过 301 和 302 吗？

14.get和post的区别

15.你有了解过 webpack 吗，或者说你有配置过 webpack吗？

16.你觉得 babel 是什么？

17.说一下你对 最新的ES 相关技术的了解

18.*说一下箭头函数和普通函数的区别

19.*new 一个 箭头函数可以吗，为什么

20.new 一个对象的过程

21.*讲述一下__proto__ 和 prototype 的区别

22.你了解过 setTimeout 的原理吗？

23.*promise 和 setTimeout 的区别（微队列和宏队列）

24.写一段 promise 和 setTimeout 的代码，问你输出结果

25.js 的基本数据类型

26.*算法：字符串的最大非重复子串长度

27.写一段代码，要求说出他的输出内容(原型和原型链)

---

题目

1.看了你的简历，你在项目中使用了vue，说下为什么学习 vue

第一题问这个让我有点懵，还好想出点合理的理由：首先作者是中国人，对其比较感兴趣，其次是vue的学习曲线相比其他框架比较缓和。这里我将angular 和 vue 做对比，我说 angular 我之前学过，当时基础不好，学不会，我只依稀记得 angular 还要写 controller 之类的。面试官一听到 controller 就问我下一个问题了。

2.你刚刚说了angular的controller，了解过MVC吗，说下对MVC的理解

  MVC：Model View Controller。Model 指 模型，用于存储数据；View  指 视图，用于展示数据；Controller 指 控制器，用于调用其他子服务，使Model 和 View 解耦合。Model 和 view 不直接通信，而是通过controller 联系起来，Controller 相当于 外观模式的应用。

3.vue的生命周期

beforeCreate
           created
           beforeMount
           mounted
           beforeUpdate
           updated
           beforeDestroy
           destroyed

  其中 created 和 mounted 比较重要，一个是data数据和事件的初始化，一个是html 模板 挂载渲染到页面完毕

4.*vue的虚拟dom

这里我说：虚拟DOM是 实际DOM的一个js对象副本，当实际DOM发生变化的时候，会进行差异计算，具体里面是怎么实现的我不是很了解，面试官也没有继续追问了。

参考文章：https://blog.csdn.net/m6i37jk/article/details/78140159

5.*说下vue里面的 computed 和 watch 的区别

computed 计算属性，watch 监听变化
           区别是
           computed 是计算值
               应用：简化 template 里面 {{}} 的计算和处理 props 或 $emit 的传值
               具有缓存性，页面重新渲染值不计算，只有当被计算的值发生变化才计算

           watch 是观察值是否发生变化
               应用：监听 props，$emit 或本组件的值执行异步操作
               无缓存性，页面重新渲染就算值不变化也会执行
               watch 里面还要注意下 immediate 和 deep 属性

           watch与computed的区别是：

watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等；

而computed适用于计算已有的值并返回结果

参考文章：https://segmentfault.com/a/1190000012948175?utm_source=tag-newest#articleHeader10
                  https://blog.csdn.net/lhban108/article/details/82465547

6.你项目里面用了 gulp ，描述一下还有哪些提高http 请求速度的方法

CDN(content delivery network)内容分发网络；我忘记了还有 http 缓存机制 缓存静态文件，于是就有了下面一题

7.*那你有了解过http缓存机制吗

浏览器会根据 缓存资源是否存在，存在的话是否过期 来决定是否请求服务器返回 资源。概要地说就是 浏览器可以通过 http请求的报文头 里面的内容，确定资源的 是否缓存，缓存时长，缓存截止日期等。

如：Cache-Control: public || private || no-cache , 秒数 || no-store
                  Expires: 截止日期
                  Last-Modified: 资源最后修改时间
                  If-Modified-Since: 询问服务器当前缓存的资源是否已经过期，如果没有过期，返回 304

参考文章：https://www.cnblogs.com/yangxiao/p/5099788.html

 8.了解闭包吗，简单实现一个闭包

我理解的闭包是：子函数执行时能调用父函数域的变量，并且这些变量不会被内存回收。可能由于解释不清楚，面试官让我实现一个 闭包。

MDN：闭包：闭包是函数和声明该函数的词法环境的组合。

实现的闭包：

function add1() {
    var a = 1;
    return function(b) {
        return a + b;
    }
}

var add = add1();
console.log(add(2));

9.盒子模型

盒子模型是css的概念不过我好像说成了html里面的元素，盒子模型即 网页设计中元素的 内容，内边距，边框，外边距 组成了盒子的宽和高。

10.*你有了解过 视口 meta 元标签

我说我了解到 meta 可以设置 视口，设置编码。但是对这不是特别了解。面试官没有继续追问，但是感觉面试官重点 想要了解我对 移动web 的了解。

参考文章：https://www.html.cn/archives/5975

11.*http协议你了解多少，描述一下 http 的报文头 和 http 的报文体

我说我不是特别了解，我了解 http 报文头的状态码，于是就有了下一个问题。

http 协议内容颇多：

http 报文头（分 请求报文 和 响应报文）：

       Accept: 代表发送端（客户端）希望接受的数据类型。如：image/gif,image/x-xbit,... (CRLF)

       有第7题中描述到的 资源缓存 相关属性

       Content-Length，Host 等等

http 报文体：

       一般为传输的 数据 键值对

参考文章：https://www.cnblogs.com/lzq198754/p/5780310.html

12.说一下你知道的http的状态码

200 请求资源成功

400 客户端请求格式错误

403 需要客户端身份验证

404 请求资源不存在

413 请求资源过大

500 服务器端错误

3xx 一般为重定向

参考文章：http://tool.oschina.net/commons?type=5

由于我说了 3开头的一般为重定向，于是又有了下面这一题

13.*你说3开头的一般是重定向，那你有了解过 301 和 302 吗？

301：被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。

302：请求的资源现在临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。

14.get和post的区别

get 参数直接放在 url 里面，并且传输的 参数的大小受不同浏览器限制，也不安全，毕竟直接暴露在 url 中，其值只能为字符串。

post 参数在报文体中，传输的容量比 get 大，参数不暴露出来相对安全。

其实还有，安全性和幂等性。。。

参考文章：https://www.cnblogs.com/logsharing/p/8448446.html

15.你有了解过 webpack 吗，或者说你有配置过 webpack吗？

我说有，webpack 是一个 打包工具。我很久以前配置过，通常配置 babel 和 loader 之类的。

面试官追问。

16.你觉得 babel 是什么？

babel 类似于一个编译器，是一个解释器，可以将 ES6 的语法 转换成 ES5的语法输出。

17.说一下你对 最新的ES 相关技术的了解

我说了下 ES6 ，解构赋值、 let const 、块级作用域 、箭头函数 、promise。刚想继续说 ES7 ,面试官抛出下一问

18.*说一下箭头函数和普通函数的区别

我了解 箭头函数 和 普通函数 的 this 指向不同，没有答到点上或者答完全，于是抛出下一题

答案：

（1）箭头函数是匿名函数，不能作为构造函数，不能使用new

（2）箭头函数不绑定arguments，取而代之用rest参数...解决

（3）箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

（4）箭头函数通过 call()  或   apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。

（5）箭头函数没有原型属性

（6）箭头函数不能当做Generator函数,不能使用yield关键字

 参考文章：https://www.cnblogs.com/biubiuxixiya/p/8610594.html

19.*new 一个 箭头函数可以吗，为什么

箭头函数是匿名函数，不能作为构造函数，不能使用new

20.new 一个对象的过程

相当于运行构造函数：

this 指向这个对象，

对 this 进行属性赋值，

将 this 的 隐式原型 指向 构造函数的 显式原型，

返回这个对象

21.讲述一下__proto__ 和 prototype 的区别

__proto__是 对象实例 都有的，而 prototype 是函数对象特有的，

prototype 原型对象 有 constructor 属性，又指回 构造函数，

对象实例的 __proto__ 均默认指向 它们的 构造函数的 prototype

22.你了解过 setTimeout 的原理吗？

event loop机制

学习视频：https://v.qq.com/x/page/h0372bld8re.html

23.*promise 和 setTimeout 的区别（微队列和宏队列）

扫到了目前的知识盲区：微任务队列 和 宏任务队列

promise.then 和 process.nextTick 都是 微任务

setTimout 和 setInterval 是 宏任务

微任务 比 宏任务 优先级高

参考文章：https://blog.csdn.net/qq_30376375/article/details/82990588

24.写一段 promise 和 setTimeout 的代码，问你输出结果

console.log(1);

new Promise((resolve) => {
    console.log(2);
    resolve();
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(4);
});

setTimeOut(() => {
    console.log(5);
});

console.log(6);

// 1 2 6 3 4 5

25.js 的基本数据类型

number string boolean undefined null

26.*算法：字符串的最大非重复子串长度

var lengthOfLongestSubstring = function(s) {
    const len = s.length;
    if(!len) {
        return 0;
    }
    
    let str = '';
    let result = 0;
    for(let i = 0;i < len;i++) {
        const index = str.indexOf(s[i]);
        if(index === -1) {
            str += s[i];
        } else {
            str = str.substr(index + 1) + s[i];
            
        }
        
        result = Math.max(result,str.length);
    }
    
    return result;
};

27.写一段代码，要求说出他的输出内容(不同情况下的this 的指向)

var a = function() {
  this.b = 3;
};

var c = new a();
a.prototype.b = 9;
var b = 7;
a();

console.log(b);
console.log(c.b);

 在 node 环境下 输出 7 3，但是在浏览器环境下 输出 3 3

---

 感想

第一次视频面试真的十分紧张，整理好自己的状态，把自己锁在房间里面。面试官一般会迟到几分钟，绝对不要比面试官还要晚。感觉面试可以挖出很多你不了解的知识盲区。