互联网大厂前端笔面试解析

什么是面试中最遗憾的事情？答曰：明明知道这个知识点，换个问法就懵了，回头google一下才恍然大悟，后悔不已！究其根本乃是对知识点了解的不够深入，工作中实践的少。

什么是最有效的学习方法？答曰：问题驱动。知识点一定是为了解决问题而存在的，带着问题去学习，可以事半功倍。比起填鸭式的死记硬背要记得更牢，理解的更深入。

本着以上原则，将会在本篇文章中引入大量的例题，也是本文最大的特点，让各位同学能够充分的掌握各知识点，不会被面试时灵活的问法问懵。

题目分为HTML/CSS类、JS类、框架类、算法类，其中HTML/CSS基本上就是一带而过的基础知识，JS是重中之重，框架和算法属于附加题，加分项。我们先从简单的开始，热个身。

---

HTML/CSS

这部分知识属于前端基础，由于Bootstrap、Ant-Design、Material-UI、Element-UI等UI框架已经解决了绝大多数UI问题，此处的知识点相对来说已经没有那么繁杂了。面试者需要知道，至少是听说过上面提到的UI框架，至少要使用过一种，优先推荐Ant-Design。这里画下重点，Form表单部分是各框架中最复杂，也是最常用的部分，值得投入精力去学习。

考点

1. 盒子模型
2. 垂直居中
3. BFC（格式化上下文）
4. 选择器优先级
5. 清除浮动
6. 响应式布局及移动端适配
7. CSS预处理器（Sass/Less/Postcss）
8. CSS动画
9. 常用UI框架及插件
10. canvas、video、radio

例题

请各举出3个块元素和行内元素，并说出他们的特点

盒子模型宽高如何计算？什么是边界塌陷？

如图所示，屏幕正中间有个元素A, 随着屏幕宽度的增加，始终需要满足以下条件：

• A元素垂直居中于屏幕中央；
• A元素距离屏幕左右边距各20px；
• A元素里面的文字”A”的font-size:25px；水平垂直居中;
• A元素的高度始终是A元素宽度的50%; (如果搞不定可以实现为A元素的高度固定为200px;)  

 请用 html及css 实现

用尽量少的html元素和CSS，实现下面图形（纯色即可）

如何适配移动端？

什么是BFC？它主要解决什么问题？

多个inline-block之间为什么会有间隙？如何去除？

什么是重绘和重排？

---

JS

js是前端最核心、最重要、最基础、最复杂、考点最多、最……的部分。ES6的语法要熟练运用，原理也要清楚，这里再强调一下原理，一定要深入到原理层去理解。这才是看似麻烦，实则最快的捷径，正所谓“明道若昧，进道若退，夷道若颣。 ”

考点

1. this指向与作用域
   1. 闭包
   2. call、apply、bind区别及手动实现
   3. ES6新特性——let、const、箭头函数等
2. 原型链与继承（原型/构造函数/实例）
   • 面向对象
   • 手动实现B继承A
   • ES6新特性——class
3. 数据类型
   • 特殊类型是否相等判断
   • 引用类型特点及手动实现深拷贝
   • 函数式编程
   • ES6新特性——解构赋值及展开运算
4. 异步任务
   • 任务执行顺序
   • setTimeout、promise等异步任务优先级
   • async/await
   • debounce/throttle
   • 跨域

例题

模块化

深拷贝

判断变量类型，instanceof，typeof

static,function(){},()=>{}在class中的区别？

JS的基本类型有哪些？基本类型和引用类型的区别？

函数中的 arguments 是数组吗？若不是，如何将它转化为真正的数组

请说出以下代码打印的结果

if ([] == false) {console.log(1);};

if ({} == false ) {console.log(2);};

if ([]) {console.log(3);};

if ([1] == [1]) {console.log(4);};

以下代码的结果是什么？请解释你的答案。

var fullname = 'John Doe';
var obj = {
  fullname: 'Colin Ihrig',
  prop: {
    fullname: 'Aurelio De Rosa',
    getFullname: function () {
      return this.fullname;
    }
  }
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test());

请说出以下代码打印的结果

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}

async function async2() {
  console.log('async2');
}

console.log('script start’);

setTimeout(function() {
    console.log('setTimeout');
}, 0);  

async1();

new Promise(function(resolve) {
    console.log('promise1');
    resolve();
  }).then(function() {
    console.log('promise2');
});

console.log('script end');

以最小的改动解决以下代码的错误（可以使用es6）

const obj = {
  name: " jsCoder",
  skill: ["es6", "react", "angular"],
  say: function () {
    for (var i = 0, len = this.skill.length; i < len; i++) {
      setTimeout({
        console.log('No.' + i + this.name);
        console.log(this.skill[i]);
        console.log('--------------------------');
      }, 0);
      console.log(i);
    }
  }
};
obj.say();

/*
期望得到下面的结果:
1
2
3
No.1 jsCoder
es6
--------------------------
No.2 jsCoder
react
--------------------------
No.3 jsCoder
angular
--------------------------
*/

 实现Function.prototype.bind方法， 使得以下程序最后能输出'success'

function Animal(name, color) {
  this.name = name;
  this.color = color;
}
Animal.prototype.say = function () {
  return `I'm a ${this.color} ${this.name}`;
};
const Cat = Animal.bind(null, 'cat');

const cat = new Cat('white');

if (cat.say() === 'I\'m a white cat' && cat instanceof Cat && cat instanceof Animal) {
  console.log('success');
}

请用JS实现throttle（函数节流）函数。函数节流解释: 对函数执行增加一个控制层，保证一段时间内（可配置）内只执行一次。此函数的作用是对函数执行进行频率控制，常用于用户频繁触发但可以以更低频率响应的场景

---

框架

考点

1. Virtual Dom
2. 双向绑定
3. 组件通信
4. 生命周期

例题

Vue如何实现双向绑定的？

Virtual Dom如何diff ?

---

前端性能优化

考点

1. 网络传输
   1. 网络协议
   2. 网络安全
   3. 缓存
   4. Ajax及跨域
2. 工程化
   1. 静态文件打包压缩
   2. 模块化与组件化
   3. 常用工具——nvm、yarn、webpack、babel
   4. 国际化
3. 其他优化
   1. SEO优化
   2. 懒加载
   3. iconfont与雪碧图

例题

什么是DNS？

什么是TCP三次握手？四次握手？HTTP和HTTPS的区别和联系？常见状态码？RESTfull API

websocket是什么？与HTTP的关系？

HTTP的response和request分别包含几个部分？是什么？

重绘与重排？

你工作中是否遇到过跨域问题？请问是如何解决的？

请列举出几个常用的http状态码及它们的意义

XSS和CSRF分别是什么？如何预防？

cookies、sessionStorage、localStorage的区别？

---

算法

大厂多多少少都会考一些算法题，答不出来很正常，要知道这里想要考察你分析问题的能力，重要的是过程，结果反而是次要的。一定要把自己的思路说出来，想到什么说什么，通常面试官会根据你说的内容去引导你，你要是什么都不说，那面试官想帮你也无能为力了。

考点

1. 贪心算法：局部最优解法
2. 分治算法：
3. 动态规划
4. 回溯法
5. 分支界限法

例题

请实现斐波那契数列，注意性能

如何实现一个双链表

请用算法实现，从给定的无序、不重复的数组data中，取出n个数，使其相加和为sum。并给出算法的时间/空间复杂度 。(不需要找到所有的解，找到一个解即可)