2020年CVTE前端实习生面试

CVTE面经

前言

12.6号笔试，到12.16号面试，拿offer，再到1.6号最终确认实习时间，差不多刚好一个月的时间。总体来说，整个过程难度是比较简单的，面试官和HR对实习生的态度也是让人比较舒服的。

笔试偏基础，有些知识点很冷门，出题形式有点像牛客上面的题库，有两道代码大题，选择题只有一次回答机会（不能回去修改）。面试比较简单，可能因为招的是实习生，很多原理性的东西都不会问。当然啦，可能去腾讯头条这些大厂面试就不是这种情况了。

三轮面试都在同一个下午进行（某一轮面试不过就直接被请回家了），第一轮看起来像是个资深技术（比较秃），全程冷漠脸，整个面试过程是我在主导，讲项目讲了很久。最后考算法是用他电脑写的，被自己的神逻辑递归卡住了，他会耐心帮我调试和指出问题。第一二轮之间只休息了三分钟，马上开始第二轮，看起来是个比较年轻的哥哥，全程谈话气氛比较轻松。最后他给我介绍了公司部门的业务，就把我安排到HR面试了。HR面是群面，五六个面试官VS一堆应聘者，但主要还是那个男面试官在问题，咄咄逼人（听说他是创始人之一？）。对于我们技术岗的人，他问的问题会比较少，我大概自我介绍了一下，态度表现的好点就走了。随后被带去参观了一圈公司的医疗中心，然后吃了个晚饭就回学校。

笔试

笔试的题目我已经忘得差不多了。。大部分是考JavaScript的基础问题，但是有一些知识点会很偏，也有一些是必攻克的难点：比如求运行结果（作用域、异步机制）。代码题两道，都是操作字符串，难度在leetcode Easy阶段，由于考前还刷不够题，不知道如何用JS去解答，所以都尝试用C去写了。

这部分的知识点就不写了，一方面是比较零散，另一方面也是记不起多少东西了。

面试问题

一面

自我介绍

你所在学校技术团队的规模如何，负责什么职务，项目规模？

主要是想问简历上的项目多少人参与，了解一下这个项目的复杂度。

介绍项目吹了很久：项目背景、项目亮点（我讲的很仔细，深入到某一行关键代码，这是因为面试当天早上我专门又看了一遍项目，所以记得很清楚），由于介绍的时间比较长和具体，面试官认可我在这些项目中做了很多工作。

TCP和HTTP的关系

这个问题感觉自己答的不好，前一天晚上有复习计网，大概说了一下传送的数据格式、分别属于哪一层，面试官没有深挖

TCP是传输层协议，定义数据传输和连接方式的规范。握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。
HTTP 超文本传送协议(Hypertext Transfer Protocol )是应用层协议，定义的是传输数据的内容的规范。
HTTP协议中的数据是利用TCP协议传输的(基于TCP的)，特点是客户端发送的每次请求都需要服务器回送响应，它是TCP协议族中的一种

HTTP状态码？知道304吗？

大概说了一下出现304的场景，但未能说出背后的原理。然后我说了遇到过一个后台资源更新后浏览器未能更新，需要强制刷新（同名文件）的bug，扯了一波强缓存，但是我自己对强缓存也不太了解。面试官解释说304和强缓存不是同一个东西。这个知识点我确实不太熟悉。

• 缓存对于前端性能优化来说是个很重要的点，良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度
• 浏览器第一次打开一个网页获取资源后，根据返回的header信息来告诉如何缓存资源
• 通常浏览器缓存策略分为两种：强缓存和协商缓存
  强缓存（本地缓存）
  缓存表示在缓存期间不需要请求，HTTP state code为200，实现强缓存可以通过两种响应头实现：Expires和 Cache-Control （都用于设置资源过期时间）
  协商缓存
  如果本地缓存过期了，我们就可以使用协商缓存来解决问题。协商缓存需要向服务器发送请求，如果缓存有效会返回304

博文：https://blog.csdn.net/zl399615007/article/details/84534884

项目一般用什么图片格式，有没有考虑过webP？

这个问题之前，我是具体讲了一下图片压缩的性能优化工作。webP确实在面试前有看到过，但是没有深入去了解，所以答不上来。

WebP格式，谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。

webp在项目中的实践： https://www.jianshu.com/p/73ca9e8b986a

遇到过跨域吗？怎么解决？

一般用cors解决，后端设定，node、前端也可以设置代理（没有说的很详细，但面试官勉强能认可）

ES6有哪些特性？箭头函数和普通函数的区别？

老生常谈了

算法题：类似实现数组扁平化，输出字符串

eg.给定数组[1,[2,3]]，输出字符串"[1,[2,3]]"

虽然不算是数组扁平化，但是与扁平化的思路是一致的

面试前刚好有对手写JavaScript的常考面试题进行复习，就是用递归，简单类型就直接拼接，复杂类型就递归操作。八分钟时间，虽然出了bug没调试出来，面试官还帮我调试了一下，但是他说思路正确，勉强过关，然后就安排我去下一轮面试了。

---

二面

自我介绍

给你这一年多的学的前端知识分一下类？（知识体系树）

这个问题出来的时候我懵了一会，因为东西太多了，不过我没怎么思考就开始回答，答的不是很完整。面试官问我为啥没提到浏览器。

介绍项目

和一面差不多了

讲一下关于自适应rem单位的原理？如何确定大小比例关系？

这个还是很简单的，就是根据document的根fontsize大小来进行自适应，根据设计稿计算比例。我顺便说了一下实现原理（window.onresize)。

项目中为啥用vuex？什么场景下才用得到？有没有提前规划好哪些模块使用vuex？

回答的很差劲，主要是没有get到面试官想问的点，他想问的东西其实很简单，就是哪些关系的组件需要用到vuex传值。父子组件一般就不需要，某些数据集如果多个组件都要用到，而且组件关系复杂，就肯定要vuex，做项目前可以提前规划好。

由于传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。这样通常会导致代码无法维护。所以我们需要把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

贴个官网，弄清楚什么是单向数据流以及vuex各个模块的关系和作用（vuex的数据管理模式）

https://vuex.vuejs.org/zh/

vuex原理，状态树？

面试官没有直接问我这个，但是有提到。

state树，是一个单例，作为一个“唯一数据源”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。

我的github：https://github.com/zhenghanhao1999/Little-Vuex

用router做的异步组件加载优化后如果出现白屏？

这是面试官对我的组件加载优化提出可能出现的情况，至今也没有get到面试官想问什么。。。

前后端压缩图片有什么区别？

因为我介绍项目图片优化方案的时候提到，前端后端都可以压缩图片，最终我们选择后端压缩。我的回答是，后端压缩算法可能优于前端，多数团队的解决方案是如此的，所以我们也这么做（尬笑）。

canvas有一个toDataURL方法，可以把当前的canvas绘制的图片内容进行图片压缩并转换为base64编码

大图片可以用canvas压缩， canvas只适合压缩大的图片 。小图片经过canvas处理反而变大。 这个区间大概是1.5M以内，所以超过1.5M才进行此canvas压缩。

为什么要在项目里面使用TS？

主要说了一下TS的优点：强类型，利于团队协作。举了个例子，编写工具类的时候，在有TS之前都要手动判空处理，但是有了TS，就可以在开发中自动检查代码。但没有提到TS是未来主流框架的主要开发语言。说了TS的缺点：不算是缺点，个人直观感受而已，就是TS写项目会导致打包速度很慢（具体是为什么我还没弄清楚）

1. TypeScript能从可维护性、健壮性等方面提高代码质量。一些参数类型，参数个数的错误检测，判空处理等。如果未处理，在复杂的线上环境中，程序就有可能会崩溃。而TS可以帮助我们避免这些问题，从而提高代码健壮性, 因为TS是强类型的语言。
2. 对面向对象思想进行了增强，接口、泛型等。
3. TS是未来主流框架的开发语言，如果要学习框架，就要能看得懂源码
4. 网上看到说ts在vue、react里面打包慢的问题，是因为目前wepack的ts-loader还不完善，速度太慢，可以换成用babel的ts插件就可以了

每个api接口都有用ts的interface去定义吗？

yes，而且我们有非常规范的API文档

还有遇到过什么难题？

说了一下滚动功能工具的编写：单例、主流框架源码架构、无new化工厂、传参window等

实际上就是全部从JQ源码学过来的

算法题：四则运算

给定一个字符串运算式子，输出结果

eg. 输入字符串“100+200=” 输出：300

eg.输入字符串"100+200*2=" 输出: 500

两种解法：

1. 直接遍历，用两数运算结果替换掉两数及其之间的符号，但也要注意运算优先级

2. 用栈实现：

   简单情况下，不考虑括号，用两个栈实现。 一个操作数栈 一个运算符栈 遍历入栈，若是数字，则直接入栈，若是运算符，先对比，优先级高于栈顶运算符，入运算符栈，如果优先级小于栈顶运算符，则先拿从操作数栈里拿出两个数，用栈顶运算符技术，然后再对比和栈顶运算符

   复杂情况的，有括号，分两步，先把中缀表达式转换成后缀表达式，再用一个栈来计算结果。

面试过程中两种解法我都提到了，简单情况的解法我写了一半就不写了，我说我想到一种用栈实现的，但是又记不太清具体算法的过程。面试官说如果是在工作过程中，要优先把功能实现，然后再做优化工作。像这种算法题，简单的解法能写就先写，因为也没有限制什么时间复杂度，复杂的等之后再修改优化。

有什么问题想问我的？
介绍一下公司的业务？什么时候出面试结果？（直接让我去见HR了）

总结

感觉面试能通过，优势在于项目经验比较丰富、态度比较积极。因为面试前，只有两天的时间复习，看了一下之前做过的博客，看了一些比较简单、经典的面试题，刷了几道leetcode（用来安慰自己算法不行），其实这样的准备是不够的，很多基础问题不是不会，就是没有回答好。所以我给自己这次面试的评分，70分吧。

欢迎关注个人公众号：前端Weekly