100%要記的面試題

時間 2019-11-24

原文原文鏈接

1、項目上線流程：

技術跟產品UI開需求討論會，提出開發需求
產品人員進行原型設計。
UI進行原畫等繪製工做
前端人員接收各類圖形元素（會若有動態效果會有視頻或動圖交互）
先後端人員對接接口, 並給接口文檔
先後端同時開始開發
先後端聯合調試
測試人員測試
上線部署、服務重啓
新版本發佈上線

2、本地存儲 sessionStorage，localStoragejis，cookies

Loca和session都有2個方方法刪除數據，clear()刪除全部數據，localStorage.removeItem(「tKey「)刪除單條數據; 他們只能存字符串用JSON.parse()，拿到數據用JSON.stringify()進行轉換首先總的來講，三者都是用於持久化數據存儲的手段，都是存儲在瀏覽器端，且同源（協議，端口號，都域名相同） localStorage和sessionStorage都是Web存儲，大小5M左右，徹底存儲在客戶端，它們是由於本地存儲數據而存在 cookies也是存儲在瀏覽器端的，大小不超過4k，做爲http規範的一部分，它是經過瀏覽器的請求將數據傳給服務器的。html

區別：

存儲空間： localStorage，sessionStorage，都爲5M cookies 爲4k
有效期
1. localStorage ———-永久存儲，永不失效，除非手動刪除
2. sessionStorage——–數據存儲在窗口對象中，窗口關閉後，數據丟失
3. cookies—————–只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
做用域
1. sessionStorage僅當前頁面有效一旦關閉就會被釋放。也不會隨瀏覽器發送給服務器。
2. localStorage和cookies是在全部同源窗口中共享的

3、promise

就例如用原生ajax寫請求的時候是異步，返回到結果以後咱們拿到了數據，並且必需要再這後面寫邏輯代碼，這樣就會不少東西再裏面，一層套一層，結構就很是很差看，就容易形成回調地獄，若是promise的話，只要執行完ajax完以後執行then或away，我就執行下一步，這樣的結構很簡單不少，promise等待語諾ajax拿到數據後進行下一步。 Then就是，away就是監控promise裏面執行的異步操做，在完成以後立馬執行away。前端

Then是請求執行成功以後執行的方法，catch 是請求失敗或者出現錯誤以後執行的方法。vue

4、閉包的原理:

概念：外函數內部嵌套內函數，同時將內函數返回。內部函數引入外部函數的變量及參數，不會被垃圾回收機制所收回。
缺點：可讓一個變量長期駐紮在內存當中不能被釋放。過分使用閉包，會佔用過多的內存，形成性能問題。

咱們一個函數放着一個局部變量a，外面的函數式訪問不到裏面的變量a的，可是我能夠在函數裏面定義一個b函數，return這個a變量出去，外面就能夠拿到a變量了，這樣作的壞處就是這個a的變量會永遠保存在內存中，不會被垃圾回收機制回收，形成內存泄露，在咱們每次操做前，操做後例如C拿到它的值，完成邏輯運算後，直接把C定義爲null，這樣就能夠解決內存溢出問題。html5

5、面向對象，原型鏈，工廠模式，構造函數模式：

世間萬物皆對象，對象有具體的的實例化,任何方法或者屬性都要寫在對象(類)裏面，就是不斷的建立對象使用對象指揮對象作事。webpack

工廠模式：通常操做是咱們先new一個對象，一開始就用字面量形式，對象點什麼點什麼的方式很費勁，可是若是咱們工廠模式，就是先定義一個函數，裏面new一個對象，而後return一個對象，咱們能夠調用這個對象去新建不少個對象是吧？可是工廠模式會有一個缺點，就是沒法識別這是誰增的，增長了系統的複雜性。工廠模式最大的優勢在於實現對象的建立和對象的使用分離，將對象的建立交給專門的工廠類負責web

構造函數模式：就是裏面都是放構造函數，裏面都是放this.name=name，可是這樣能夠解決一個函數到底是誰生的，可是全部對象都會有這樣的一個方法，他們的指針都是不一致的，這樣並非咱們想要的，因此咱們就引入了原型：原型就是構造函數方法，其中一個有一個自定義與原型重構函數方法，裏面放的也是this，可是裏面的方法會存放在一個叫作propotype裏面，這是一個原型對象，這裏面放的是存放公共公有屬性，這就是原型。ajax

原型鏈就是：咱們的原型會生出不少不少的兒子，可是可能咱們的原型可能也是別人的兒子，上面可能還有一個原型，好比說咱們在其中一個裏面找一個a方法，在這個原型裏面找不到這個方法就會沿父親往上找，這就是原型鏈。vuex

6、你如何實現下拉刷新

一、先要設置一個數組，存放訂單信息，
二、設置一個開關避免數據請求重複，根據後端提供的API設置當前頁數，總頁數，每頁多少條信息。
三、在methods裏面定義方法，經過請求的參數中的ID判斷髮起對應頁數的請求。
四、根據當前頁數是否爲1來判斷，同時將請求回來的數據push進定義的數組中，在對頁數進行++。
五、判斷當前頁數是否小於中頁數來做爲依據是否進行請求。
六、使用生命週期created在進入訂單頁面先觸發一次數據請求渲染第一頁。

7、如何調用高德地圖API實現定位功能。

一、須要去申請一個百度地圖祕鑰。
二、進行頁面佈局，須要安裝vue-Bmap，新建mapConfig.js文件，用來放置申請的祕鑰等相關變量參數由於個人功能還須要在指定城市搜索，因此定義了一個mapCityName來存儲城市名。
三、在組件中建立一個容器，用來顯示百度地圖寬度爲100%；組建中引入Bmap
四、在methods方法裏面構建方法，實例化地圖加載地圖搜索插件，實現拖拽，拖放等功能。
五、用到生命週期created，若是已載入百度地圖API，則直接初始化地圖，不然先載入API。

8、組件通訊

一、vuex的底層原理：首先，vuex裏面有5大核心概念，經常使用的有4個，state，mutation，action，我寫的組建。我要在組件裏面進行this.$stor.state.data,咱們要調用action的方法的話，用到的displaych，若是想拿到mutation的方法，咱們也能夠用commit調用mutation裏面的方法。 mapActions,mapMutations,mapGetters
二、bua總線，自定義事件，自定義一個事件給他，在子組件能夠給bus事件傳值，而後父件能夠從裏面拿值。
三、父子傳值父給子傳值，就是經過props這個參數把父組件的值傳給子組件，這樣作有個缺陷，就是子怎麼傳給父？

9、ES6(簡單說一些常常用的方法)

十大新特性：json

默認參數
箭頭函數
let，const
字符串模板
拓展運算符
導入導出模塊
for-of
解構賦值
new Set()

Let和var區別：

let聲明的變量不能在聲明變量以前調用，而var聲明的變量就能夠用使用。
var定義的變量是全局變量或者函數變量，let定義的變量是塊級的變量。

Let和const區別：

let聲明的變量能夠改變，值和類型均可以改變，沒有限制。
const聲明的變量不得改變值，這意味着，const一旦聲明變量，就必須當即初始化，不能留到之後賦值。

10、數組的方法，增刪改查（詳細點）深度拷貝，淺度拷貝

方法有：Push、slilce、concat、reverse、includes、sort、map ES6（for-of）、ES5（forEach、for-in）、通用for循環後端

例如：我這裏定義一個數組arr1，放1234567，又定義了一個空數組arr2，咱們要賦值給空數組，那麼深拷貝和淺拷貝的區別就在於，淺拷貝就是直接arr2=arr1，這樣實際上是咱們把arr1的指針指向給了arr2，可是若是咱們改變arr2，會影響到arr1，這一般咱們不但願看到的，因此呢咱們就要用深拷貝，不是指針的改變，而是用循環的方式，解構賦值方式，map、forEach讓arr1的每個值都過去，深拷貝和淺拷貝也不只僅做用於數組，也能夠做用於對象。

11、生命週期

Vue的生命週期有8個，我就講講經常使用的幾個吧

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated beforeDestroy、destroyed、errorCaptured

經常使用的：

Created（建立後）：是用來請求數據，用戶打開頁面在顯示前就經過這個生命週期拿到數據的。
Mounted（掛載後）：到這一步，就表示整個vue實例已經初始化完成，進入運行階段，若是要使用某些插件操做DOM節點，就在mounted中進行
Updated：的話我就用來簡單的例子說明一下，例如2個組件傳值，例如選項卡，用戶點擊其中一個項目，咱們要傳一個下標過去另外一個組件裏面改變裏面的ajax請求的值，這個方法就是在updated裏面執行的，可讓給用戶呈現不一樣的信息。
Destroyed：的話例如咱們切換路由的時候，一些用不到的變量，定時器的這些東西會緩存起來，致使內存泄漏，影響性能問題，咱們就能夠用destroyed這個銷燬觸發的生命週期把這些東西銷燬。

12、路由生命鉤子

beforeEnter：咱們在params路由裏配置了bdforeEnter的鉤子函數，函數咱們採用了ES6的箭頭函數，須要傳遞三個參數。
to:路由將要跳轉的路徑信息，信息是包含在對像裏邊的。
from:路徑跳轉前的路徑信息，也是一個對象的形式。
next:路由的控制參數，經常使用的有next(true)和next(false)。

路由攔截：

在router裏面判斷，在跳轉該路由的時候驗證用戶的登錄信息，若是驗證不經過就跳轉到登錄頁面，這個導航須要再寫在beforEach裏面，還有一個是ajax請求的時候有響應攔截和請求攔截，就是token令牌，就是用戶第一次登錄的時候會把帳戶密碼發送給服務器驗證，若是驗證經過，服務器會返回一個令牌，咱們就把這個令牌進行本地存儲，在用戶下次進來的時候那着這個令牌跟ajax請求一塊兒發送服務器驗證，經過以後就不用登錄了。

十3、keepalive activied

Keepalive經常使用在是否緩存該組件或路由，在keepalive 裏面定義一個屬性include=「a」，那麼包裹在裏面的名字爲a的component的組件將，exclude就是跟include。

十4、Webpack

咱們項目是一個總體，webpack經過一個入口文件，將從這個問題件開始，找到項目裏面全部依賴的文件，使用loader處理他們，最後打包成爲瀏覽器能夠識別的js文件。

十6、狀態碼

200，請求成功，
304未修改。所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源。
404找不到資源，多是url錯誤。
500服務器內部錯誤，沒法完成請求

十7、怎麼解決跨域

咱們公司通常都是用服務器代理，後端都幫我作好了接口，咱們直接請求就好了，後端只須要弄個響應頭就能夠了，可是要我本身解決跨域能夠用jsonP來作，可是如何寫我可能要看文檔才能作，好像是利用script標籤能加載其餘域名的js文件的原理，來實現跨域數據的請求，還有一個CORS，就是跨域資源共享，就是在頭部加一個東西，在請求頭的時候加一句東西，讓服務器設置一個頭部，CORS須要瀏覽器和服務器同時支持，這樣就能夠解決。

十8、Ajax底層原理

New一個Request請求對象，經過onreadystatechange監聽裏面的狀態，看是否返回數據，拿到數據就對數據進行處理。
複製代碼

十9、雙向數據綁定原理

減輕Controller層或者View層的壓力，實現更加清晰化代碼。經過對ViewModel層的封裝：封裝業務邏輯處理，封裝網絡處理、封裝數據緩存等，讓邏輯處理分離出來，而且不須要處理Model數據，使得Controller層或者View層結構簡單，條理清晰。
複製代碼

二10、VUE的Computed（追蹤器），watch（監聽器）的區別

舉個例子，若是data裏面有個數值0，如何然這個數值經過一系列的操做變成其它10，這個就在computed的做用，watch就是監聽數據的改變，好比說這個0變成了10，這個數值改變了，立馬執行watch裏面的方法。若是要調用一個數據，在Watch下面是一對一的，因此在調取Watch的參數的話每次都要從新執行一遍，性能很差， Computed下面是寫不少參數，都跑一遍，把邏輯結果保存在內存裏面，下次調用的時候把內存結果本身返回給你，性能更優效率更高。

總結：

Computed通常用於計算屬性，Watch通常用於監聽數據變化，當數據發生變化的時候，執行某一項操做

二十一. CSS3有哪些新特性？

1.選擇器
2.CSS3 邊框（Borders）（圓角邊框，添加陰影框）
3.CSS3 背景（background-clip、background-size）
4.CSS3 漸變（線性漸變、徑向漸變）
5.CSS3 文本效果（text-overflow(修剪刀)、text-shadow(陰影)）
6.CSS3 字體
7.CSS3 轉換和變形（transform）
8.CSS3 過渡（transition）
9.CSS3 動畫（animation）
10.CSS3 多媒體查詢
11.CSS3伸縮佈局盒模型(彈性盒)

二12、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分HTML和HTML5？

新特性：

1）拖拽釋放(Drag and drop) API
2）語義化更好的內容標籤（header,nav,footer,aside,article,section）
3）音頻、視頻API(audio,video)
4）畫布(Canvas) API
5）地理(Geolocation) API
6）本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
7） sessionStorage 的數據在瀏覽器關閉後自動刪除
8）表單控件，calendar、date、time、email、url、search
9）新的技術webworker, websocket, Geolocation

移除的元素：

1）純表現的元素：basefont，big，center，font, s，strike，tt，u；
2）對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

1）IE8/IE7/IE6支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式（固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）

二十3、響應式佈局

① 設置 Meta 標籤在標籤里加入這個meta標籤。
②經過媒介查詢來設置樣式 Media Queries Media Queries 是響應式設計的核心。· 它根據條件告訴瀏覽器如何爲指定視圖寬度渲染頁面。假如一個終端的分辨率小於 980px，那麼能夠這樣寫： @media screen and (max-width: 980px) { #head { … } #content { … } #footer { … } }
③設置多種試圖寬度如咱們要設定兼容 iPad 和 iphone 的視圖，那麼能夠這樣設置： /** iPad / @media only screen and (min-width: 768px) and (max-width: 1024px) {} / iPhone **/ @media only screen and (min-width: 320px) and (max-width: 767px) {}

二十4、Web前端性能優化

屏蔽 （屏蔽開發環節的一些提示信息和無關的報錯信息進行屏蔽）
對項目的的文件進行壓縮
對路由組件進行懶加載
V-for 的item 添加key值，方便vue內部準肯定位列表數據減小對比
細分vue組件，方便在組件信息更新的時候不會形成大規模從新渲染。
減小watch使用
內容圖片按需加載
使用loading讓用戶看到數據正在請求而不是一直白屏影響體驗。
複製代碼

二十5、數組去重，對象合併。

方法有：new Set()，sort()排序去除相等項，for...of + includes()，雙重 for 循環，Array.filter() + indexOf 咱們能夠定義2個數組合，將兩個數組拼接爲一個數組，而後使用 ES6 中的 Array.filter() 遍歷數組，並結合 indexOf 來排除重複項