最近开始找工作，总结了一些前端面试可能会问的问题

1.Vue生命周期（6个）

beforeCreate，created，beforeMounte，mounted，beforeDestroy，destroyed

2.JWT是否了解，

答：原理不是很了解，只知道token的使用

3.VueX的API有哪些，一般怎么使用，用在什么地方？

答：token的存储，用户信息的存储，公共数据的存储。

Api：state、getter、mutation、action、（map…），

Store本质是在构造函数中new 一个Vue示例vm，vm的data为{state}，同时设置state的get和set方法，get直接返回vm.state，set则发出警告，只能通过mutation进行设置数据。

getter可以对数据进行缓存，即为vm的computed属性，调用getter的时候实际是调用内部vm对应的computed属性。

mutation函数会存到一个数组中（因为会有重名），然后调用commit的时候会拿出对应的方法对state进行修改。

Action会判断函数是否有then方法，进行异步调用。

namespace本质是state.[namespace]，map...方法做了转换

4.Vue-Router 是否了解，原理是什么？

Vue路由有2种，hash和history，hash监听hashChange, history监听popstate事件。

5.箭头函数的特点，有无arguments，是否可以使用new ，为什么

答：箭头函数为匿名函数，作用域为其上层作用域，this为其上层的this，无arguments参数，不可以作为构造函数。

6.Webpack的loader和plugin的区别

Loader是对各种文件的加载和处理，为流处理，上一个loader的结果为下一个的参数。

Plugin是插件，是对webpack的补充，在webpack的loader处理之后对结果进行修改，它是基于事件机制，在webpack编译过程的事件进行监听，处理相关结果。

7.Websocket是否了解，在哪些地方用会比较合适？

最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。(聊天室)

8.ES6 的import 、export是否有了解，谈下自己的认识

Import是静态引入，路径不能有参数，

9.路由权限有无做过？

有，在meta中配置角色标签，根据登录用户的角色去匹配，动态生成用户的路由表。AddRoutes方法；也可以直接根据用户在后端配置好路由表，再通过接口获取用户的路由。

10.Location.href 和vue-router 跳转有什么区别？

无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动

11.ES6的Set和Map有什么用处，let和var的区别

let的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效.

12.Promise如何在成功和失败后都去掉页面请求的loading？

答：在finally中处理

13. 协商缓存和强缓存 (opens new window)

1. 强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码;

2. 协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源； 两者的共同点是，都是从客户端缓存中读取资源；区别是强缓存不会发请求，协商缓存会发请求

14.Vue 指令的钩子有哪些？指定的参数有什么，指令会执行几次？

钩子函数有：bind，inserted，update，componentUpdate，unbind。

参数：el，name，binding，vnode，oldVnode

15.Vue create 里写一个this.$nextTick(（）=>console.log(‘aa’)) ，mounted里面也有console.log() ，谁先执行？

16.浏览器内核知道多少？ （这简直了，谁知道）

Trident（IE）、Gecko（firefox）、Blink(Chrome新)、Webkit（safari）

17.浏览器多个标签页之间如何通信？ （worker可以）

Worker 可以跨域通信，postmessage,

Localstorege也可以跨标签使用。

18.有没有做过一些组件封装 ？（table页面的封装）

19.页面为什么会白屏，以及对首页白屏的处理

在地址栏输入URL会经历以下步骤：

1、 查找域名DNS，找到对应服务器的IP，

2、 建立TCP连接，向服务器发出请求。

3、 服务器响应请求，浏览器拿到数据进行解析

4、 浏览器拿到html，从上向下进行解析渲染，解析DOM和CSS，计算页面布局，遇到JS会进行解析，运行JS，阻塞页面渲染。一边渲染一边显示页面内容，图片等内容会异步加载。

优化：选择合适的CDN加速，提高服务器带宽和响应速度，首屏减少内容，按需加载，优化JS位置，防止页面阻塞，使用骨架屏，防止用户等待过久。

20.web标签语义化怎么理解

21.iframe通信问题及处理

22.浏览器兼容性问题，css，布局相关

23.浏览器安全相关的问题

24.Taro和Uniapp的区别

25.VueRouter的钩子函数

26.瀑布流和懒加载

27.ES6用过哪些

28.CSS会阻塞JS文件执行吗

会，CSS不会阻塞DOM树的解析，但是会阻塞渲染，以及JS的执行。（不然的话，如果在JS里获取DOM元素的颜色，如果不阻塞的话会导致JS不可靠）

29.微任务和宏任务，哪些是微任务哪些是宏任务

JS事件循环，分为同步任务和异步任务，异步任务会放到事件循环任务队列，当同步任务执行完以后，会把异步事件队列中的任务放到主线程中。

微任务先执行，再执行宏任务

宏任务常见的有：setTimeout、setInterval、setImmediate

微任务有：Promise、process.nextTick、MutationObserver

30.堆和栈简单说一下

堆是存放引用类型，栈是存放基本类型

31.一段函数需要执行60多秒，怎么防止页面阻塞，任务如何拆分

32.多段文字如何查找到某个字符在哪一段

33.闭包是什么？会导致内存泄漏吗

JS里面只有函数作用域和函数作用域，闭包就是在一个函数里面返回另外一个函数，返回的函数绑定了它所在函数的当前上下文。闭包不会导致内存泄漏，闭包会导致变量无法回收，占用大量内存，在旧的IE浏览器中会导致内存泄漏。

34.如何查找内存泄漏，如何分析

35.vue vnode和diff算法简单说一下，什么是vnode？

虚拟DOM 就是使用js模拟真实DOM，所有操作都在虚拟DOM上进行，数据更新时对比虚拟DOM，计算出更新DOM的最小操作，由框架去完成DOM的更新，让用户更专注于业务逻辑。

36.Vue修改一个组件的数据，更新对比是从该组件开始还是从根节点开始

应该是在该组件进行更新，因为有依赖收集，通知依赖的地方进行更新。

37.Vue一个Home页面有A,B 2个组件，它们的生命周期是怎么样的？

一个页面模板结构如下：

<div>
    <A/>
    <B/>
</div>

首先是Home组件初始化，调用 beforeCreate、created、beforeMount ；然后根据子组件顺序，分别调用A，B组件的 beforeCreate、created、beforeMount 生命周期钩子函数，然后是A组件的 mounted , B 组件的mounted ,最后是 Home的 mounted

销毁的时候：先是Home 的 beforeDestroy ，然后是A 的 beforeDestroy、destroyed ， B的beforeDestroy、destroyed ，最后Home的destroyed

38.Vue组件里是先解析template还是先挂载data

先初始化data，原因是在created生命周期完成数据初始化，数据设置为响应式，在getter收集依赖，在setter中通知视图进行更新，然后在beforeMount里编译模板，这时候模板里使用到数据的时候会出发getter依赖被收集，因此，先初始化data，再初始化模板，然后挂载渲染。

39.有一个耗时长的任务怎么提升用户体验呢

1. 对任务进行分解，分成一些小任务，然后进行时间分片，分片进行处理，可以使用Generator函数让出控制权进行分片处理。

如何评估任务的时间：操作系统通过任务需要的数据堆栈来评估。

预设值一些任务的优先级，动画，用户操作等优先级较高，非可视区界面更新的优先级会较低。

2. 使用web worker或者定时器进行分片

参考 react fiber 以及这篇博文 (opens new window)