一面 70min

        Websocket是一个持久化的网络通信协议，可以在单个 TCP 连接上进行全双工通讯，没有了Request和Response的概念，两者地位完全平等，连接一旦建立，客户端和服务端之间实时可以进行双向数据传输。怎么使用websocket实现长链接，以及它的原理是什么，是大家需要掌握的。

        Vuex 是专门为 Vue.js 设计的状态管理库，它采用集中式存储管理应用的所有组件的状态，它的工作原理是比较常见的面试题。

1. 为什么需要 nextTick
      Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

2. 理解 nextTick
      而 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。

        mvvm 双向绑定，采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

几个要点：
      1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
      2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
      3、实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
     4、mvvm 入口函数，整合以上三者

注：Vue3和Vue2的双向绑定原理不一样，也会被问到，要能说出两者的优缺点。

     上个问题带出了这道面试题，主要从Object.defineProperty() 和 proxy 去回答。

     Webpack构建运行在node.js环境下，它的配置文件遵循CommonJS规范，webpack.config.js导出一个Object对象（或者导出一个Function，或者导出一个Promise函数，还可以导出一个数组包含多份配置）。Webpack从入口文件开始，识别出源码中的模块化导入语句，递归地找出所有依赖，然后把入口文件和所有依赖打包到一个单独的文件中(即一个chunk)，这就是所谓的模块打包。

       webpack影响性能主要是两个方面：构建过程太花时间，以及打包的结果体积太大。可以使用 webpack-bundle-analyzer 对打包的内容进行分析，然后有针对性地进行优化。常用的优化方案有：合理使用loader、缓存babel编译过的文件、多进程编译、 tree Shaking 删除冗余代码、按需加载等等。

        首屏时间的快与慢，直接影响到了用户对网站的认知度。首屏时间的长短对于用户的滞留时间的长短、用户转化率都尤为重要。这道题的答案可以去小程序中搜索。

        上述几题都是计算机网络相关的基础题，具体的答案可以去小程序中搜索，不做详细分析。

        浏览器的存储主要有cookie、localStorage、sessionStorage、IndexedDB，可以从这几个方向展开回答。

      本题比较基础，具体的答案可以去小程序中搜索，不做详细分析。

       不会。我们都知道 for 循环里要跳出整个循环是使用 break，但在数组中用 forEach 循环如要退出整个循环呢？使用 break 会报错，使用 return 也不能跳出循环。return 在 forEach 里面是充当了 continue 的角色

         很常见的问题，详细答案可以在我们的前端面试题宝典里找到哦

        闭包也是面试官喜欢问的面试题，尤其是谈及其缺点的时候，闭包引起的内存泄漏，会引申出浏览器的垃圾回收机制等更深入的问题。

二面 60min

        抽象语法树在日常业务中也许很难涉及到，但当你不止于想做一个工程师，而想做工程师的工程师，写出vue、react之类的大型框架，或类似webpack、vue-cli前端自动化的工具，或者有批量修改源码的工程需求，那你必须懂得AST。AST的能力十分强大，且能帮你真正吃透javascript的语言精髓。建议大家抽时间进行了解。

        一个网站如何维护登录态？除了cookie、session的方案外，还有JWT方案，大家需要熟悉这块的内容。

        很古老的一个问题，不过出现的频率也比较高。

        一面中出现过该问题，确实比较常见。

        下面给一个最简洁的回答，不过大家还是要熟悉每一步具体做的事情，面试官很喜欢展开了去问。

• 根据配置，识别入口文件；

• 逐层识别模块依赖（包括 Commonjs、AMD、或 ES6 的 import 等，都会被识别和分析）；

• Webpack 主要工作内容就是分析代码，转换代码，编译代码，最后输出代码；

• 输出最后打包后的代码。

        可以从心跳包、快速断开旧连接并且发起新连接等方向回答

END