2020年10月web前端面试题与面试感想

忘是亡心i 2022-12-18 03:54 129阅读 0赞

## 前言 ##

2020年真是不平凡的一年，作为一名web前端，因疫情原因一直申请远程办公，但上半年感觉疫情没有尽头，就选择了辞职，最近才开始计划踏入求职之旅，期间面试了有近10家公司，不乏一些大厂，来说一说常见的面试题与感想。

## 论提前看面试题的必要性 ##

感觉面试真的就是考试，一定要提前准备，尤其是面试普通的公司，他们可能真的只是网上找一些面试题，所以如果提前多看，多记一些面试题，真的帮助很大。具体的面试题链接我就不发了，百度一搜一大把，可以看看掘金，知乎上的，下文也将针对一些频次高的面试题进行梳理。

## 要不要看算法题 ##

算法题一直都是面试的难点，而且算法题太灵活，比如一个数组排序甚至就可以多于10种，面试官可能随便让你描述一种。所以算法题应该在平时就多刷一刷力扣，如果是临时抱佛脚，仅仅是可以看看高频的，然后期待人品爆发。

## 真正的去写代码 ##

面试的几个大厂都有考察实际写代码的能力，包含算法和一些原生JS实现复杂功能的案例，比如手写一个控制并发XHR请求数的函数。所以在平常看面试题的时候也要亲自去写一写。

我举一个例子，大家都知道前端的三栏布局是一个老生常谈的问题，你可能不加思索的就想到了`双飞翼`，`圣杯`，`flex`，`table` 等等，但如果让你手写一个最简单的flex三栏布局，你能写出来么。看下面的代码

能看出上边代码存在什么样的问题么？  
![在这里插入图片描述][20201025114136178.gif_pic_left]  
如上，可以看出当中间被压缩到极限的时候，两侧不能再保持固定宽度了。这时候你就要充分理解`flex:1`这个属性到底意味着什么，他是三个CSS属性的组合

*  flex-grow 默认为0，即当父级容器有剩余空间时，子元素的分配比例。所以一定设置为1保证中间可以自适应，即剩余的空间全部分配给center。
 *  flex-shrink 默认为1，即当父级容器空间不足组，各个子元素被压缩的比例。所以left 和 right 必须分配为0，来保证不被压缩。
 *  flex-basis 基础宽度，你可以理解为flex布局下元素的默认width。

你看，实际面试过程中真的可能让你去手写，或出这种类似的分析flex属性的题目。甚至可以更复杂的让你去计算平分的宽度，如果没有深入的理解，很难搞定这样的题目。

## 一些必考题（重点） ##

不得不说，有些题目实在太重要，以至于我面试的公司几乎都有问到。

### CSS ###

1.  浏览器重排与重绘
2.  CSS动画
3.  flex布局

### JS ###

1.  vue双向数据绑定
2.  ES5中继承与ES6原生的继承的区别
3.  promise
4.  微任务队列与宏任务队列

### 其他 ###

1.  对http的理解，比如客户端请求到服务端响应的过程，http2的优势，https的理解。
2.  typescript

以上，写的不多，因为上边的问题几乎必问。其他的很多问题达不到这种重要性所以就不放在一起了。

## 加分项 ##

如果你有typescript的开发经验，简历中一定要写明，可以大大提升你的获得面试邀请的几率。根据我的面试经验，目前很多公司都在推广typescript。