最近也在准备面试，就把前端面试中常考的知识点梳理了出来，为了复习起来更方便，更有针对性，也希望能够帮到寒冬面试的一些朋友。本文包括 CSS，JS，ES6，浏览器，服务端与网络，VUE，HTTP，webpack 和算法十个部分。
如果按照本文的思路来准备面试，您定会有所收获。

1. CSS

1、怎么实现三栏布局？

浮动（float）
定位（position）
flex 布局
table-cell
网格布局
bfc (set middle area overflow is hidden)

2. 垂直居中

个人觉得问这个的挺多

line-height: height

absolute + transform 居中为什么要使用 transform（为什么不使用marginLeft / Top），这是一道重绘重排的问题。

flex + align-items: center 我会对 flex 容器以及 flex 项目的每个 css 属性都了解一遍，并且写了一些小 demo。

absolute + top:0 bottom:0

3、盒模型

4. css单位

5. css选择器

6. 层叠上下文

7. 常见页面布局？响应式布局？

8、BFC

概念
如何触发
怎么应用（清除浮动）

9. css预处理器

一般回答变量 / 嵌套 / 自动前缀 / 条件语句 / 循环语句

10. css3新特性

animation和transiton的相关属性，animate和translate

display哪些取值

11、相邻的两个inline-block节点为什么会出现间隔，该如何解决

12、meta viewport 移动端适配

13、CSS实现宽度自适应100%，宽高16:9的比例的矩形

14、rem 布局的优缺点

15、画三角形

16、1px 边框问题

2、JavaScript

1、数据类型的分类和判断

2、原型、原型链、继承、构造函数、实例

3、有几种方式可以实现继承，用原型实现继承有什么缺点，解决办法

4、作用域、作用域链、闭包

5、arguments 对象

6、Ajax的原生写法

7、对象深拷贝、浅拷贝

8、图片懒加载、预加载

9、实现页面加载进度条

10、this关键字

11、函数式编程

12、手动实现parseInt

13、为什么会有同源策略

14、怎么判断两个对象是否相等

15、事件模型（事件委托、代理，如何让事件先冒泡后捕获）

16、window 的 onload 事件和 domcontentloaded

17、for...in 迭代和 for...of 有什么区别

18、函数柯里化

19、call apply区别，原生实现bind

call，apply，bind 三者用法和区别：角度可为参数、绑定规则（显示绑定和强绑定），运行效率、运行情况。

21、async/await

22、立即执行函数和使用场景

23、设计模式(要求说出如何实现,应用,优缺点)/单例模式实现

24、iframe的缺点有哪些

25、数组问题

数组去重，数组常用方法，查找数组重复项，扁平化数组，按数组中各项和特定值差值排序

26、BOM属性对象方法

27、服务端渲染

28、垃圾回收机制

29、eventloop，进程和线程，任务队列

30、如何快速让字符串变成已千为精度的数字

3. ES6（web最新标准）

1、let、const 声明

2、解构赋值

3、声明类与继承：class、extend

4、Promise 的使用与实现（原理）

5、generator（异步编程、yield、next()、await 、async）

6、箭头函数 this 指向问题、拓展运算符

7、module

8、map 和 set 怎么用，如何实现一个数组去重，map数据结构有什么优点？

9、ES6 怎么编译成 ES5，css-loader 原理,过程

10、ES6 转成 ES5 的常见例子

使用 es5 实现 es6 的 class

4. 浏览器

1、输入url到展示页面过程发生了什么？

2、重绘与回流

重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此损耗较少

回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。会触发回流的操作:

* 页面初次渲染

* 浏览器窗口大小改变

* 元素尺寸、位置、内容发生改变

* 元素字体大小变化

* 添加或者删除可见的 dom 元素

* 激活 CSS 伪类（例如：:hover）

* 查询某些属性或调用某些方法

* clientWidth、clientHeight、clientTop、clientLeft

* offsetWidth、offsetHeight、offsetTop、offsetLeft

* scrollWidth、scrollHeight、scrollTop、scrollLeft

* getComputedStyle()

* getBoundingClientRect()

* scrollTo()

回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价较高。

3、防抖与节流

4、cookies、session、sessionStorage、localStorage

5、浏览器内核

5. 服务端与网络

1、常见状态码

2、缓存

200 From cache 和 200 ok

400,401,403状态码分别代表什么

浏览器缓存

3、cookie, session, token

4、前端持久化的方式、区别

5、DNS是怎么解析的

6、cdn

7、计算机网络的相关协议

8、http/https/http2.0

9、get post区别

10、ajax、 axios库

11、tcp三次握手，四次挥手流程

12、跨域

13、前端安全XSS、CSRF

14、websocket

15、Http请求中的keep-alive有了解吗

16、网络分层

17、即时通信，除了Ajax和websocket

18、模块化，commonJS，es6，cmd，amd

6. Vue

1、vue解决了什么问题

2、MVVM的理解

3、如何实现一个自定义组件，不同组件之间如何通信的？

4、nextTick

5、生命周期

6、虚拟dom的原理

7、双向绑定的原理？数据劫持？

8、组件通信

父->子

子->父

非父子组件

9、Proxy 相比于 defineProperty 的优势

10、watch computed区别

11、virtual dom 原理实现

12、vue-router(hash， HTML5 新增的 pushState

单页应用，如何实现其路由功能---路由原理

vue-router如何做用户登录权限等

你在项目中怎么实现路由的嵌套

13、vuex的理解

前端性能优化

页面DOM节点太多，会出现什么问题？如何优化？

如何做性能监测

SEO和语义化

这个没被问过

微信小程序

微信小程序和h5差异，如果有开发weex的经验，可能会加上weex

7. git

基本操作
git rebase vs git merge
git merge
- 记录下合并动作很多时候这种合并动作是垃圾信息
- 不会修改原 commit ID
- 冲突只解决一次
- 分支看着不大整洁，但是能看出合并的先后顺序
- 记录了真实的 commit 情况，包括每个分支的详情
git rebase
- 改变当前分支 branch out 的位置
- 得到更简洁的项目历史
- 每个 commit 都需要解决冲突
- 修改所有 commit ID

回答时候没有答出很多，这是后面总结，深刻发现日常做总结的必要性，一直觉得自己是了解的，等到总结时候才发现有一些 point 还是不清楚的。

修改 commit message

8. HTTP

1. 跨域

基本都被问同源策略以及引申到跨域来，一般我会说 CORS 以及 jsonp，CORS 会从简单请求跟非简单请求区分开，再讲 options 请求的意义。

2. HTTP 报文

请求行 + 头部信息 + 空白行 + body 有被问到说空白行的意义，我一直以为就是纯粹来标识 headers 的结束，但是面试官说不止这个功能，我后面看了HTTP 权威指南 也没有找到，Stack Overflow 也没找到。。。希望有人知道可以跟我说一下。不过有可能是我听错了题目，毕竟是电话面试。

3. cookie session

一般会问两者的差别，以及引申到 sessionStorage, localStorage, cookie 区别

4. 从输入 URL 到页面加载全过程

一般我会答链接的大部分步骤，按照理解来，这里面我被问到的点有：

缓存，分为强缓存、协议缓存，一般会问到 304 的表现，以及再引申到 301 302 的区别，我会再说 307 的区别。
三次握手
HTTPS 的工作原理
CDN 的工作原理，以及刷新缓存的原理。
浏览器渲染的步骤
重绘重排的概念，以及最佳实践。一直都知道应该用 transform 代替 margin，但是一被问原理，就不太清楚，查了资料是对 translate3d 的元素进行 GPU 加速。
会因为 JS 是单线程而问到阻塞的问题，引申到 async defer 等属性。
status code 有哪些，我们是严格按照 restful 的规范来设计接口，所以这个问题我一直觉得很简单，但是被问到不少次。我记得趣头条的笔试就有，我会把用过的按照 2xx(200, 201, 204, 206) 3xx(301, 302, 304, 307) 4xx(400, 401, 403, 405) 5xx(500, 502, 504) 来分类，我偶尔写写 rails，所以对对应的名词都比较熟悉贴一篇 list of rails status codes
DNS 解析过程

5. xss，csrf

xss 注入攻击
- 转义
csrf (cross site request forgery)
- Get 请求无副作用
- cookie httponly
- cors （origin not *）

我是通过看这篇文章对安全有更多了解的，推荐一下。

6. sse( server sent event)

9. 打包工具 webpack

1、打包原理

2、打包插件

3、webpack热更新原理

4、优化构建速度

10. 算法

算法一般考得不难，不过基本每一次面试都会考到，常考的算法有：

1、排序算法

2、字符串中找出最长最多重复的子串

3、动态规划，参见背包问题

4、层次遍历二叉树

5、加油站问题(贪心算法)

6、二分法

7、单链表反转

8、取1000个数字里面的质数

9、找出数组中和为给定值的两个元素，如：[1, 2, 3, 4, 5]中找出和为6的两个元素。

10、线性顺序存储结构和链式存储结构有什么区别？以及优缺点