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

臉都不要了發表於2020-10-25

前言

2020年真是不平凡的一年,作為一名web前端,因疫情原因一直申請遠端辦公,但上半年感覺疫情沒有盡頭,就選擇了辭職,最近才開始計劃踏入求職之旅,期間面試了有近10家公司,不乏一些大廠,來說一說常見的面試題與感想。

論提前看面試題的必要性

感覺面試真的就是考試,一定要提前準備,尤其是面試普通的公司,他們可能真的只是網上找一些面試題,所以如果提前多看,多記一些面試題,真的幫助很大。具體的面試題連結我就不發了,百度一搜一大把,可以看看掘金,知乎上的,下文也將針對一些頻次搞的面試題進行梳理。

要不要看演算法題

演算法題一直都是面試的難點,而且演算法題太靈活,比如一個陣列排序甚至就可以多於10種,面試官可能隨便讓你描述一種。所以演算法題應該在平時就多刷一刷力扣,如果是臨時抱佛腳,僅僅是可以看看高頻的,然後期待人品爆發。

真正的去寫程式碼

面試的幾個大廠都有考察實際寫程式碼的能力,包含演算法和一些原生JS實現複雜功能的案例,比如手寫一個控制併發XHR請求數的函式。所以在平常看面試題的時候也要親自去寫一寫。

我舉一個例子,大家都知道前端的三欄佈局是一個老生常談的問題,你可能不加思索的就想到了雙飛翼聖盃flextable 等等,但如果讓你手寫一個最簡單的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。

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

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

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

相關文章