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

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

先說春招的實習面試，面試內容主要仍是考察前端的基本功，若是是科班出身，對於計算機基礎學科要求仍是比較多的，好比會考察操做系統，編譯原理，計算機網絡相關基本知識。
整體來講，考察的方向大體有一下幾種：

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彈性佈局