2019“寒冬”前端面试必备（持续更新...）

迷南。 2022-02-03 06:47 262阅读 0赞

> **最近也在准备面试，就把前端面试中常考的知识点梳理了出来，为了复习起来更方便，更有针对性，也希望能够帮到寒冬面试的一些朋友。本文包括 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][list of rails status codes]
 *  DNS 解析过程

5. xss，csrf

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

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

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、线性顺序存储结构和链式存储结构有什么区别？以及优缺点

转载：https://juejin.im/post/5cd2cacde51d456e660d4570

[list of rails status codes]: https://link.juejin.im?target=http%3A%2F%2Fbillpatrianakos.me%2Fblog%2F2013%2F10%2F13%2Flist-of-rails-status-code-symbols%2F
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000018004657