前端常見面試題

HTML+CSS部分

1.如何使一個元素在水平和垂直方向上居中？

方法一： 采用彈性盒子

display: flex;
align-items: center;
justify-content: center;

方法二： 定位+位移

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

方法三： 給子盒子設定定位的上下左右都為0 ，,然后設定margin自動適應

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

方法四： 定位+子盒子左邊距、上邊距的一半

width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;//為寬度的一半
margin-top: -50px;//為高度的一半

2.如何清除浮動？

方法一：父級添加overflow屬性方法

可以給父級添加： overflow為 hidden| auto| scroll  都可以實作，

方法二： 使用after偽元素清除浮動

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 專有 */

方法三： 使用雙偽元素清除浮動

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

3.css優先級演算法如何計算？

選擇器	計算權重公式
繼承或者*	0,0,0,0
標簽選擇器	0,0,0,1
每個類，偽類	0,0,1,0
每個ID	0,1,0,0
每個行內樣式	1,0,0,0
每個!important	無窮大

4.html5有哪些新特性？

1.拖拽釋放(Draganddrop)API ondrop 自定義屬性 data-id 獲取 li.getAttribute(‘data-id’)或者 li.dataset.type=‘guoji’

2.語意化更好的內容標簽（header,nav,footer,aside,article,section）

3.音頻、視頻 API(audio,video) 如果瀏覽器不支持自動播放怎么辦？

4.畫布(Canvas)API 熱 canvas 和 image 的區別？

5.地理(Geolocation)API

6.本地離線存盤 localStorage 長期存盤資料，瀏覽器關閉后資料不丟失；sessionStorage 的資料在瀏覽器關閉后自動洗掉

7.表單控制元件，calendar、date、time、email、url、search 、tel、file、number

9.新的技術 webworker,websocket,Geolocation

5.CSS選擇符有哪些？哪些屬性可以繼承？優先級演算法如何計算？CSS3新增偽類有哪些？

CSS 選擇符：

1.id選擇器(# myid)

2.類選擇器(.myclassname)

3.標簽選擇器(div, h1, p)

4.相鄰選擇器(h1 + p)

5.子選擇器(ul > li)

6.后代選擇器(li a)

7.通配符選擇器( * )

8.屬性選擇器(a[rel = “external”])

9.偽類選擇器(a: hover, li:nth-child)

可繼承的樣式：

1.font-size

2.font-family

3.color

4.text-indent

不可繼承的樣式：

1.border

2.padding

3.margin

4.width

5.height

優先級演算法：

1.優先級就近原則，同權重情況下樣式定義最近者為準;

2.載入樣式以最后載入的定位為準;

3.!important > id > class > tag

4.important 比 行內優先級高，但行內比 id 要高

CSS3新增偽類舉例：

p:first-of-type 選擇屬于其父元素的首個

元素的每個

元素，

p:last-of-type 選擇屬于其父元素的最后

元素的每個

元素，

p:only-of-type 選擇屬于其父元素唯一的

元素的每個

元素，

p:only-child 選擇屬于其父元素的唯一子元素的每個

元素，

p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個

元素，

:enabled :disabled 控制表單控制元件的禁用狀態，

:checked 單選框或復選框被選中，

6.CSS3新特性

1.過渡 transition： CSS屬性，花費時間，效果曲線(默認ease)，延遲時間(默認0)復制代碼

2.影片 animation：影片名稱，一個周期花費時間，運動曲線（默認ease），影片延遲（默認0），播放次數（默認1），是否反向播放影片（默認normal），是否暫停影片（默認running）復制代碼

3.形狀轉換 transform:適用于2D或3D轉換的元素

rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg);

4.選擇器

5.陰影 box-shadow: 水平陰影的位置 垂直陰影的位置 模糊距離 陰影的大小 陰影的顏色 陰影開始方向（默認是從里往外，設定inset就是從外往里）;復制代碼

6.邊框 border-image: 圖片url 影像邊界向內偏移 影像邊界的寬度(默認為邊框的寬度) 用于指定在邊框外部繪制偏移的量（默認0） 鋪滿方式–重復（repeat）、拉伸（stretch）或鋪滿（round）（默認：拉伸（stretch））;

7.背景 background-clip 制定背景繪制（顯示）區域 background-origin background-size

1.（background-clip: border-box;）默認情況（從邊框開始繪制） 2.（background-clip: padding-box;）從padding開始繪制（顯示），不算border,，相當于把border那里的背景給裁剪掉！ 3.（background-clip: content-box;）只在內容區繪制（顯示），不算padding和border，相當于把padding和border那里的背景給裁剪掉！

8.文字 換行 語法：word-break: normal|break-all|keep-all;、語法：word-wrap: normal|break-word; 超出省略號 text-overflow:clip|ellipsis|string

文字陰影 語法：text-shadow:水平陰影，垂直陰影，模糊的距離，以及陰影的顏色，

9.顏色 rgba（rgb為顏色值，a為透明度）

10.漸變

11.彈性布局 Flex

12.盒模型定義 box-sizing:border-box的時候，邊框和padding包含在元素的寬高之內！

box-sizing:content-box的時候，邊框和padding不包含在元素的寬高之內！

13.媒體查詢

7、什么是BFC哪些情況會產生BFC?

1）定義： BFC(Block formatting context)直譯為"塊級格式化背景關系"，它是一個獨立的渲染區域，只有 Block-level box 參與， 它規定了內部的 Block-level Box 如何布局，并且與這個區域外部毫不相干，

2)布局規則：

A. 內部的 Box 會在垂直方向，一個接一個地放置，

B. Box 垂直方向的距離由 margin 決定，屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊，

C. 每個元素的 margin box 的左邊， 與包含塊 border box 的左邊相接觸(對于從左往右的格式化， 否則相反)，即使存在浮動也是如此，

D. BFC 的區域不會與 float box 重疊，

E. BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之也 如此，

F. 計算 BFC 的高度時，浮動元素也參與計算，

3）哪些元素會生成 BFC：

A. 根元素

B. float 屬性不為 none

C. position 為 absolute 或 fixed

D. display 為 inline-block， table-cell， table-caption， flex， inline-flex

F. overflow 不為 visible

javascript部分

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

不同點：
（1）存盤大小

? cookie資料大小不能超過4k，

? sessionStorage和localStorage 雖然也有存盤大小的限制，但比cookie大得多，可以達到5M或更大，

? （2）有效時間

? localStorage 存盤持久資料，瀏覽器關閉后資料不丟失除非主動洗掉資料；

? sessionStorage 資料在當前瀏覽器視窗關閉后自動洗掉

? cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

? （3） 資料與服務器之間的互動方式

? cookie的資料會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端 ， 每次都會攜帶在HTTP頭中，如果使用cookie保存過多資料會帶來性能問題

? sessionStorage和localStorage不會自動把資料發給服務器，僅在本地保存

2.一次完整的HTTP事務是怎樣的一個程序

域名決議 --> 發起TCP的3次握手 --> 建立TCP連接后發起http請求 --> 服務器回應http請求，瀏覽器得到html代碼 --> 瀏覽器決議html代碼，并請求html代碼中的資源（如js、css、圖片等） --> 瀏覽器對頁面進行渲染呈現給用戶

3.javascript的原型，原型鏈是什么，有什么特點？

原型是一個物件，我們稱prototype為原型物件，

原型的作用就是共享方法

每一個實體物件有一個proto屬性，指向的建構式的原型物件，建構式的原型 物件也是一個物件，也有proto屬性，這樣一層一層往上找就形成了原型鏈，

4.繼承有哪些方式？

1.原型鏈繼承 （很少用）

原理：讓子類建構式的原型指向父型別建構式的一個實體

2.借用建構式（偽造物件）（很少用）

原理：在子型別建構式中執行父類建構式，并將父類建構式的this指向子類的new出來的物件上

解決問題：父類有參考型別物件的屬性時，繼承后實體間也不會相互影響

存在問題：1、父類中相同的方法也需要創建多次，浪費記憶體 2、子類訪問不到父類原型的屬性和方法了，

3.組合繼承（常用的繼承方式）

? (組合原型鏈繼承和借用構造兩種方式)

這種方式解決了原型鏈繼承和借用建構式繼承兩種方式帶來的問題，融合了兩種方式的優點，目前最常用的方式

存在一個小問題，此時子類的constructor不再是自身建構式了

4.經典繼承（規范化的原生式繼承）

? 原理:利用Object.create()

? 優點：不需要興師動眾使用建構式

? 存在問題：物件中有參考型別值屬性時，實體間會相互影響

5.寄生組合式繼承

? 原理：在組合繼承的前提下，子類原型指向父類原型的一個副本而不是父類的實體

? 優化了組合繼承（子類.construtor指向問題）的小問題，是最理想的繼承了

5.前端性能優化？(例舉至少5項)

1. 盡可能的減少 HTTP 的請求數	content
2. 使用 CDN（Content Delivery Network）	server
3. 添加 Expires 頭(或者 Cache-control )	server
4. Gzip 組件	server
5. 將 CSS 樣式放在頁面的上方	css
6. 將腳本移動到底部（包括行內的）	javascript
7. 避免使用 CSS 中的 Expressions	css
8. 將 JavaScript 和 CSS 獨立成外部檔案	javascript css
9. 減少 DNS 查詢	content
10. 壓縮 JavaScript 和 CSS (包括行內的)	javascript css
11. 避免重定向	server
12. 移除重復的腳本	javascript
13. 配置物體標簽（ETags）	css
14. 使 AJAX 快取

1. 加載優化

1. 壓縮合并

2. 代碼分割(code spliting)，可以基于路由或動態加載

3. 第三方模塊放在CDN

4. 大模塊異步加載，例如: Echarts，可以使用require.ensure，在加載成功后，在顯示對應圖表

5. 小模塊適度合并，將一些零散的小模塊合并一起加載，速度較快

6. 可以使用pefetch預加載，在分步場景中非常適合

2. 圖片優化

1. 小圖使用雪碧圖，iconFont，base64行內

2. 圖片使用懶加載

3. webp代替其他格式

4. 圖片一定要壓縮

5. 可以使用的img的srcset，根據不同解析度顯示不同尺寸圖片，這樣既保證顯示效果，又能節省帶寬，提高加載速度

3.css優化

1. css寫在頭部

2. 避免css運算式

3. 移除空置的css規則

4. 避免行內style樣式

4、js優化

1. js寫在body底部

2. js用defer放在頭部，提前加載時間，又不阻塞dom決議

3. script標簽添加crossorigin，方便錯誤收集

5. 渲染優化

1. 盡量減少reflow和repaint

涉及到樣式，尺寸，節點增減的操作，都會觸發reflow和repaint，

1.1 用變數快取dom樣式，不要頻繁讀取

1.2 通過DocumentFragment或innerHTML批量操作dom

1.3 dom隱藏，或復制到記憶體中，類似virtual dom，進行修改，完成后再替換回去

6. 首屏優化

原則：顯示快，滾動流暢，懶加載，懶執行，漸進展現

1. 代碼分離，將首屏不需要的代碼分離出去

2. 服務端渲染或預渲染，加載完html直接渲染，減少白屏時間

3. DNS prefetch，使用dns-prefetch減少dns查詢時間，PC端域名發散，移動端域名收斂

4. 減少關鍵路徑css，可以將關鍵的css行內，這樣可以減少加載和渲染時間

7. 打包優化（主要是webpack優化）

1. 拆包 externals dllPlugin

2. 提取公共包 commonChunkPlugin或splitChunks

3. 縮小范圍 各種loader配置include和exclude，noParse跳過檔案

4. 開啟快取 各種loader開啟cache

5. 多執行緒加速 happypack或thead-loader

6. tree-shaking ES模塊分析，移除死代碼

8. vue****優化

1. 路由懶加載組件

2. keep-alive快取組件，保持原顯示狀態

3. 串列項添加key，保證唯一， 避免資料混亂 , 用來提高渲染性能

4. 串列項系結事件，使用事件代理(v-for)

5. v-if和v-for不要用在一個標簽上，它會在每個項上進行v-if判斷

10. SEO****優化

1. 添加各種meta資訊

2. 預渲染

3. 服務端渲染

6.什么是閉包？有什么作用？優缺點？使用場景？

閉包(closure)指有權訪問另一個函式作用域中變數的函式，

閉包最大用處有兩個：

1.可以讀取函式內部的變數，

2.讓變數的值始終保持在記憶體中，不會在被外部函式呼叫后自動洗掉，

總結：區域變數無法共享和長久保存，而全域變數可能造成變數污染，當我們希望有一種機制即可以長久保存變數又不會造成全域污染，

案例：

 <div class="nav">
        <li>蘋果</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>菠蘿</li>
    </div>
    <script>
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function (i) {
                lis[i].onclick = function () {
                    console.log(i);
                }
            })(i)
        }
    </script>

優點：延伸了變數的作用范圍

缺點：占用記憶體過多

7.遞回

一個函式在內部可以呼叫本身，這個函式就是遞回函式

遞回函式的作用和回圈效果一樣

由于遞回函式很容易發生“堆疊溢位”，所以要加退出條件return

案例

      var num = 1;

        function fn() {
            console.log("列印6句話");
            if (num == 6) {
                return
            }
            num++;
            fn()
        }
        fn()

8.常見兼容性問題？

(1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同 問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大， 碰到頻率:100% 解決方案：CSS里 {margin:0;padding:0;} 備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS檔案開頭都會用通配符來設定各個標簽的內外補丁是0，

(2)瀏覽器兼容問題二：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設定的大 問題癥狀:常見癥狀是IE6中后面的一塊被頂到下一行 碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題） 解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性 備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實作的，橫向的間距設定如果用margin實作，這就是一個必然會碰到的兼容性問題，

(3)瀏覽器兼容問題三：設定較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設定高度 問題癥狀：IE6、7和遨游里這個標簽的高度不受控制，超出自己設定的高度 碰到頻率：60% 解決方案：給超出高度的標簽設定overflow:hidden;或者設定行高line-height 小于你設定的高度， 備注：這種情況一般出現在我們設定小圓角背景的標簽里，出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度，即使你的標簽是空的，這個標簽的高度還是會達到默認的行高，

(4)瀏覽器兼容問題四：行內屬性標簽，設定display:block后采用float布局，又有橫行的margin的情況，IE6間距bug 問題癥狀：IE6里的間距比超過設定的間距 碰到幾率：20% 解決方案 ： 在display:block;后面加入display:inline;display:table; 備注：行內屬性標簽，為了設定寬高，我們需要設定display:block;(除了input標簽比較特殊)，在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug，不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了，這時候我們還需要在display:inline后面加入display:talbe，

(5) 瀏覽器兼容問題五：圖片默認有間距 問題癥狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用， 碰到幾率：20% 解決方案：使用float屬性為img布局 備注 ： 因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距，去掉這個間距使用float是正道，（使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）

(6) 瀏覽器兼容問題六：標簽最低高度設定min-height不兼容 問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設定min-height時不能很好的被各個瀏覽器兼容 碰到幾率：5% 解決方案：如果我們要設定一個標簽的最小高度200px，需要進行的設定為：{min-height:200px; height:auto !important; height:200px; overflow:visible;} 備注：在B/S系統前端開時，有很多情況下我們又這種需求，當內容小于一個值（如300px）時，容器的高度為300px；當內容高度大于這個值時，容器高度被撐高，而不是出現滾動條，這時候我們就會面臨這個兼容性問題，

(7)瀏覽器兼容問題七：透明度的兼容CSS設定 一般在ie中用的是filter:alpha(opacity=0);這個屬性來設定div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對于兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實作兼容

移動端兼容問題

一、在移動端使用click事件有300ms延遲的問題

1. 禁止雙擊縮放===》meta:user-scalabel=no
2. fastclick.js

二、在移動端中，如果給元素設定一個1px的像素邊框的話，那么在手機上看起來是會比一個像素粗的

解決方法:使用偽類元素模擬邊框使用transform縮放，

三、input 的placeholder會出現文本位置偏上的情況

input 的placeholder會出現文本位置偏上的情況：PC端設定line-height等于height能夠對齊，而移動端仍然是偏上，解決是設定line-height：normal

9.前端常見的跨域解決方案？

1. 通過jsonp

   通常為了減輕web服務器的負載，我們把js、css，img等靜態資源分離到另一臺獨立域名的服務器上，在html頁面中再通過相應的標簽從不同域名下加載靜態資源，而被瀏覽器允許，基于此原理，我們可以通過動態創建script，再請求一個帶參網址實作跨域通信，

   jsonp缺點：只能實作get一種請求，

2. location.hash + iframe跨域

   實作原理： a欲與b跨域相互通信，通過中間頁c來實作， 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信，

3. 跨域資源共享（CORS）

   普通跨域請求：只服務端設定Access-Control-Allow-Origin即可，前端無須設定，若要帶cookie請求：前后端都需要設定

4. nginx反向代理介面跨域

   實作思路：通過nginx配置一個代理服務器（域名與domain1相同，埠不同）做跳板機，反向代理訪問domain2介面，并且可以順便修改cookie中domain資訊，方便當前域cookie寫入，實作跨域登錄

5. WebSocket協議跨域

   WebSocket protocol是HTML5一種新的協議，它實作了瀏覽器與服務器全雙工通信，同時允許跨域通訊，是server push技術的一種很好的實作

10.this指向

呼叫方式	this指向
普通函式呼叫	window
建構式呼叫	實體物件，原型物件里面的方法也指向實體物件
物件方法呼叫	該方法所屬物件
事件系結方法	系結事件物件
定時器函式	window
立即執行函式	window

11.Ajax的實作步驟

1.創建ajax物件

 var xhr = new XMLHttpRequest();

2.告訴 Ajax 請求地址以及請求方式

xhr.open('get', 'http://www.example.com');

3.發送請求

xhr.send();

4.獲取服務器端給與客戶端的回應資料

 xhr.onload = function () {
     console.log(xhr.responseText);
 }

12.call apply bind的區別

相同點：

都可以改變this指向

區別點：

1.call和apply會呼叫函式，并且改變函式內部this指向

2.call和apply傳遞的引數不一樣，call傳遞引數aru1,aru2…形式，apply必須是陣列形式[arg];

3.bind不會呼叫函式，可以改變函式內部this指向

主要應用場景

1.call經常做繼承

2.apply經常跟陣列有關系，比如借助數學物件實作陣列的最大值和最小值

3.bind不呼叫函式，但是可以改變this指向，比如改變定時器內部的this指向

13.淺拷貝和深拷貝

簡單表述：假設B復制了A,當A修改時，看B是否發生變化，如果B也跟著變化，說明這個是淺拷貝，如果B沒變那就是深拷貝

1、淺拷貝方實作方式（改變地址值）

• （遍歷賦值，for…in）
• （Object.assign()）

2、深拷貝方實作方式

• （遍歷賦值，for…in）
• （JSON.parse和JSON.stringify）

14.new關鍵字作用

1. 在記憶體中創建一個新的空物件，
2. 讓this指向創建出來的空物件，
3. 執行建構式里面的代碼，給這個空的物件添加屬性和方法，
4. 回傳這個新物件（所以建構式里面不需要return），

15.對ES6中Promise的理解？

Promise 是異步編程的一種解決方案，比傳統的解決方案——回呼函式和事件——更合理和更強大，所謂 Promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是 一個異步操作）的結果，從語法上說，Promise 是一個物件，從它可以獲取異步操作的訊息， Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理，

特點:

1、自己身上有 all、reject、resolve 這幾個方法

2、原型上有 then、catch，finally 等方法

3、一旦建立，就無法取消，這是它的缺點

16.請寫出至少 5 種常見的 http 狀態碼以及代表的意義

5 種常見的 http 狀態碼以及代表的意義如下：

200（OK） ：請求已成功，請求所希望的回應頭或資料體將隨此回應回傳，

303（SeeOther） ：告知客戶端使用另一個 URL 來獲取資源，

304（ Not Modified ）： 未修改， 服務端已經執行了GET，但檔案未變化

400（Bad Request） ：請求格式錯誤，1)語意有誤，當前請求無法被服務器 理解，除非進行修改，否則客戶端不應該重復提交這個請求；2)請求引數有誤，

401 :未授權

403（ Forbidden ）： 服務器理解請求客戶端的請求，但是拒絕執行此請求

404（NotFound） ：請求失敗，請求所希望得到的資源未被在服務器上發現，

500（InternalServerError） ：服務器遇到了一個未曾預料的狀況，導致了它 無法完成對請求的處理

17.get和post的區別？

1.GET請求會被快取，而POST請求不會被快取

2.GET請求會被保留在瀏覽器歷史中，而POST請求則不會

3.GET的安全性相對于POST較差，因為發送的資料是URL的一部分，而POST不會放到瀏覽器歷史中

4.GET向URL中傳遞資料，對資料長度有限制，POST則沒有限制

18.從URL地址中獲取引數值的方法

原理：主要利用split()將字串轉換成陣列，然后存放到陣列里，最后把key和value存放到一個新的物件里，通過名字就可獲取物件里的值，

示例：

var url = 'https://gitbook.cn/gitchat/geekbooks?tag=JavaScript&name=pwwu&age=24';
        var temp1 = url.split('?');
        var pram = temp1[1];
        var keyValue = pram.split('&');
        var obj = {};
        for (var i = 0; i<keyValue.length; i++){
            var item = keyValue[i].split('=');
            var key = item[0];
            var value = item[1];
            obj[key] = value;
        }
    console.log(obj);      //  {tag:'JavaScript',name:'pwwu',age:'24'}

19、瀏覽器的渲染機制

• DOM樹構建

• CSSOM樹構建

  css加載不會阻塞DOM樹決議，但會阻塞render樹渲染

• RenderObject樹構建

• 布局

• 繪制

20、js的執行機制

1.先執行執行堆疊中的同步任務

2.異步任務(回呼函式)放入通過異步行程處理判斷能不能放入任務佇列中

3.一旦執行堆疊中的所有同步任務執行完畢，系統就會按次序讀取任務佇列中的異步任務，于是被讀取的異步任務結束等待狀態，進入執行堆疊，開始執行

由于主執行緒不斷地從任務佇列中重復獲得任務，執行任務，在獲取任務，再執行這種機制被稱為事件回圈（event loop）

宏任務和微任務

宏任務：

setTimeout

setInterval

setImmediate

requestAnimationFrame

微任務：

process.nextTick

MutationObserver

Promise.then catch finally

21、Vue-router跳轉和location.href有什么區別？

使用location.href=’/url’來跳轉，簡單方便，但是重繪了頁面；

使用router.push(’/url’)來跳轉，使用了diff演算法，實作了按需加載，減少了dom的消耗，

22、陣列去重的方法

方法一：利用展開運算子和Set成員的唯一性（ES6）

let arr = [1, 2, 3, 4, 4, 3, 2, 1];

        function unique(arr) {
            return [...new Set(arr)];
        }

        console.log(unique(arr)) // [1, 2, 3, 4]

方法二：利用indexOf

var arr = [1, 2, 3, 4, 4, 3, 2, 1];

        function unique(arr) {
            var res = [];
            for (var i = 0; i < arr.length; i++) {
                if (res.indexOf(arr[i]) === -1) {
                    res.push(arr[i])
                }
            }
            return res;
        }

        console.log(unique(arr)); // [1, 2, 3, 4]

23、es6中專案中使用到的點

1.變數宣告的方式：let const

2.模板字串：反引號``

3.函式里面：箭頭函式，傳參的時候使用默認引數，

4.解構，剩余引數的使用

5.展開運算子

6.class

7.promise

8.export/import

24、箭頭函式和普通函式的區別

1. 箭頭函式不能用于建構式，不能使用new
2. 箭頭函式中this的指向不同 ， 在普通函式中，this總是指向呼叫它的物件 ，箭頭函式沒有自身的this.一般是指向父級作用域
3. .箭頭函式不系結arguments，取而代之用rest引數…解決

25、重繪和重排的區別？

重繪不一定需要重排，重排必然會導致重繪

1、重排：當渲染樹的一部分必須更新并且節點的尺寸發生了變化，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造渲染樹，

1）添加、洗掉可見的dom

2）元素的位置改變

3）元素的尺寸改變（外邊距、內邊距、邊框厚度、寬高等幾何屬性）

4）頁面渲染初始化

5）瀏覽器視窗尺寸改變

2、重繪：是在一個元素的外觀被改變所觸發的瀏覽器行為，瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀，

26、如何減少http請求

1、使用雪碧圖

2、使用keep-alive保留組件狀態或避免重新渲染

3、gzip壓縮資源

27、如果使用閉包如何減少記憶體泄漏

1. 在退出函式之前，將不使用的區域變數全部洗掉，可以使變數賦值為null;
2. 避免變數的回圈賦值和參考

28、import 和require的區別

區別1：模塊加載的時間

require：運行時加載
import：編譯時加載（效率更高）【由于是編譯時加載，所以import命令會提升到整個模塊的頭部】

區別2：模塊的本質

require ： CommonJs模塊

import ：ES6模塊

區別3：嚴格模式

CommonJs模塊和ES6模塊的區別

（1）CommonJs模塊默認采用非嚴格模式
（2）ES6 的模塊自動采用嚴格模式，不管你有沒有在模塊頭部加上 “use strict”;
（3）CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的參考

29、防抖和節流（作用：降頻）

防抖：debounce 以10秒為例，如果在10s之內重復呼叫函式，則再次延遲10秒執行,如果10s不去執行它，則順序執行這個函式，如坐電梯

節流：throttle 以10秒為例，兩次執行之間，至少間隔10秒，否則不與執行，如水龍頭

前端其它的場景需做降頻：視窗縮放、滑鼠移動，input、scroll

30、TCP三次握手和四次揮手

三次握手
第一次握手：
客戶端向服務端發起請求，已確認服務端是否能夠收到請求
第二次握手
服務端回應客戶端，告訴它我收到你的請求，并且準備接收其它請求了
第三次握手
客戶端再次向服務端再次發起請求，告訴服務端我也收到了你的回復，我也準備好了

四次揮手是客戶端與服務端結束通訊的時候
第一次揮手
客戶端向服務端發起結束請求
第二次揮手
服務端回應客戶端表示我收到你的結束請求的通知了
第三次揮手
仍然是服務端向客戶端發起，因為服務端在收到這樣的結束通知之后去處理現有的資料請求了，在現有的資料處理完成之后，會正式回復客戶端的結束請求
第四次揮手
客戶端向服務端發起表示收到了你的結束回復

vue部分

1.簡述Vue的回應式原理?

回答一：

這里的回應式指的是，當你的資料有變化，vue能夠做出回應，然后去重新渲染頁面，它采用資料劫持結合發布者—訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter getter，在資料變動時發布訊息給訂閱者，觸發回應的監聽回呼，

回答二：

1.data的屬性被轉化為getter和setter,并且記錄相應的依賴，當它被改動的時候會通知相應的依賴

2.所有的組件實體會有它對應的watcher實體，而watcher實體會依賴于相應的setter

3.當資料變化時,setter會被呼叫，setter會通知對應的watcher,watcher會更新相應的視圖

2.vue路由的跳轉傳參與引數獲取，各兩種方式

一、動態路由

• 定義 {path:’/地址:id’}
• 呼叫傳遞
  • this.$router.push(’/地址/123’)
  • this.$router.push({name:’’,params:{id:123}})
• 獲取引數 this.$route.params.id

二、地址傳參

• 定義 {path:’/地址’}
• 呼叫傳遞
  • this.$router.push(’/地址？a=1 & b=2’)
  • this.$router.push({path:’/地址’,query:{a:1,b:2}})
• 獲取引數 this.$route.query.a

二者區別：

動態路由：在以物件格式傳參時，是name+params，并不是所有引數在地址欄中可見

地址傳參：在以物件的格式傳參時，是path+query,所有引數都會在地址欄中可見

3.vue的生命周期是什么？并詳細說下你對vue生命周期的理解？

Vue實體從創建到銷毀的程序，就是生命周期，也就是從開始創建、初始化資料、編譯模板、掛載DOM->渲染、更新->卸載等一系列程序，我們稱這是Vue的生命周期，

總共分為 8 個階段創建前/后，載入前/后，更新前/后，銷毀前/后，創建前/后：

1.beforeCreate：在new一個vue實體后，只有一些默認的生命周期鉤子和默認事件，其他的東西都還沒創建，在beforeCreate生命周期執行的時候，data和methods中的資料都還沒有初始化，不能在這個階段使用data中的資料和methods中的方法

2.created：data 和 methods都已經被初始化好了，如果要呼叫 methods 中的方法，或者操作 data 中的資料，最早可以在這個階段中操作

3.beforeMount：執行到這個鉤子的時候，在記憶體中已經編譯好了模板了，但是還沒有掛載到頁面中，此時，頁面還是舊的

4.mounted：執行到這個鉤子的時候，就表示Vue實體已經初始化完成了，此時組件脫離了創建階段，進入到了運行階段， 如果我們想要通過插件操作頁面上的DOM節點，最早可以在和這個階段中進行

5.beforeUpdate： 當執行這個鉤子時，頁面中的顯示的資料還是舊的，data中的資料是更新后的， 頁面還沒有和最新的資料保持同步

6.updated：頁面顯示的資料和data中的資料已經保持同步了，都是最新的

7.beforeDestory：Vue實體從運行階段進入到了銷毀階段，這個時候上所有的 data 和 methods ， 指令， 過濾器 ……都是處于可用狀態，還沒有真正被銷毀

8.destroyed： 這個時候上所有的 data 和 methods ， 指令， 過濾器 ……都是處于不可用狀態，組件已經被銷毀了，

4. 第一次頁面加載會觸發哪幾個鉤子？

第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子

5.vue組件之間的通訊方式有哪些？

1、父組件向子組件傳遞資料

• 把要傳遞給子組件的資料，作為自定義屬性通過’v-bind’，系結到子組件身上
• 子組件通過props接收

2、子組件向父組件傳值

• 把要傳遞給子組件的方法，通過事件系結’v-on’，系結到子組件身上
• 子組件通過this.$emit()方法呼叫傳遞過來的方法

3、provide 與 inject（依賴注入）

• 在祖先組件定義provide屬性，回傳傳遞的值
• 在后代組件通過inject接收組件傳遞過來的值

4、vuex

5、多級組件傳遞資料

A包含B組件，B包含C組件 那么A 傳遞到C 組件可以通過 在B組件中系結 $attrs

6.vue-router有哪幾種導航鉤子

1、全域導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截，

2、組件內的鉤子；

3、單獨路由獨享組件

7.keep-alive的作用是什么？

包裹動態組件時，會快取不活動的組件實體，主要用于保留組件狀態或避免重新渲染

屬性及生命周期鉤子：

1、activated：頁面第一次進入的時候，鉤子觸發的順序是created->mounted->activated
2、deactivated ：頁面退出的時候會觸發deactivated，當再次前進或者后退的時候只觸發activated

8.vuex有哪幾種屬性？并描述一下各個屬性的作用

有五種，分別是 State、 Getter、Mutation 、Action、 Module

vuex的State特性是？

1、Vuex 就是一個倉庫，倉庫里面放了很多物件，其中 state 就是資料源存放地，對應于與一般 Vue 物件 里面的 data，

2、state 里面存放的資料是回應式的，Vue 組件從 store 中讀取資料，若是 store 中的資料發生改變，依賴 這個資料的組件也會發生更新，

3、它通過 mapState 把全域的 state 和 getters 映射到當前組件的 computed 計算屬性中，

vuex的Getter特性是

1、getters 可以對 State 進行計算操作，它就是 Store 的計算屬性

2、 雖然在組件內也可以做計算屬性，但是 getters 可以在多組件之間復用

3、 如果一個狀態只在一個組件內使用，是可以不用 getters

vuex的Mutation特性是？

1、Action 類似于 mutation，不同在于：

2、Action 提交的是 mutation，而不是直接變更狀態，

3、Action 可以包含任意異步操作

9.分別簡述computed和watch的使用場景

答：computed:
　　　　當一個屬性受多個屬性影響的時候就需要用到computed
　　　　最典型的栗子： 購物車商品結算的時候
watch:
　　　　當一條資料影響多條資料的時候就需要用watch
　　　　栗子：搜索資料

10.computed和watch的區別？

computed:

1. 支持快取，只有依賴資料發生改變，才會重新進行計算
2. 不支持異步，當computed內有異步操作時無效，無法監聽資料的變化
3. computed 屬性值會默認走快取，計算屬性是基于它們的回應式依賴進行快取的，也就是基于data中宣告過或者父組件傳遞的props中的資料通過計算得到的值
4. 適合監聽多個資料
5. 如果computed屬性屬性值是函式，那么默認會走get方法；函式的回傳值就是屬性的屬性值；在computed中的，屬性都有一個get和一個set方法，當資料變化時，呼叫set方法，

watch:

1. 不支持快取，資料變，直接會觸發相應的操作；

2. .watch支持異步；

3. 監聽的函式接收兩個引數，第一個引數是最新的值；第二個引數是輸入之前的值；

4. 適合監聽單個資料

5. 監聽資料必須是data中宣告過或者父組件傳遞過來的props中的資料，當資料變化時，觸發其他操作，函式有兩個引數，

   immediate：組件加載立即觸發回呼函式執行，

   deep: 深度監聽，為了發現物件內部值的變化，復雜型別的資料時使用，例如陣列中的物件內容的改變，注意監聽陣列的變動不需要這么做，注意：deep無法監聽到陣列的變動和物件的新增，參考vue陣列變異,只有以回應式的方式觸發才會被監聽到

11.$nextTick的使用

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

12.vue組件中data為什么必須是一個函式？

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

13.created和mounted的區別

答：created:在模板渲染成html前呼叫，即通常初始化某些屬性值，然后再渲染成視圖，
mounted:在模板渲染成html后呼叫，通常是初始化頁面完成后，再對html的dom節點進行一些需要的操作，

14.$route 和 $router 的區別

r o u t e r 是 V u e R o u t e r 的 實 例 ， 在 s c r i p t 標 簽 中 想 要 導 航 到 不 同 的 U R L , 使 用 router是VueRouter的實體，在script標簽中想要導航到不同的URL,使用 router是VueRouter的實例，在script標簽中想要導航到不同的URL,使用router.push方法，回傳上一個歷史history用$router.to(-1)

$route為當前router跳轉物件，里面可以獲取當前路由的name,path,query,parmas等，

15.單頁面應用優缺點？

優點：

• 良好的互動體驗

單頁應用的內容的改變不需要重新加載整個頁面，獲取資料也是通過Ajax異步獲取，沒有頁面之間的切換，就不會出現“白屏現象”,也不會出現假死并有“閃爍”現象，頁面顯示流暢，web應用更具回應性和更令人著迷，

• 良好的前后端作業分離模式

后端不再負責模板渲染、輸出頁面作業，后端API通用化，即同一套后端程式代碼，不用修改就可以用于Web界面、手機、平板等多種客戶端，

• 減輕服務器壓力

單頁應用相對服務器壓力小，服務器只用出資料就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍，

缺點：

• 首屏加載慢

解決方案：

• Vue-router懶加載

Vue-router懶加載就是按需加載組件，只有當路由被訪問時才會加載對應的組件，而不是在加載首頁的時候就加載，專案越大，對首屏加載的速度提升得越明顯，

• 使用CDN加速

在做專案時，我們會用到很多庫，采用cdn加載可以加快加載速度，

16、scoped的原理

vue中的scoped屬性的效果主要通過PostCSS轉譯實作 ， PostCSS給一個組件中的所有dom添加了一個獨一無二的動態屬性，然后，給CSS選擇器額外添加一個對應的屬性選擇器來選擇該組件中dom，這種做法使得樣式只作用于含有該屬性的dom——組件內部dom，

17、Vue動態選單(路由)的實作方案

分以下幾步：
1.前端在本地寫好路由表，以及每個路由對應的角色，也就是哪些角色可以看到這個選單/路由；
2.登錄的時候，向后端請求得到登錄用戶的角色(管理者、普通用戶)；
3.利用路由攔截，根據取到的用戶角色,跟本地的路由表進行對比，過濾出用戶對應的路由，并利用路由進行左側選單渲染

18、權限分配實作

點擊分配權限按鈕，把當前角色的id放在data中，點擊確定按鈕時候，先獲取到整個樹型結構中

半選和全選狀態的id值合并到完整的陣列中，把得到的陣列做了一次字串的拼接，用英文的逗號隔開

發送請求把保存的角色id和新拼接的id字串發送到服務器端

19、權限管理做法？

首先做一個用戶管理，包括用戶的增刪改查，還得做一個后臺左側選單管理，包括增刪改查，以及二級選單的增刪改查，系統有一個超級管理員，可以對所有普通用戶分配權限，分配完權限之后，這個用戶下次登錄就可以看到權限之內的選單，這叫做隨意分配權限，還有一種按角色分配權限和自定義權限，取的是并集，把重復的權限過濾掉

20、路由懶加載實作

1、安裝 @babel/plugin-syntax-dynamic-import 包

2、在babel.config.js組態檔中宣告該插件

3、將路由改為按需加載的形式

21、hash和history模式的區別

hash 值變化不會導致瀏覽器向服務器發出請求，而且 hash 改變會觸發 hashchange 事件*（hashchange只能改變 # 后面的url片段**）* , hash發生變化的url都會被瀏覽器記錄下來，從而你會發現瀏覽器的前進后退都可以用 , hash模式背后的原理是onhashchange事件,可以在window物件上監聽這個事件

history 模式改變 url 的方式會導致瀏覽器向服務器發送請求，這不是我們想看到的，我們需要在服務器端做處理：如果匹配不到任何靜態資源，則應該始侄訓傳同一個 html 頁面， 如果后端沒有準備的話，會分分鐘刷出一個404來

22、 說一下vue開發環境和線上環境如何切換？

主要通過檢測process.env.NODE_ENV===”production”和process.env.NODE_ENV===”development”環境，來設定線上和線下環境地址，從而實作線上和線下環境地址的切換

23、token過期問題處理

token 有過期的機制，可以在請求攔截器中做邏輯判斷處理，若當前時間接近了過期時間，則通過更新 token 的介面請求更新 token ，在之后的請求中帶上新的 token ，以此回圈，若用戶過長時間無操作，則可認為用戶為離線狀態，在用戶之后的第一次請求時，由于 token 已經過期，訪問后端介面會發生錯誤，根據后端回傳的錯誤狀態碼作為判斷，將系統定向至登錄頁面，

24、vue2與vue3的區別

vue2 的雙向資料系結是利用ES5 的一個 API Object.definePropert()對資料進行劫持 結合 發布訂閱模式的方式來實作的，

vue3 中使用了 es6 的 ProxyAPI 對資料代理，

相比于vue2.x，使用proxy的優勢如下

1. defineProperty只能監聽某個屬性，不能對全物件監聽（使用Vue.set或者vm.$set解決）
2. 可以監聽陣列，不用再去單獨的對陣列做特異性操作 vue3.x可以檢測到陣列內部資料的變化（使用Vue.set或者vm.$set解決）

webpack部分

1、webpack常用配置有哪些？

1. 打包的入口/出口

2. 配置html-webpack-plugin

3. 設定webpack的自動打包（webpack-dev-server）

4. webpack中的加載器

   style-loader,css-loader來處理樣式檔案

   babel-loader:處理高級js語法的加載器

   url-loader和file-loader來處理打包圖片檔案以及字體檔案

   post-css自動添加css的兼容性前綴

其它：

1、使用echarts常用問題總結

1. echarts配合element ui的抽屜插件出現報錯，解決方法是使用element ui 抽屜的open事件，讓在打開事件重新加載
2. EChart圖表底色設定問題 ： EChart的DOM一般為DIV，直接設定EChart所在DOM的背景色是沒有任何作用的，因為不管怎么設定，EChart都會將顏色設定成transparent（透明）；因此，要設定背景色，需要在外部再添加一個DIV，通過設定外部DIV的背景色達到修改EChart圖表背景色的目的