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

前言

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

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

JS

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

其他

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

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

加分项

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

看面试题并非仅仅应付面试

最后我想说通过面试题去学习前端知识也是能力的一种提升。尤其是这个过程中能让你发现自己的短板，需要补强哪些方面的知识。

结束语：希望以上的心得能够对大家有所帮助。如果你觉得不错，厚脸皮请帮忙点个赞或关注我，如果我看大家真的比较关注这些问题，我会进一步展开来说说。