前言
2020年真是不平凡的一年,作为一名web前端,因疫情原因一直申请远程办公,但上半年感觉疫情没有尽头,就选择了辞职,最近才开始计划踏入求职之旅,期间面试了有近10家公司,不乏一些大厂,来说一说常见的面试题与感想。
论提前看面试题的必要性
感觉面试真的就是考试,一定要提前准备,尤其是面试普通的公司,他们可能真的只是网上找一些面试题,所以如果提前多看,多记一些面试题,真的帮助很大。具体的面试题链接我就不发了,百度一搜一大把,可以看看掘金,知乎上的,下文也将针对一些频次高的面试题进行梳理。
要不要看算法题
算法题一直都是面试的难点,而且算法题太灵活,比如一个数组排序甚至就可以多于10种,面试官可能随便让你描述一种。所以算法题应该在平时就多刷一刷力扣,如果是临时抱佛脚,仅仅是可以看看高频的,然后期待人品爆发。
真正的去写代码
面试的几个大厂都有考察实际写代码的能力,包含算法和一些原生JS实现复杂功能的案例,比如手写一个控制并发XHR请求数的函数。所以在平常看面试题的时候也要亲自去写一写。
我举一个例子,大家都知道前端的三栏布局是一个老生常谈的问题,你可能不加思索的就想到了双飞翼
,圣杯
,flex
,table
等等,但如果让你手写一个最简单的flex三栏布局,你能写出来么。看下面的代码
<style>
.flex-box {
display: flex;
}
.left {
width: 200px;
background: yellow;
}
.center {
background: red;
flex: 1;
}
.right {
width: 150px;
background: yellow;
}
</style>
<div class="flex-box">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
能看出上边代码存在什么样的问题么?
如上,可以看出当中间被压缩到极限的时候,两侧不能再保持固定宽度了。这时候你就要充分理解flex:1
这个属性到底意味着什么,他是三个CSS属性的组合
- flex-grow 默认为0,即当父级容器有剩余空间时,子元素的分配比例。所以一定设置为1保证中间可以自适应,即剩余的空间全部分配给center。
- flex-shrink 默认为1,即当父级容器空间不足组,各个子元素被压缩的比例。所以left 和 right 必须分配为0,来保证不被压缩。
- flex-basis 基础宽度,你可以理解为flex布局下元素的默认width。
你看,实际面试过程中真的可能让你去手写,或出这种类似的分析flex属性的题目。甚至可以更复杂的让你去计算平分的宽度,如果没有深入的理解,很难搞定这样的题目。
一些必考题(重点)
不得不说,有些题目实在太重要,以至于我面试的公司几乎都有问到。
CSS
- 浏览器重排与重绘
- CSS动画
- flex布局
JS
- vue双向数据绑定
- ES5中继承与ES6原生的继承的区别
- promise
- 微任务队列与宏任务队列
其他
- 对http的理解,比如客户端请求到服务端响应的过程,http2的优势,https的理解。
- typescript
以上,写的不多,因为上边的问题几乎必问。其他的很多问题达不到这种重要性所以就不放在一起了。
加分项
如果你有typescript的开发经验,简历中一定要写明,可以大大提升你的获得面试邀请的几率。根据我的面试经验,目前很多公司都在推广typescript。
看面试题并非仅仅应付面试
最后我想说通过面试题去学习前端知识也是能力的一种提升。尤其是这个过程中能让你发现自己的短板,需要补强哪些方面的知识。
结束语:希望以上的心得能够对大家有所帮助。如果你觉得不错,厚脸皮请帮忙点个赞或关注我,如果我看大家真的比较关注这些问题,我会进一步展开来说说。