马上就要迎来面试的黄金期,金三银四,我很有幸能够在年前得到滴滴的一场面试,这是我的第一次面试,年前对总结没有什么感觉,通过别人的传送发现面试总结很是很关键的,所以推荐大家要在每一次面试后都要做总结。废话就不多说了,下面就介绍一下一个大三前端的面试流程以及自我总结
面试准备
-
找一个相对安静的环境
-
准备好面试所需要的设备,手机、电脑以及所需要的软件(用的比较多的是腾讯会议)
-
准备一杯水在面试开始前先喝一口,因为你要在下面展示你自己知识的时候会说很多的话,不提前喝一口水会口干哦
-
面试前要平复好自己心情,不用太紧张,相信自己,你是最棒的
面试经历
简单的介绍一下面试的基本流程
-
首先就是面试官要不就是HR小姐姐会和你确认面试的方式:视频面还是电话面
视频面:会提前给你发视频会议的进入方式 电话面:到时间的时候会给你打电话,微信电话或者是手机电话 -
接通电话开始面试过程
自我介绍
首先面试官会让你进行相关的自我介绍(记得要提前准备好你的自我介绍,临时表述的话可能会表述的不是很流畅哦)下面提供一个简单的自我介绍的模板(仅供参考)
自我介绍很关键,决定了面试官对你的第一映像,以及会根据你自我介绍当中对你进行相关经历的询问
-
面试官你好,很荣幸参加这场面试,希望下面会有好的表现,下面是我的自我介绍,我叫xxx,来自于xxx学校的xxx专业的一个大三学生,我平常是怎么学习前端的,简单的校园经历,项目经历,还有未来规划
-
大致两分钟左右吧
开始问问题
这里就是面试官开始按照你的简历或者是你自我介绍当中他感兴趣的东西进行询问,然后你进行相应的回答,然后相信大家都能想象到吧,下面我就介绍一下我的面试题目吧,我就简单的介绍一下,并会提供一篇很优秀博主的文章供大家参考
简单介绍一下 event loop(事件循环)
这里一般指的是浏览器的 event loop,要是面试官想了解node的话会指明的,这里面关键的就是对于eventloop 的理解以及相关js线程和事件触发线程之前的通信,以及执行栈和任务队列,还有就是宏任务和微任务
- JavaScript 单线程的任务被分为 同步任务和异步任务,同步任务会在JS 引擎线程上执行执行栈中按照顺序等待主线程依次执行,异步任务会在异步任务有了结果后,将注册的回调函数放入事件触发线程管理任务队列中等待主线程空闲的时候,调用栈被清空,被读取到栈内等待主线程的执行
- 执行一个 宏任务(栈中没有就从事件队列中获取),执行过程中如果遇到微任务,就将它添加到任务队列中,宏任务执行完毕后,立即执行当前的 微任务队列里面所有的 微任务(依次执行),当前的宏任务执行完毕后,开始检查渲染,然后GUI线程接管渲染,渲染完毕后,JS线程继续接管,开始下一个宏任务
- 在 JavaScript 中,任务被分为两种,一种 宏任务,一种叫微任务。
- 常见的宏任务:script全部代码,setTimeout,setInterval,setImmediate 但是这个兼容性不是很好,I/O,UI Rendering
- 常见的微任务:Process.nextTick(node独有),Promise,Object.observe(废弃),MutationObserver 彻底搞懂JavaScript事件循环
一道原型链相关的题目
Object.prototype.a = "a";
Function.prototype.a = "a1";
function Person() {}
const yideng = new Person();
console.log(Person.a); // a1
console.log(yideng.a); // a
console.log(yideng.__proto__.__proto__.constructor.constructor.constructor); // Function
上面的代码的输出结果是什么呢?我就不加以解释了,答案就在上面,要是不知道的同学就得好好学习一下原型以及原型链的知识点了
一道 Promise 代码的执行顺序
const p = new Promise((resovle,reject) => {
console.log(1);
Promise.resolve().then((res) => {
console.log(3);
})
})
const p1 = new Promise((resovle,reject) => {
console.log(2);
Promise.resolve().then((res) => {
console.log(4);
})
})
// 1 2 3 4
上面的代码的输出结果是什么呢?我就不加以解释了,答案就在上面,这里面涉及的就是JavaScript代码的执行顺序,只要了解 eventloop 就可以理解了
for in 和 for of 的区别
这里就直接推荐大佬的文章了,我感觉我讲的可能会误导大家
position 的属性
-
static该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时
top,right,bottom,left和z-index属性无效。 -
relative该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
-
absolute元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
-
fixed元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。
fixed属性会创建新的层叠上下文。当元素祖先的transform,perspective或filter属性非none时,容器由视口改为该祖先。
-
sticky元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor) 和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于
top,right,bottom, 和left的值进行偏移。偏移值不会影响任何其他元素的位置。
记不太清的问题
有关 JavaScript 预编译
你有什么问题要提问面试官
这个过程就是你和面试官之间的交流了,也是非常的重要的,能让面试官知道你的沟通能力,以及你想对他们公司的意向,以及了解,反正很重要,我也不知道怎么讲,下面提供了一份 github 上的资料
总结
这是我的第一次面试,当中和大部分人都一样,一开始都非常的紧张,(轻轻的说:还是对自己的实力不够自信),然后面试过程中对于知识点的表达能力不够好,然后有点结巴,最后的提问环节也没什么自己的思考
收获
- 对一些自己知识盲区的了解
- 锻炼了自己的表达能力
- 了解了公司大致需要一个前端面试者应该具备的素质,个人素质,编程素养
- 还有蛮多的一下不知道怎么表述
建议
- 提前平复自己紧张或激动的心情
- 准备好自我介绍
- 对于自己掌握的知识点要有条理的讲述,要讲述知识点的前因后果
- 扩充知识的广度以及深度,这将会是你的亮点
- 在和面试官交流要保持一定的尊重
- 要记得面试是自我展示,而不是考试
- 面试是一个双向选择的过程
- 每一个面试官对实习生的要求都不一样,所以考察的范围点也不一样,所以要一直问你不是很熟悉的东西的时候,然后你回答的不是很好,不要过度难过,应该他给你指出了你不会的地方,所以你需要去加强这一部分,要是你对自己要求很高的话
最后希望大家在今后的面试中都能一帆风顺,充分展示出自己的知识以及素养,拿到心仪的 offer,加油 fighting