本篇文章将分类汇总2020年前端岗校园秋招的面试问题，及时查漏补缺，每次面试完都会实时更新。

一、HTML & CSS

CSS实现：4个div，一个在上，三个并列在下
块级和行级有哪些标签
overflow属性值有哪些
CSS样式？内嵌样式等导入方法？import和link的区别
手写实现两栏布局，一栏固定宽度200px，右边把剩下的铺满，左右两列等高，即左边一列增高右边一列也会跟着增高，至少三种方法
简单介绍一下盒子模型
display有哪些属性，block、inline和inline-block的区别，可以修改margin吗
CSS优先级
块元素、行内元素有哪些
盒子模型
px、em、rem
CSS优先级
水平垂直居中
元素隐藏方式
h5标签语义化有什么好处
水平垂直居中
用css选择器获取class为level-2 的第一个元素和最后一个元素。
Chrome的最小字体限制是12px，如果想要字体比12px更小，怎么做

二、JavaScript & ES6

call和apply区别
作用域是什么意思，变量提升什么意思？没有定义直接使用是全局还是局部
js数组方法
js的继承方法
手写借用构造函数方法的代码
JS原生DOM操作，说出具体API
原生JS创建一个列表，<ul>标签下有十个<li>，点击每个li能打印出它的索引。具体描述代码实现。
具体说下继承机制及原型和原型链
介绍事件循环机制
什么是同步事件和异步事件，JS中哪些是同步任务，哪些是异步任务
JS是多线程的吗，同步任务是在哪个线程完成的，异步任务是在哪个线程完成的
ES6最常用的是什么
简单介绍一下var、const和let的区别
闭包是什么，有何用处及弊端？多大会形成垃圾？
改变this指针指向的方案有哪些，及其之间的差异？
声明变量，过程，函数声明和函数表达式
<script>标签放在head和body有什么不同？怎么能不先加载（async和defer）
事件捕获、事件冒泡
实现function counter(){}，全局下每次调用返回值+1
跨标签页通讯：localstorage
跨浏览器的数据是如何保持一致的？
Generator和async/await的区别
原生js实现拖拽(onmousestart等事件、H5的drag和drop)，拖拽实现过程
通过类名获取元素节点的DOM操作
闭包的理解
用setTimeout实现每秒输出1，2，3，，...，10
DOMContentLoaded和load的区别

三、计算机网络

get和post区别
http头域有哪些
什么是cookie和session？区别是什么？
sessionStorage、localStorage的区别
http协议，什么是http协议，http请求分哪几部分
TCP四次挥手为什么要有TIME_WAIT状态？
HTTP中Connection：keep-alive实现的什么
get和post区别，get对携带的参数的限制有什么

四、React相关

react生命周期
路由react-router是异步加载吗？怎么做的
React生命周期，从两个点说，一是初始化加载渲染时生命周期的流程，二是更新时生命周期的流程
API请求放在哪个生命周期里，为什么
React中状态state更新机制
react生命周期，在哪个生命周期中发起异步请求，应该是componentDidMount，为什么不能放在compontWillMount？

五、前端工程化

5.1 浏览器

（包括同源、跨域、渲染过程和其他）

同源策略了解吗 +1+1
什么是跨域？如何解决跨域问题 +1+1
jsonp的原理，实现流程
浏览器解析URL
跨域是在浏览器还是服务器设置的
同源策略什么行为受到限制
预检请求，请求方法options
跨域方法
浏览器解析URL过程
浏览器缓存，浏览器端让缓存失效的方法，如何让前端浏览器不进行缓存

5.2 前端安全

了解web安全方面吗
CSRF，如何防止 CSRF 攻击。
csrf攻击流程,浏览器怎么带着你的cookie

5.3 性能优化

CSS优化方案
性能优化方法，其中js打包合并文件都放在一个文件里吗？关于首屏加载优化有了解吗？

5.4 其他

服务器端渲染、客户端渲染
前后端分离的优点
webpack打包了解吗(2次)

六、计算机基础知识

（数据结构、操作系统等）

面向对象的语言有哪些，特点。解释多态。
两个链表交叉怎么找交叉点
内存缓冲区和虚拟内存区别
进程和线程区别
大根堆和小根堆，堆排序，时间复杂度
DFS和BFS

七、输出题

考察变量作用域

for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i);   //i is not defined  与undefined不同  ES6书上原题

let name = 'aaa'; 
const getName = (name) => {
   let name = 'bbb'    //会报错，name已经存在 ，因为参数name已经被定义，let不能重新声明，var可以
   console.log(name)   
}
getName('ccc');

同上

function testOrder(arg) {
    console.log(arg); 
    console.log(a);
    var arg = 'hello';
    var a = 10; 
    function a() {
        console.log('fun');
    }
    console.log(a); 
    console.log(arg);
}; 
testOrder('hi');

闭包

var data = [];  
for (var i = 0; i < 3; i++) {  
    data[i] = function () {   
         console.log(i);  
    }; 
}  
data[0]();  // 3
data[1]();  // 3
data[2]();  // 3

this指向

window.name = 'Outer';
function A () {
   this.name = 123;
}
A.prototype.getA = function(){
    console.log(this);
    return this.name + 1;
}
let a = new A();
let funcA = a.getA;

funcA();

class

class Student{
    constructor(name) {
        this.name = 'B'
    }
    getInfo() {
        return {
            name: 't',
            getName: () => {
                console.log(this)  
                return this.name
            }
        }
    }
}
var st = new Student()
var obj = st.getInfo()
console.log(obj.getName())

Promise

console.log('script start');

Promise.resolve()
  .then(function (res) {           // 微任务队列
    console.log(res, 'promise1');
    return 1
  })
  .then(function (res) {
    console.log(res, 'promise2');
  });

Promise.resolve()
  .then(function () {
    console.log('promise3');
  })
  .then(function () {
    console.log('promise4');
  });

console.log('script end');

下面代码能执行吗

function * fn1() {
    yeild 123;
}
function * fn2() {
    yeild 123;
}
co(function *() {
    yeild fn1()
    yeild fn2()
})()

下面代码输出什么

var name = "outer";
function Main(){
    var name = 'main';
    var innerObj = {};
    innerObj.info = function(){
        console.log(this.name);
        console.log(name);
    };
    return innerObj;
}
var obj = Main();
obj.info();  // undefine  main

this指向

let ele = document.querySelector('.box')
ele.onclick = function(){
	console.log(this)
}
ele.onclick = ()=>{
	console.log(this)
}

promise输出

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

八、算法题

程序判断非空字符串是否是由所含的一个子串重复多次组成，返回true/false？
设计一个flat函数将如下数组arr=[1,2,['3',4,'5',[6,[7,8],9]]]输出为[1,2,'3',4,'5',6,7,8,9]。至少写出两种方法,要求不能改变数组中的原始数据类型。
一个数组怎么找出最大值
算法：数组合并
leetcode7：整数反转（123->321，450->54，-78->-87）
leetcode64：最小路径和
后面第一个大于自己的元素：给定一个数字数组，找到数组每个值后面第一个大于它自身的元素，如果没找到，设为-1。最后返回一个包含所有找到的值的新数组。
leetcode5：最长回文字符串
算法：数组反转，要求在原数组上操作
F0=F1=F2=1，F(n)=F(n-2)+F(n-3)(n>=3).分别采用递归和非递归的方法实现。
实现队列

function Queue(){}
Queue.prototype={
    putInQueue:function(item){}
  	getFromQueue:function(){}
    length:function(){}
    clearQueue:function(){}
};
var q = new Queue();
q.putInQueue("A");
console.log(q.length());

九、智力题

数学题，20块钱20个瓶，2个空瓶换1瓶，一共能喝多少瓶。39

前端面试问题汇总

一、HTML & CSS

二、JavaScript & ES6

三、计算机网络

四、React相关

五、前端工程化

5.1 浏览器

5.2 前端安全

5.3 性能优化

5.4 其他

六、计算机基础知识

七、输出题

八、算法题

九、智力题