分享下最近几天面试遇到的一些题目，希望对你有帮助

React 的 setState 是同步还是异步的，为什么？

有可能是异步的，因为组件的 props 和 state 可能是异步更新的, React 可以将多个 setState 调用合并成一个调用来提高性能，可以向 setState 传入一个函数，第一个参数为应用先前的 state，第二个参数为此次更新应用的 props 的函数来调用它。

Vue 实例生成时做了什么？

首先会合并选项生成最终选项$options，然后初始化代理，初始化生命周期，初始化事件，初始化渲染函数，调用生命周期函数'beforeCreate'，初始化Injections，初始化 State， 初始化Provide，调用生命周期函数'created'，最后如果有el属性，则调用vm.$mount方法挂载 vm，把模板渲染成最终的 DOM。 节点，接下来就是渲染的过程了

说说Vue的响应式原理

Vue 会遍历 data 选项中所有的属性，使用 Object.defineProperty 把这些属性转为 getter/setter，每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

Vue 里面的'虚拟DOM'是什么？

'虚拟DOM' 是由Vue组件树建立起来的整个VNode树的称呼。VNode 指的是一个包含如何渲染DOM节点信息的实例对象，这些信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点，Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。

Vue 是如何监听对象变化的？

Vue 重新包装了一组观察数组的变异方法（并没有修改原生Array原型上的方法）， 所以它们也将会触发视图更新，这些方法如下： push()，pop()，shift()，unshift()，splice()，sort()，reverse()。

Node.js 的 stream 流有几种类型

Node.js 中有四种基本的流类型：

• Writable - 可写入数据的流
• Readable - 可读取数据的流
• Duplex - 可读又可写的流
• Transform - 在读写过程中可以修改或转换数据的 Duplex 流。

查看带有'xxx'关键字的进程的命令

ps aux | grep xxx | grep -v grep

后面的 grep -v grep 是为了不显示当前查询进程。

事件代理是怎么回事？

事件代理指的是将需要绑定在子元素上的事件绑定到子元素的同一父元素上，使用事件委托可以提高页面性能，以及可以监听新生成的子元素上的事件。

说说函数防抖和节流的作用和区别

页面上一些事件如 resize，scroll，mousedown等 可能会频繁的触发，函数防抖和节流都是为了限制函数的调用次数，防抖是指规定一个延迟时间，不管事件触发多少次，函数都将在规定时间结束后再调用。节流指的是设定一个时间作为函数的调用频率，每隔一定时间才调用函数。

页面上定位分别为float: left;，position: relative; 和默认定位的 ABC 三个元素的展示顺序是怎样的

顺序为 BAC, 使用 position: relative; 定位的元素会在最上面，然后是使用 float 定位的元素，最下面的是正常文档流中的元素。

See the Pen by 轻剑快马 () on .

判断网页是否运行在微信环境下

/micromessenger/.test(navigator.userAgent.toLowerCase())

说说浏览器缓存机制

浏览器每次发起请求时，都会从浏览器缓存中查找该请求的结果以及缓存标识。缓存分为强缓存和协商缓存，强制缓存优先于协商缓存进行，若强制缓存Expires和Cache-Control生效则直接使用强缓存，若不生效则进行协商缓存Last-Modified, If-Modified-Since 和 Etag, If-None-Match，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中，生效则返回304，继续使用缓存。如果WEB应用启用了Service Worker，它会拦截和响应网络请求，如果请求结果存在 Service Worker 的缓存中那么直接使用 Service Worker 中的结果，它的优先级是最高的。

说说对PWA的了解

PWA 是一种开发WEB应用新的形式，它混合了多项技术，能够让 WEB 应用的功能类似于原生移动应用，它具有离线使用、推送消息、发送通知、从桌面启动等特点，所有的数据交换必须要通过 HTTPS 连接来执行，是为了WEB开发的趋势。

用CSS创建一个固定比例的盒子

将盒子的高度设为0，将盒子的padding-top的值设为一个百分比的数值，通过 padding-top 撑高 盒子的高度，盒子高度值为盒子父元素宽度的百分比值。

See the Pen by 轻剑快马 () on .

Js对象的冻结与密封分别是什么

使用 Object.freeze() 冻结一个对象，使得对象自身的所有属性都不可能以任何方式被修改；使用 Object.seal() 密封一个对象，阻止向对象添加新属性并将所有现有属性标记为不可配置，当前属性的值只要可写就可以改变。