前端面试总结
先说背景，本人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攻击 水平垂直居中布局
发表回复