前端面试总结
先说背景，本人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 区别
垂直居中布局
- 常见的垂直居中布局方法
前端性能优化
- 列举常见前端性能优化方法
列举一些优秀回答
