適合實習生的一個面試準備指南
從前端學習到找到一份合適的工作,大大小小的面試必不可少,春招的實習面試,以及秋招的校招面試,從面試內容到技術的深度,要求都是不一樣的。
先說春招的實習面試,面試內容主要還是考察前端的基本功,如果是科班出身,對於計算機基礎學科要求還是比較多的,比如會考察作業系統,編譯原理,計算機網路相關基本知識。
總體來說,考察的方向大致有一下幾種:
- HTML/HTML5
-
CSS/CSS3
- 佈局相關,如雙飛翼/聖盃
- 定位
- 清除浮動
- BFC
- css3動畫,過渡,形變
- 各種花式垂直水平居中
- flex彈性佈局=
- 如何理解css中的流
- 等等太多了
-
JavaScript
-
ecmascript
語法基本功,如字串拼接,資料型別,物件等 - js的作用域,作用域鏈,執行上下文
- 閉包
- DOM操作,什麼是DOM,什麼是BOM
- 事件模型
- this
- ES6常用的新增特性
-
JS網路相關(都是重點)
- 什麼是跨域,常見的跨域方式有哪些,是否知道nginx配置代理進行跨域
- CORS是什麼
- 什麼是同源策略
- 什麼是Ajax(xhr)(比較重點)
- 常見的儲存方式有哪些,即localstorage sessionstorage的場景以及區別
- Promise是什麼,和setTimeout/setInterval的區別,再深一點,巨集任務和微任務的區別 。
- 什麼是模組化,是否瞭解CMD,以及ES6的module/import
- 垃圾回收機制
- 重要-事件迴圈機制
-
-
計算機網路
- post/get的區別
-
- 啟動瀏覽器網路執行緒
- 根據是否是有快取瀏覽器進行自己的請求規則決定是否發出請求
- dns查詢
- tcp建立連線
-
接到資料,開始頁面渲染,啟動瀏覽器渲染引擎(渲染引擎與js引擎互斥,也就是隻能執行一個)
- 解析HTML構建DOM樹
- 構建css樹
- 解析html過程中如果遇到script標籤,要停止渲染,啟動js引擎執行script中的程式碼,如果script中是src格式,那麼要啟動網路執行緒,載入js指令碼,載入完畢開始執行js指令碼,頁面渲染一直會被阻塞。
- 當DOM構建完畢,css樹也構建完畢,瀏覽器進入layout階段
- 合成渲染樹render-tree
- 下一步進入painting階段,即頁面開始繪製
- 結束
- 協商快取vs強快取
- cookie/session
- http1.0/http1.1/http2/https
- tcp模型
- 常見的狀態碼
-
演算法
- 各種花式排序
- 其他的還是看下面給的連結吧
-
- 你的技術棧
- vue的典型問題,見下面的vue原始碼揭祕
- vue-router如何實現,hash/history兩種路由的區別
- vuex,狀態管理是什麼
- 元件間如何通訊
- 資料如何實現雙向繫結
- 元件間資料單向流動是啥
- compute/watch的區別
- 說一下你知道的js開發模式,實現一下觀察者模式
- webpack有了解嗎,為什麼需要構建工具
- vue3.0 有了解嗎
-
效能相關
-
如何提高頁面響應效能(主要是從網路層面思考)
- 減少網路請求
- 圖片合圖,減少請求的資源總量
- 使用CDN託管靜態資源
- 將js指令碼標籤放在html的最後,避免阻塞渲染,提高首屏載入速度
- 避免使用不必要的同步請求
- 頁面圖片懶載入,滑動到可是區域,才發起圖片請求
- 圖片要壓縮,現在推薦webp格式,gif推薦animated webP
-
如何提高頁面執行時效能
- 避免js操作DOM,因為可能會造成頁面的迴流或者重繪
-
程式碼層面(可以參考高效能JavaScript)
- 多次使用類似於a.b.c這樣的變數,最佳實踐是將其儲存在變數中,避免每次都要向上查詢,比如a.b.c表示頁面節點a的屬性b的屬性c。多次使用會一直遍歷DOM節點,耗時太大。
- 合理使用閉包,避免垃圾回收無法回收實際已經不在使用的記憶體
- 在合適的情景下釋放掉繫結的事件,事件程式本身佔用記憶體,事件太多,要不就及時釋放點,要不就研究一下能不能使用事件委託。
- 查詢DOM節點時,推薦使用querySelector/querySelectorAll。對於同一個節點的查詢,這兩個方法要比getElementById/getElementByClass快很多。
- js中避免直接操作css,代替它的是使用切換類名。
- 後面再慢慢補充
-
總結
內容還不是很完善,但是已經完全適合實習生的面試以及自己第一階段的學習需求了,更詳細的內容可以看一下下面貼出來的面試圖譜,範圍廣並且兼顧了一定的深度,可以研究研究。