零基礎轉行前端，學習之路上的面試題分享

前言

轉行web前端的人有很多，想要轉行到web前端的人也有很多，但是，對于想要或者是即將要轉行web前端的人來說，需要學習掌握哪些前端知識，如何學習這些知識？是一個值得思考的問題，

轉行前端需要學習什么？

轉行是否成功要看你能不能找到一份前端工程師的作業，對于能否找到作業，就看你是否具備這方面的能力，那到底轉行前端需要學習什么？可以先去了解這個崗位的職位要求，

學習前端知識

1、網頁設計【HTML/CSS】

• HTML標簽（div標簽，圖片標簽，串列標簽，表格標簽…）
• 標簽語意化
• CSS 樣式布局
• CSS 選擇器（基礎選擇器，復合選擇器，選擇器優先級）
• CSS 盒模型（標準盒模型，怪異盒模型）
• …
  
  2、JS動態互動【JavaScript/ES6+ 】
• 變數和運算子
• JS函式
• 面對物件編程
• 事件，事件流
• DOM，BOM，this
• 閉包，遞回
• 深淺拷貝
• 正則運算式
• 函式防抖，節流
• ES6+的作用域
• 物件/函式/字串的擴展
• Promise物件
• 箭頭函式
• …
  
  3、移動端開發【HTML5/CSS3】
• HTML5語意化標簽
• HTML5新增多媒體
• 本地存盤
• CSS3新增屬性
• CSS3背景屬性
• 過渡影片
• …

4、框架【Vue】

• Vue回應式
• Vue雙向資料系結
• Vue相關指令
• vue-resource
• Vue生命周期
• Vue組件
• Vue-cli 腳手架配置
• Vue-router
• Vuex
• …
  
  篇幅有限，需要可以【點擊這里】領取前端基礎面試題，2021前端面試題精選大全PDF檔案（包含面試題及答案）

2021前端面試題精選大全

內容大綱包括HTML，CSS，JavaScript，jQuery，瀏覽器，HTTP，React，小程式

HTML、CSS相關

• 網路中使用最多的圖片格式有哪些
• 請簡述css盒子模型
• 視頻/音頻標簽的使用
• HTML5新增的內容有哪些
• HTML5 新增的語意化標簽有哪些
• CSS3新增的特性
• 清除浮動的方式有哪些？請說出各自的優點
• 定位的屬性值有何區別
• 子元素如何在父元素中居中
• Border-box與content-box的區別
• 元素垂直居中
• 如何讓chrome瀏覽器顯示小于12px的文字
• CSS選擇器有哪些，那些屬性可以繼承，優先級如何計算？
• CSS3新增的偽類有哪些？
• 網頁中有大量圖片加載很慢 你有什么辦法進行優化？
• 行內元素/塊級元素有哪些？
• 瀏覽器的標準模式和怪異模式區別？
• Margin和padding在什么場合下使用
• 彈性盒子布局屬性有那些請簡述?
• 怎么實作標簽的禁用
• Flex布局原理
• px，rem，em的區別
• 網頁的三層結構有哪些
• 請簡述媒體查詢
• 三欄布局方式兩邊固定中間自適應
• Doctype作用
• CSS 預處理 sass less 是什么？為什么使用他們
• 怎么轉換less為css
  
  JavaScript相關
• Js基本資料型別有哪些
• Ajax如何使用
• 如何判斷一個資料是NaN
• 閉包是什么？有什么特性？對頁面會有什么影響
• Js中常見的記憶體泄漏：
• 事件委托是什么？如何確定事件源（Event.target 誰呼叫誰就是事件源）
• 什么是事件冒泡？
• 本地存盤與cookie的區別
• ES6新特性
• Let與var與const的區別
• 陣列方法有哪些請簡述
• 請掌握2種以上陣列去重的方式
• 什么是面向物件請簡述
• 普通函式和建構式的區別
• 請簡述原型 / 原型鏈 /（原型）繼承
• Promise的理解
• 請簡述async的用法
• 一個頁面從輸入 URL 到頁面加載顯示完成，這個程序中都發生了什么？
• Js中.call()與.apply()區別
• 為什么會造成跨域/請簡述同源策略
• This指向
• 什么是jsonp作業原理是什么？他為什么不是真正的ajax
• 請寫出一個簡單的類與繼承
• 同步與異步的區別/阻塞與非阻塞區別
• 為什么js是弱型別語言
• 箭頭函式與普通函式的區別
• For回圈與map回圈有什么區別
• 原型和繼承，prototype，call和apply繼承的區別
• 深淺拷貝是什么如何實作？
• 什么時候用深拷貝 /淺拷貝
• 什么是js記憶體泄露？
• 什么是csrf攻擊
• 預加載和懶加載的區別，預加載在什么時間加載合適
• Js的函式節流和函式防抖的區別
  
  jQuery相關
• 什么是jQuery？
• 為什么要使用jQuery？jquery有哪些好處？
• Jquery選擇器有哪些
• Jquery插入節點的方法
• jQuery物件和DOM物件是怎樣轉換的
• jQuery中.get()提交和.post()提交的區別
• 怎么使用jQuery中的影片
• jQuery中如何來獲取和設定屬性
• 如何來設定和獲取HTML和文本的值？
• jQuery中有哪些方法可以遍歷節點？
• $(this) 和 this 關鍵字在 jQuery 中有何不同？
• jQuery 里的 each() 是什么函式？你是如何使用它的？
• Query中的Delegate()函式有什么作用？
  
  瀏覽器，HTTP相關
• http是什么？有什么特點
• HTTP協議和HTTPS區別
• 請簡述ajax的執行程序 以及常見的HTTP狀態碼
• Get和post不同
• 請輸出三種減少頁面加載時間的方式
• 重繪和回流是什么
• 你如何對網站的檔案和資源進行優化？
  
  Vue相關
• Vue的核心是什么
• 請簡述你對vue的理解
• 請簡述vue的單向資料流
• Vue常用的修飾符有哪些
• v-text與{{}}與v-html區別
• v-on可以系結多個方法嗎
• Vue回圈的key作用
• 什么是計算屬性
• Vue單頁面的優缺點
• Vuex是什么？怎么使用？在那種場景下使用
• Vue中路由跳轉方式（宣告式/編程式）
• 路由中name屬性有什么作用？
• vue跨域的解決方式
• Vue的生命周期請簡述
• Vue生命周期的作用
• DOM渲染在那個生命周期階段內完成
• Vue路由的實作
• Vue路由模式hash和history，簡單講一下
• Vue路由傳參的兩種方式，params和query方式與區別
• Vue資料系結的幾種方式
• Vue注冊一個全域組件
• Vue的路由鉤子函式/路由守衛有哪些
• Vue中如何進行動態路由設定？有哪些方式？怎么獲取傳遞過來的資料？
• Elementui中的常用組件有哪些？請簡述你經常使用的 并且他們的屬性有哪些？
• Vue中指令有哪些
• Vue如何定義一個過濾器
• 對vue 中keep-alive的理解
• 如何讓組件中的css在當前組件生效
• Vue生命周期一共幾個階段
• Mvvm與mvc的區別
• Vue組件中的data為什么是函式
• Vue雙向系結的原理
• Vue中組件怎么傳值
• Bootstrap的原理
• 槽口請簡述
• Watch請簡述
• Vant Ui請簡述下
• 計算屬性與watch區別
• mvvm框架是什么？它和其它框架（jquery）的區別是什么？哪些場景適合？
• Vue首屏加載慢的原因，怎么解決的，怎么解決白屏問題
• Vue雙資料系結程序中，這邊兒資料改變了怎么通知另一邊改變
• Vuex流程
• Vuex怎么請求異步資料
• Vuex中action如何提交給mutation的
• Route與router區別
• vuex的State特性是？
• vuex的Getter特性是？
• vuex的Mutation特性是？
• vuex的actions特性是？
• vuex的優勢
• v-for與v-if優先級
  
  React相關
• fetch VS ajax VS axios
• React事件處理—修改this指向
• 請簡述你對react的理解
• react組件之間的資料傳遞
• Vue與react區別
• 請簡述虛擬dom與diff演算法
• 呼叫 setState 之后發生了什么？
• react 生命周期函式
• 為什么虛擬 dom 會提高性能?(必考)
• State與props區別
• shouldComponentUpdate 是做什么的
• react diff 原理
• 何為受控組件
• 呼叫 super(props) 的目的是什么
• React 中構建組件的方式
  
  小程式相關的
• 小程式的優勢
• 小程式的頁面構成
• 小程式的生命周期
• 小程式如何請求資料
• 如何提高小程式的首屏加載時間
• 請簡述你經常使用的小程式的組件
• wxss與css的區別請簡述
• 怎么優化小程式
• 小程式如何顯示用戶頭像與用戶名
• 請談談小程式的雙向系結和vue的異同？