五月中级前端面试报告

前端，面试时间 5.7-5.19，共计两周。西安，薪资区间 10-15css

因为考虑到我的发展缘由，从杭州回到了老家陕西，面试了七、8家，2个offer收场。记录一下面试状况。（题目不重要，重点在于如何将眼花缭乱的题目分类到你的知识体系中。
html

公司A

公司状况：初创公司，银行项目，人数20+，需出差。
技术栈：前端vue+后端spring
问题：前端

url输入到页面显示全过程
vuex包括哪些内容
vue项目优化
computed和watch区别
vue-router钩子介绍
vue-router懒加载实现

思考：问题很少，浏览器原理+vue全家桶，紧张缘由computed、watch区别没答上来
vue

公司B

主要问项目，我简历项目是ERP+公众号+数据大屏
问题：node

项目难点
权限模块粒度怎样设计的，具体到代码如何控制？所有都用if-else？不是的话怎么抽离
你刚才说的是总体架构和实现，能够看出你对业务掌握的比较好，那具体到前端，你作了什么？
公众号开发项目具体说说
如何部署？Nginx如何配置
为何用node来作
你以为整个项目核心在哪？
微信公众号事件用过哪些？
数据可视化项目介绍下

思考：负责人注重项目，基础知识没问，问题就集中在「项目难点、亮点、解决方法、我的思考」。总体下来感受本身的项目几乎无亮点可言，实际上也是没有对本身的项目核心深挖，项目不在多，找一个你以为最复杂的项目中最难的点往深层扩展，剖析项目背景，你负责的模块，模块所用技术，亮点
python

公司C(offer)

问题：react

es6语法用过哪些
基本数据类型
let var区别
什么是闭包
闭包的同级变量和子级变量可否获取到
this是什么
做用域有哪些
什么是块级做用域
如何在当前js中使用其余js变量
如何给数组添加新的方法？（考察原型、继承）
双等三等区别
如何判断两个数组是否相等，是用双等仍是三等？（是个坑，双等三等都不行）
undefined和null区别
0.1+0.2在三等状况下是否等于0.3
staic和assets有什么区别
jQuery属性选择器如何拿到第三个input节点

Vuewebpack

用过的组件库有哪些
MVVM如何实现
diff算法理解
v-if v-show区别
单页面多页面区别
computed、watch区别
location.href和vue-router跳转有什么区别
生命周期
mount阶段作来什么
项目中有多个环境怎么处理
v-once是作什么的
路由懒加载如何实现
图片懒加载原理是什么

其余：nginx

你简历上写的python和node，熟悉到什么程度？
公众号项目介绍下，能看看吗
看下你的小程序项目
还有其余能够展现的项目吗？
前端如何解决跨域

思考：主要集中在js基础和vue，问题不难，能够说是中级前端问题。
git

公司D

看了你github最近在刷leetcode，你为何要学算法？
拿你刷过的算法第一题举例，移动0问题。解决思路是什么？
在你的博客里有看到我的规划，你对你本身是怎样的评价呢
Js 位运算有了解过吗
Css问题 p标签文本无法设置它的高度，怎么去让它前n个字符变高
看了你的博客最近也参加过活动，有什么收获吗？
Vue 项目比起传统项目有什么优点
vue如何实现自定义指令呢
Vue项目中状态判断如何处理，好比在某个页面我须要判断用户是不是登陆状态？
解释下什么是动态规划？它的应用场景，项目中有没有用到
咱们假如要作抽奖活动，保证绝对的公平，把人名放在数组中，怎么去作
你简历上有写大型文件上传 oss 有没有什么难点？

思考：主管提早经过简历提早看了个人博客文章，github。因此一些问题也是针对性的。

公司E

MVC与MVVM分别介绍下
MVC的数据流向是怎样的「双向流动」怎么解释双向流动？
解释下数据双向绑定
三个框架中有哪些是双向绑定的「vue angular」
Angular是如何实现双向绑定的？「脏值检查」
你以为react和vue有什么区别？「vue有不少内置指令，模板语法，react是一切皆组件」
若是我一直写vue，如今上手react，难点在哪？「es6语法，jsx模板语法」
Url输入到页面显示经历了什么？「导航阶段 dns解析 tcp链接 TLS验证发起请求接收响应链接中断。解析阶段 html js css分开解析，html解析为dom对象，拆分标签 text，js由v8引擎处理，css被解析为cssom 层树，光栅化」
DNS是如何解析的？怎么拿到地址的
DNS解析耗时吗？「耗时的，由于要查看是否有缓存」如何优化？（没答出来，被告知能够看看dns预解析）
你说到v8引擎，说下v8引擎如何解析一段js代码？「先转成AST树，再转成机器码，最后转为字节码，执行字节码。浏览器对重复的js代码有优化即时编译技术，若是发现一段代码常用，则不用转字节码直接执行机器码」
Tcp链接过程解释下「就是常说的三次握手第一次是客户端发起请求第二次服务端做出应答第三次客户端收到应答知道服务器是通的告诉服务端要请求数据了」
了解事件循环吗
提供事件的队列是哪来的？
继续事件循环。你说的宏任务微任务解释下
哪些被定义为宏任务，哪些被定义为微任务
Promise是属于微任务吗？「不 promise.then属于微任务」
说下http请求方式「get post option还有restful中的put delete」
Get post区别
说下restful规范
跨域如何解决？「jsonp iframe proxy nginx反向代理 websocket，后端配置响应头」还有吗？「在本地开发时，有用chorme插件来关闭csrf检测解决跨域」说下iframe怎么跨域的？（网上看到的说不清楚）proxy跨域的原理是什么？（这个确实不知道，被告知是webpack中的devsever配置后，node至关于启动了服务器，浏览器请求服务器至关于请求本地服务。）
小程序有作过吗？你见太小程序跨域吗？「没有」那意思就是跨域只在浏览器出现，那么 proxy解决跨域的原理就是启动了node服务器，转发其余端口的服务到本地，这样就不会跨域了。
Webpack有用过吗？作过哪些配置？「不一样环境的配置，devserver」有哪些优化措施？「tree shaking，路由懒加载，代码分割」
有作过哪些性能优化措施？「资源文件加载，代码压缩雪碧图，cdn资源服务器」
既然webpack用过，那图片文件打包时转为base64，你以为打包之后体积大了仍是小了？「小了」其实打包之后图片体积大了30% 「那为何还要打包？」由于当你图片特别多的时候 svg 等等图标特别多，每次请求src是否是都要请求网络，那请求网络是否是占用资源。因此加载base64能减小请求次数
Nodejs有没有接触过？「简历里那个公众号项目就是node作的」原生node吗？「koa作的」你介绍下koa「基于express的一个node框架，本质很是简单，把其余应用都做为中间件外包出去，核心是洋葱圈模型」 koa是基于express的？「嗯是的」
说说洋葱圈模型「相似于柯里化，内层中间件返回的值做为外层中间件的参数」
说说柯里化「参数分开与放在一个括号里的结果相同」怎么实现呢？「能够拦截它的get方法和apply方法来实现」
有本身写过中间件吗？「没有，都用的别人的」node服务在线上跑的时候，报错了怎么查看控制台结果「错误统一捕获，在全局处理，放到日志中，查看日志」日志用的是什么库？「koa-logger」
node服务怎么让它后台启动的？「supervisor配置，而后开启进程」
Webpack打包时间太久？打包文件过大怎么解决「第二个问题代码拆分，把相似于vue这种几乎不变的框架放到cdn缓存，其余的文件模块化拆分，组件库按需加载，第一个问题打包时间太久虽然常常有遇到过，但也没办法解决。不过我了解到最近vue3有新动做，弃用webpack，改用新框架，主要解决开发环境打包太久的问题」
在网络请求中如何把大文件资源压缩传输？（没答上来）你知道GZip格式吗？「嗯知道，在nginx配置时有设置过gzip压缩」
你简历写的oss大文件上传能具体说下吗
你在团队中是什么角色？
你提到的规范是指？或者你从哪看到的相关规范？「vue官方文档写的已经很清楚了，推荐优化策略和规范」

思考：这个主管问的内容涉及到

JS基础
浏览器原理
网络协议
框架原理
webpack性能优化

并且本身在回答问题1时，容易用术语B来佐证/描述，继而引起问题2，好比koa->洋葱圈模型->柯里化，在你对相关术语能熟练掌握时，看起来挖的坑反而成为你引导面试官发问的方向。

公司F

问题：
Vue生命周期
说下具体每一个阶段作了什么事
Vuex单向数据流解释下
app有作过吗？
Pc是如何适配移动端的
混合开发有作过吗
思考：
问的问题很是少。显然在我答到移动端问题时，由于没作过，不符合公司技术栈需求，没有复用价值而提早终止。但有趣的是，我知道这几个问题面试确定过不了，因此告知面试官这样会不会不太合理，由于没有发掘出来求职者的潜力，不可能每一个人作的业务都面面俱到的涉及全部技术点。面试官笑着问我有什么亮点是他没有发掘的。
这个问题其实我也没有想过，本身说本身的亮点。最终仍是没过，不过我确实能够考虑下本身有什么亮点待发掘。

公司G

问题：
React生命周期，每一个阶段作了什么
docker用了哪些容器
docker除容器外哪部分是抽离出来的
ES6 继承方式有哪些
类有哪些东西能够被继承？
一个类中，static 普通方法箭头函数重名时，会调用哪一个？
箭头函数有哪些特性
Scss如何复用变量
scss中的@和％有什么区别
上传文件断点续传怎么作
思考：
问题一样少，可是有公司须要的框架、css、js、docker、项目，可谓是面面俱到，在箭头函数特性和scss、类的继承那块，发现本身对ES6了解的仍是太少，在react项目中，ES6随处可见。因此为了以后发展，这部分不能仅停留在会用，须要继续深刻。

公司H(最终入职)

问题：

看了简历，非计算机专业，培训了？「是的」那你须要补课的有不少呀。
html和css了解吗？那么多标签，属性你是怎么学习的？

有记笔记吗？「有的，日常有记笔记的习惯」
能够看看吗？「用手机打开了本身的语雀递给面试官」
嗯，这些都是你收藏的文章吗？「呃，都是本身写的，看的书或者参加活动整理的」

JavaScript如何呢？这样。你手写个杨辉三角吧？（面试官把纸笔递给我，而后在翻个人博客。我写了伪代码，停下了笔）「这部分没办法运行，我给你说下个人思路」

嗯，你这个方法也能够，可是打印一行就建个数组，若是有n行，就是n个数组，时间和空间复杂度都很高呀。「...颇有道理」杨辉三角的每一个元素实际上是排列组合，你只要用排列组合打印每一个值就行。

深拷贝知道吗？「嗯，知道」写一下，要求有这么几点，对对象的不一样类型（正则、时间等）作处理，同时对循环引用深度作处理，好比它循环调用，让它的递归深度为10层，而后跳出。

听到要手写的时候真的欲哭无泪，由于刷题的时候看到过这个题，当时想的是谁会让手写这个呀。最终写出来一部分交上去了，处理循环调用那写不出来

最后一个题，遍历嵌套对象，每一个对象有 key、value、children（数组），把每层的key、value打印出来。（这个题就不描述了，我以为挺简单的，或者是我觉得挺简单，其实也没有理解题意。）
React组件传值有哪些方法
React的Provide和consume是由于什么产生的？
React版本升级时，会有一些组件无法用，页面显示白屏，如何定位是哪些组件出的问题

思考：在介绍了公司状况以后，面试就结束了，面试官几乎全程在看个人博客，这也是最终我选这家公司的缘由之一。

思惟导图

从上面这几家公司面试状况，能够看出10-15这个薪资区间面试问的深度仍是有的，对算法的要求也不是很高。浏览器原理和JS、ES占的比例较大，框架其次，这样来画个面试该有的知识体系，而后不断调整，补充。

总结

万丈高楼平地起，扎实每一步走的路，并产出一些可复用的经验
在面试的过程当中不断调整，和面试官切磋，了解目前的就业形势。
了解并正视本身的不足，当这个面试有些问题你答不上来时，必定要记住它，别在一个坑掉进去两次
平时的积累很重要，看书、视频、培训、专栏
回来以后发现走的路也不止互联网这一条，举个例子，并非每一个人都有那么强的学习动力，那么他们怎么养活本身呢？投资/创业/兼职接活，那么我能作的就是搞好人脉，同时扩散影响力，要学习的地方还有不少。
目前西安（互联网二线）公司中有激情，愿意学习、进步的技术仍是挺多的，因此无论你现在在北上广深仍是二线城市，必定要端正心态，努力学习，别让后浪拍死。