前端面试技巧总结（IMOOC）

该博客总结慕课网-快乐动起来呀老师的前端面试技巧，还请读者跳转到课程主页购买观看。

关于面试

技术面试（技术方面）
负责人面试（技术、项目深度、项目架构、业务）
HR面试（性格、沟通、潜力）

大概1-1.5小时

五大部分

1、面试准备

2、面试技巧

3、题目演练

4、知识梳理

5、复习指导

课程价值：

JD描述怎看
奖励怎么写
知识怎么复习
问题该怎么回答
项目怎么准备
和负责人怎么沟通
HR印象怎么留

课程安排

面试准备

JD描述分析
！业务分析
技术栈准备
自我介绍

模拟1面

面试技巧页面布局类
CSS盒模型
DOM事件类
HTTP协议类原型链类
面向对象类通信类
前端安全前端算法类

模拟2面

面试技巧
渲染机制
JS运行机制
页面性能
错误监控

模拟3面

面试技巧
业务能力
团队协作能力
带人能力

模拟终面

面试技巧
职业竞争力
职业规划

课程总结

注意事项
复习指南

面试模拟与技巧
1、如何看待面试
我：考察面试者的基本能力
校招：偏重于校园学到的知识和能力
社招：能力=工作知识+工作经验

2、面试环节
一面：基础知识
二面/三面：基础的延伸、引导面试官
三面/四面：业务负责人–业务能力（校招一般没有）
HR面：认真面对

面试准备
1、职位描述（JD）分析
真正分析所面公司的职位描述（基本功-难度）
工作经验不会卡的太厉害还是看技术
准备所面公司用的技术栈
初衷

1、快速识别喜不喜欢这个岗位
2、能不能hold住这个岗位

2、业务分析或实战模拟
分析面试公司官方网站
微信小程序

3、技术栈准备

jQuery （源码：核心架构、事件委托、插件机制、兼容性）
Vue（推荐！分析后的源码博客、阅读量大的）
React（推荐！）
Angular
Node.js（花太久）
时间紧准备一个
最好有实战（遇到的问题、如何解决问题）
以上一种
一下一种
gulp（推荐） Sass less (两种预编译语言)npm  grunt browserify webpack
准备所面公司用的技术

4、自我介绍
简历

基本信息，姓名-年龄-手机-邮箱-籍贯
学历，博士》硕士》本科》大专
工作经历，时间-公司-岗位-职责-技术栈-业绩
开源项目，Github和说明（找开源项目、参与开源项目）

1、教育背景
2、学习经历
3、个人技能
4、工作经历
自我陈述
把握面试的沟通方向
比如说喜欢研究什么网站经常在那些网站上活跃
豁达、自信的适度发挥
自信、适度、谦虚
目的是让面试官欣赏你

实例（面试要的是你比别人聪明）

自如谈兴趣、巧妙示实例、适时讨疑问（不会就不会，但一定要以谦虚询问为结束：我该看什么资料了解这些知识，向面试官寻求资料）
节奏要适宜、切忌小聪明（多种方法解决问题会直接提升印象）

实践

方向要对，过程要细
胆子要大，心态要和

一面/二面

面试技巧

准备要充分
知识要系统
沟通要简洁
内心要诚实
态度要谦虚
回答要灵活

面试模拟

一、页面布局

题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应。

1、题目真的这么简单吗（浮动、定位、Flexbox、表格布局、网格布局）
2、这道题难点技巧在哪里
3、这道题怎么拔高、延伸

解决方案

1、浮动（兼容性好、但脱离文档流）
2、绝对定位（快速解决、之后元素脱离文档流）
3、Flexbox（解决上两个方法的布局、先用最多）
4、表格布局（兼容性很好、繁琐？）
5、网格布局（H5新技术）

文字过多的话用3、4，不会超出范围

页面布局的变通

三栏布局
- 左右宽度固定，中间自适应
- 上下高度固定，中间自适应
两栏布局
- 左宽度固定，右自适应
- 右宽度固定，左自适应
- 上宽度固定，下自适应
- 下宽度固定，上自适应

页面布局总结

语义化掌握到位
页面布局理解深刻
CSS基础知识扎实
思维灵活且积极上进
代码书写规范

二、CSS盒模型

基本概念：标准模型+IE模型
标准模型和IE模型的区别

CSS如何设置两种模型

box-sizing:content-box;(默认：标准模型)
box-sizing:border-box;(IE模型)

JS如何设置获取盒模型对应的宽和高

dom.style.width/height
dom.currentStyle.width/height
window.getComputedStyle(dom).width/height
dom.getBoundingClientRect().width/height

实例题（根据盒模型解释边距重叠）
box.html

BFC（边距重叠解决方案）

BFC的基本概念：
块级格式化上下文

BFC的原理：
1、BFC的垂直方向会发生重叠
2、BFC的区域不会与浮动元素的box重叠
3、BFC是一个独立的容器，外面的元素不会影响里面的元素，反之亦然
4、计算BFC高度的时候，浮动元素也会计算

如何创建BFC
1、float值不为none
2、position只要不是static或relative就是BFC
3、display属性
4、overflow

BFC使用场景
code：

三、DOM事件

基本概念：DOM事件的级别

DOM0 element.onclick=function(){}
DOM2 element.addEventListener(‘click’,function(){},false)
DOM3 element.addEventListener(‘kepup’,function(){},false)

DOM事件模型

捕获
冒泡

DOM事件流
1、捕获
2、目标阶段
3、冒泡

描述DOM事件捕获的具体流程

冒泡的具体流程就是倒过来

Event对象的常见应用

自定义事件

code:event.html

四、HTTP协议类

HTTP协议的主要特点

简单快速
灵活
无连接
无状态

HTTP报文的组成部分

HTTP方法

POST和GET的区别(重要！)

HTTP状态码

什么是持久连接（打电话一个一个打还是一直通着）

HTTP协议采用“请求-应答”模式，当使用普通模式，即非Keep-Alive模式时，每个请求和应答都要新建一个连接，完成后立即断开连接（HTTP协议为无连接的协议）
当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的链接持续有效，当出现对服务器的后继请求时，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接

什么是管线化（请求打包发出-响应打包返回）

在使用持久连接的情况下，某个连接上消息的传递类似于：
请求1->响应1->请求2->响应2->请求3->响应3

某个连接上的消息变成了类似这样：（请求打包发出-响应打包返回）
请求1->请求2->请求3->响应1->响应2->响应3

管线化特点:

五、原型链类

创建对象有几种方法

原型、构造函数、实例、原型链

instanceof的原理

new运算符

面向对象类(oop.html)

类与实例
- 类的声明
- 生成实例
类与继承
- 如何实现继承
- 继承的几种方式!!!

通信类

什么是同源策略限制（3个）

前后端如何通信（Ajax+。。。。一个不合格）

Ajax
WebSocket
CORS

同域安全策略CORS（Cross-Origin Resource Sharing）是W3C在05年提出的跨域资源请求机制，它要求当前域（常规为存放资源的服务器）在响应报头添加Access-Control-Allow-Origin标签，从而允许指定域的站点访问当前域上的资源。

如何创建Ajax

XMLHttpRequest对象的工作流程
兼容性处理
事件的出发条件
事件的触发顺序

跨域通信的几种方式!!!

JSONP（原理、怎么实现的）

这个实在用到烂大街了，提起跨域实现，其实最容易想到的就是它。JSONP(JSON with Padding)是JSON的一种“使用模式”，主要是利用script标签不受同源策略限制的特性，向跨域的服务器请求并返回一段JSON数据。

常规前后端会约定好某个JSONP请求的callback名（比如随便起个名字“abc”），服务端返回的JSON数据会被这个callback名包裹起来，进而方便服务器区分收到的请求，也方便客户端区分其收到的响应数据。我们可以利用jQuery轻松实现JSONP

不过JSONP始终是无状态连接，不能获悉连接状态和错误事件，而且只能走GET的形式。

Hash

location.hash/url hash 是个好东西，在之前我们曾利用avalon前端路由来实现简单的SPA页面（这篇文章），便是助力于location.hash。

利用url地址改变但不刷新页面的特性（在url： http://a.com#hello 中的 ‘#hello’ 就是location.hash，改变hash并不会导致页面刷新，所以可以利用hash值来进行数据传递）和iframe，我们可以实现跨域传递简单信息。

Cross-document messaging(H5)

在 Cross-document messaging 中，我们可以使用 postMessage 方法和 onmessage 事件来实现不同域之间的通信，其中postMessage用于实时向接收信息的页面发送消息，其语法为：

otherWindow.postMessage(message, targetOrigin);

//otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；
//window.open的返回值；通过name或下标从window.frames取到的值。
//message: 所要发送的数据，string类型。
//targetOrigin: 允许通信的域的url，“*”表示不作限制。

WebSocket

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很棒的实现。

CORS(新标准)

安全类

CSRF

基本概念和缩写

通常称为跨站请求伪造，英文名Cross-site request forgery
攻击原理
防御措施
- Token验证
- Referer验证
- 隐藏令牌

XSS

基本概念和缩写

cross-site scripting(跨域脚本攻击)
攻击原理
防御措施
- Token验证
- Referer验证
- 隐藏令牌

WEB安全之XSS

算法类

排序！
堆栈！、队列、链表
递归！
- 递归
波兰式和逆波兰式
- 理论
- 源码

二面/三面

面试技巧

知识面要广
理解要深刻
内心要诚实
态度要谦虚
回答要灵活
要学会赞美

面试模拟

渲染机制类

什么是DOCTYPE
浏览器渲染过程
重排Reflow
- 定义
  - DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。
- 触发Reflow
  - 当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
  - 当你移动DOM的位置时，或者搞个动画的时候
  - 当你修改CSS样式的时候
  - 当你Resize窗口的时候（移动端没有这个问题），或者是滚动的时候
  - 当你修改网页的默认字体时

重绘Repaint
- 定义
  - 当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为Repaint。
  - 大白话:页面要呈现的内容，统统的画在屏幕上。
- 触发Repaint
  - DOM改动
  - CSS改动
    
    如何尽量减少Repaint

布局Layout

运行机制类

JavaScript 运行机制详解

如何理解JS的单线程

JS是单线程的，同一时间只能做一件事。

异步任务（队列）要挂起，先做同步任务，处理过后才相应异步任务。

例一、
    console.log('1');
    setTimeout(function(){
        console.log(3);
    },0);
    console.log('2');
    
    结果：1、2、3.

例二、
    console.log('A');
    while(true){
        
    }
    console.log('B');
    
    结果：A。
    因为while是同步任务，一直在执行.

例三、
    for(var i=0;i<4;i++){
        setTimeout(function(){
        console.log(i);
        },1000);
    }
    
    结果：4、4、4、4.
    因为for循环是同步任务，
    所以执行for循环的时候setTimeout()函数是存在定时器中的，
    并没有执行，一直到for循环执行结束后setTimeout()函数才开始执行
    ---异步任务的放入队列的时间和执行时间

什么是任务队列

什么是Event Loop

异步任务

setTimeout和setInterval
DOM事件
ES6中的Promise

总结

理解JS的单线程的概念
理解任务队列
理解Event Loop
理解哪些语句会放入异步任务队列
理解语句放入异步任务队列的时机

页面性能类

江湖失传的最后一份CDN秘籍

异步加载

浏览器缓存

缓存的分类（会问协议头中关于缓存的字段）

强缓存(本地有缓存，不向服务器询问，直接使用缓存)
- Exporis（服务器的绝对时间，下发资源的时间）
- Cache-Control : max-age=3600（相对时间、拿到资源之后3600s之内直接使用本地资源。若两个时间都有，以Cache-Control为准）
协商缓存（和服务器协商）
- Last-Modified（服务器下发的） If-Modified-Since（再次请求时发出的，两值相等）
- Etag （哈希值，服务器第一次下发资源的时候给的，过了强缓存时间后） If-None-Match（请求时加的值，=Etag）

错误监控类

前端错误的分类
- 即时运行错误
  - try..catch
  - window.onerror
- 资源加载错误
  - object.onerror
  - performance.getEntries()
  - Error时间捕获
- 延伸：跨域的js运行错误可以捕获吗，错误提示什么，应该怎么处理？
错误的捕获方式

上报错误的基本原理
- 采用Ajax通信的方式上报
- 利用Image对象上报

三面/四面

面试技巧

准备要充分
描述要熟练
引导找时机
优势要发挥
回答要灵活

考察点

业务能力
团队协作能力
事务推动能力
带人能力
其他能力

主动描述、被动回答

我做过什么业务
- 独立负责。。。
负责的业务有什么业绩
- 历时。。。完成。。。，用户量上涨。。。
使用了什么技术方案
- 区别常规。。。，使用了。。。方案
突破了什么技术难点
- 解决了。。。
遇到了什么问题
- 。。。
最大的收获是什么
- 对业务的理解更加深入、对技术图表更有把控

团队协作能力

主动描述

协助。。。
和。。。快速开发。。。

结论

一定要准备小项目！！！

事务推动能力

主动描述

例子：

对历史算法更新换代
推动专题的CMS架构
主导克服系统的建设
完成多项专利的申请

终面

面试技巧

乐观积极
主动沟通
逻辑顺畅
上进有责任心
有主张，做事果断

职业竞争力（准备好）

业务能力
- 可以做到行业第一
思考能力
- 对同一件事情可以从不同角度去思考，找到最优解
学习能力
- 不断学习新的业务和技术，沉淀、总结
无上限的付出
- 对于无法解决的问题可以熬夜、加班

职业规划（准备好）

目标是什么
- 在业务上成为专家，在技术上成为行业大牛
近阶段的目标
- 不断的学习积累各方面的经验，以学习为主
长期目标
- 做几件很有价值的事情，如开源作品、技术框架等
方式方法
- 先完成业务上的主要问题，做到极致，然后逐步向目标靠拢

课程总结

JD描述
- 对社招一定要看，对于校招可以忽略

简历
- 对照JD该写出相吻合的简历，对于未掌握的技术栈快速复习、理解
自我介绍
- 一定要打草稿，展示什么优势、描述什么项目，切忌临场发挥
一面
- 重基础、懂原理、要思考、知进退、势不可挡
二面
- 横向扩展、项目结合、做到有的放矢
三面
- 有经验、懂合作、有担当、懂规律、察言观色
终面
- 会沟通、要上进、好性格、有主见、强逻辑、无可挑剔
复盘
- 胜不骄、败不馁、总结经验、步步为营、多拿几个offer

复习指南

课程中主要涉及的重点、难点，对于一些很基础的知识点没有涉及，如css选择器、HTML标签等等

对于很基础的知识点，大家可以参考W3C，把HTML、HTML5、CSS、CSS3、JavaScript等再快速看一遍，有基础的同学估计两天就能都过一遍

对于算法题，每个公司都是临时发挥，很难押题，建议还是把一些基础算法弄清楚、到时候把算法组合起来去解决问题，时间充裕的话可以刷LeetCode

堆栈、队列、链表