適合實習生的一個面試準備指南

摘要： 從前端學習到找到一份合適的工作，大大小小的面試必不可少，春招的實習面試，以及秋招的校招面試，從面試內容到技術的深度，要求都是不一樣的。 先說春招的實習面試，面試內容主要還是考察前端的基本功，如果是科班出身，對於計算機基礎學科要求還是比較多的，比如會考察作業系統，編譯原理，計算機網路相...

從前端學習到找到一份合適的工作，大大小小的面試必不可少，春招的實習面試，以及秋招的校招面試，從面試內容到技術的深度，要求都是不一樣的。

先說春招的實習面試，面試內容主要還是考察前端的基本功，如果是科班出身，對於計算機基礎學科要求還是比較多的，比如會考察作業系統，編譯原理，計算機網路相關基本知識。

總體來說，考察的方向大致有一下幾種：

1. HTML/HTML5

2. CSS/CSS3

   1. 佈局相關，如雙飛翼/聖盃
   2. 定位
   3. 清除浮動
   4. BFC
   5. css3動畫，過渡，形變
   6. 各種花式垂直水平居中
   7. flex彈性佈局=
   8. 如何理解css中的流
   9. 等等太多了

3. JavaScript

   1. ecmascript 語法基本功，如字串拼接，資料型別，物件等
   2. js的作用域，作用域鏈，執行上下文
   3. 閉包
   4. DOM操作，什麼是DOM，什麼是BOM
   5. 事件模型
   6. this
   7. ES6常用的新增特性

   8. JS網路相關（都是重點）

      1. 什麼是跨域，常見的跨域方式有哪些，是否知道nginx配置代理進行跨域
      2. CORS是什麼
      3. 什麼是同源策略
      4. 什麼是Ajax（xhr）（比較重點）
   9. 常見的儲存方式有哪些，即localstorage sessionstorage的場景以及區別
   10. Promise是什麼，和setTimeout/setInterval的區別，再深一點，巨集任務和微任務的區別 。
   11. 什麼是模組化，是否瞭解CMD，以及ES6的module/import
   12. 垃圾回收機制
   13. 重要-事件迴圈機制

4. 計算機網路

   1. post/get的區別

   2. 瀏覽器輸入url到頁面載入完畢發生了什麼

      1. 啟動瀏覽器網路執行緒
      2. 根據是否是有快取瀏覽器進行自己的請求規則決定是否發出請求
      3. dns查詢
      4. tcp建立連線

      5. 接到資料，開始頁面渲染，啟動瀏覽器渲染引擎（渲染引擎與js引擎互斥，也就是隻能執行一個）

         1. 解析HTML構建DOM樹
         2. 構建css樹
         3. 解析html過程中如果遇到script標籤，要停止渲染，啟動js引擎執行script中的程式碼，如果script中是src格式，那麼要啟動網路執行緒，載入js指令碼，載入完畢開始執行js指令碼，頁面渲染一直會被阻塞。
         4. 當DOM構建完畢，css樹也構建完畢，瀏覽器進入layout階段
         5. 合成渲染樹render-tree
         6. 下一步進入painting階段，即頁面開始繪製
         7. 結束
   3. 協商快取vs強快取
   4. cookie/session
   5. http1.0/http1.1/http2/https
   6. tcp模型
   7. 常見的狀態碼

5. 演算法

   1. 各種花式排序
   2. 其他的還是看下面給的連結吧

6. 框架相關（我擅長vue，其他還沒有投入過學習）

   1. 你的技術棧
   2. vue的典型問題，見下面的vue原始碼揭祕
   3. vue-router如何實現，hash/history兩種路由的區別
   4. vuex，狀態管理是什麼
   5. 元件間如何通訊
   6. 資料如何實現雙向繫結
   7. 元件間資料單向流動是啥
   8. compute/watch的區別
   9. 說一下你知道的js開發模式，實現一下觀察者模式
   10. webpack有了解嗎，為什麼需要構建工具
   11. vue3.0 有了解嗎

7. 效能相關

   1. 如何提高頁面響應效能（主要是從網路層面思考）

      1. 減少網路請求
      2. 圖片合圖，減少請求的資源總量
      3. 使用CDN託管靜態資源
      4. 將js指令碼標籤放在html的最後，避免阻塞渲染，提高首屏載入速度
      5. 避免使用不必要的同步請求
      6. 頁面圖片懶載入，滑動到可是區域，才發起圖片請求
      7. 圖片要壓縮，現在推薦webp格式，gif推薦animated webP

   2. 如何提高頁面執行時效能

      1. 避免js操作DOM，因為可能會造成頁面的迴流或者重繪

      2. 程式碼層面（可以參考高效能JavaScript）

         1. 多次使用類似於a.b.c這樣的變數，最佳實踐是將其儲存在變數中，避免每次都要向上查詢，比如a.b.c表示頁面節點a的屬性b的屬性c。多次使用會一直遍歷DOM節點，耗時太大。
         2. 合理使用閉包，避免垃圾回收無法回收實際已經不在使用的記憶體
         3. 在合適的情景下釋放掉繫結的事件，事件程式本身佔用記憶體，事件太多，要不就及時釋放點，要不就研究一下能不能使用事件委託。
         4. 查詢DOM節點時，推薦使用querySelector/querySelectorAll。對於同一個節點的查詢，這兩個方法要比getElementById/getElementByClass快很多。
         5. js中避免直接操作css，代替它的是使用切換類名。
         6. 後面再慢慢補充

總結

內容還不是很完善，但是已經完全適合實習生的面試以及自己第一階段的學習需求了，更詳細的內容可以看一下下面貼出來的面試圖譜，範圍廣並且兼顧了一定的深度，可以研究研究。

資料連結：

1. 面試圖譜-真面試寶典，但是我覺得對於實習生價效比最高
2. JavaScript基礎進階--講道理，這個多看幾遍，面試官會覺得你這個實習生蠻強的，其實裡面有很多東西，我發現多年從事前端的同學也未必掌握
3. 結合CSS3的佈局新特徵談談常見佈局方法
4. ES6常用語法
5. 從輸入URL到頁面載入的過程？如何由一道題完善自己的前端知識體系！
6. cookie、Sessionstorage、Localstorage快速上手
7. 前端面試之CSS總結(上)
8. 瀏覽器工作原理 （一） ： 瀏覽器渲染原理 & 瀏覽器核心
9. 【CSS基礎】Flex彈性佈局