前言

面試題是永遠都準備不完的！！！！！

前端常見的一些問題

1.前端性能優化手段？

1. 盡可能使用雪碧圖

2. 使用字體圖標代替圖片

3. 對HTML，css，js 文件進行壓縮

4. 模塊按需加載

5. 資源懶加載與資源預加載

6. 避免使用層級較深的選擇器及減少DOM深度

2.單頁面應用和多頁面應用的區別及優缺點？

單頁面的概念： 單頁面應用(SPA)，其實就是指只有一個主頁面的應用，類似前端現在的三大框架，React.Vue,Angular 瀏覽器一開始要加載所有必須的html,js css。所有的頁面內容都包含在這個所謂的主頁面中。

單頁面的原理：利用js感知到URL的變化，通過這一點，可以用js動態的將當前的頁面內容清除掉，然后將下一個頁面的內容掛載到當前的頁面上。頁面每次切換跳轉時，并不需要做html文件的請求，這樣就節約了很多http發送延遲，我們在切換頁面的時候速度很快。

單頁面的優點：

1. 加載速度快，用戶體驗好，內容的改變不需要重新加載整個頁面，基于這一點SPA對服務器壓力較小。

2. 前后端分離

3. 頁面視覺效果良好

單頁面的缺點：

1. 不利于SEO（搜索引擎優化）

2. 頁面初次加載時比較慢

3. 頁面復雜度提高很多

多頁面的概念： 多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整個頁面都刷新，每次都請求一個新的頁面。

多頁面的優點：首屏加載時間快，SEO效果好

多頁面的缺點：頁面切換慢，每次切換頁面都需要選擇性的重新加載公共資源

3. var，let，const的區別？

var：var的作用域是函數作用域，在一個函數內利用var聲明一個變量，則這個函數只在這個函數內有效，存在變量提升。

let ：作用域是塊級作用域 不存在變量提升，不允許重復定義。

const ：一般用來聲明常量，且聲明的常量是不允許被改變的，聲明的時候就賦值，不存在變量提升，不允許重復定義。

4. 箭頭函數和普通函數的區別？

箭頭函數：

1.?this指向：箭頭函數指向 定義時所在的作用域中的this指向

2. 箭頭函數作為匿名函數，是不能作為構造函數的，不能使用new

3. 箭頭函數不能換行

普通函數：

1.?this指向：誰調用就指向誰

5. 流式布局和響應式布局?

流式布局： 使用非固定像素來定義網頁內容，也就是百分比布局，通過盒子的寬度設置成百分比來根據屏幕的寬度來進 行伸縮，不受固定像素的限制，內容向兩側填充。

響應式布局： 利用CSS3 中的 Media Query(媒介查詢)，通過查詢 screen 的寬度來指定某個寬度區間的網頁布局。

6. css優先級算法？

!important>內聯>ID選擇器>class選擇器>元素選擇器>通配符選擇器>繼承>瀏覽器默認屬性

7. null和undefined的區別？

undefined：類型只有一個，即undefined，當聲明變量還未被初始化時就是undefined

null：類型也只有一個值，即null。null用來表示尚未存在的對象，常用來表示函數企圖返回一個不存在的對象

8.?http和https的區別？

https：是以安全為目標的HTTP通道，簡單講是HTTP的安全版本，通過SSL加密。

http：超文本傳輸協議。是一個客服端和服務器端請求和應答的標準（tcp）,使瀏覽器更加高效，使網絡傳輸減少。

9. ajax的理解？

ajax的原理：原理：相當于在用戶和服務器之間加一個中間層（ajax引擎),使用戶操作與服務器響應異步化。

ajax的優點：在不刷新整個頁面的前提下與服務器通信維護數據。不會導致頁面的重載可以把前端服務器的任務轉接到客服端來處理，減輕服務器負擔，節省寬帶。

ajax的劣勢：不支持back。對搜索引擎的支持比較弱；不容易調試 怎么解決呢？通過location.hash值來解決Ajax過程中導致的瀏覽器前進后退按鍵失效，解決以前被人常遇到的重復加載的問題。主要比較前后的hash值，看其是否相等，在判斷是否觸發ajax。

10. Html5新增哪些新特性？移出了哪些元素 ？

H5新增特性：

1. 用于繪畫的canvas元素

2. 用于媒介回放的video和audio元素

3. 對本地離線存儲的更好的支持（本地存儲）

4.新增標簽： header? ? footer? ?article? nav? ?section

5.新增表單控件：calender? date? time? ?email? ?url? search

移除的元素：basefont? ?big? ?center? font? s? strike? tt? u

11.移動端點透問題，如何解決？

問題：點透問題出現的原因就是移動端click事件300ms延遲問題，當點擊上層元素時，先觸發touchstart事件，然后在300ms后會觸發click事件，而此時上層元素已經消失，所以下邊的元素會觸發click事件，這就是點透問題。

解決方法：

1. 使用一個透明遮罩，屏蔽所有事件，然后400ms（對于IOS來說是個理想值）后自動屏蔽。

2. touchstart換成touchend，因為觸發touchend需要200ms所以可以把觸發時間這個原理問題解決掉。

3. zepto最新版已經修復了這個問題，或者使用fastclick等通用庫。

4. 直接使用click，不考慮延遲。

5.下層避開click事件，如a鏈接改為span等標簽，使用js跳轉頁面。

12. rem em px的區別？

px：像素(Pixel)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的，是一個虛擬長度單位，

em：是相對長度單位，相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置， 則相對于瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此并不是一個固定的值。

rem： 是 CSS3 新增的一個相對單位(root em，根 em)，使用 rem 為元素設定字體大小時，仍然是相對大小， 但相對的只是 HTML 根元素。

13. http常見狀態碼？

405：客戶端請求的額方法被禁止

408：服務器等待客戶端發送的請求時間過長，超時

200：服務器成功處理了請求

400：客戶端發送了一個錯誤的請求

404：未找到資源

500：服務器內部出現錯誤

501：服務器遇到錯誤，使其無法對請求提供服務

14.什么是同步，異步？

同步：由于js單線程，同步任務都在主線程上排隊執行，前面任務沒有執行完成，后面的任務會一直等待。

異步：不進入主線程，進入任務隊列，等待主線程任務執行完成，開始執行。最基本的異步操作SetTimemot和SetInterval,等待主線程任務執行完，在開始執行里面的函數。

15. DOCTYPE的作用是什么？

<!DOCTYPE>位于文檔的最頂部，它可以告訴瀏覽器按何種規范解析頁面。

16. 請描述一下cookies、sessionStorage和localStorage的區別？

sessionStorage：用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

localStorage：用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

Cookie：它的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。WebStorage擁有setItem、getItem、removeItem、clear等方法，不像cookie需要前端開發者自己封裝setCookie、getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在，而WebStorage僅僅是為了在本地“存儲”數據而生。

17. 簡述一下src與href的區別？

src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯系。

18. 一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

1. 圖片懶加載，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優先加載。

2. 如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和后一張優先下載。

3. 如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。

4. 如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。

5. 如果圖片展示區域小于圖片的真實大小，則因在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮后大小與展示一致。

19. 談談以前端角度出發，做好SEO需要考慮什么？

1. 了解搜索引擎如何抓取網頁和如何索引網頁，以及如何對搜索結果進行排序等。

2. Meta標簽優化：主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字比如Author（作者），Category（目錄），Language（編碼語種）等。

3. 如何選取關鍵詞并在網頁中放置關鍵詞，關鍵詞分析和選擇是SEO最重要的工作之一。首先要給網站確定主關鍵詞（一般在5個上下），然后針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。

4. 了解主要的搜索引擎，不同的搜索引擎對頁面的抓取和索引、排序的規則都不一樣。

5. 按點擊付費的搜索引擎里面也大有優化和排名的學問，你得學會用最少的廣告投入獲得最多的點擊。

6. 發外鏈。

7. 合理的標簽使用。

20. 有哪些方式可以對一個DOM設置它的CSS樣式？

1. 外部樣式表，引入一個外部css文件。

2. 內部樣式表，將css代碼放在<head>標簽內部。

3. 內聯樣式，將css樣式直接定義在HTML元素內部。

21. CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范圍內？

1. display:none;（隱藏后不占位置）

2. visibility:hidden;（隱藏后依然占位置）

3. overflow:hidden;

4. 設置寬高為0

22. 行內元素和塊級元素的具體區別是什么？行內元素的padding和margin可設置嗎？

塊級元素特性：總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示；寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制；

行內元素特性：和相鄰的行內元素在同一行；寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設置的），就是里面文字或圖片的大小。

行內塊級元素：<input> 、<img> 、<button> 、<texterea> 、<label>

23. rgba()和opacity的透明效果有什么不同？

opacity作用于元素，以及元素內的所有內容的透明度。

rgba()只作用于元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果）

rgba和opacity的效果對比

24. SASS、LESS是什么？大家為什么要使用它們？

它們是CSS預處理器。它是CSS上的一種抽象層。它們是一種特殊的語法/語言編譯成CSS。

例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數。LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可以在服務端運行 (借助 Node.js)。

為什么要使用它們？

1. 結構清晰，便于擴展。

2. 可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復處理，減少無意義的機械勞動。

3. 可以輕松實現多重繼承。

4. 完全兼容 CSS 代碼，可以方便地應用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。

25. CSS中link和@import的區別是？

Link屬于html標簽，而@import是CSS中提供的。

在頁面加載的時候，link會同時被加載，而@import引用的CSS會在頁面加載完成后才會加載引用的CSS。

@import只有在ie5以上才可以被識別，而link是html標簽，不存在瀏覽器兼容性問題。

Link引入樣式的權重大于@import的引用（@import是將引用的樣式導入到當前的頁面中）

26. 為什么要初始化樣式？

由于瀏覽器兼容的問題，不同的瀏覽器對標簽的默認樣式值不同，若不初始化會造成不同瀏覽器之間的顯示差異。初始化CSS會對搜索引擎優化造成小影響。

27. HTML與XHTML有什么區別？

1. 所有的標記都必須要有一個相應的結束標記

2. 所有標簽的元素和屬性的名字都必須使用小寫

3. 所有的 XML 標記都必須合理嵌套

4. 所有的屬性必須用引號 "" 括起來

5. 把所有 < 和 & 特殊符號用編碼表示

6. 給所有屬性賦一個值

7. 不要在注釋內容中使用 "--"

8. 圖片必須有說明文字

28. 談談你對web標準及w3c的理解與認識。

? ? ? ? 標簽閉合，標簽小寫，不亂嵌套，提高搜索機器人搜索幾率，使用外鏈css和js腳本，結構行為表現的分離，頁面下載與加載速度更快，內容能被更多的用戶和更廣泛的設備訪問，更少的代碼和組件，容易維護，改版方便，不需要改變頁面內容，提供打印版不需要復制頁面內容，提高網站的易用性。

29. 行內元素有哪些，塊級元素有哪些，css的盒模型包括什么？

行內元素：span input b u i s select

塊級元素：div p h1-h6 form ul

css盒模型：內容content + 內邊距padding + 邊框border + 外邊距 margin

30. 列出display的值，說明它們的作用。position的值，relative和absolute的定位原點分別是？

display：

inline：按照行內元素樣式顯示

block：按照塊級元素樣式顯示

inline-block：按照行內塊級元素樣式顯示

none：隱藏元素

position：

static：靜態定位，默認值，標準流中的元素都是靜態定位

relation：相對定位，相對于原來的位置移動，依然占據著原來的位置

absolute：絕對定位，若元素沒有父元素，或者父元素沒有定位，則相對body定位，若父元素有定位（非static），則相對父元素定位，絕對定位的元素脫離標準流

fixed：固定定位，相對瀏覽器邊框定位，固定定位的元素也脫離標準流

31. 清除浮動有哪些方法？

1. 額外標簽法（會增加標簽，一般不用）：在浮動的盒子之下再放一個標簽，在這個標簽中使用clear:both，以此來清除浮動。

2. 使用overflow:hidden屬性：找到浮動盒子的父元素，給它添加overflow:hidden屬性，即可清除浮動的影響。（一般也不用此方法清除浮動，因為溢出的元素會被隱藏）

3. 使用偽元素清楚浮動：

.clearfix:after{content:'';height:0;line-height:0;display: block;overflow: hidden;clear: both;}

Javascript方面：

1. 列舉你知道的強制類型轉換和隱式類型轉換？

強制轉換：parseInt()、parseFloat()、Number()、String()、.toString()、Boolean()

隱式轉換：加（例外：不能是算式中，而需要加在變量前）減乘除及取余，!!

2.split() 、join() 的區別?

前者是切割成數組的形式，后者是將數組轉換成字符串。

3. 數組方法pop() push() unshift() shift()?

push()尾部添加、pop()尾部刪除、unshift()頭部添加、shift()頭部刪除

4.call和apply的區別?

call：

語法：call(thisObj，Object1,Object2...)

定義：調用一個對象的一個方法，以另一個對象替換當前對象。

說明：call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj。

apply：

語法：apply(thisObj，[argArray])

定義：應用某一對象的一個方法，用另一個對象替換當前對象。

說明：如果 argArray 不是一個有效的數組或者不是 arguments 對象，那么將導致一個 TypeError。

如果沒有提供 argArray 和 thisObj 任何一個參數，那么 Global 對象將被用作 thisObj， 并且無法被傳遞任何參數。

5.添加 刪除 替換 插入到某個節點的方法?

obj.appendChid()? 添加

obj.insertBefore()? 插入

obj.replaceChild()? 替換

obj.removeChild()? 刪除

6. javascript的本地對象，內置對象和宿主對象分別是什么？

本地對象為array、obj、regexp 等可以new實例化

內置對象為gload、Math 等不可以實例化的

宿主為瀏覽器自帶的document、window 等

7.window.onload和document.ready的區別？

1. window.onload是在dom文檔樹加載完和所有文件加載完之后執行一個函數document.ready原生中沒有這個方法，jquery中有$().ready(function)，在dom文檔樹加載完之后執行一個函數（注意，這里面的文檔樹加載完不代表全部文件加載完）。

2. $(document).ready要比window.onload先執行。

3. window.onload只能出來一次，$(document).ready可以出現多次。

8."=="和"==="的不同?

前者只比較值，會自動轉換類型。

后者比較值和類型。

9.?javascript的同源策略？

一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機名、協議和端口號的組合。

10.?JavaScript的數據類型都有哪些？

基本數據類型：String、boolean、Number、undefined、null

引用數據類型：Object(Array、Date、RegExp、Function)

11.?如何判斷某變量是否為數組數據類型？

方法一：判斷其是否具有“數組性質”，如slice()方法。可自己給該變量定義slice方法，故有時會失效。

方法二：obj instanceof Array，在某些IE版本中不正確。

方法三：方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray()， 保證其兼容性。

12. 當一個DOM節點被點擊時候，我們希望能夠執行一個函數，應該怎么做？

直接在DOM里綁定事件：<div onclick='test()'></div>

在JS里通過onclick綁定：xxx.onclick=test()

通過事件添加進行綁定：addEventListener(xxx,'click',test())

13.?Javascript的事件流模型都有什么？

“事件冒泡”：事件開始由最具體的元素接收，然后逐級向上傳播。

“事件捕捉”：事件由最不具體的節點先接收，然后逐級向下，一直到最具體的。

“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡。

14.?var numberArray=[3,6,2,4,1,5];

實現對該數組的倒排，輸出[5,1,4,2,6,3]

numberArray.reverse();

實現對該數組的降序排列，輸出[6,5,4,3,2,1]

numberArray.sort(function(a,b){returnb-a})

15. 閉包，閉包的作用？

閉包就是能夠讀取其他函數內部變量的函數。閉包是將函數內部和函數外部連接起來的橋梁。

作用 可以讀取函數內部的變量 讓這些變量的值始終保持在內存中。

缺點 1.閉包的缺點就是會增大內存使用量，并且使用不當容易造成內存泄漏。

2.如果不是因為某些特殊任務而需要閉包，在沒有必要的情況下，在其它函數中創建函數是不明智的，因為閉包對腳本性能具有負面影響，包括處理速度和內存消耗。

16. 作用域，作用域鏈？

作用域就是變量與函數的可訪問范圍。作用域分為 全局作用域(所聲明的變量全局都可以訪問),局部作用域(所聲明的變量只在其內部可以訪問)。

作用域鏈：當我們在一個函數內部訪問當前作用域內不存在的變量時，就會逐層向外查找，如果一直找不到就會報錯。當我們在局部作用域中，調用外部變量時，就產生了作用域鏈。

17. 描述一次完整的http請求？

1.查詢NDS(域名解析),獲取域名對應的IP地址

查詢瀏覽器緩存

2.瀏覽器與服務器建立tcp鏈接（三次握手）。

第一次握手：客戶端發送一個請求連接，服務器端只能確認自己可以接受客戶端發送的報文段。

第二次握手： 服務端向客戶端發送一個鏈接，確認客戶端收到自己發送的報文段。

第三次握手： 服務器端確認客戶端收到了自己發送的報文段。

3.瀏覽器向服務器發送http請求(請求和傳輸數據）。

4.服務器接受到這個請求后，根據路經參數，經過后端的一些處理生成html代碼返回給瀏覽器。

5.瀏覽器拿到完整的html頁面代碼開始解析和渲染，如果遇到外部的css或者js，圖片一樣的步驟。

6.瀏覽器根據拿到的資源對頁面進行渲染，把一個完整的頁面呈現出來。

18. 瀏覽器是如何渲染頁面的？

流程：解析html以及構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪制render樹

1.構建DOM樹： 渲染引擎解析HTML文檔，首先將標簽轉換成DOM樹中的DOM node(包括js生成的標簽)生成內容樹。

2.構建渲染樹： 解析對應的css樣式文件信息（包括js生成的樣式和外部的css）。

3.布局渲染樹：從根節點遞歸調用，計算每一個元素的大小，位置等。給出每個節點所在的屏幕的精準位置。

4.繪制渲染樹：遍歷渲染樹，使用UI后端層來繪制每一個節點。

Vue.js? 方面：

1.Vue的核心思想：

組件化開發和數據驅動。

2.什么是vuex?有什么作用？

vuex是vue的狀態管理工具。

作用：項目數據狀態的集中管理，復雜組件的數據通信問題。

3.Vuex的核心屬性：

State:存儲數據狀態的地方，但是不可以直接修改里面的數據。

Mutations: mutations定義的方法動態修改vuex的store中的狀態或數據。

Actions:簡單的說就是異步操作數據，view層通過store.dispatch來分發action。

Getters:類似vue的計算屬性，主要用來過濾數據。

Modules:模塊化管理 ??項目特別復雜的時候，可以讓每一個模塊擁有自己的state,mutation,action,getters，使得結構非常清晰，方便管理。

4.vuex的工作流程？

在vue組件里面，通過dispatch來觸發actions提交修改數據的操作

然后再通過actions的commit來觸發mutations來修改數據

Mutations接收到commit的請求，就會自動通過mutate來修改state里面的數據

最后由store觸發每一個調用它的組建的更新。

5.Vue的生命周期？

BeforeCreated(實例創建前)：此時的vue實例還沒有掛載元素$el,數據對象data也是undefined。

Created(實例創建完成)：vue實例的數據對象data有了，但是$el還沒有。

beforeMount(實例載入前)：vue的實例的$el和data都初始化了，但還是掛載在之前的虛擬DOM節點上，data.message還沒替換。

Mounted(實力載入完成)：vue實例掛載完成，data.message成功渲染。

beforeUpdate(實例更新前)：data發生變化前。

Updated(實例更新前)：data發生變化后。

BeforeDestory(實例銷毀前)：在實例銷毀之前調用，實例仍然可用。

Destory(實例銷毀完成)：所有的監聽事件會被消除，所有的子實例也會被銷毀。

6.vue常用的指令？

V-model ??v-html ??v-text ?v-for ?v-show ?v-if ?v-on

7.V-if和v-show的區別？

V-if是通過添加和刪除DOM節點來控制顯示隱藏，v-show是通過操作css的display屬性來控制顯示隱藏；

V-if擁有更高的切換成本，v-show擁有更高的渲染成本。

頻繁切換的時候使用v-show,不經常切換就使用v-if.

8.V-for和v-if的優先級？

當它們處于同一節點，v-for的優先級比v-if更高，這意味著v-if將分別重復運行于每個v-for的循環中。

9.MVC ??MVP ??MVVM的區別？

MVC: MVC之間的數據通信都是單向的。View(視圖層)發送指令到controller(控制層)，完成業務邏輯后，要求Model(模型層)改變狀態，匠心的數據發送到(view)視圖層，用戶得到反饋。

MVP:在MVP中，view和model之間沒有任何通信關系，所有的通信和業務邏輯都放在presenter層中。View層發送指令到presenter層，presenter層處理業務邏輯，要求model層改變狀態，完成狀態修改之后，發送指令到presenter層，之后再通知view層做出改變。

MVVM: Model專門用來處理數據模型。View專門用來處理用戶視圖，ViewModel用來使view和model雙向綁定，view的任何變化都會通知ViewModel,而model的任何變化也會通知ViewModel，無論哪一項發生改變，都會使對應的視圖/數據模型同時發生改變。

11.什么是axios?

就是請求后臺資源的模塊，前臺通過它獲取后臺數據，類似ajax交互。

13.路由傳參的方法？路由傳參方法

1. 字符串拼接 ： 路由后面直接拼接要傳遞的參數，用this.$rote.params 接收。

2. path和query：path后面跟要跳轉的路由，query后邊跟要傳遞參數的對象 用 this.$route.query 接收。

3. name和params：name后面跟要跳轉路由的名稱，params后面跟傳遞參數的對象，用this.$route.params接收。

14.Vuex中actions和mutations的區別？

Mutations的更改是同步更改，用于用戶執行直接數據更改，this.$store.commit(‘名’)觸發。

Actions的更改是異步操作，用于需要與后端交互的數據更改,this.$store.dispath(“名”)觸發。

注意：

1)：定義actions方法創建一個更改函數時，這個函數必須攜帶一個context參數，用于觸發mutations方法，context.commit(‘修改函數名’ , ’異步請求值’)；

2)：mutations第一個參數必須傳入state，第二個參數是新值。

15.漸進式框架的理解？

主張最少，沒有多做職責之外的事 我的理解就是 用什么就引入什么，沒有硬性規定。

項目介紹1

項目介紹：

項目背景：

商品分類怎么實現的;

單選多選全選怎么實現的：

加入購物車怎么實現的;

登錄注冊怎么實現;

登錄流程：

? ? ? ? 當我點擊登錄的時候，我先判斷我輸入的值是否符合規則，如果符合，就把參數拼接到接口上，然后請求，后臺會返回一個token值，我把token放在本地存儲中，在全局路由守衛中，當我要訪問一個需要登錄才可以進入的路由的時候，我就判斷本地存儲中有沒有這個token值，如果有，就進入這個路由，如果沒有，就返回登錄頁面登錄。

Loading動畫怎么實現：

? ? ? ? 用axios攔截器實現loading動畫效果 首先新建一個loading組件，里面寫一些動畫效果，然后在vuex里面寫一個狀態來控制我的loading動畫組件的顯示隱藏，然后在全局main.js中配置axios攔截器，分別定義一個請求攔截器和響應攔截器，在請求數據時執行請求攔截器，改變我vuex里面定義的狀態，讓loading動畫顯示，反之，數據請求到之后，隱藏loading動畫即可。

圖片懶加載怎么實現：

? ? ? ? 我們先不給<img>設置src，把圖片真正的URL放在另一個屬性data-src中，在需要的時候也就是圖片進入可視區域的之前，將URL取出放到src中。

移動端的性能優化：

? ? ? ? ?首屏加載和按需加載，懶加載 資源預加載 圖片壓縮處理，使用base64內嵌圖片 合理緩存dom對象 使用touchstart代替click（click 300毫秒的延遲） 利用transform:translateZ(0)，開啟硬件GUP加速 不濫用web字體，不濫用float（布局計算消耗性能），減少font-size聲明 使用viewport固定屏幕渲染，加速頁面渲染內容 盡量使用事件代理，避免直接事件綁定。

項目介紹2

項目介紹：

項目背景：

后臺權限管理是怎么實現的：

? ? ? ?定義兩張路由表，一張是靜態路由表（無需權限的使用），另一張是權限路由表（和后臺返回的權限進行匹配使用）。用戶登錄，判斷登錄是否成功，登錄成功后判斷是否獲取用戶權限列表，獲取到后，將權限數據存儲到Vuex中。用Vuex中的權限數據和定義好的需要訪問權限的路由表進行比對。比對完后生成當前賬戶對應的權限路由表。通過addRouters方法動態添加路由規則，生成可訪問的側邊欄菜單。

跨域問題，怎么解決的：

jsonp跨域原理：?jsonp是請求之后 后臺會封裝好的一段json，并且把數據放在一個callback回調函數中，并返回一個js文件，動態的引入這個文件，調用這個callback回調函數，進行數據訪問。

反向代理跨域：客戶端發送請求時不直接到服務器而是先到代理的中間層在這里將localhost：8080的這個域名裝換為www.njc.com，再將請求發送到服務器這樣在服務器端收到的請求就是使用的www.njc.com域名同理，當服務器返回數據的時候，也是先到代理的中間層將www.njc.com轉換成localhos：8080；這樣在客戶端也是在相同域名下訪問的了。