共计 2379 个字符，预计需要花费 6 分钟才能阅读完成。
前端面试总结
先说背景，本人 2018 年 7 月毕业，去年十月校招到今年 10 月一直在做前端开发工作，年前打算换工作，就重新梳理下面试考点总结包含：JavaScript 基础，CSS 基础，常见算法和数据结构，React&Vue 框架，计算机网络相关知识，可能有的点很细，有的点很大，参考个人情况进行总结，方便对知识进行回忆，有的列举出了参考答案，有的则在文末列举了优秀回答
闭包
闭包的概念？
闭包的作用？
使用闭包的注意点？
事件机制
事件 3 个阶段 事件捕获阶段，处于目标阶段，事件冒泡阶段
默认为事件冒泡
ES6
let const class 模块化 等等常用 ES6 知识
箭头函数作用，此处可以扩展考察 this 指向问题
set map 相关
原型链
4 种继承方式
new 原理
深拷贝 & 浅拷贝
数据类型
基本数据类型和引用数据类型
跨域
同源策略
CORS
JSONP
Iframe + document.domain
安全
CSRF 跨站请求攻击（原理，保护措施 referer token 验证码，设置 cookie 的 httponly 属性，post 请求等等
XSS（同上
HTTP 方法
几种方法介绍
axios 库
输入 URL 到页面成功渲染的过程
经典问题 (任何一个步骤都可以引申来考察
DNS 解析（具体的解析过程
TCP 连接
http 请求 (状态码考察
返回数据 浏览器渲染页面（页面渲染过程
上面这些模块下面一一例举
DNS 解析过程
概念
浏览器缓存
系统缓存
路由器缓存
域名提供商
顶级域名服务器
主域名服务器
浏览器页面渲染
加载 html 构建页面 dom 树
解析 css 构建渲染树
渲染树构建完成后，将渲染树绘制到屏幕（回流和重绘
JS 解析，会阻塞 dom 树的构建
状态码
http 缓存 304
强制缓存（expires cache-control
对比缓存（Etag & if-none-match last-modified & if-modified-since
301 302 区别（永久性重定向（带缓存和临时性重定向）
垃圾回收
引用计数
标记清除
TypeScript
使用就不说了，总结下优缺点
增加了代码的可读性和可维护性 编译时错误提示
包容性 .js 可写为 .ts
拥抱 ES6，框架支持
学习成本高如：类，泛型，接口
函数式编程
概念 相同的输入 永远的到相同的输出，且没有任何副作用
副作用 比如 ajax 请求 改变全局变量
优缺点 1. 缓存性 2. 可移植性 3. 并行性 不需要共性内存
柯里化的概念，作用（最好不要答装逼 我还没想到更好的答案
我列举一个知乎答案：统一接口，封装的每一层都干干净净，逻辑表现清楚
IndexedDB
特点
区别 LocalStorage SessionStorage(1. 同步 2. 存储大小)
WebSocket
概念
特点
readyState
排序算法
常见的排序算法 复杂度 稳定性
快速排序 不稳定 空间复杂度 O(logn) 平均时间复杂度 O(nlogn) 最差 …O(n2)
选择排序 不稳定 空间复杂度 O(1) … 所有都是 O(n2)
冒泡排序 稳定
堆排序 不稳定 空间复杂度 O(1) … 所有都是 O(nlogn)
插入排序
哈希表
数组和链表的特点
搜索插入和删除的时间复杂度 O(1)
二叉树
先序遍历
中序遍历
后序遍历
层序表里
树高
链表
翻转链表
AVL 树 二叉查找树
特点
O(logn)
精度丢失问题
0.1 + 0.1 != 0.2 (为什么
计算机内部的信息都是由二进制存储的，但是有些浮点数没法用二进制精准的表示出来
小数转整数
Math.round() 四舍五入
Math.ceil() Math.floor()
生成随机数
引入 Math.random() [0,1) 的随机小数
parseInt(Math.random()*(m-n)+n) [n, m)
Math.round(Math.random()*(m-n)+n) [n, m]
数组去重
var set = new Set([1,1,2,2,3,3,3,3]) var arr = […set]
indexOf
如何判断数组是数组
Array.isArray(arr) ES5 的方法
arr instanceof Array
arr.__proto__.constructor === Array()
Object.prototype.toString.call(arr) === ‘[object Array]’ // 数据原型和对象原型定义的 toString 方法不同
Object.prototype.toString.call(obj) === ‘[object Object]’ // 如上
Object.prototype.toString.call(null) === ‘[object Null]’ // 推荐此方法
数组指定个数去重 findDuplicate(num)
es6 Set Map 相关操作
反转字符串
JS 异步
异步解决历史 (Ajax 的进化历程)
Promise，Async/Await 用法 Promise 缺点
Promise API Promise.all & Promise.race
Ajax
ReadyState (0, 1, 2, 3, 4) 5 中状态
js 实现 ajax
优缺点
单 / 双向数据绑定
MV** 概念
vue/react 数据绑定机制
Vue
生命周期
父子组件通信
双向数据绑定
vm.$nextTick 原理
React
生命周期
Virtual-dom 技术以及改良后的 Diff 算法
对比 Vue.js
Position 属性
几种属性值
Box-sizing 属性
content-box border-box
盒模型 W3c 标准盒模型和 IE 盒模型
两栏布局 三栏布局
常见自适应布局写法
回流和重绘
概念
举例
如何避免 eg: DocumentFragment, Absolute
浮动
伪元素和伪类
清除浮动常见 3 种方法
隐藏元素
display none
visibility hidden 区别
垂直居中布局
常见的垂直居中布局方法
前端性能优化
列举常见前端性能优化方法
列举一些优秀回答 输入 URL 你可以看到什么？HTTP 缓存 域名解析过程 vue 生命周期 React 生命周期 CSRF 攻击 水平垂直居中布局