前端面试题整理

原生js

• 原型链

• typeof instanceof是如何工作的

• call bind apply

• 浅clone、深clone

• every和some 的区别

• 异步处理机制

• 数组的api

  • sort默认是怎么排序的？

  • flat 如何扁平化一个非扁平数组？

  • reduce 如何使用？

• 对象的api

  • 如何遍历对象的key值？

  • for in 和 Object.keys有什么区别？

• Set

  • 说一说Set结构

• Map

  • 与对象的区别

• WeakMap与WeakSet

  • 什么是弱引用？

  • 跟垃圾回收机制的关系

HTML5

• template的用法

• 本地缓存

• cookie，localStore与sessionStore的区别9

• RequestAnimationFrame

  • 如何工作的？requestAnimationFrame知识 · 语雀

  • 关于js动画这块：position定位结合定时器修改top/left值是最差的方案；好一点用偏移；最好用RequestAnimationFrame。

• WebWorker

  • 独立的线程

  • 与主线程如何通信

  • 多线程webwork与线程通信 · 语雀

css3

• 弹性盒Flex实现居中

• flex

  • flex集成属性详解

  • flex计算原理

• 怎么实现1像素边框

• em和rem的区别

• position有哪些属性？

vue

+ v-if与v-show的区别

• v-if直接对 节点/组件实例 进行卸载；

• v-show 对节点进行disPlay:none;

+ computed 和 watch的区别

• 计算属性computed的取值是对应函数的返回值，这意味无法在异步中得出计算属性的值(因为我们不能在一个函数里的异步操作里进行函数的返回)。与watch一样的点在于，当计算依赖值为vue数据层值时，依赖值更新会引发computed的重新计算，反之依赖项不变时，computed也不会再次计算，也就是会缓存之前的计算值。

• watch其实是 添加一个对依赖值的监听回调。有些时候，我们更新数据层后，会执行一些业务逻辑或者说副作用——这些事情可以放在watch里执行。说白了就是数据更新，就会引发watch回调。

• v-for和v-if能一起用吗？

  • 可以，但不建议。详见：风格指南 — Vue.js

+ render， template， el 三者的区别及优先级？

• render优先级最高；

• template次之，三种用法。

• el。

+ key的作用

• key在某些时候会优化diff算法，详见diff算法。

• 风格指南 — Vue.js

+ vue-diff算法

比对render前后生成的两棵vDom-tree，从上到下、从左到右、基于key值、一遍遍历。遇到新增即新增，遇到删除即删除。遇到改变(更新)的要看情况：

1. key或type不同，直接干掉原有节点，再重新生成新的节点(也就是卸载重装的过程)；

2. 如果仅仅是props更新，则只更新props即可，不会对节点进行销毁。

diff算法的优势是时间复杂度低，只需要一遍遍历，时间复杂度为O(N)。

+ 数据双向绑定的原理

• vue2.x基于es5的Object.defineProperty这个API实现的数据双向绑定。但这个API存在两个显然的缺陷：

1. Object.defineProperty是对象的方法， 用来监听对应属性的变化，无法对数组的更新生效(push，shift等操作), 于是vue入侵了数组的原型链(Array.prototype),重写了数组的api。 -必须先要初始化的时候定义数据(在data中定义)，不然无法对数据设置监听。

2. 对一个非扁平对象而言，用Object.defineProperty劫持，只能通过深度遍历(递归)的形式实现。

+ vue如何将数据打入模板的

• template => AST => Vdom,AST转Vdom的过程中，将数据打入了进去。

+Vue的生命周期钩子函数的阶段

• 创建阶段 -

• 挂载阶段 -

• 更新阶段 -

• 卸载阶段 -

• diff 补充

比对render前后生成的两颗虚拟dom树

从上到下从左到右基于key值一次遍历比对；

具体到一个vDom节点的比对过程：

有key 就先比对key， key不一样的话，就直接把原来的销毁的，然后创建一个新的。

然后比对type ，type不一样的话，就直接把原来的销毁的，然后创建一个新的-销毁阶段-创建阶段。

最后比对所有的属性，属性更新的话，只需要更新节点的属性 - update阶段。

+ ref的两个功能：

1.标记dom获取dom实例对象

2 标记组件 获取组件实例对象

(再一次思考： dom其实就相当于元组件)

• 组件通信

  • 父子组件通信

• 父传子 - pops， 子接受

  • 子传父 - 父组件定一个方法，通过props传递给子组件，子组件调用这个方法，将想传递的数据作为参数。

• 兄弟组件间通信

  • 方案1: 状态提升：将兄弟组件共享的数组提升为父组件的data，父组件通过props进行分发。

  • 方案2: 先子A传父，父传子B

  • 方案3: 参考通用方案

• 远端组件通信

  • \1. eventBus

  • \2. vuex：状态提升到全局。

• 抛开框架，都可以用的通用方式：

  • 本地缓存

  • url

  • window

  • 借助服务端

+ vue-router

• 实现原理

  • hash模式： 基于hashchange监听hash变化，来进行条件渲染

  • history： popstate事件监听浏览器前进后退，定义了push和replace方法。

    • 有缺陷： 刷新后会404

    • 解决方案： web服务器要配置重定向到 /

• 登陆场景： 如果没登陆就要重定向到登陆页。

  • 全局前置守卫。

+ 组件封装

• props设计

• 文档

• 兼容性-flex

+ 组件库的使用 + 看文档 填props

React

• setState如何去使用？

• ·

• PureComponent与Component的区别

• 聊聊受控与非受控

  • 如何在react中实现MVVM

• ref的作用

• 什么是状态提升

• 组件通信

  • 父传子

  • 子传父

  • 兄弟组件通信

  • 远端组件通信方案

性能优化

缓存

—— 静态资源缓存 ： 绝对缓存(强缓存 200) 协商缓存(304)

—— 数据缓存：

其他

• npmjs

• 浏览器的渲染机制

• DNS解析机制

• 中间件？洋葱圈模型？