2020年10月web前端面試題與面試感想

臉都不要了發表於2020-10-25
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。

看面試題並非僅僅應付面試

最後我想說通過面試題去學習前端知識也是能力的一種提升。尤其是這個過程中能讓你發現自己的短板，需要補強哪些方面的知識。

結束語：希望以上的心得能夠對大家有所幫助。如果你覺得不錯，厚臉皮請幫忙點個贊或關注我，如果我看大家真的比較關注這些問題，我會進一步展開來說說。

相關文章