【金三银四】一年半经验，小羽同窗的CVTE突袭面经

若是生活存在奇迹，那必定是努力的轨迹！前端

Hello，你们好，我是小羽同窗，一个平凡而又不甘于平凡的前端开发工程师。vue

emmm，今天呢，主要就想和你们聊聊小羽同窗的 CVTE突袭面经 吧~node

为啥说是 突袭面经 捏？react

嗯，就是突如其来，毫无还手之力的面试邀请。jquery

收到面试邀请时，我TM才刚开始复习两天！！！webpack

原本是准备3月底/4月初让呆呆帮忙内推的。。。nginx

后面让呆呆大佬帮我查了下记录，年前就进入人才库了！没啥印象了呀，大人我冤枉啊！git

还好呆呆说我挂了的话，还能够把我捞起来（继续鞭尸），而后我就豁出去了，冲啊＿φ( °-°)/github

先简单的说一下我的的基本状况吧web

【基本信息】

19年6月毕业，计算机科学与技术，渣本
工做经验一年半，实际工做年限2年（由于大厂的工做经验是从毕业时间算起的）
技术栈：vue全家桶系列、nodejs、nginx、CI/CD、docker
目标：广州一线大厂的前端开发岗位

【优点】

科班出身
搭建了公司项目的前端框架
参与并解决过公司项目的前端性能调优问题
担任过面试官，对面试的题目有一个总体性的了解
开源项目《小羽直播平台》
开源项目 SULG UI组件库

【劣势】

技术栈是vue（目标是大厂，而大厂通常都是react）
一年半经验，两次跳槽（如今是第二次，缘由都是想进一线大厂，惋惜第一次连大厂的面试机会都没能捞到）
github的星星量较少（小伙伴们能够帮下忙吗？）

小羽有过前端面试官的经历，也面试过很多的人选了，因此也说一下做为面试官，对人选的感受吧。小羽把人选总结了一下，大概能够分为如下三类

【不够自信】

这类小伙伴给人的感受就是有必定的技术，但面试的时候比较紧张，致使说话结巴或者对技术的描述断断续续的，而后给面试官的感受就是人选不够自信，对技术的掌握程度不高，而后会拉低面试的评价。因此建议感受建议这类小伙伴能够在复习时，模拟面试的场景用本身的语言组织答案。若是时由于紧张的缘由致使的，能够先去一些非目标公司练下手，热下身，主要仍是要克服本身的心理。

ps：小羽在面CVTE前也想去热身的，但是条件不容许了，啊啊啊啊啊啊啊啊 (╯°Д°)╯︵┻━┻

【过于自信】

这类小伙伴怎么说呢，可能就是对本身的认知不够深入。以为面试官问的全部问题本身必须能答得上来（固然能所有都答上就再好不过了）。emmm，怎么说好捏。其实面试的时候不是必需要所有都答上，有个一两道不懂是挺正常的。碰到本身没复习或者感受了解不够深的地方，能够直接说没怎么了解过，面试官不会由于这么两道题就给你直接挂掉。若是你以为本身能答上，可是了解的不够深，就会被面试官刨根问底的开虐了。

ps：小羽在CVTE技术二面的时候，不当心就陷入这个局面，反正多多少少算是个减分项吧 o(╥﹏╥)o

【自信、阳光】

这类小伙伴是最有机会经过面试滴。他们一般会作比较多的准备，面试的时候给小羽的第一感受就是阳光自信。给人的感受就特别的棒，有想让他们加入本身的团队的想法。这类小伙伴基础通常都比较扎实，而后会在简历、自我介绍、项目描述等多个维度，会有意无心的把面试官往本身最擅长的领域去引，而后就感受像是在作一场技术交流而不是面试，因此这类小伙伴经过的概率是最大滴。

通常来讲，一轮技术面的时间是30-60min，当超过60min后，面试官就算还有想问的东西，他也会尽快的把这场面试结束掉，因此小伙伴们，在本身熟悉的领域能多说就尽可能多说点哦~。而后面试官也是没有挖掘你的特色的义务的，就像刚刚介绍那类阳光自信的小伙子，他们就会从各类维度把面试官引入本身熟悉的领域，而后展现本身的优势，尽可能多说点。面试其实就是在展现本身的优势，若是在本身熟悉的领域都不能折服面试官了，其余层面就更不用说了。

嗯，基本信息和面试官的一些感想聊完了，就开始聊聊小羽同窗这段梦幻般的复习和面试经历吧

在收到CVTE的突袭邀请后，复习了两天就开始面试了。复习的这段时间，基本天天早上6点就强忍着倦意起来了刷api手写系列和leetcode（原来都是9点起床洗刷，而后晃悠晃悠的走去公司的）。天天下班后，都是快速解决晚饭，而后就疯狂恶补梁哥的【求职系列】。在这里先感谢一下梁哥的总结，没这份总结，小羽不管再怎么抱佛脚，也是没办法将那些纵横错落的知识点拼凑成一条完整的知识链。

给你们介绍一下个人外挂，额，最强应援团！！！

CVTE 技术一面（电话面 50min）

面试官是一个小哥哥，没有自我介绍，直接开始面试了，这是想说：要不快点开始吧？我已经火烧眉毛的想吊打你了，自我介绍那种东西就不须要了。【囧】

1.var let const 区别变量提高堆内存栈内存（大概问到了这些知识点）

var 有变量提高，而let 和 const 是块级做用域

var和let均可以先声明不赋值，const必需要赋值，不然会报错

js中有基本数据类型和引用数据类型

基本数据类型存储于栈内存（存值），引用数据类型存在堆内存中（存地址）

而const定义的是一个常量，若是定义的是一个基本数据类型是不能改变的。若是定义的是一个引用数据类型，那么引用数据类型中的数据是能够改发生改变的，由于堆存的是地址，即地址没法改变。

2.cookie localStorage sessionStorage 区别以及使用场景

【相同点】

都属于本地缓存

【不一样点】

大小：cookie 4k左右，localStroage、sessionStorage通常是5M（IE是3M左右）

通讯：cookie每次都会携带在请求头中，localStroage、sessionStorage不会参与和服务器的通讯

失效时间：cookie通常是浏览器关闭就失效了（能够设置expire来改变失效时间），localStorage不删除都会有效，sessionStorage则是在tab标签关闭后就失效了

【使用场景】token，而后就引出了下面的单点登陆和token

3.单点登陆和token、系统权限

面试官：大家公司的单点登陆系统是怎么实现的，token又是什么？系统权限大家又是怎么实现的？

我：吧啦吧啦。。。

4.http 2.0、域名发散、域名收敛

使用hpack算法，进行头部压缩

支持二进制传输，http1.x是字符串传输

多路复用（中间面试官拓展的问了一下域名发散和域名收敛相关的问题）

服务器推送

5.flex布局

emmm，这个忘记问了啥，尴尬。。。

6.性能优化

面试官小哥哥：看你在项目中有作过性能优化，能分享一下吗？

我：巴拉巴拉。。。

7.虚拟列表

从性能优化中引出来的

主要就是用来优化长列表的（当没法使用分页时）

经过计算，仅渲染可视化窗口部分。

感兴趣的小伙伴能够去看下SULG UI，源码

8.nodejs

面试官小哥哥：有用过nodejs吗？作过一些什么呢？

我：我学习nodejs主要是为了可以更深的了解先后端的交互，写过一些简单的的后台和爬虫

面试官小哥哥：有写过中间件吗？

我：没有

而后就没问了

9.webpack、loader、plugin

关于webpack系列的，首推ENOW大前端团队的《当面试官问Webpack的时候他想知道什么》

10.项目问题

略

电话一面不难，大部分都是基础+项目问题。像小羽这么菜的人都过了，小伙伴们准备一下应该都问题不大，加油哟~

第一轮技术面试和第二轮技术面试间拖了一周左右的一个时间，终于可让我从头至尾把梁哥的求职系列看了一遍（除了react，还好CVTE能够接受vue转react）。其实小羽在技术二面时leetcode刷的并很少，从复习开始一天5-7道，简单题大概刷了60道左右吧，主要是科班出身，有一丢丢算法基础。这也算是尽了最大的努力了，毕竟时间实在是太紧了！！！

CVTE hr一面（视频面 40min）

但我没想到接下来的是hr面（大概两天后），我还觉得是技术面，又是一个措手不及！！！

我的的一些基本状况
跳槽缘由
薪资状况
指望薪资
我的规划
家庭状况
工做中的相关状况
技术二面的时间

CVTE 技术二面（视频面 70min）

原本是想约现场面试的，顺便和呆呆面基的，哈哈哈

可是后面由于某些状况，又改回了视频面

1.自我介绍

略

2.工做内容，怎么领导新员工

略

3.SULG UI开源组件库

怎么和朋友分工的？

怎么设计组件的？

遇到什么难点？

4.项目难点，你是怎么搭建架构的

主要有单页面应用改多页面应用和性能调优两块吧

而后，开始吧啦吧啦

5.有了解过微前端嘛，为啥单页面应用改多页面时不考虑微前端呢？

有看过阿里的qiankun（路由分发式微前端），本身也有写过相关的Demo

可是微前端对于团队的总体能力要求会比多页面应用高一点，而咱们的项目都是统一的vue，你们都会使用的，不存在vue、react、angular、jquery等多种技术栈混合在一块儿的，因此暂时没有改为微前端的必要。

6.http缓存

强缓存、协商缓存、启发式缓存

【强缓存】

强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的。强缓存中，当请求再次发出时，浏览器会根据其中的 expires 和 cache-control 判断目标资源是否“命中”强缓存，若命中则直接从缓存中获取资源，不会再与服务端发生通讯。

expires 是一个时间戳，二次请求咱们试图向服务器请求资源，浏览器就会先对比本地时间和 expires 的时间戳，若是本地时间小于 expires 设定的过时时间，那么就直接去缓存中取这个资源。

它最大的问题在于对“本地时间”有很大的依赖。若是服务端和客户端的时间设置可能不一样，或者我直接手动去把客户端的时间改掉，那么 expires 将没法达到咱们的预期。因此咱们有第二种方法Cache-Control。

Cache-Control 是一个时间长度，咱们经过 max-age 来控制资源的有效期，它意味着该资源在时间长度之内都是有效的，完美地规避了时间戳带来的潜在问题。它的优先级更高，当二者同时出现的时候咱们以Cache-Control为准。

【协商缓存】

协商缓存依赖于服务端与浏览器之间的通讯。协商缓存机制下，浏览器须要向服务器去询问缓存的相关信息，进而判断是从新发起请求、下载完整的响应，仍是从本地获取缓存的资源。若是服务端提示缓存资源未改动（Not Modified），资源会被重定向到浏览器缓存，对应状态码是304。

【启发式缓存】

若是响应中未显示Expires，Cache-Control：max-age或Cache-Control：s-maxage，而且响应中不包含其余有关缓存的限制，缓存可使用启发式方法计算新鲜度寿命。一般会根据响应头中的2个时间字段 Date 减去 Last-Modified 值的 10% 做为缓存时间。

7.http1.0/1.1/2.0/3.0

这个直接参考梁哥的【jsliang 求职系列 - 29 - HTTP/HTTPS】就能够了~

8.宏任务与微任务

给了一道题，说了一下输出的前后顺序。而后又扯了一下even loop

宏任务（macrotask）和微任务（microtask）表示异步任务的两种分类。

1.一开始整个脚本 script 做为一个宏任务执行

2.执行过程当中，同步代码 直接执行，宏任务 进入宏任务队列，微任务 进入微任务队列。

3.当前宏任务执行完出队，检查微任务列表，有则依次执行，直到所有执行完毕。

4.执行浏览器 UI 线程的渲染工做。

5.检查是否有 Web Worker 任务，有则执行。

6.执行完本轮的宏任务，回到步骤 2，依次循环，直到宏任务和微任务队列为空。

9.算法题（暴力递归）

给定一系列的任务，这些任务可能有依赖关系，有依赖关系须相继执行，没有依赖关系则能够同时执行。写一个函数，计算完成给定全部任务须要的时间。
//例以下面这些任务执行总时间为 4
   const tasks = [
       {
           "name": "task1",
           "time": 1,
           "dependency": "",
       },
       {
           "name": "task2",
           "time": 2,
           "dependency": "",
       },
       {
           "name": "task3",
           "time": 3,
           "dependency": "task1" 
       },
   ];
复制代码

function getTime(tasks){
          let taskObj = {},max = 0
          for(let item of tasks){
              taskObj[item.name] = item
          }
          for(let item of tasks){
              let currentMax = item.time
              if(item.dependency){
                  currentMax += dep(taskObj[item.dependency],taskObj)
              }
              if(currentMax > max){
                  max = currentMax
              }
          }
          return max
      }

      function dep(task,taskObj){
            if(task.dependency){
                return task.time+dep(taskObj[task.dependency],taskObj)
            }else{
                return task.time
            }
      }
复制代码

10.链式调用

还没复习到链式调用，小羽答得很是糟糕，以致于一度觉得本身挂掉了。

关于链式调用，小伙伴们能够去搜一下lazyMan那个题就行了（CVTE不是lazyMan，但思路是同样的）

CVTE hr二面（视频面 40min）

因为cvte技术二面的链式调用答得很是糟糕，快三天没收到电话，觉得本身挂在了技术二面了，没想到电话它忽然响起来了！！！

跳槽缘由
对新公司顾虑的地方
前端将来的发展趋势
目前工做的做息时间
下班后会作些什么
压力大的一段时间
公司技术部的状况
我的能力在公司的排行
大学期间的学习情况
我的将来3-5-10年的事业和生活的规划
假如说将来工做和事业没能达到你的指望，你会怎么办？
你想进大厂的缘由
若是有其余更好的公司，你会怎么抉择
我的的兴趣爱好
对你我的影响比较大的事或者人
还有什么想问吗？

emmm，面完hr二面后。大概2-3天就收到了口头offer，忽然以为挺对不起呆呆的，由于我把他的内推奖励给弄丢了。

CVTE 希沃加面（视频面 60min）

emmm，原本hr二面后已经拿到口头offer了，由于某些特殊缘由加面了希沃（偷偷甩个锅给呆呆，是他在微信视频号里面点了个赞，而后我“万恶”的好奇心，一个不当心点了进去。嗯，而后我就被希沃吸粉了）。

1.自我介绍

2.性能调优

如下全是由性能调优开始扩展开来

v-for添加key值，而后扯了下diff算法、以及如何肯定性能是否有提高

v-if和v-show的合理使用

v-once渲染只须要渲染一次的元素

合理的使用生命周期，使用场景

合理的使用computed和watch，使用场景以及两者之间的区别

过滤api接口的数据，object.freeze()（引出vue的数据劫持原理，为何要过滤掉没用的数据）

图片懒加载，路由懒加载（引出：100个http请求，http1.0/1.1/2.0须要创建多少个连接，为何？而后又问了http相关的一些问题）

cdn，什么样的文件适合放cdn（引出http缓存），若是须要更新cdn怎么办

nginx调优

还有什么想问的?

中间插入一道简单的算法题（有点紧张，一开始没注意到空格，大佬给了点提示才写出来，递归）

// 如下是单元测试

const test = () => { const listArray = [

{
     input: [1, 2, [3, 4, 5]],
     output: '[ 1 2 [ 3 4 5 ] ]',
 },
 {
     input: [79, [[88, 98], 99]],
     output: '[ 79 [ [ 88 98 ] 99 ] ]',
 },
复制代码

]

listArray.map(data => {

const result = stringify(data.input)

 console.log(result === data.output)
复制代码

}) }

test();

const stringify = (list,res="") => {
    // 这个函数用来把数组扁平化为字符串, 格式见示例
    // 输入的数组只包含数组和数字两种类型复合
    res += "[ "
    for(let item of list){
        if(Array.isArray(item)){
            res+=`${stringify(item)} `
        }else{
            res += `${item} `
        }
    }
    res += "]"
    console.log(res)
    return res
}
复制代码

希沃加面完后，和呆呆打了个视频电话，呆呆告诉我这是他老大，而后在电话中也聊了很多其余的东西。好比说我一个不当心就从呆呆的小本本上溜了出来，反正主要聊得都是我一段快能够写成小说的梦幻般经历吧，哈哈哈。

ps：小伙伴们能够猜一下呆呆会干吗，反正无论大家猜没猜中我都不会告诉大家滴~【狗头】

但愿个人CVTE突袭面经能给小伙伴们带来必定帮助和启发，嘿嘿

若是有梦想就不要轻易放弃，相信本身也是能够的，欧力给！！！

在最后，再次感谢个人应援团（外挂团）的两位大佬，呆呆和梁哥。顺便求一波关注，爱大家哟~