前端面试总结
先说背景,本人2018年7月毕业,去年十月校招到今年10月一直在做前端开发工作,年前打算换工作,就重新梳理下面试考点
总结包含:
JavaScript基础,CSS基础,常见算法和数据结构,React&Vue框架,计算机网络相关知识,可能有的点很细,有的点很大,参考个人情况进行总结,方便对知识进行回忆,有的列举出了参考答案,有的则在文末列举了优秀回答
闭包
事件机制
- 事件3个阶段 事件捕获阶段,处于目标阶段,事件冒泡阶段
- 默认为事件冒泡
ES6
- let const class 模块化 等等常用ES6知识
- 箭头函数作用,此处可以扩展考察 this指向问题
- set map 相关
原型链
深拷贝&浅拷贝
跨域
- 同源策略
- CORS
- JSONP
- Iframe + document.domain
安全
- CSRF 跨站请求攻击 (原理,保护措施 referer token 验证码,设置cookie的httponly属性,post请求等等
- XSS (同上
HTTP 方法
输入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
排序算法
- 常见的排序算法 复杂度 稳定性
- 快速排序 不稳定 空间复杂度O(logn) 平均时间复杂度O(nlogn) 最差...O(n2)
- 选择排序 不稳定 空间复杂度O(1) ...所有都是O(n2)
- 冒泡排序 稳定
- 堆排序 不稳定 空间复杂度O(1) ...所有都是O(nlogn)
- 插入排序
哈希表
- 数组和链表的特点
- 搜索插入和删除的时间复杂度O(1)
二叉树
链表
AVL树 二叉查找树
精度丢失问题
- 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)
反转字符串
JS异步
- 异步解决历史(Ajax的进化历程)
- Promise,Async/Await 用法 Promise 缺点
- Promise API Promise.all & Promise.race
Ajax
- ReadyState (0, 1, 2, 3, 4) 5中状态
- js实现ajax
- 优缺点
单/双向数据绑定
Vue
- 生命周期
- 父子组件通信
- 双向数据绑定
- vm.$nextTick原理
React
- 生命周期
- Virtual-dom技术以及改良后的Diff算法
- 对比Vue.js
数组去重 数组扁平化
深拷贝和浅拷贝
Position属性
Box-sizing 属性
- content-box border-box
- 盒模型 W3c标准盒模型和IE盒模型
两栏布局 三栏布局
回流和重绘
- 概念
- 举例
- 如何避免 eg: DocumentFragment, Absolute
浮动
隐藏元素
- display none
- visibility hidden 区别
垂直居中布局
前端性能优化
列举一些优秀回答
输入URL你可以看到什么?
HTTP缓存
域名解析过程
vue生命周期
React生命周期
CSRF攻击
水平垂直居中布局
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。