2020 前端面试问题总结

CSS

BFC：www.cnblogs.com/libin-1/p/7…
Flex：www.runoob.com/w3cnote/fle…
Grid：segmentfault.com/a/119000001…
选择器
- 权重：important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
- 用法
- 伪类：LVHA（LV哈，简单明了）、focus、before、after、checked、disabled、last-child、first-child......
行内元素和块级元素有哪些？区别是什么？：不知道的童鞋前往前方
你理解的盒子模型？：围绕css3新属性 box-sizing 的两个值 content-box 和 border-box。
实现三列布局，左右固定宽度，中间响应式。兼容性尽量好？：常见的两列布局、三列布局实现要知道，知道2-3种实现方式为上策。而且兼容性方面也要知道，比如用了flex的话就兼容IE10+。
单位：vh、vw
rem：www.cnblogs.com/phoebewang0…
em：基于父元素
offsetLeft 和 left 区别
手机屏幕展示缩放：
- window.devicePixelRatio
- viewport scale
- 参考：www.cnblogs.com/xuanbingbin…
- 1像素元素展示（手机像素与物理像素）
移动端适配页面
- 参考：www.jianshu.com/p/5b54be9dc…
- 参考：www.jianshu.com/p/f8a7ea8fb…
　前端安全知识？怎么预防？怎么测试？：前端安全XSS、CSRF、SQL注入。什么场景会产生这些问题。预防和测试手段，测试手段比较少问。

JavaScript

闭包（内存）www.jianshu.com/p/26c81fde2… https://www.jb51.net/article/188763.htm
- 栈内存：存变量
- 堆内存：存对象
- 内存泄露
- 深、浅拷贝
setTimeout / setInterval / requestAnimationFrame
- 参考：www.cnblogs.com/xiaohuochai…
this：www.cnblogs.com/snandy/p/47…
- this
- global
作用域
- 作用域是一个函数在执行时期的执行环境。
- 作用域链 www.cnblogs.com/renlong0602…
原型链
- 原型
- 原型链：www.jianshu.com/p/ddaa5179c…
- prototype、proto、construct
数据类型
- 数据类型转换
- 数据类型判断
  - typeof
  - instanceof
  - constructor
  - Object.prototype.toString.call('')
事件
- 事件流：www.cnblogs.com/st-leslie/p…
- 冒泡流
- 捕获流
实现链式调用
- 参考：www.cnblogs.com/youhong/p/6…
- 函数需要返回 this
类数组对象（过时）
- 只包含使用从零开始，且自然递增的整数做键名，并且定义了length表示元素个数的对象，我们就认为他是类数组对象
- push方法实现
算法
- 排序
- 斐波那契数列
- 树的转换
上下文
- 上下文(context)是指 this 在同一作用域内的值
- 参考：www.jianshu.com/p/a6d37c77e…
严格模式 "use strict"
循环：map、foreach、for in、for of
前端模板引擎 www.cnblogs.com/jingwhale/p…

ECMAScript

Promise
- 状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
- 实现过程：www.jianshu.com/p/b4f0425b2…
- then 传递 promise（执行过程）
- 使用promise模拟一个解决多级回调嵌套问题。
定义：var let const
- 定义
- 定义过程的内存变化
箭头函数
- this 指向
- arguments 替代方案
reducer (实现map)
fiter
async/await
for in 和 for of
set 数组去重
函数稀释
Class
- 实现继承 - function和class的实现方法
- proto、construct
generator
require、import差别
map 和 set 差别
- map 键值对
- set 单一
Iterator
- foreach()

通用经验

性能优化
- 重排 & 重绘
- 参考：www.cnblogs.com/soyxiaobi/p…
前端路由：www.jianshu.com/p/d2aa8fb95…
- hash
- history API
跨域方案
- cros (主要)
- jsonp
- ...
cookie 大小、子域跨域、设置domin
storage、浏览器缓存
安全相关
- XSS
- CSRF
HTTP 1/1.1/2
- 传输方式
- 握手
HTTPS
- 端口
- 安全原理
- 中间人攻击
HTTP状态码？常见的状态码和说明必须知道。200、204、206、301、302、304、307、400、401、403、404、500、503；304是怎么产生的还是要知道的。
PWA segmentfault.com/a/119000001…
- service worker
- manifest.json
- navigator.serviceWorker.register()
fetch、axios、ajax
- 特点、区别、使用

程序设计

从URL输入到页面加载过程
- 流程：缓存 -> DNS解析 -> TCP三次握手 -> HTTP请求 -> 数据响应 -> 页面渲染 -> TCP四次挥手
- 浏览器渲染：创建DOM树—创建StyleRules—创建Render树—布局Layout—绘制Painting
- 参考：www.cnblogs.com/daijinxue/p…
DSL：针对特定应用领域而设计使用的计算机语言
- 外部DSL
- 内部DSL
GPL：指的是针对跨应用领域而设计使用的计算机语言
静态语言 & 动态语言
V8引擎 vs JavaScript Core
MVC、MVVM、单向数据流、双向数据流
- MVVM：www.sohu.com/a/218183165…
- 单向数据流 www.jianshu.com/p/810464f1a…
- 双向数据流
模块化定义
- AMD：异步模块定义
- CMD：同步模块定义
- CommonJS规范：通过module.exports定义，基于Node
- ES6特性：模块化-export/import对模块进行导出导入的
- 参考：www.cnblogs.com/chenguangli…
EventLoop
- 参考：www.cnblogs.com/hanzhecheng…
- js常规Eventloop
- node的Eventloop
事件：宏任务(macro-task) 和微任务 (micro-task)
- 宏任务：包括整体代码script，setTimeout，setInterval
- 微任务：Promise.then(非new Promise)，process.nextTick(node中)
- 事件的执行顺序，是先执行宏任务，然后执行微任务，这个是基础，任务可以有同步任务和异步任务，同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不同的任务，因此会循环执行上述操作。
GWT：Google web Toolkit，是Google公司发布的基于Java语言开发AJAX应用的开发工具包。
函数式编程 www.cnblogs.com/tjyoung/p/8…
- 纯函数
- 柯里化
- 函数组合
- Point Free
- 声明式与命令式代码
- 高阶函数
递归与尾递归 www.ruanyifeng.com/blog/2015/0…
AOP & OOP
- AOP：面向切面编程 juejin.im/post/684490…
- OOP：面向对象编程
- 参考：blog.csdn.net/likesyour/a…
观察者模式
- 观察者模式
- 发布/订阅模式
JS编程模式：www.cnblogs.com/xianyulaodi…
BFF架构：segmentfault.com/a/119000000…
SSR
- 优势、劣势
- 实现
多端开发（实现原理）
- React Native 及 Weex 等实现逻辑 www.jianshu.com/p/2b86945e0…
  - 语法树
  - JSCore
- Flutter 的原理
- 微信小程序的原理 zhuanlan.zhihu.com/p/142381013

JS库

lodash：blog.csdn.net/qq_35414779…
axios：www.jianshu.com/p/7a9fbcbb1…
- 拦截器：axios.interceptors.request.use(func(), func(err))
bable：www.jianshu.com/p/cbd48919a…
- @babel/cli
- @babel/core
- @babel/preset-env：环境包
- @babel/polyfill ：垫平不同浏览器或者不同环境下的差异
- @babel/runtime：提供统一的模块化的helper插件
- @babel/plugin-transform-runtime：插件
- @babel/plugin-transform-xxx
- .babelrc
- presets
- plugin
- babel-stage-* (0覆盖1覆盖2覆盖3)
- babel7升级内容
eslint / jshint / csslint
IndexDB
- 参考：www.ruanyifeng.com/blog/2018/0…

前端测试

jest
mocha
chai

React

生命周期
- 16版本新生命周期
- 废除生命周期原因（涉及fiber）
state、setState的原理
hooks
provider、connet、基于context
中间件
redux-thunk
redux-saga
高阶组件和受控组件
虚拟DOM
- Diff算法：www.cnblogs.com/zhuzhenwei9…
- dom节点增、删、改
Fiber
- 参考：www.jianshu.com/p/bf824722b…
- 任务优先级
- 何时任务结束（帧）
render / commit
react-router
Redux
- www.jianshu.com/p/e98420655…
- 实现原理
- 三大原则
- store的实现
- 中间件
Mobx
- 与redux对比
- 使用方式
Dva（如用过）
- 设计思路
- 包含技术

Vue

双向绑定
- Object.defineProperty
生命周期
虚拟dom
- diff算法
keep-alive
vue的渲染流程
vue-router
Vuex
- 应用方法
- 实现原理
- 数据流
vue的源码看过没？说说基本的实现？实现双向绑定的原理？
即使没有实际地阅读过源码，也要找别人分享的博客去了解其中的原理。

推荐博文
react和vue你都使用过，说说它们的区别？推荐这篇文章
说说你理解的虚拟dom？diff算法是怎么做的？
- 用JS对象模拟DOM树
- 比较两棵虚拟DOM树的差异
- 把差异应用到真正的DOM树上
推荐《深度剖析，如何实现一个Virtual Dom算法》
redux和vuex的区别？

摘取尤大的知乎回答：

Vuex 其实是一个针对 Vue 特化的 Flux，主要是为了配合 Vue 本身的响应式机制。当然吸取了一些 Redux 的特点，比如单状态树和便于测试和热重载的 API，但是也选择性的放弃了一些在 Vue 的场景下并不契合的特性，比如强制的 immutability（在保证了每一次状态变化都能追踪的情况下强制的 immutability 带来的收益就很有限了）、为了同构而设计得较为繁琐的 API、必须依赖第三方库才能相对高效率地获得状态树的局部状态等等（相比之下 Vuex 直接用 Vue 本身的计算属性就可以）

所以 Vue + Vuex 会更简洁，也不需要考虑性能问题，代价就是 Vuex 只能和 Vue 配合。Vue + Redux 也不是不可以，但是 Redux 作为一个泛用的实现和 Vue 的契合度肯定不如 Vuex。

Webpack

模块化打包工具
loader执行顺序
- 从下而上
- 从右而左
plugin
loader
rollup
- 参考：www.rollupjs.com/
- 与 webpack 对比
打包性能优化
- 缓存
- 多进程
- 插件

Node.js

Node 常用包
线程与进程
运维与部署
- 守护进程
性能优化方案
- 参考：segmentfault.com/a/119000001…
项目设计

2020 前端面试问题总结

该总结分为 CSS、JS、ES5/6、通用经验、程序设计、JS库、前端测试、React、Vue、Webpack、Node 进行总结。

CSS

JavaScript

ECMAScript

通用经验

程序设计

JS库

前端测试

React

Vue

Webpack

Node.js