前端面试题整理

开始进入刷题阶段,从网上找来的一些前端面试题,在这里进行整合。
整合Shopee、腾讯、京东、阿里、头条、百度、大丰收、深信服、平安科技等前端面试题。

计算机原理

  • MD5, SHA-1

JS基础语法 & 原理

  • let、const和var
  • SVG的原理
  • SVG和Canvas的对比;
  • 闭包
  • 闭包数据缓存手写
  • 事件循环机制
  • 基础类型和类型判断
  • this
  • 不可变数据结构 文章
  • 动画;
  • 一个请求发送后发生的事
  • 实现bind函数
  • 实现Promise
  • 实现EventBus
  • 原型与原型链 文章
  • ES5原型链继承和ES6类继承之间的区别

    ES5的继承时通过prototype或构造函数机制来实现。ES5的继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上(Parent.apply(this))。
    ES6的继承机制完全不同,实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法),然后再用子类的构造函数修改this。
    具体的:ES6通过class关键字定义类,里面有构造方法,类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法,否则新建实例报错。因为子类没有自己的this对象,而是继承了父类的this对象,然后对其进行加工。如果不调用super方法,子类得不到this对象。
    ps:super关键字指代父类的实例,即父类的this对象。在子类构造函数中,调用super后,才可使用this关键字,否则报错。

  • [ ] 说出p1,p2 的值并解释new的含义:

    1
    2
    3
    4
    5
    function Point(x) {            
    this.x = x;
    }
    var p1 = Point(1);
    var p2 = new Point(2);
  • [ ] 数组去重

  • 箭头函数与函数定义区别
  • 随机数范围公式

工程化相关

  • webpack
  • CMD原理

CSS

  • 盒子模型,content-box 和 border-box
  • position, float 浮动
  • 布局方式(float,flex,grid等等)
  • html5新特性
  • CSS Less,Sass
  • BFC的理解。什么情况会产生BFC。
  • 选择器权重

    important > 内联(style) > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

  • 所有伪类

    LVHA(LV哈,简单明了)、focus、before、after、checked、disabled、last-child、first-child……很多,就不一一列举了。

  • 父子选择器和兄弟选择器。
    父子 > , 兄弟 +
  • 行内元素和块级元素有哪些?区别是什么?
    文章
  • 水平和垂直居中

框架

  • Node.js, ReactJs (原理);
  • vue 与 react 比较 文章
  • vue的源码,基本的实现,实现双向绑定的原理 文章
  • 虚拟dom 和 diff算法 文章
    • 用JS对象模拟DOM树
    • 比较两棵虚拟DOM树的差异
    • 把差异应用到真正的DOM树上
  • Vue响应式原理
  • redux和vuex的区别

    Vuex 其实是一个针对 Vue 特化的 Flux,主要是为了配合 Vue 本身的响应式机制。当然吸取了一些 Redux 的特点,比如单状态树和便于测试和热重载的 API,但是也选择性的放弃了一些在 Vue 的场景下并不契合的特性,比如强制的 immutability(在保证了每一次状态变化都能追踪的情况下强制的 immutability 带来的收益就很有限了)、为了同构而设计得较为繁琐的 API、必须依赖第三方库才能相对高效率地获得状态树的局部状态等等(相比之下 Vuex 直接用 Vue 本身的计算属性就可以)
    所以 Vue + Vuex 会更简洁,也不需要考虑性能问题,代价就是 Vuex 只能和 Vue 配合。Vue + Redux 也不是不可以,但是 Redux 作为一个泛用的实现和 Vue 的契合度肯定不如 Vuex。

网络协议相关

  • TCP,UDP
  • http 1.0, http 2.0, https
  • 三次握手和四次挥手
  • http 常用状态码
  • 你理解的cookie?跟session有什么区别?http中设置cookie的头部字段有哪些?

    头部字段的话有Cookie和Set-Cookie

  • http头部
  • 缓存相关 文章
  • webSocket

前端安全策略和常见入侵

  • 跨域 和解决方案
  • XSS, CSRF, SQL注入

数据结构与算法

  • 手写快排
  • 手写BFS和DFS
  • Binary Tree, Balanced Tree, Null Tree;
  • Search 方法和时间复杂度;
  • Sort 方法和时间复杂度;

    冒泡排序, 堆排序,快速排序等

  • Hash Map 的冲突,在前端的应用;
  • Balanced tree insert node;

团队协助

  • git

设计模式

  • 单例
  • 工厂
  • 装饰者

实操训练

  • 写一个轮盘抽奖