4

前端面试总结

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

ilvseyinfu
25 声望5 粉丝

很帅,不会写代码