前端面試套餐：Vue面試題總結+JavaScript前端經典面試題+100道 CSS 面試題

前言

在逛技術網站時，在一篇文章下面看到了一條評論，這條評論仁者見仁智者見智。我單獨放出來講，是由於他講到了基礎。基礎是重要的一個學習環節，在面試中不少問題都不難，都是基礎上內容，回不回的上就看你基礎是否牢固了，面試官也從中知道你學的怎樣。

評論

我由於學習興趣濃，從測試到java到前端一路學過來，如今就處於什麼都懂，什麼都半桶水的尷尬局面。我由於喜歡前端界面而漸漸的專一於前端。廣和精，這一對矛盾又統一的兄弟，在前端折騰死了不少人，我面試過的一些公司，一些說你深度不夠，一些說你太過狹隘，聊下來我就想打人。

我靜下來縷了一下，前端發展應該是基礎必定要精（三大基礎：html, js, css），由於前端全部的新技術都是基於這三門技術，離不開他們；其餘基於這些擴展出來的不論是框架、技術，能夠廣。經常使用的要熟悉，無法實踐的要了解，平時能夠作些小項目，甚至設置一個小項目，不斷的用新技術去實現這個小項目。底層精，上層廣，這就是一個紮實的前端技術工程師。

對於前端方向，說實話任何一個方向真的均可以深挖，作css，能夠鑽研css的不少應用,；作html5，更是有不可勝數的需求。前提是要先生存下來，有站着的資本，而後才能夠走你本身的方向。大神之因此自由，是由於有了生存基礎，他們能夠騰出手來作感興趣的研究了。

小編這篇不講基礎學什麼、怎麼學，打算後面單獨寫一篇詳講。這篇時把對於vue、js、css這三方面基礎整理了3套面試題，html在面試中問的很少，沒有去整理但有須要的小夥伴們評論告訴小編，小編後續更新。

Vue面試題總結

vue-cli工程

• 構建的 vue-cli 工程都到了哪些技術，它們的做用分別是什麼？
• vue-cli 工程經常使用的 npm 命令有哪些？
• 請說出vue-cli工程中每一個文件夾和文件的用處
• 請你詳細介紹一些 package.json 裏面的配置

vue核心知識點

• 對於Vue是一套漸進式框架的理解
• vue.js的兩個核心是什麼？
• 請問 v-if 和 v-show 有什麼區別
• vue經常使用的修飾符
• v-on能夠監聽多個方法嗎？
• vue中 key 值的做用
• vue-cli工程升級vue版本
• vue事件中如何使用event對象？
• $nextTick的使用
• Vue 組件中 data 爲何必須是函數
• v-for 與 v-if 的優先級
• vue中子組件調用父組件的方法
• vue中 keep-alive 組件的做用

vue-router

• vue-router如何響應 路由參數 的變化？
• 完整的 vue-router 導航解析流程
• vue-router有哪幾種導航鉤子（ 導航守衛 ）？
• vue-router傳遞參數的幾種方式
• vue-router如何定義嵌套路由？
• <router-link></router-link>組件及其屬性
• vue-router實現路由懶加載
• vue-router路由的兩種模式
• history路由模式配置及後臺配置

UI樣式

• vue組件的scoped屬性的做用
• 如何讓CSS只在當前組件中起做用？
• vue中經常使用的UI組件庫
• 如何適配移動端？【 經典 】
• 移動端媒體查詢
• vue內容垂直和水平居中
• vue-cli引入圖片的方法
• 移動端常見樣式問題
• 文本超出隱藏

MVVM設計模式

• MVC、MVP與MVVM模式
• MVC、MVP與MVVM的區別
• MVVM的實現原理
• Object.defineProperty()方法
• ES6中定義的類和對象
• JS中的文檔碎片
• 解構賦值
• Array.from
• Array.reduce()
• 遞歸的使用
• Obj.keys()與Obj.defineProperty
• vue項目優化，縮短首屏加載時間

還有vuex、http請求、經常使用功能、經常使用功能等面試題內容沒有列舉出來，須要Vue面試題小夥伴們請點擊這直接領取

javaScript前端經典面試題

JS運行機制/ 單線程/ 異步

• 如何理解js的單線程？
• js爲何是單線程的？
• 同步和異步的區別是什麼？分別舉一個同步和異步的例子？
• 什麼時候須要異步？
• 什麼是任務隊列？
• 請說出下列值？
• 棧和隊列的區別？
• 棧和堆的區別？
• 什麼是event loop？
• event-loop流程？
• 哪些語句會放入異步任務隊列中？
• 什麼時候被放入任務隊列？

JS中的內置函數/內置對象

• js中有哪些內置函數/ 數據封裝類對象？
• js中有哪些內置對象？
• js變量按照存儲方式區分爲哪些類型，並描述其特色？
• 字符串方法/ String對象方法?
• 數組方法/ Array對象方法？
• 數組API？
• 對象API？

dom

• dom是哪一種基本的數據結構？
• dom操做的經常使用api有哪些？
• dom節點的attribute和property有何區別？
• dom結構操做/ 怎樣添加、移除、移動、複製、建立和查找節點/ dom操做的經常使用api？
• dom事件的級別？
• dom事件模型？
• dom事件流？
• 描述dom事件捕獲的具體流程？
• event對象的常見應用？
• 自定義事件/ 模擬事件？
• 通用事件綁定/ 編寫一個通用的事件監聽函數？
• dom樹、render樹的關係/ dom樹、render樹的區別（第二、3條）？

JS基礎

• 對js的理解？
• 請說出如下代碼輸出的值？
• 把如下代碼，改寫成依次輸出0-9
• 如何區分數組對象，普通對象，函數對象
• 面向對象、面向過程
• 面向對象的三大基本特性
• XML和JSON的區別？
• Web Worker 和webSocket？
• Javascript垃圾回收方法？
• new操做符具體幹了什麼呢？
• js延遲加載的方式有哪些？
• WEB應用從服務器主動推送Data到客戶端有那些方式？

100道 CSS 面試題

• 介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什麼不一樣的？
• CSS 選擇符有哪些？
• ::before 和:after 中雙冒號和單冒號有什麼區別？解釋一下這 2 個僞元素的做用。
• 僞類與僞元素的區別
• CSS 中哪些屬性能夠繼承？
• CSS 優先級算法如何計算？
• 關於僞類 LVHA 的解釋?
• CSS3 新增僞類有那些？
• 如何居中 div？
• display 有哪些值？說明他們的做用。
• position 的值 relative 和 absolute 定位原點是？
• CSS3 有哪些新特性？（根據項目回答）
• 請解釋一下 CSS3 的 Flex box（彈性盒佈局模型），以及適用場景？
• 用純 CSS 建立一個三角形的原理是什麼？
• 一個滿屏品字佈局如何設計?
• CSS 多列等高如何實現？
• 常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用 hack 的技巧？
• li 與 li 之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？
• 爲何要初始化 CSS 樣式？
• 什麼是包含塊，對於包含塊的理解?

結束語

篇幅緣由每篇面試題資料列舉的一部分題目，不管是須要其中1套的仍是3套都須要的小夥伴們，直接點擊這領取vue、js、css面試題資料。學基礎內容不難，但把基礎學的紮實了，這也是須要時間的。