12～18k的前端面試會問個啥？

這是我參與更文挑戰的第16天，活動詳情查看：更文挑戰php

長文警告html

寫了那麼久的技術文，來點不同的吧。前端

最近公司招人，因此面試了一波，總結了一下前端這個區間內的要求吧。vue

僅表明我的意見和理解node

名詞解釋

`程度副詞`

對於不一樣程度的詞，個人理解以下：python

精通

瞭解背後的原理和規範
動手重寫過實現代碼
能夠覺得此爲基礎作二次開發
能讀懂源碼並作出修改

掌握

曾在項目中大量使用過此技術
能夠自如的使用這項技術進行開發
參與技術論壇區討論或者寫過相關文章

熟悉

曾在項目中使用過
通讀過相關文檔
能夠快速對相關問題定位到文檔內容中
瞭解一些較冷僻的相關語法糖和api等

瞭解

未在開發中使用過，但寫過demo
閱讀過相關文檔或者視頻教程
能夠用五分鐘內向他人介紹這項技術的特色和應用場景

不瞭解

只是聽過名字
只是大概的翻過文檔
沒有寫過關於這項技術的代碼
須要同時具有當前等級全部特性
高等級描述包含低等級描述特性

很是多的簡歷中寫到的瞭解，實際上是不瞭解，熟悉和掌握可能每每只是瞭解的水平，若是你寫的精通，那麼我就要帶着電腦來面試你了。mysql

手寫代碼：

能夠藉助emmet或者編輯器的提醒，非複製粘貼整段代碼的方式書寫代碼。webpack

記憶性考察：

須要背下來的內容，不能夠藉助搜索引擎。好比大多數關鍵字的拼寫，對於超長關鍵詞能夠藉助編輯器完成輸入。一些經常使用的知識點也會要求記憶性考察，好比盒模型和選擇器規則，由於平常使用頻度較高，理應記住。git

索引性考察：

能夠一次性在搜索引擎經過技術關鍵字找到解決方案。好比：咱們但願作一個特殊效果的輪播圖，文字和背景圖不一樣步滾動，背景圖每次只是水平偏移一小截，文字則是整頁的滾動面對這個描述可以識別出搜索關鍵詞爲「視差滾動」程序員

理解性考察：

要求可以經過代碼的方式展示知識點以及和其餘知識點的對比。可以在某應用場景內設計出該技術的使用方案。可以講清其背後的數學原理或者邏輯關係。

面試意圖

正面

是否具備工做崗位所須要的最低能力
是否有過相似項目開發經歷
是否掌握工做崗位所需技能
現場編碼解決問題
正確使用搜索引擎
可以對以前項目中使用過的技術作出詳細解釋
是否對技術有熱情
有在線可訪問的代碼
有技術博客
在技術社區積極回答問題
關注新技術，而且作過官方demo之外的案例
平常使用技術解決生活中的問題
成長空間
計算機專業背景
良好的算法基礎
良好的表達能力
作過技術文章翻譯
有至少一項5年以上的愛好

反面

對冷門知識點作記憶性考察
對過期知識點作解釋型
以回答出問題的個數做爲錄用指標
面試應該像測視力同樣，一開始從最容易的問題入手，逐步深刻，直到沒法正確回答。
若是面試中面試者沒有回答對任何問題或者回答對了全部的問題，都不是一次成功的面試。

面試方式

瞭解職業經歷，確認工做內容。
經過場景歸納出技術能力範圍。
面試前確認，模糊的地方在開始的時候確認。
參與了哪些項目，在項目中扮演什麼角色，完成了哪些編碼工做。
工做的流程是怎麼樣的，是否有規範（好比gitflow）工做的經驗。
按照簡歷的技能列表挑選比較鮮明的作提問。
對於基礎知識，好比HTTP協議，以記憶性考察爲主；對於正則路由promise等技術若是不是近期項目使用過，可是- 聲稱掌握，可放寬爲索引性考察。
我經常會進行一個額外的環節，就是讓面試人在簡歷中圈出真實技能，排除注水內容，而後只對圈出內容進行提問。由於在我看來，環境所迫帶來的簡歷注水也不應等同爲面試人的品質問題，另外一方面，是否可以正確評價本身是程序員的一項重要能力。

咱們公司使用的技術棧相關api問答，以及根據狀況來詢問更深層次的語法和用法等

大約5~10個問題，主要引導面試者講述技術的原理，以及技術的使用形式，以及使用過程當中遇到的問題（參看附錄）。

好比面試者聲稱熟悉AJAX，我可能會問他AJAX使用了js的什麼對象（原理），什麼是異步函數（使用形式），跨域問題有沒有遇到過（問題），JSONP爲何能解決跨域問題（原理），jsonp返回的內容和json有什麼不一樣（使用），jsonp使用遇到過哪些侷限性（問題）…

按照這個層次遞進深刻，直到面試者回答吃力或者沒法回答。

通常不打斷面試者的敘述，哪怕說的是錯誤的，也會在整段講完以後再進行糾正，而後開始下一個話題。

作實際編碼的測試，主要考察編程能力。選用基本的js題目作測試，好比

在聚會中常玩數七的遊戲，七的倍數和帶有七的數字都不能說，好比14,27,28。請找出1~100的不能說的數字。

考察的點有：

技術棧是否契合
技術深度
技術的基礎瞭解程度
遇到問題的解題思路

總結

內容部分知識舉例說明了一些常見的技能列表，實際上會根據面試者的簡歷狀況設置問題。

記憶性內容做爲底線要求，若是不能達標，意味着基礎不牢，在往後的工做中會在不少基本的問題上搞不清。

編碼環節主要作搜索性考察，由於這是工做的常態形式。使用搜索引擎的能力決定了程序員的平常水平。

理解性考察對應的是知識點的理解和應用，是否可以把知識點運用到開發中，而且對平常開發中遇到的問題有本身的思考，反應的是面試者的潛力和發展。

基本功考察

關於Html

html語義化標籤的理解; 結構化的理解; 可否寫出簡潔的html結構; SEO優化
h5中新增的屬性; 如自定義屬性data, 類名className等, 新增表單元素, 拖拽Drag
h5中新增的API, 修改的API, 廢棄的API 稍做了解 (離線存儲, audio, video)

關於CSS

CSS選擇器( 三大特性 )
BFC機制
盒模型
CSS模塊化開發(封裝); SCSS和LESS的使用
屏幕適配以及頁面自適應
CSS3中新增的選擇器
CSS3中新增的屬性, transform trasition animation等…

關於佈局

標準文檔流(padding + margin + 負margin) + 浮動float + 定位
百分比佈局(流式佈局): px單位用 %num代替, 佔父級元素的百分比
flex彈性佈局: 主軸輔助軸的幾個屬性
grid柵格佈局: 使用框架中的類名來替代: 本質上仍是百分比佈局

關於JS基礎

變量數據類型及檢測: 基本 + 引用
運算符: 算術 + 條件 + 邏輯 + 位 + 短路, 隱式轉換等
條件, 循環, 異常處理 if switch(){case xxx:} try catch finally throw
函數定義, 調用方式(apply, call, 直接調用), 傳參: 實參給形參賦值
字符串, 數組, 對象經常使用API,
正則表達式

關於JS高級

做用域, 做用域鏈, 閉包
原型, 原型鏈, 繼承
函數上下文, this指向
js的運行機制, 事件隊列和循環
同步, 異步編程

關於網絡協議

HTTP協議
cookie, session, token

關於ES6語法

字符串, 數組, 對象擴展的api
變量擴展: let const 解構賦值塊級做用域
函數擴展: 箭頭函數默認參數, rest參數
展開運算符, 模板字符串
set 和 map數據結構
迭代器和生成器函數 next 和 yield的理解
proxy對象屬性代理器: 屬性的讀取（get）和設置（set）相關操做
promise對象, 異步編程的解決方案
async + await: 異步編程的終極方案 promise + generator的語法糖
class語法構造函數的語法糖
模塊化編程 export + import 的導出和導入

VUE基礎

基本指令
實例的屬性和方法
實例的生命週期
組件基礎: 建立,註冊,添加屬性方法,套用等…
組件通訊傳值父子, 兄弟, 跨級
插槽slot等…

VUE高級

vue-router: 搭建SPA
路由,組件的配置
路由間的傳值
路由跳轉
路由的導航守衛
記住在router.js 和組件頁面中的使用方式
vuex: 狀態管理: 數據倉庫store
實例化倉庫的5大屬性的使用

state, getters, mutations, actions, modules

輔助函數mapState等…, 倉庫中計算屬性的映射, 方便操做
記住在 store.js 和組件中使用方式

VUE深刻, 源碼閱讀

數據響應式原理
virtual dom
diff 算法
nextTick等等…
vue2和vue3的數據綁定
vue3的componest API
vite的用法

DOM

掌握原生的DOM操做

增刪查改

熟悉node和element對象

事件關於事件的機制

冒泡和捕獲
事件委託
自定義事件
Event對象
面向對象

瞭解面向對象的思想，可以以面向對象的思想構建應用。好比封裝一個日曆組件，設計對象所需的屬性值和方法。

new方法
繼承，派生
原型和原型鏈

函數

熟悉Array，String等的方法
call和apply方法的使用
鏈式調用
this

工程化

掌握gulp
索引行考察手寫gulp任務
掌握模塊化

CMD標準
commonjs
ES6模塊
babel如何使用
webpack打包方案
異步加載
打包多個文件

掌握webpack

閱讀webpack文檔
理解配置文件結構
合併，注入生效代碼部分
熱更新

命名策略

嵌套

變量

函數

瞭解nodeJS對於前端崗位，nodejs的使用主要集中在自動化和搭建簡單的數據服務器兩個方面。

是否上傳過npm包
斷點調試法
express
插件
中間件
路由原理
HTTP協議
數據庫查詢
HTML模板（ejs，pug）

瞭解ES6

promise
Generator
花括號做用域
class
數組遍歷（ES5）
嚴格模式（ES5）
模塊系統

框架專題

通用

MVC
雙向數據綁定
單項數據流
組件化
生命期
路由

前端模板

橫向對比，所用模板的優勢
至少使用過兩種以上的前端模板

工程能力考察:

項目能力

vue-cli腳手架搭建和功能配置 vue.config.js
vite的使用和搭建等
webpack的經常使用配置
項目構建打包

熟悉各種框架的文檔…

UI框架: Bootstrap, MUI, Element-ui等
經常使用的插件整理, 整理一個本身插件庫, 封裝本身的方法庫,組件庫

經常使用的工具熟練度

PC端和移動端開發注意事項和兼容性

經驗總結: 如何快速肯定項目的技術選型
坑點總結

項目遇到坑坑坑!!!
如何處理，如何提出issue而且合做處理

git或者svn等使用狀況
項目中的性能優化記錄 ( 都是細節點…多記錄 )
需求文檔的理解, 能夠結合項目流程圖, UML圖
問題解決能力: (bug定位調試, 查找文檔, 尋求他人…)
日常有記錄的習慣嗎。

模塊化, 組件化開發能力

項目分類; 各種文件整理,分類
各種功能封裝
組件和功能模塊的抽離, 解耦, 複用

內功考察:

面向對象的編程思想

類的抽象
對象的封裝, 繼承
爲了更好的去管理數據, 分類數據實現高內聚, 低

設計模式

設計模式感受也是
將面向對象思想再度抽象成現實中某些特定模式

數據結構和算法

學習經常使用的排序搜索算法, 順序表,鏈表,棧,隊列,樹,堆結構等等…
考驗你的抽象思惟和數學功底了
將現實需求抽象成計算機代碼的思惟能力

附加技能考察:

學習能力

持續學習的態度–博客, 筆記記錄
技術論壇活躍度高, 問答多
GitHub開源項目參與

瞭解一門後端語言

node.js, python, php等…
數據庫mysql,redis,mongodb. sql的操做語句, mongo的操做語句, redis操做語句
node + express 搭建本地服務等
python + django + request + scrapy

系統編程

Linux命令行操做, 系統文件管理
多任務, 多線程, 多進程, 協程, 併發, 並行, 串行, 同步, 異步等概念的理解

人懶，不想配圖，都是本身的博客內容（乾貨），望能幫到你們

公衆號：小何成長，佛系更文，都是本身曾經踩過的坑或者是學到的東西

有興趣的小夥伴歡迎關注我哦，我是：何小玍。 你們一塊兒進步鴨