19年校招前端面经（阿里-小米-字节跳动）

加个小前提，本人投的是web前端，如果分方向的话，是React方向。
俗话说，金三银四，在这充满了刺激的三月，我也拿着我的一页纸的简历投了好几家公司，下面记录着我参加了面试的几家公司以及近期整理出的题目。很尴尬，没有拿到任何一家的offer，经过这几次的面试也发现自己的基础确实很差，打算歇息一阵子好好补一补自己的基础，准备开始秋招或者明年的春招，毕竟我还是很向往大公司的待遇的。不过我也发现了一点，可能学历对于程序员有点影响，但是还是技术比较重要，只要你够牛逼，BAT肯定会向你打开大门，再不济也是磨练几年走社招进。但是个人认为对于考研和找工作动摇不定的还是先尝试一下考研吧，毕竟对于像我这样的不出名的小二本环境还是不咋地，985/211出名不是没有道理的。

阿里前端校招–电话面试

小生不才，第一轮的电话初试就被刷掉了，所以不清楚阿里的校招这个流程，我也只能提供电话初试的情况了，那天阳光明媚，中午刚下课接到一个电话，一看归属地浙江杭州已经开始梦想进入阿里的场景了，果不其然，约了第二天晚上八点的电话初始，又在情理之中的被刷掉了，历经一个小时，感觉就是这个面试官是真牛逼啊，我是在一个小时之内肚子里的存货被掏的干干净净的。

1. 请求跨域问题

这是前端面试必问题型，我就写几个不一定对，因为我也是搜的我也没经历过跨域。

1. jsonp形式，缺点是只能实现get请求，并且对于出现的error不容易调试

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);
    // 回调执行函数
    function onBack(res){
        console.log(res);
    }
</script>

2. document.domain 改变两个域的document.domain
3. window.name
4. postMessage
5. CORS 跨域资源共享
6. nginx反向代理
7. websocket协议跨域

2. webpack插件、优化、loader

3. 页面性能优化

1. 减少http请求
2. 使用CDN
3. 添加Expires头，第一次访问是缓存组件，减少不必要的http请求
4. 开启压缩gzip可以减少到30%
5. 样式表放在head表，脚本放最下面
6. 配置ETAG
7. …

4. 原型链相关

5. ES6的新特性了解多少

6. ES6和commonjs的区别

1. es6导出的是值得引用，值的改变引用也改变，commonjs输出的是值的拷贝，值改变不会影响已经导出的变量
2. es6中this指向undefined，commonjs指向当前模块
3. es6是在解析是加载模块，commonjs是运行时加载
4. es6可以单独加载某个函数，commonjs只能加载整个模块
5. es6加载的不是对象，commonjs加载的是一个对象

7. react生命周期

8. react优化

1. shouldComponentUpdate这边做操作，判断是否进行render
2. 尽量不适应组件state使用mobx或者其他代替
3. 。。。

9. 为什么使用mobx而不是使用原生的setState

1. setState是异步的，渲染时可能会出现错误
2. setState会造成不必要的渲染，mobx可以不把变量设置为可观察变量
3. setState不可能管理所有的状态，父子组件很多的时候会很乱
4. 使得jsx的职责变得更单一

10. setState是批处理吗

是批处理，如果render里面有多个setState时会一起进行setState

11. 说一说flex布局

12. 说一说冒泡机制

从上到下捕获到冒泡，从下往上冒泡
最上面是window

13. 浏览器已经定义好的对象有哪些

window,screen,location,history,navigator

14. 数组去重,说一说复杂度

15. 说一说websocket

16. 正则表达式

17. http和https的区别

1. http是明文传输，https是使用安全套接字加密的
2. http的端口是80 https的端口是443
3. https需要到ca申请证书，需要一定的费用
4. http的链接很简单没有状态，https的协议是由SSL+http协议构建的加密传输，身份认证的网络协议很安全

18. http请求常用的状态码

1. 200 请求成功
2. 404 请求不存在
3. 405 请求方式错误
4. 403 服务器接受了请求但是拒绝响应
5. 303 请求需要存在另一个url，请使用get请求定向获取请求的资源
6. 500 服务器发生了一场异常

19. 说一说css3动画

20. canvas画布

21. http属于哪一层

应用层

22. tcp和udp的区别以及使用场景

1. tcp面向连接的可靠传输，udp面向无连接不可靠
2. tcp面向字节流，udp面向报文
3. tcp是一对一的通信，udp可以一对一也可以一对多也可以多对多通信
4. tcp的建立需要经历三次握手四次挥手
5. tcp适用于文件传输，发送邮件
6. udp适用于即时通信，在线视频

23. 讲一讲计算机网络的七层模型

物理层、数据链路层、传输层、网络层、应用层、会话层、表示层

24. 讲一讲闭包

函数内部可以读取函数外部的变量，直白的说就是函数包函数
可以保存局部变量并且不会污染全局环境，缺点是会加大内存的负担

25. 箭头函数和普通函数的区别

1. this作用域的区别，箭头函数是函数自身，普通函数是函数所在的上下文
2. 函数作用于提升的区别，箭头函数需要将函数赋值给一个var变量才能提升他的作用域
3. 构造函数的问题，箭头函数是匿名函数不可以作为构造函数不可以new

26. 如何提升函数的作作用域

call，apply，bind

27. call和apply的区别

第二个参数的区别，apply的第二个参数是一个数组，call是一个一个参数的往后加

28. es5的继承是如何实现的

利用prototype实现

function Dog{
    this.name = 'dog';
};
function Animal{
    this.speak = function(){
        console.log('二哈');
    }
};
Dog.prototype = new Animal();
dog = new Dog();
dog.speak();

29. XSS攻击

1. XSS攻击分为反射型，存储型，DOM型
2. 反射型XSS是在将XSS代码放在URL中，将参数提交到服务器。服务器解析后响应，在响应结果中存在XSS代码，最终通过浏览器解析执行
3. 存储型XSS是将XSS代码存储到服务端（数据库、内存、文件系统等），在下次请求同一个页面时就不需要带上XSS代码了，而是从服务器读取
4. DOM XSS的发生主要是在JS中使用eval造成的，所以应当避免使用eval语句
5. XSS危害有盗取用户cookie，通过JS或CSS改变样式，Dom造成正常用户无法得到服务器响应
   预防：
6. 对cookie进行保护 对cookie设置httpOnly
7. 对用户输入的数据进行编码、解码、过滤

30. jsx为什么叫jsx 类名为什么大写

jsx也叫javascript XML

31. 如何获取到dom里面的某个节点

各种dom操作，querySelector等

32. absolute是对哪个点开始计算的

1. 外层有relative定义时相对于relative定位
2. 外层没有时根据body定位

33. 原生js发送请求

// 定义一个XMLHttpRequest变量
var xhr = new XMLHttpRequest();
// 要发送的请求url
xhr.open('post','/api/login');
// 对于post请求要设置请求头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 发送请求
xhr.send('account=admin&password=123456);
// 监听状态改变
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        console.log('success');
    }
}

小米电话面试

1. css常用选择器按照优先级说

2. css常用水平居中

3. css垂直居中

4. css实现图片等比例缩放

5. 讲一讲flex布局

6. css行内元素和块级元素的区别

7. 讲一讲原型链

8. 箭头函数和普通函数的区别

9. webpack的插件都用过哪些，都是干嘛用的

字节跳动

字节跳动对算法是有点要求的公司，所以很不幸的在最后一轮面试被刷了，想要投字节跳动的同学介意多刷一刷牛客网上的算法题。各种排序，查找，递归。很不幸我就是不会递归最后一轮才被刷了。

笔试

我的笔试是两个小时直接四道算法题，前两道还是很简单的，基本的循环就都可以解出来没什么难度，后两题是有点意思了，我是花了一个多小时没写的出来。后两道应该是用动态规划就做出来了。
我是两题满分两题零分拿到了面试的机会，我本人也是不敢相信的。貌似是作对两题就可以拿到面试机会。
接下来是视频面试，最多三轮，过了一轮会发短信告诉你这一轮有没有过，中间可以休息半个小时左右。三轮都是技术面。个人感觉前两面虽然有的没答得出来但是面试官人还是很好的都给过了。

视频一面

一面是一个小姐姐，但是这个小姐姐尽然比我还要紧张。瞬间就搞得我更紧张了。互道你好之后，开始聊聊之前做过的项目，都用了哪些技术栈，为什么选这种技术栈。一面全程半个小时。

1. 箭头函数和普通函数的区别

2. mobx和redux的区别，为什么选用mobx

3. 单向数据流和双向绑定的理解

4. 浏览器从输入网址到页面渲染完成中间都发生了什么

5. 正则表达式

6. webpack都用过哪些插件

7. 了解promise吧，用过promise.all吧 ，来，模拟一下promise.all的过程（。。直接给我整蒙了）

8. 经典的闭包问题

   for(var i = 0;i < 10;i++){
   console.log(i);
   }
   最后输出的是什么，改写成我们需要的样子

   for(var i = 0;i < 10;i++){
   (function(i){
   console.log(i)
   })(i)
   }

视频二面

二面是一个小哥哥，目测发际线有点厉害，是我以后的模样。小哥哥人还是很好的，我没答得上的还和我讲了一遍，最好告诉我我的基础哪里有薄弱。

1. 自我介绍
2. stage-0 -1 的区别
3. 经典的闭包问题，以及闭包改写，其中有一个微任务和宏任务的概念
4. 函数作用域提示问题，一串代码问我输出是什么，代码记不住了，但是我知道的是这是我看不懂的操作。不过大致就是靠变量提示的。
5. 一道编程题，给定一个字符串，找出里面出现最多的字符并输出对应的字符和出现次数
6. 给一张二叉树的图，口述前序中序后序遍历的过程
7. 说一说tcp和Udp的区别，以及各自的使用场景

视屏三面

好吧，这一轮不说多少，两道算法题，有点后悔要是之前搞懂了递归也不会被刷。

1. 第一道题

    const vDom = {
        tag: 'div',
        props: {'a': 'b'},
        children: [
            {
                tag: 'span',
                props: {},
                children: []
            },{
                tag: 'span',
                props: {},
                children: []
            }
        ]
    }
    // 将这个json组成一个节点
    <div a='b'>
        <span></span>
        <span></span>
    </div>
    // 递归求解
   

2. 数组旋转

   const image = [
   [1,2,3,4,10],
   [5,6,7,8,9],
   [11,12,13,14,15]
   ]
   // 顺时针旋转九十度
   这题还是很简单的，刷一下就写完了，刷的一个就收到了你的面试未通过的短信，刷的一下offer就飞了。就是这么快。

以下是在准备面试时收集到的其他人的经验，不全

1. new一个对象的过程发生了什么

1. 创建一个新对象，如：var person = {};
2. 新对象的proto属性指向构造函数的原型对象。
3. 将构造函数的作用域赋值给新对象。（也所以this对象指向新对象）
4. 执行构造函数内部的代码，将属性添加给person中的this对象。
5. 返回新对象person。

2. visibilty 和 display：none的区别

visibility隐藏是还是会占据原来的位置
但是display：none不会占据原来的位置

3. js的基本数据类型

null,underfined,number,string,boolean,object

4. typeof和intanceof的区别

typeof返回一个字符串，说明匹配对象的类型，返回值有string，number，boolean，object，underfined，function
局限性：对于Array类型和null typeof一致都返回object

intanceof判断一个对象的原型链中是否存在一个构造函数的prototype

5. 函数的arguments是不是一个数组

不是,arguments是一个类数组对象，可以打印看一下，包含了函数所有的参数

6. let var const 的区别

1. const 表示常量，一旦定义不可修改，且必须初始化
2. var的作用于为全文上下，可以重复定义，
3. let是快级作用域，不可重复定义

7. promise的原理及实现

8. git相关操作，git merge 和rebase的区别

• get merge 之后解决冲突需要执行 git add . git commit -m’fix conflict’ 会多出一个commit
• git rebase 之后执行 git add .和git rebase --continue 不会产生额外的commit这样会干净，不会产生无意义的commit

9. Es5新增的map filter reduce

• map 遍历不会改变原数组
• filter 过滤不会改变原数组，会返回一个新数组
• reduce 函数值累加

10. js中的微任务和宏任务

11. arguments是什么，转数组有哪些方法

类数组对象，

• […arguments]
• Array.prototye.slice.apply(arguments)
• Array.from(arguments)

12. cookie session的关系区别

13. cookie localStorage sessionStorage之间的区别

14. link和@import之间的区别

1. link属于HTML标签，而@import是CSS提供的;
2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3. import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
4. link方式的样式的权重 高于@import的权重.

15. absolute 和 float

A：共同点：
对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

B：不同点：
float仍会占据位置，position会覆盖文档流中的其他元素。

16. XML和json的区别

1. 数据体积方面。
   JSON相对于XML来讲，数据的体积小，传递的速度更快些。
2. 数据交互方面。
   JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
3. 数据描述方面。
   JSON对数据的描述性比XML较差。
4. 传输速度方面。
   JSON的速度要远远快于XML。

17. BFC

盒模型

18. HTML语义化的理解

19. DOCTYPE，严格模式与混杂模式

1. 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。
2. 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作
4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

20. transform 代替 marginLeft/Top的区别

页面回流没有了

21. calc计算

vw表示 宽度的百分比
vh表示 高度的百分比

22. js防抖和节流

23. 栈和堆得区别

24. 聊一聊NaN

总结

唯一的体会就是一定要补补自己的基础，大厂很注重基础，看的是一个人的潜力和可塑造性。另外多看看别人的面经，多做好准备我是准备的有点冲忙，因为我总有一种明天就要毕业的既视感，所以很着急找工作，现在放宽心态慢慢来。

最后忠诚祝愿各位同行能拿到自己心仪的offer，祝各位拿offer拿到手软