初级前端开发面试总结

前端面试总结

先说背景，本人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攻击
水平垂直居中布局