1. WEB前端面試題
第二章 面試題基礎篇
2.1 HTML面試題
面試題：行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
面試題：頁面導入樣式時，使用link和@import有什麼區別？
面試題：title與h1的區別、b與strong的區別、i與em的區別？
面試題：img標簽的title和alt有什麼區別？
面試題：png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用？
2.2 CSS面試題
面試題：css背景紋路
面試題：介紹一下CSS的盒子模型
面試題：CSS選擇符有哪些？哪些屬性可以繼承？
面試題：CSS優先順序演算法如何計算？
面試題：用CSS畫一個三角形
面試題：一個盒子不給寬度和高度如何水平垂直居中？
面試題：display有哪些值？說明他們的作用。
面試題：對BFC規范(塊級格式化上下文：block formatting context)的理解？
面試題：清除浮動有哪些方式？
面試題：在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
面試題：寫一個左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應寬，要求先載入中間塊，請寫出結構及樣式。
面試題：什麼是CSS reset？
面試題：css sprite是什麼,有什麼優缺點
面試題：display: none;與visibility: hidden;的區別
面試題：position有哪些值?有什麼作用? 【特別多公司問】
面試題：line-height和height有什麼區別？
面試題：opacity 和 rgba區別
2.3 JavaScript基礎面試題
面試題：延遲載入JS有哪些方式？
面試題：JS數據類型有哪些？
面試題：null和undefined的區別
面試題：JS數據類型考題
面試題：==和===有什麼不同
面試題：JS微任務和宏任務
面試題：JS作用域考題
面試題：JS對象考題
面試題：JS作用域+this指向+原型 考題
面試題：JS判斷變數是不是數組，你能寫出哪些方法？
面試題：slice是幹嘛的、splice是否會改變原數組
面試題：JS數組去重
面試題：找出多維數組最大值
面試題：給字元串新增方法實現功能
面試題：找出字元串出現最多次數的字元以及次數
2.4 真正移動端 —— H5/C3面試題
面試題：什麼是語義化標簽
面試題：::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
面試題：如何關閉iOS鍵盤首字母自動大寫
面試題：怎麼讓Chrome支持小於12px 的文字？
面試題：rem和em有什麼樣區別
面試題：ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉
面試題：webkit表單輸入框placeholder的顏色值能改變嗎？
面試題：禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片
面試題：禁止ios和android用戶選中文字
面試題：自適應 [淘寶無線適配]
面試題：響應式
第三章 面試題進階篇
3.1 JavaScript進階面試題
面試題：new操作符具體做了什麼
面試題：閉包 【必須會】
面試題：原型鏈 【必須會】
面試題： JS繼承有哪些方式
面試題：說一下call、apply、bind區別
面試題：sort背後原理是什麼？
面試題：深拷貝和淺拷貝
面試題：localstorage、sessionstorage、cookie的區別
3.2 ES6面試題
面試題：var、let、const區別
面試題：作用域考題
面試題：將下列對象進行合並
面試題：箭頭函數和普通函數有什麼區別？
面試題：Promise有幾種狀態
面試題：find和filter的區別 【大廠】
面試題：some和every的區別 【大廠】
3.3 webpack面試題
面試題：webpack插件
3.4 Git面試題
面試題：git常用命令
面試題：解決沖突
面試題：GitFlow
第四章 面試題框架篇
4.1 區分初中高級的 —— Vue面試題
面試題：Vue2.x 生命周期有哪些？
1.系統自帶八個
2.當一旦進入到某個組件會執行哪些生命周期
3.$el和$data在哪個階段有
4.如果使用keep-alive會多倆個生命周期
5.如果加入keep-alive第一次進入組件會執行哪些生命周期
6.如果加入keep-alive第二次或者第N進入該組件會執行哪些生命周期
面試題：談談你對keep-alive的了解
面試題：v-if和v-show區別
面試題：v-if和v-for優先順序 2.x
面試題：ref是什麼？
面試題：nextTick是什麼？
面試題：Vue中如何做樣式穿透
面試題：scoped原理
面試題：Vuex是單向數據流還是雙向數據流？
面試題：講一下MVVM
面試題：雙向綁定原理
面試題：什麼是虛擬DOM
面試題：key是干什麼？
面試題：diff演算法
面試題：Vue組件傳值
面試題：props和data優先順序誰高？
面試題：computed、methods、watch有什麼區別？
面試題：Vuex
面試題：Vue路由
面試題：Vue項目打包後出現空白頁
4.2 微信小程序面試題
面試題：如何自定義頭部？
面試題：如何自定義底部？
4.3 uni-app面試題
面試題：生命周期
面試題：條件編譯
第五章 面試題性能優化篇
2. js基礎面試題131-160道題目
131.用原生 JavaScript 的實現過什麼功能嗎？
參考答案：輪播圖、手風琴、放大鏡、3D動畫效果等，切記，所答的一定要知道實現原理！，不知道還不如不說！
參與互動
132.javascript 代碼中的"use strict"; 是什麼意思 ? 使用它區別是什麼？
參考答案：意思是使用嚴格模式，使用嚴格模式，一些不規范的語法將不再支持
參與互動
133.簡述創建函數的幾種方式
參考答案：
參與互動
134.window.location.search() 返回的是什麼？
參考答案：查詢(參數)部分。除了給動態語言賦值以外，我們同樣可以給靜態頁面, 並使用 javascript 來獲得相信應的參數值 返回值：?ver=1.0&id=timlq 也就是問號後面的！
參與互動
135.window.location.hash 返回的是什麼？
參考答案：錨點 ， 返回值：#love ；
參與互動
136.window.location.reload() 作用？
參考答案：刷新當前頁面
參與互動
137.為什麼不能定義 1px 左右的 p 容器？
參考答案： IE6 下這個問題是因為默認的行高造成的，解決的方法也有很多，例如： overflow:hidden | zoom:0.08 | line-height:1px
參與互動
138.BOM 對象有哪些，列舉 window 對象？
參考答案：
參與互動
139.簡述 readonly 與 disabled 的區別
參考答案：
參與互動
140.為什麼擴展 javascript 內置對象不是好的做法？
參考答案：
參與互動
141.什麼是三元表達式？「三元」表示什麼意思？
參考答案：三元如名字表示的三元運算符需要三個操作數。
語法是 條件 ? 結果1 : 結果2; .這里你把條件寫在問號(?)的前面後面跟著用冒號(:)分隔的結果1和結果2。滿足條件時結果1否則結果2。
參與互動
142.我們給一個 dom 同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
參考答案：所有事件的順序是：其他元素捕獲階段事件 -> 本元素代碼順序事件 -> 其他元素冒泡階段事件 。
參考
參與互動
144.簡述一下 Handlebars 的基本用法？
參考答案：沒有用過的話說出它是干什麼的即可
參與互動
143.簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
參考答案：
參與互動
145.前端 templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
參考答案：
參與互動
146.知道什麼是 webkit 么? 知道怎麼用瀏覽器的各種工具來調試和 debug 代碼么?
參考答案：Webkit 是瀏覽器引擎，包括 html 渲染和 js 解析功能，手機瀏覽器的主流內核，與之相對應的引擎有 Gecko（Mozilla Firefox 等使用）和 Trident（也稱 MSHTML，IE 使用）。 對於瀏覽器的調試工具要熟練使用，主要是頁面結構分析，後台請求信息查看，js 調試工具使用，熟練使用這些工具可以快速提高解決問題的效率
參與互動
147.如何測試前端代碼? 知道 BDD, TDD, Unit Test 么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
參考答案：了解 BDD 行為驅動開發與 TDD 測試驅動開發已經單元測試相關概念
參與互動
148.JavaScript 的循環語句有哪些？
參考答案：while for do while forEach
參與互動
149.作用域-編譯期執行期以及全局局部作用域問題
參考答案：js 執行主要的兩個階段：預解析和執行期
參與互動
150.如何添加 html 元素的事件，有幾種方法？請列舉
參考答案：直接在標簽里添加；在元素上添加、使用事件注冊函數添加
參與互動
151.列舉瀏覽器對象模型 BOM 里常用的至少 4 個對象，並列舉 window 對象的常用方法至少 5 個
參考答案：
對象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
參與互動
152.事件綁定的方式
參考答案：
參與互動
153.事件循環
參考答案：事件循環是一個單線程循環，用於監視調用堆棧並檢查是否有工作即將在任務隊列中完成。如果調用堆棧為空並且任務隊列中有回調函數，則將回調函數出隊並推送到調用堆棧中執行。
參與互動
154.事件模型
參考答案：
解析：參考
參與互動
155.如何自定義事件
參考答案：
1.原生提供了 3 個方法實現自定義事件 2.createEvent，設置事件類型，是 html 事件還是 滑鼠事件 3.initEvent 初始化事件，事件名稱，是否允許冒泡，是否阻止自定義事件 4.dispatchEvent 觸發事件
MDN
參與互動
156.target 和 currentTarget 區別
參考答案：
參與互動
157.prototype 和__proto__的關系是什麼
參考答案：
所有的對象都擁有__proto__屬性，它指向對象構造函數的 prototype 屬性
所有的函數都同時擁有__proto__和 protytpe 屬性 函數的__proto__指向自己的函數實現 函數的 protytpe 是一個對象 所以函數的 prototype 也有__proto__屬性 指向 Object.prototype
Object.prototype.__proto__指向 null
參與互動
158.什麼是原型屬性？
參考答案：從構造函數的prototype屬性出發找到原型，這時候就把原型稱之為構造函數的原型屬性
參與互動
159.什麼是原型對象？
參考答案：從實例的__proto__出發，找到原型，這時候就把原型稱之為實例的原型對象。
參與互動
160.使用 let、var 和 const 創建變數有什麼區別
參考答案：
let 和 const 的區別在於：let 允許多次賦值，而 const 只允許一次。
3. web前端面試經常問到的面試題有哪些
Web前端經常被問到的面試題及答案
一、HTML+CSS
1.對WEB標准以及W3C的理解與認識
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外
鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維
護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性;
2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規范(html/Xhtml)一般為 嚴格 過度 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 ：同時載入
前者無兼容性，後者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可
6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?
標簽選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標簽選擇
後者優先順序高
7.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層 Html 表示層 CSS 行為層 js
8.css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
二、Javascript
1.javascript的typeof返回哪些數據類型
Object number function boolean underfind
2.例舉3種強制類型轉換和2種隱式類型轉換?
強制(parseInt,parseFloat,number)
隱式(== – ===)
3.split() join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字元串
4.數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
5.事件綁定和普通事件有什麼區別
6.IE和DOM事件流的區別
1.執行順序不一樣、
2.參數不一樣
3.事件加不加on
4.this指向問題
7.IE和標准下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax請求的時候get 和post方式的區別
一個在url後面 一個放在虛擬載體裡面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的
9.call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax請求時，如何解釋json數據
使用eval parse 鑒於安全性考慮 使用parse更靠譜
11.b繼承a的方法
12.寫一個獲取非行間樣式的函數
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
4. 47道基礎的VueJS面試題(附答案)
1、什麼是MVVM框架？它適用於哪些場景？
MVVM框架是一個 Model-View-View Model框架，其中 ViewModel連接模型Model）和視圖（View）。
在數據操作比較多的場景中，MVVM框架更合適，有助於通過操作數據渲染頁面。
2、active- class是哪個組件的屬性？
它是 vue-router模塊的 router-link組件的屬性。
3、如何定義Vue- router的動態路由？
在靜態路由名稱前面添加冒號，例如，設置id動態路由參數，為路由對象的path屬性設置/:id。
4、如何獲取傳過來的動態參數？
在組件中，使用$router對象的 params.id，即 $route.params.id 。
5、vue- router有哪幾種導航鉤子？
有3種。
第一種是全局導航鉤子：router.beforeEach(to,from,next)。作用是跳轉前進行判斷攔截。
第二種是組件內的鉤子。
第三種是單獨路由獨享組件。
6、mint-ui是什麼？如何使用？
它是基於 Vue.js的前端組件庫。用npm安裝，然後通過 import導入樣式和JavaScript代碼。vue.use(mintUi)用於實現全局引入， import {Toast} from ' mint-ui'用於在單個組件局部引入。
7、V-model是什麼？有什麼作用？
v- model是 Vue. js中的一條指令，可以實現數據的雙向綁定。
8、Vue.js中標簽如何綁定事件？
綁定事件有兩種方式。
第一種，通過v-on指令， 。
第二種，通過@語法糖， input@ click= doLog()/>。
9、vuex是什麼？如何使用？在哪種功能場景中使用它？
vuex是針對 Vue. js框架實現的狀態管理系統。
為了使用vuex，要引入 store，並注入Vue.js組件中，在組件內部即可通過$ ostore訪問 store對象。
使用場景包括：在單頁應用中，用於組件之間的通信，例如音樂播放、登錄狀態管理、加入購物車等。
10、如何實現自定義指令？它有哪些鉤子函數？還有哪些鉤子函數參數？
自定義指令包括以下兩種。
它有如下鉤子函數。
鉤子函數的參數如下。
11、至少說出vue.js中的4種指令和它們的用法。
相關指令及其用法如下。
12、Vue-router是什麼？它有哪些組件？
它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。
13、導航鉤子有哪些？它們有哪些參數？
導航鉤子又稱導航守衛，又分為全局鉤子、單個路由獨享鈞子和組件級鈞子。
全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。
單個路由獨享鉤子有 beforeEnter。
組件級鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。
它們有以下參數。
14、Vue.js的雙向數據綁定原理是什麼？
具體步驟如下。
（1）對需要觀察的數據對象進行遞歸遍歷，包括子屬性對象的屬性，設置set和get特性方法。當給這個對象的某個值賦值時，會觸發綁定的set特性方法，於是就能監聽到數據變化。
（4）MVVM是數據綁定的入口，整合了 Observer、 Compile和 Watcher三者，通過Observer來監聽自己的 model數據變化，通過 Compile來解析編譯模板指令，最終利用Watcher搭起 Observer和 Compile之間的通信橋梁，達到數據變化通知視圖更新的效果。利用視圖交互，變化更新數據 model變更的雙向綁定效果。
15、請詳細說明你對Vue.js生命周期的理解。
總共分為8個階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。
當使用組件的kep- alive功能時，增加以下兩個周期。
Vue2.5.0版本新增了一個周期鉤子：ErrorCaptured，當捕獲一個來自子孫組件的錯誤時調用。
16、請描述封裝Vue組件的作用過程。
組件可以提升整個項目的開發效率，能夠把頁面抽象成多個相對獨立的模塊，解決了傳統項目開發中效率低、難維護、復用性等問題。
使用Vue.extend方法創建一個組件，使用Vue.component方法注冊組件。子組件需要數據，可以在 props中接收數據。而子組件修改妤數據後，若想把數據傳遞給父組件，可以採用emit方法。
17、你是怎樣認識vuex的？
vuex可以理解為一種開發模式或框架。它是對 Vue. js框架數據層面的擴展。通過狀態（數據源）集中管理驅動組件的變化。應用的狀態集中放在 store中。改變狀態的方式是提交 mutations，這是個同步的事務。非同步邏輯應該封裝在 action中。
18、Vue- loader是什麼？它的用途有哪些？
它是解析.vue文件的一個載入器，可以將 template/js/style轉換成 JavaScript模塊。
用途是通過 vue-loader, JavaScript可以寫 EMAScript 6語法， style樣式可以應用scss或less, template可以添加jade語法等。
19、請說出vue.cli項目的src目錄中每個文件夾和文件的用法。
assets文件夾存放靜態資源；components存放組件；router定義路由相關的配置；view是視圖；app. vue是一個應用主組件；main.js是入口文件。
20、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？
具體步驟如下。
（1）在 components目錄中新建組件文件，腳本一定要導出暴露的介面。
（2）導入需要用到的頁面（組件）。
（3）將導入的組件注入uejs的子組件的 components屬性中。
（4）在 template的視圖中使用自定義組件。
21、談談你對vue.js的 template編譯的理解。
簡而言之，就是首先轉化成AST（ Abstract Syntax Tree，抽象語法樹），即將源代碼語法結構抽象成樹狀表現形式，然後通過 render函數進行渲染，並返回VNode（ Vue. js的虛擬DOM節點）。
詳細步驟如下。
（1）通過 compile編譯器把 template編譯成AST, compile是 create Compiler的返回值， createCompiler用來創建編譯器。另外， compile還負責合並 option。
（2）AST會經過 generate（將AST轉化成 render funtion字元串的過程）得到 render函數， render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節點，裡面有標簽名子節點、文本等。
22、說一下Vue.js中的MVVM模式。
MVVM模式即 Model- View- ViewModel模式。
Vue.js是通過數據驅動的， Vue. js實例化對象將DOM和數據進行綁定，一旦綁定，和數據將保持同步，每當數據發生變化，DOM也會隨著變化。
ViewModel是Vue.js的核心，它是 Vue.js的一個實例。Vue.js會針對某個HTML元素進行實例化，這個HTML元素可以是body，也可以是某個CSS選擇器所指代的元素。
DOM Listeners和 Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面所有View層中的DOM元素，當發生變化時，Model層的數據隨之變化。Data Bindings會監聽 Model層的數據，當數據發生變化時，View層的DOM元素也隨之變化。
23、v-show指令和v-if指令的區別是什麼？
v-show與v-if都是條件渲染指令。不同的是，無論v-show的值為true或 false，元素都會存在於HTML頁面中；而只有當v-if的值為true時，元素才會存在於HTML頁面中。v-show指令是通過修改元素的 style屬性值實現的。
24、如何讓CSS只在當前組件中起作用？
在每一個Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內寫的CSS只對當前組件起作用，只需要在Style標簽添加Scoped屬性，即 。
25、如何創建vue.js組件？
在vue.js中，組件要先注冊，然後才能使用。具體代碼如下
26、如何實現路由嵌套？如何進行頁面跳轉？
路由嵌套會將其他組件渲染到該組件內，而不是使整個頁面跳轉到 router-view定義組件渲染的位置。要進行頁面跳轉，就要將頁面渲染到根組件內，可做如下配置。
首先，實例化根組件，在根組件中定義組件渲染容器。然後，掛載路由，當切換路由時，將會切換整個頁面。
27、ref屬性有什麼作用？
有時候，為了在組件內部可以直接訪問組件內部的一些元素，可以定義該屬性此時可以在組件內部通過this. $refs屬性，更快捷地訪問設置ref屬性的元素。這是一個原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。
注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。
28、Vue. js是什麼？
Vue. js的目標是通過盡可能簡單的API實現響應式的數據綁定的組件開發。
29、描述vue.js的一些特性。
Vue.js有以下持性。
（1）MVVM模式。
數據模型（ Model）發生改變，視圖（View）監聽到變化，也同步改變；視圖（View）發生改變，數據模型（ Model）監聽到改變，也同步改變。
使用MVVM模式有幾大好處。
（2）組件化開發
（3）指令系統
（4）Vue2.0開始支持虛擬DOM。
但在Vue1.0中，操作的是真實DOM元素而不是虛擬DOM，虛擬DOM可以提升頁面的渲染性能。
30、描述vue.js的特點。
Vue. js有以下特點。
31、在vue.js中如何綁定事件？
通過在v-on後跟事件名稱=「事件回調函數( )」的語法綁定事件。事件回調函數的參數集合( )可有可無。如果存在參數集合( )，事件回調函數的參數需要主動傳遞，使用事件對象要傳遞 $event。當然，此時也可以傳遞一些其他自定義數據。如果沒有參數集合，此時事件回調函數有一個默認參數，就是事件對象。事件回調函數要定義在組件的 methods屬性中，作用域是 Vue. js實例化對象，因此在方法中，可以通過this使用 Vue. js中的數據以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=「事件回調函數( )」。
32、請說明 組件的作用。
當 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
keep-alive>是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現在父組件鏈中。
當在 內切換組件時，它的 activated和 deactivated這兩個生命周期鈞子函數將會執行。
33、axios是什麼？如何使用它？
axios是在vue2.0中用來替換 vue-resource.js插件的一個模塊，是一個請求後台的模。
用 npm install axios安裝 axios。基於 EMAScript 6 的 EMAScript Mole規范，通過 import關鍵字將 axios導入，並添加到 Vue. js類的原型中。這樣每個組件（包括vue.js實例化對象）都將繼承該方法對象。它定義了get、post等方法，可以發送get或者post請求。在then方法中注冊成功後的回調函數，通過箭頭函數的作用域特徵，可以直接訪問組件實例化對象，存儲返回的數據。
34、在 axios中，當調用 axios.post('api/user'）時進行的是什麼操作？
當調用post方法表示在發送post非同步請求。
35、sass是什麼？如何在ue中安裝和使用？
sass是一種CSS預編譯語言安裝和使用步驟如下。
（1）用npm安裝載入程序（ sass-loader、 css-loader等載入程序)。
（2）在 webpack. config. js中配置sass載入程序。
（3）在組件的 style標簽中加上lang屬性，例如lang="scss"。
36、如何在 Vue. js中循環插入圖片？
對「src」屬性插值將導致404請求錯誤。應使用 v-bind:src格式代替。
代碼如下：
5. Web前端企業面試題
答：
一、display和visibility的相同與不同點
1、相同點：display和visibility都有講元素隱藏的意思
2、不同點：display是元素隱藏，隱藏的元素不佔文檔流
而visibility隱藏的元素仍然占文檔流
二、display和visibility的屬性值
1、display
2、visibility
答：
在開發過程中經常需要循環遍歷數組或者對象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他們的異同點
for循環
其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for循環，它用來遍歷數組
for循環中可以使用return、break等來中斷循環
結果：
forEach
對數組的每一個元素執行一次提供的函數（不能使用return、break等中斷循環），不改變原數組，無返回值undefined。
輸出結果：
for…in
循環遍歷的值都是數據結構的鍵值
總結一句: for in也可以循環數組但是特別適合遍歷對象
結果：
for…of
它是ES6中新增加的語法，用來循環獲取一對鍵值對中的值
循環一個數組
循環一個普通對象（報錯）
答：
px：像素（Pixel）,相對長度單位。像素px是相對於顯示器屏幕解析度而言的 。--即解析度不同的機型當前對應的距離可能發生變化。(1Inches=xPx)。
所以相對於同一機型來說是一個絕對的長度單位。
em：是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸 。
以其父級元素為基準來變化長度。所以其演算法不是一個固定的值。
rem：是CSS3新增的一個相對單位（root em，根em） 。
那麼其好用在用可以直接設置HTML的font-size，然後在其子類都是以這個大小為基準變化的值。
在移動設備上，我們常常設置
此方式的目的是為了將當前屏幕(PC)解析度的px轉化成手機端的px，讓px在手機上能夠兼容此方式。
因此，此時看見的12px與PC端的12px無異。但是，如果不寫著個meta的話，那麼，瀏覽器會一直以PC的視圖來決定手機端的px的大小，讓視圖看起來變小了很多。
那麼，響應式頁面則經常配合媒體查詢media 來設置不同解析度下手機的各種不同的配置機構，然後根據父級來變化所有的相對長度。
基礎篇
1.shift
// 刪除原數組的第一項，並返回刪除元素的值，如果數組為空則返回undefined
2.unshift
// 將參數添加到原數組開頭，並返回數組的長度
//註：此方法在ie6.0下
// 測試的返回值始終為undefined，在firefox下測試的返回值為7，所以此方法不可靠
// 一般需要用返回值時可用splice代替
3.pop
// 刪除原數組的最後一項，並返回刪除元素的值；如果數組為空則返回undefined
4.push
// 將參數添加到原數組末尾，並返回數組的長度
5.concat
// 返回一個新數組，是將參數添加到原數組中構成的
6.splice
7.reverse
8.sort(orderfunction)
9.slice(start,end)
10.join(separator)
11.indexOf
12.lastIndexOf
13. Array.isArray()
14. Array.toString()
進階篇
1.forEach
是最為常用的情景，它至於遍歷，可以在獲取當前數據項的前提下，對數據進行修改。它沒有返回值。理解起來也是最容易的。
2.map
map的本意就是映射，也就是將一個值從一種形式映射到另一種形式，比如將key映射到value。它的每一次遍歷都會有一個返回值。這些返回值組合成最終的結果數組。事實就是如此
forEach和map對比
相同點
1）都是循環遍歷數組中的每一項；
2）forEach()和map()匿名函數的參數相同，參數分別是item（當前每一項）、index（索引值）、arr（原數組）；
3）this都是指向調用方法的數組；
4) 只能遍歷數組；
不相同點
1）map()創建了新數組，不改變原數組；forEach()可以改變原數組。
2）遇到空缺的時候map()雖然會跳過，但保留空缺；forEach()遍歷時跳過空缺，不保留空缺。
3）map()按照原始數組元素順序依次處理元素；forEach()遍歷數組的每個元素，將元素傳給回調函數。
3.filter
它致力於從已有的數組中篩選出符合一定條件的數據項，最後的返回值是所有符合條件的數據項構成的數組。它不會修改原來的數組。記住，它的立足點就是篩選。也僅僅是篩選。還有一點需要注意：每一次遍歷都會有一個返回值，它的類型是布爾類型。返回值只有是true，當前遍歷項才會被篩選中。不要試圖在filter中去修改原始數組。
理解: 就是在一堆數據裡面去篩選你需要的數據 或者 剔除你不需要的數據
4.find()
返回通過測試的數組的第一個元素的值,
理解:假如你去一個一群人的地方去找人 你說我找xxb 他要是在那裡就找到 不在那裡就是undefined
在第一次調用 callback 函數時會確定元素的索引范圍，因此在 find 方法開始執行之後添加到數組的新元素將不會被 callback 函數訪問到。如果數組中一個尚未被callback函數訪問到的元素的值被callback函數所改變，那麼當callback函數訪問到它時，它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到。
語法
array.find(function(value, index, arr),thisValue)
value:必須，代表當前元素，其他四個參數都是可選，index代表當前索引值，arr代表當前的數組，thisValue代表傳遞給函數的值，一般用this值，如果這個參數為空，undefined會傳遞給this值
返回值：返回符合測試條件的第一個數組元素的值，如果沒有符合條件的則返回undefined。
擴展: findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。自己try吧
5.every
理解: 這個就像 上課了 老師說 昨天布置的作業 只要有一個人沒有寫完 今天就不講課 然後挨個檢查 當檢查到有一個沒有寫完的時候 就不檢查了 返回 不講課了(false)
6.some
理解: 相當於在一個數組裡面找你想要的那個數 找到了 就返回true 找不到就返回false
7.rece
它這個方法是接收一個函數作為累加器,將數組中的值(從左向右)開始合並,最總為一個值 然後返回出來,callback
他可以傳四個參數:
1,previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue)
2,currentValue:數組中當前被處理的元素
3,index:不啰嗦,自己顧名思義去吧
4,array:返回調用rece的數組
彩蛋: 這里附上前幾天某某人比較喜歡的切割字元串的方法
substring() 和 substr()
相同點： 如果只是寫一個參數，兩者的作用都一樣：都是是截取字元串從當前下標以後直到字元串最後的字元串片段。
不同點： 第二個參數
substr(startIndex, lenth) // 第二個參數是截取字元串的長度（從起始點截取某個長度的字元串）；
substring(startIndex, endIndex) // 第二個參數是截取字元串最終的下標 （截取2個位置之間的字元串,『含頭不含尾'）。
1：在使用vue框架的過程中，我們經常需要給一些數據做一些初始化處理，這時候我們常用的就是在created與mounted選項中作出處理。
首先來看下官方解釋，官方解釋說created是在實例創建完成後唄立即調用。在這一步，實例已完成以下配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
這話的意思我覺得重點在於說掛架階段還沒開始，什麼叫還沒開始掛載，也就是說，模板還沒有被渲染成html，也就是這時候通過id什麼的去查找頁面元素是找不到的。下面看下實例來證明。
所以，一般creadted鉤子函數主要是用來初始化數據。
2：mounted鉤子函數一般是用來向後端發起請求拿到數據以後做一些業務處理。官方解釋如下：
el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
這意思是該鉤子函數是在掛在完成以後也就是模板渲染完成以後才會被調用。下面看實例
下面是結果
nihao
取到了值，這說明這時候vue模板已經渲染完畢。因此，Dom操作一般是在mounted鉤子函數中進行的
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
總結：
通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完後才可以進行，那麼mounted就是不二之選。
methods:{}中的方法都需要主動去觸發，比如點擊click之類的
而created(){}、mounted(){}、裡面的代碼都是自動去執行的，即vue生命周期到了哪一步就直接去執行對應鉤子函數裡面的代碼了，無需手動去執行
created中主要放初始化獲取數據之類，mounted()中掛載到具體的DOM節點
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
mounted 是生命周期鉤子，vue的生命周期中一個實例的mounted只會運行一次。mounted在vue的渲染模板掛載到$el元素上才會調用，很顯然你export的時候el都么有自然不會運行mounted鉤子函數了。
所有的方法都應該在methods里定義，然後在created或者mounted里 使用this調用方法，用這種方式實現初始化
6、Vue中組件之間的傳參方式有哪些方式？
Vue 組件傳參的八種方式總結
Vue 組件的使用不管是在平常工作還是在面試面試中，都是頻繁出現的。因此系統的梳理一下組件之間的傳參還是非常有必要的
一、props 傳參
子組件定義 props 有三種方式:
// 第一種數組方式
// 第二種對象方式
// 第三種對象嵌套對象方式
第三種對象默認支持 4 種屬性，並且都是非必填的。可以隨意使用
父組件傳參的倆種方式
第一種靜態屬性傳參
注意：
1、在不定義 props 類型的情況下 props 接受到的均為 String。
2、當 props 屬性指定為 Boolean 時，並且只有屬性 key 沒有值 value 時接受到的是 true
第二種動態屬性傳參
注意：
1、需要區分非簡寫形式傳入的值是對象，則會對應 props 中多個值
2、會保留傳入值的類型
3、如果是表達式則獲取到的是表達式的計算結果
二、attrs 和listeners
$attrs
$attrs 會獲取到 props 中未定義的屬性（class 和 style 屬性除外）,支持響應式。常用的場景有倆種：
組件嵌套組件時可以使用 $attrs 來支持過多的屬性支持。比如 elementUI 的 table 組件。支持的屬性十幾個，而平常封裝的時候用的最多的也就一倆個。
屬性默認是添加在父組件上的，有時候想把多餘的屬性添加在子組件上（可以結合 inheritAttrs: false 屬性，讓父屬性不接受多餘的屬性）
$listeners 定義的事件都在子組件的根元素上，有時候想加到其他元素上。就可以使用 $listerners。它包含了父組件中的事件監聽器(除了帶有 .native 修飾符的監聽器)
三、$emit 通知
這里有一道考題: for 循環的時候如何拿到子組件的傳值和 for 中循環的值
答案有倆種，一是 $event, 二是 閉包。只是需要注意 $event 只能獲取到第一個值
四、v-model
這個其實是一種通過 emit，on 的組合方式。優點再於同步值方便,寫法優雅。下面三種寫法其實是一個意思
五、插槽
六、$refs, $root, $parent, $children
$root 獲取根組件
$parent 獲取父組件
$children 獲取子組件(所有的子組件，不保證順序)
$refs 組件獲取組件實例，元素獲取元素
七、project / inject
注意：注入的值是非響應的
八、Vuex
這個相當於單獨維護的一組數據，就不過多的說了。
watch，computed和methods的關系
1.watch和computed都是以Vue的依賴追蹤機制為基礎的 ，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴數據）發生變化的時候，所有依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變動。
2.對methods:methods裡面是用來定義函數的，很顯然，它需要手動調用才能執行。而不像watch和computed那樣，「自動執行」預先定義的函數
watch和computed各自處理的數據關系場景不同
1. watch 擅長處理的場景： 一個數據影響多個數據
2. computed 擅長處理的場景： 一個數據受多個數據影響
watch用法 監聽下記haiZeiTuan_Name的值，會改變其他所有的值
結果：this.suoLong會變為 '橡膠海賊團索隆',以此類推
computed用法 監聽下記firstName，secName，thirdName的值，會改變luFei_Name的值
methods和computed的區別例子
注意兩次點擊computed返回的時間是相同的！！
1.兩次點擊methods返回的時間是不同的
2.注意兩次點擊computed返回的時間是相同的
【注意】為什麼兩次點擊computed返回的時間是相同的呢？new Date()不是依賴型數據 （不是放在data等對象下的實例數據） ，所以computed只提供了緩存的值，而沒有重新計算
只有符合：1.存在依賴型數據 2.依賴型數據發生改變這兩個條件 ,computed才會重新計算。
參考：http://www.cnblogs.com/penghuwan/p/7194133.html
答：https://codecat.blog.csdn.net/article/details/100031285
1、Promise
Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大，簡單地說，Promise好比容器，裡面存放著一些未來才會執行完畢（非同步）的事件的結果，而這些結果一旦生成是無法改變的
2、async await
async await也是非同步編程的一種解決方案，他遵循的是Generator 函數的語法糖，他擁有內置執行器，不需要額外的調用直接會自動執行並輸出結果，它返回的是一個Promise對象。
兩者的主要用法、語法就不贅述了，感興趣的同學可以自行查閱 es6中文文檔
兩者的區別
1、Promise的出現解決了傳統callback函數導致的「地域回調」問題，但它的語法導致了它向縱向發展行成了一個回調鏈，遇到復雜的業務場景，這樣的語法顯然也是不美觀的。而async await代碼看起來會簡潔些，使得非同步代碼看起來像同步代碼，await的本質是可以提供等同於」同步效果「的等待非同步返回能力的語法糖，只有這一句代碼執行完，才會執行下一句。
2、async await與Promise一樣，是非阻塞的。
3、async await是基於Promise實現的，可以說是改良版的Promise，它不能用於普通的回調函數。
簡單來看，這兩者除了語法糖不一樣外，他們解決的問題、達到的效果是大同小異的，我們可以在不同的應用場景，根據自己的喜好來選擇使用。
6. 騰訊WEB前端筆試題和面試題答案
如下分享是一份完整的騰訊WEB前端筆試題，大家有空可以練一練！
一、耐心填一填!(每空4分，共24分)
1. 為span設置類a與b,應編寫HTML代碼_
_
_________。
2. 設置CSS屬性clear的值為_both___________時可清除左右兩邊浮動。
3. ____li________標簽必須直接嵌套於ul、ol中。
4. CSS屬性_____margin_______可為元素設置外補丁。
5. 設置CSS屬性float的值為___none_________時可取消元素的浮動。
6. 文字居中的CSS代碼是____text-align:center________。
二、精心選一選!(每題4分，共16分)
1. 下列哪個樣式定義後,內聯(非塊狀)元素可以定義寬度和高度( C )
A. display:inline B. display:none C. display:block D. display:inheric
2. 選出你認為最合理的定義標題的方法( C )
A. 文章標題
B.
文章標題
C.
文章標題
D. 文章標題
3. br標簽在XHTML中語義為( A )
A.換行 B.強調 C.段落 D.標題
4. 不換行必須設置( AC )
A.word-break B.letter-spacing C.white-space D.word-spacing
5. 在使用table表現數據時，有時候表現出來的會比自己實際設置的寬度要寬，為此需要設置下面哪些
屬性值( AD )
A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″
三、判斷對或錯!(每題4分，共24分)
1. CSS屬性font-style 用於設置字體的粗細。 ( × )
2. CSS屬性overflow用於設置元素超過寬度時是否隱藏或顯示滾動條。 ( √ )
3. 在不涉及樣式情況下,頁面元素的優先顯示與結構擺放順序無關。 ( × )
4. 在不涉及樣式情況下,頁面元素的優先顯示與標簽選用無關。 ( √ )
5. display:inline兼容所有的瀏覽器。 ( √ )
6. input屬於窗體元素,層級顯示比flash、其它元素都高。 ( × ) 1 2
7. 常見的web前端面試題及答案分享
1、 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下)
答：行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。兼容性：display:inline-block;*display:inline;*zoom:1。
2、box-sizing常用的屬性有哪些?分別有什麼作用?
答：box-sizing: content-box|border-box|inherit。content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
3、Doctype作用?標准模式與兼容模式各有什麼區別?
答：告知瀏覽器的解析器用什麼文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中，頁面以寬松的向後兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
4、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?
答：HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控制項，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如html5shim。
以上就是環球青藤小編關於web前端面試題的相關分享，希望對大家有所幫助，想要了解更多相關內容，請及時關注本平台並進行查看!