前端面試題

一、基礎

1).  css部分

• 移動端常用適配方式

　　　　px+%

　　　　rem

　　　　vw

• css 垂直水平居中

　　　　已知寬高: 

　　不知寬高 用定位+transform

　　flex 布局:

　　等等..

• rem、em 原理區別

　　　　rem  根據根元素的字體大小進行適配

　　　　em 根據父元素的字體大小進行適配

• 盒模型

　　　　w3c標準合模型  width:content

　　　　IE盒模型 width: content + padding + border

• 清除浮動的幾種方式

　　　　給父元素設定高度

　　　　偽類 

• css畫出一個三角形 

　　　　寬高都設為0 用border 實作效果

• 行內、import 、support 權重優先級

           　　import>行內>Support

• BFC

1. Block Formatting Contexts (塊級格式化背景關系) ，具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性，

2. 只要元素滿足下面任一條件即可觸發 BFC 特性：

　　　　body 根元素

　　　　浮動元素：float 除 none 以外的值

　　　　絕對定位元素：position (absolute、fixed)

　　　　overflow 除了 visible 以外的值 (hidden、auto、scroll)的值為 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個

　　 3. 同一個 BFC 下外邊距會發生折疊

　　 4.BFC 可以包含浮動的元素（清除浮動）

2). html 部分

• h5 新標簽

　　　 header,footer,main,nav,section 等等.

• 瀏覽器內核

  Ie(Ie內核)   火狐（Gecko） 谷歌（webkit） opear(Presto)

1. IE瀏覽器內核：Trident內核，也是俗稱的IE內核；
2. Chrome瀏覽器內核：統稱為Chromium內核或Chrome內核，以前是Webkit內核，現在是Blink內核；
3. Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核；
4. Safari瀏覽器內核：Webkit內核；
5. Opera瀏覽器內核：最初是自己的Presto內核，后來是Webkit，現在是Blink內核；
6. 360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核；
7. 搜狗、遨游、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）；
8. 百度瀏覽器、世界之窗內核：IE內核；
9. 2345瀏覽器內核：以前是IE內核，現在也是IE+Chrome雙內核；

• 瀏覽器兼容

1. css里增加通配符*{margin：0；padding：0}
2. 使用float為img布局 解決圖片默認間距. 等等

　　 由于瀏覽器兼容問題比較開放性 面試的時候 可以跟面試官扯一些你在專案中遇到的兼容方式.如果沒有經驗 可專門百度.

　　 此處放一個參考鏈接 https://www.jianshu.com/p/6afd596440bb

• dom 渲染

　　　瀏覽器決議html原始碼，然后創建一個DOM樹，

　　　瀏覽器決議CSS代碼，計算出最終的樣式資料，

           創建完DOM樹并得到最終的樣式資料之后，構建一個渲染樹，

           當渲染樹創建完成之后，瀏覽器就可以根據渲染樹直接把頁面繪制到螢屏上，

           這個可以根據自己的理解解答 不用死記硬背.

3). js

• get和post 區別

  一個在url后面 一個放在虛擬載體里面（GET引數放在URL后面，post放在虛擬載體里面）

   有大小限制(get有大小限制，post沒有大小限制)

   安全問題（GET比POST更不安全，因為引數直接暴露在URL上，所以不能用來傳遞敏感資訊）

   GET請求引數會被完整保留在瀏覽器歷史記錄里，而POST中的引數不會被保

   應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的

• 資料型別

  Undefined, Null, Boolean, Number, String

  undefined -- 如果這個值未定義；
  boolean -- 如果這個值是布林值；
  string -- 如果這個值是字串；
  number -- 如果這個值是數值；
  object -- 如果這個值是物件或null
  function -- 如果這個值是函式

• JavaScript中的作用域與變數宣告提升
• 陣列的方法（不止增刪改查）

  arr.unshift()--從首端添加元素

  arr.push()--從尾端添加元素

  arr.pop()--洗掉陣列的最后一個元素

  arr.shift()--洗掉陣列的第一個元素

  arr.splice(i,n) -- 洗掉從i(索引值)開始之后的那個元素，回傳值是洗掉的元素

  arr.sort()--陣列排序

  arr.reverse()--陣列倒序  

  arr.concat(3,4)--把兩個陣列拼接起來，

  arr.slice(start,end)--回傳從原陣列中指定開始下標到結束下標之間的項組成的新陣列  

  arr.join()--把陣列變成字串

  arr.split()--把字串變成陣列

• 瀏覽器渲染

  瀏覽器渲染是一開始決議html和css，然后混淆生成dom，最后排列繪制就可以了

• 面向物件、閉包、原型、原型鏈

  閉包就是能夠讀取其他函式內部變數的函式（函式里面套函式），解決必報的方法是在函式內部寫靜態的區域變數

  每個物件（建構式）都有一個prototype屬性，稱之為原型

  原型的值也是一個物件，因此它也有自己的原型，所以把原型串起來就是一個原型鏈

• 事件機制、（冒泡，捕獲）

  事件冒泡：先觸發子元素事件事件，后觸發父元素

  事件捕獲：先觸發父元素事件事件，后觸發子元素

  解決冒泡的方法：event.stopPropgation()

• 跨域及解決方式
• Ajax 原理
• 快取（session、cookie、localstorage）原理，區別
• jQuery 選擇器

  jQuery選擇器共有四大類，分別為基本選擇器，層次選擇器，過濾選擇器和表單選擇器，

• HTTP 狀態碼及含義
• 異步加載和延遲加載

4). 優化

• 前端性能優化的方法
• 優雅降級和漸進增強

二、進階

1).vue

• 組件之間傳值方式有哪些？

1. 父組件向子組件傳遞資料 通過props
2. 子組件像父組件傳遞事件$emit方法　
3. eventbus
4. vuex
5. 快取機制　

• 父子組件 互相呼叫 方法的方式有哪些？　　

　　　　父組件呼叫子組件的方法：this.$refs.子組件ref值.子組件event

　　　　子組件呼叫父組件方法：

　　　　　　this.$parent.event

　　　　　　this.$emit.event(與傳值方式相同)

　　　　　　父組件把事件傳到子組件props 中 子組件呼叫

• vue生命周期的理解  created和 mounted 之間的區別

　　創建：初始化事件、進行資料觀測

　　beforeCreate

　　created（資料已經和data 系結，改變data里的屬性值、視圖會發生變化，由于視圖未出現，如果請求資訊過多，頁面會處于長時間白屏）

　　掛載：判斷物件是否有el選項，如果有繼續編譯，如果沒有 生命周期停止，直到vue實體呼叫vm.$mount(el).

　　beforeMount （模板編譯完成 但未掛載 獲取不了DOM）

　　mounted（組件掛載完成，能成功獲取DOM，所有的子組件不一定會被掛載，可以等到整個視圖都渲染完畢后 用vm.$nextTick）

　　更新：vue發現data 資料更新 會重新渲染

　　beforeUpdate

　　updated

　　銷毀：常用于組件變更時的狀態存盤 和 記憶體釋放

　　beforeDistory

　　distoryed(不會自動移除dom 節點，可以手動在生命周期里操作)

• vue組件中為什么data 是一個函式 而不是一個物件

　　因為JavaScript的特性所導致，在component中，data必須以函式的形式存在，不可以是物件，
　　組建中的data寫成一個函式，資料以函式回傳值的形式定義，這樣每次復用組件的時候，都會回傳一份新的data，相當于每個組件實體都有自己私有的資料空間，它們只負責各自維護的資料，不會造成混亂，而單純的寫成物件形式，就是所有的組件實體共用了一個data，這樣改一個全都改了，

• vue computed 和 watch 的區別 使用場景

　　　computed:

1. 有快取機制、依賴項發生改變重新計算，
2. 不支持異步，當computed 內部有異步操作時、無法監聽資料變化
3. 不需要在data里宣告
4. 一個屬性受多個屬性影響時使用
5. 使用 場景：購物車結算

　　　watch:

1. 沒有快取機制，資料發生變化直接觸發
2. 支持異步操作
3. 必須在data里宣告
4. 資料變化時執行異步或開銷較大的操作（一條資料影響多條資料的時候）
5. 使用場景：搜索、滾動錨點定位

• vuex action 和 mutation之間的區別

　　　　mutation 定義的方法動態修改Vuex 的 store 中的狀態或資料，view 層通過 store.commit來分發，必須同步執行，

　　　　action可以理解為通過將mutations里面處里資料的方法變成可異步的處理資料的方法，簡單的說就是異步操作資料，view 層通過 store.dispath 來分發 action，不能直接操作state，

• v-show和v-if指令的共同點和不同點

　　　　都是隱藏不可見元素

　　　　v-show  不管條件是否為真 都會渲染 控制元素的display 屬性 來控制顯示隱藏 有更高的初始渲染開銷

　　　　v-if  是根據條件來判斷是否渲染  頻繁的重建和銷毀節點 會有更高的切換開銷

• vue優點和缺點

　　　　優點：輕量級

　　　　資料驅動視圖 組件化 

　　　　高效、快速、模塊友好

　　　　缺點：不利于seo

　　　　不支持低版本瀏覽器

　　　　第一次加載首頁耗時過長

　　　　不能使用瀏覽器的導航 需要自行實作路由前進后退

• 說出幾種vue當中的指令和它的用法

　　　　v-model  雙向資料系結

　　　　v-for 回圈遍歷 比v-if 優先級高

　　　　v-show、v-if  隱藏

　　　　v-once 只系結一次

• vue-loader是什么？使用它的用途有哪些？

　　　　vue 檔案加載器， 將style/template/js  轉換成js模塊，js可以寫es6、style樣式可以scss或less、template可以加jade等

• 為什么使用key?

　　　　需要使用key來給每個節點做一個唯一標識，Diff演算法就可以正確的識別此節點，
　　　　作用主要是為了高效的更新虛擬DOM，

• $nextTick的使用

　　　　當你修改了data的值然后馬上獲取這個dom元素的值，是不能獲取到更新后的值，
　　　　你需要使用$nextTick這個回呼，讓修改后的data值渲染更新到dom元素之后在獲取，才能成功

• vue 雙向資料系結原理？

　　　　采用資料劫持和發布者-訂閱者模式的方式，通過object.defineProperty劫持各個屬性的getter、setter 方法，在資料變動時發布訊息給訂閱者，觸發相應監聽回呼，當把一個普通 Javascript 物件傳給 Vue 實體來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter，用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化，vue的資料雙向系結 將MVVM作為資料系結的入口，整合Observer，Compile和Watcher三者，通過Observer來監聽自己的model的資料變化，通過Compile來決議編譯模板指令（vue中是用來決議 　　　{{}}），最終利用watcher搭起observer和Compile之間的通信橋梁，達到資料變化 —>視圖更新；視圖互動變化（input）—>資料model變更雙向系結效果，

• vue路由實作，hash模式 和 history模式區別

　　hash: hash 雖然出現在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面，僅hash符號之前的內容會被包含在請求中，因此對后端來說，即使沒有做到對路由的全覆寫，也不會回傳404錯誤

　　history: 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，（需要特定瀏覽器支持）這兩個方法應用于瀏覽器的歷史記錄堆疊，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能，只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求，前端發出的url請求必須和實際像后端發出的請求一致，否則會回傳404錯誤

• keepalive

　　　　是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染，在vue 2.1.0 版本之后，keep-alive新加入了兩個屬性: include(包含的組件快取) 與 exclude(排除的組件不快取，優先級大于include) ，

• $router 和 $route 區別

　　　　$router是VueRouter的實體物件，有push、replace等方法；

　　　　$route是路由資訊物件、獲取頁面傳遞的引數，path、params、hash、query等路由資訊引數；

• vue常用修飾符

　　　　.prevent  阻止事件默認行為 =event.preventDefault()

　　　　.stop 阻止事件冒泡 = event.stopPropagation()

　　　　.self  事件僅作用于元素本身，子組件不會觸發

　　　　.capture  事件偵聽，事件捕獲

• params和query的區別

　　query要用path來引入，params要用name來引入，接收引數都是類似的，分別是this.$route.query.name和this.$route.params.name，
　　url地址顯示：query更加類似于我們ajax中get傳參，params則類似于post，說的再簡單一點，前者在瀏覽器地址欄中顯示引數，后者則不顯示
　　注意點：query重繪不會丟失query里面的資料，params重繪 會 丟失 params里面的資料，

標籤：其他

上一篇：必備演算法：遞回！無論你是前端開發，還是后端開發，都需要掌握它！

下一篇：Markdown 使用指南（完全版）