面試問題總結

面試了兩家公司，第一家沒有筆試直接面試，第二家筆試+面試，將記得住的問題記錄下來，答案自己找的，有好的答案歡迎提出。

1、響應式布局

一家公司問了em和rem的區別，另一家公司先問了一下px,em,rem的區別，然后又問是否熟悉響應式布局

（1）px,em,rem的區別

px:像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。

em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。實際上只需要知道em是相對于父元素的就行了，父元素字體大小是10px，1em就等于10px。

rem也是相對長度單位，但相對的只是HTML根元素

目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。

p {font-size:14px; font-size:.875rem;}

（2）響應式布局

流式布局%，em,rem，彈性布局flex都屬于響應式布局,當然最出名的是媒體查詢

流式布局和彈性布局及配合媒體查詢?是?響應性布局的最好方式。

詳情參考手把手教你響應式布局（一）

2、兩欄布局，一側固定一側自適應的幾種方式

<div class="wrapper" id="wrapper"><div class="left">左邊固定寬度，高度不固定 </br> </br></br></br>高度有可能會很小，也可能很大。</div><div class="right">這里的內容可能比左側高，也可能比左側低。寬度需要自適應。</br>基本的樣式是，兩個div相距20px, 左側div寬 120px</div>
</div>

（1）基本方法

.wrapper {padding: 15px 20px;border: 1px dashed #ff6c60;
}
.left {width: 120px;border: 5px solid #ddd;
}
.right {margin-left: 20px;border: 5px solid #ddd;
}

（2）float方法

.wrapper-float {overflow: hidden;        // 清除浮動
}.wrapper-float .left {float: left;
}.wrapper-float .right {margin-left: 140px;
}

（3）使用float+BFC方法

.wrapper-float-bfc {overflow: auto;
}.wrapper-float-bfc .left {float: left;margin-right: 20px;
}.wrapper-float-bfc .right {margin-left: 0;overflow: auto;
}

（4）使用absolute+margin-left方法

.wrapper-absolute .left {position: absolute;
}.wrapper-absolute .right {margin-left: 150px;
}

(5)flex方案

.wrapper-flex {display: flex;align-items: flex-start;
}.wrapper-flex .left {flex: 0 0 auto;
}.wrapper-flex .right {flex: 1 1 auto;
}

需要注意的是，flex容器的一個默認屬性值:align-items: stretch;。這個屬性導致了列等高的效果。
為了讓兩個盒子高度自動，需要設置:?align-items: flex-start;

參考：七種實現左側固定，右側自適應兩欄布局的方法

3、h5廢棄的標簽和屬性及新增的標簽和屬性

4、瀏覽器的內核有哪些

1、IE瀏覽器內核：Trident內核，也被稱為IE內核；

2、Chrome瀏覽器內核：Chromium內核 → Webkit內核 → Blink內核；

3、Firefox瀏覽器內核：Gecko內核，也被稱Firefox內核；

4、Safari瀏覽器內核：Webkit內核；

5、Opera瀏覽器內核：最初是自主研發的Presto內核，后跟隨谷歌，從Webkit到Blink內核；

5、box-sizing有哪幾種

box-sizing:?content-box?|?border-box?|?inherit;

6、通過原生js和jQuery獲取元素的區別

jQuery獲取的是jQuery對象，原生js獲取到的是DOM元素

7、工作中的增刪改查是哪些方法

JS數組操作之增刪改查的簡單實現

新增一條數據，編輯原有數據，刪除數據，查詢數據

8、Vue的生命周期有哪些，頁面掛載之前beforecreated到mounted使用的區別

beforeCreate（創建前）,created（創建后）,beforeMount(載入前),mounted（載入后）,beforeUpdate（更新前）,updated（更新后）,beforeDestroy（銷毀前）,destroyed（銷毀后）

beforecreated：el 和 data 并未初始化 
created:完成了 data 數據的初始化，el沒有
beforeMount：完成了 el 和 data 初始化 
mounted ：完成掛載

beforecreate : 舉個栗子：可以在這加個loading事件 
created ：在這結束loading，還做一些初始化，實現函數自執行 
mounted ： 在這發起后端請求，拿回數據，配合路由鉤子做一些事情
beforeDestroy： 你確認刪除XX嗎？ 
destroyed ：當前組件已被刪除，清空相關內容

9、你做過哪些性能優化

一、減少HTTP請求

CSS Sprites直譯過來就是CSS精靈

在可以大量使用字體圖標的地方我們可以盡可能使用字體圖標，字體圖標可以減少很多圖片的使用，從而減少http請求，字體圖標還可以通過CSS來設置顏色、大小等樣式

合并腳本和樣式表：將多個樣式表或者腳本文件合并到一個文件中，可以減少HTTP請求的數量從而縮短效應時間。

然而合并所有文件對許多人尤其是編寫模塊化代碼的人來說是不能忍的，而且合并所有的樣式文件或者腳本文件可能會導致在一個頁面加載時加載了多于自己所需要的樣式或者腳本，對于只訪問該網站一個（或幾個）頁面的人來說反而增加了下載量，所以大家應該自己權衡利弊

二、使用CDN

三、添加Expires頭

頁面的初次訪問者會進行很多HTTP請求，但是通過使用一個長久的Expires頭，可以使這些組件被緩存，下次訪問的時候，就可以減少不必要的HTPP請求，從而提高加載速度。

Web服務器通過Expires頭告訴客戶端可以使用一個組件的當前副本，直到指定的時間為止。例如：

Expires:?Fri, 18 Mar 2016 07:41:53 GMT

Expires缺點：它要求服務器和客戶端時鐘嚴格同步；過期日期需要經常檢查

HTTP1.1中引入Cache-Control來克服Expires頭的限制，使用max-age指定組件被緩存多久。

Cache-Control： max-age=12345600

若同時制定Cache-Control和Expires，則max-age將覆蓋Expires頭

四、壓縮組件

從HTTP1.1開始，Web客戶端可以通過HTTP請求中的Accept-Encoding頭來表示對壓縮的支持

Accept-Encoding: gzip,deflate

如果Web服務器看到請求中有這個頭，就會使用客戶端列出來的方法中的一種來進行壓縮。Web服務器通過響應中的Content-Encoding來通知 Web客戶端。

Content-Encoding: gzip

五、將樣式表放在頭部

首先說明一下，將樣式表放在頭部對于實際頁面加載的時間并不能造成太大影響，但是這會減少頁面首屏出現的時間，使頁面內容逐步呈現，改善用戶體驗，防止“白屏”。

我們總是希望頁面能夠盡快顯示內容，為用戶提供可視化的回饋，這對網速慢的用戶來說是很重要的。

將樣式表放在文檔底部會阻止瀏覽器中的內容逐步出現。為了避免當樣式變化時重繪頁面元素，瀏覽器會阻塞內容逐步呈現，造成“白屏”。這源自瀏覽器的行為：如果樣式表仍在加載，構建呈現樹就是一種浪費，因為所有樣式表加載解析完畢之前務虛會之任何東西?

六、將腳本放在底部

更樣式表相同，腳本放在底部對于實際頁面加載的時間并不能造成太大影響，但是這會減少頁面首屏出現的時間，使頁面內容逐步呈現。

js的下載和執行會阻塞Dom樹的構建（嚴謹地說是中斷了Dom樹的更新），所以script標簽放在首屏范圍內的HTML代碼段里會截斷首屏的內容。

下載腳本時并行下載是被禁用的——即使使用了不同的主機名，也不會啟用其他的下載。因為腳本可能修改頁面內容，因此瀏覽器會等待；另外，也是為了保證腳本能夠按照正確的順序執行，因為后面的腳本可能與前面的腳本存在依賴關系，不按照順序執行可能會產生錯誤。

七、使用外部的JavaScript和CSS

內聯腳本或者樣式可以減少HTTP請求，按理來說可以提高頁面加載的速度。然而在實際情況中，當腳本或者樣式是從外部引入的文件，瀏覽器就有可能緩存它們，從而在以后加載的時候能夠直接使用緩存，而HTML文檔的大小減小，從而提高加載速度。

影響因素：

1、每個用戶產生的頁面瀏覽量越少，內聯腳本和樣式的論據越強勢。譬如一個用戶每個月只訪問你的網站一兩次，那么這種情況下內聯將會更好。而如果該用戶能夠產生很多頁面瀏覽量，那么緩存的樣式和腳本將會極大減少下載的時間，提交頁面加載速度。

2、如果你的網站不同的頁面之間使用的組件大致相同，那么使用外部文件可以提高這些組件的重用率。

八、精簡JavaScript

移除不必要的空白字符（空格，換行、制表符），這樣整個文件的大小就變小了。

一般來說，壓縮產生的節省是高于精簡的，在生產環境中，精簡和壓縮同時使用能夠最大限度的獲得更多的節省。

CSS的精簡

CSS的精簡帶來的節省一般來說是小于JavaScript精簡的，因為CSS中注釋和空白相對較少。

除了移除空白、注釋之外，CSS可以通過優化來獲得更多的節省：

合并相同的類；

移除不使用的類；

九、避免重定向

當頁面發生了重定向，就會延遲整個HTML文檔的傳輸。在HTML文檔到達之前，頁面中不會呈現任何東西，也沒有任何組件會被下載。

來看一個實際例子：對于ASP.NET webform開發來說，對于新手很容易犯一個錯誤，就是把頁面的連接寫成服務器控件后臺代碼里，例如用一個Button控件，在它的后臺click事件中寫上：Response.Redirect("")；然而這個Button的作用只是轉移URL，這是非常低效的做法，因為點擊Button后，先發送一個Post請求給服務器，服務器處理Response.Redirect("")后就發送一個302響應給瀏覽器，瀏覽器再根據響應的URL發送GET請求。正確的做法應該是在html頁面直接使用a標簽做鏈接，這樣就避免了多余的post和重定向。

參考：Web前端性能優化——如何提高頁面加載速度

10、截取字符串的方法有哪些？參數的區別？

slice(start,[end])

第一個參數代表開始位置,第二個參數代表結束位置的下一個位置,截取出來的字符串的長度為第二個參數與第一個參數之間的差;若參數值為負數,則將該值加上字符串長度后轉為正值;若第一個參數等于大于第二個參數,則返回空字符串...

substring(start,[end])

第一個參數代表開始位置,第二個參數代表結束位置的下一個位置;若參數值為負數,則將該值轉為0;兩個參數中,取較小值作為開始位置,截取出來的字符串的長度為較大值與較小值之間的差.

substr(start,[length])?

第一個參數代表開始位置,第二個參數代表截取的長度

函數：split()?
功能：使用一個指定的分隔符把一個字符串分割存儲到數組
例子：

str=”jpg|bmp|gif|ico|png”;
arr=theString.split(”|”);
//arr是一個包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的數組

函數：John()?
功能：使用您選擇的分隔符將一個數組合并為一個字符串
例子：

var delimitedString=myArray.join(delimiter);
var myList=new Array(”jpg”,”bmp”,”gif”,”ico”,”png”);
var portableList=myList.join(”|”);
//結果是jpg|bmp|gif|ico|png

function func(s, n) {return s.slice(0, n).replace(/([^x00-xff])/g, “$1a”).slice(0, n).replace(/([^x00-xff])a/g, “$1″);}

11、改變this指向的方法有哪些？call和apply的區別

call方法:?
語法：call(thisObj，Object) ??//對象，參數集
定義：調用一個對象的一個方法，以另一個對象替換當前對象。
說明：
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。?
如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj。
apply方法：?
語法：apply(thisObj，[argArray]) ??//對象，數組
定義：應用某一對象的一個方法，用另一個對象替換當前對象。?
說明：?
如果 argArray 不是一個有效的數組或者不是 arguments 對象，那么將導致一個 TypeError。?
如果沒有提供 argArray 和 thisObj 任何一個參數，那么 Global 對象將被用作 thisObj，并且無法被傳遞任何參數。

call, apply都屬于Function.prototype的一個方法,它是JavaScript引擎內在實現的,因為屬于Function.prototype,所以每個Function對象實例,也就是每個方法都有call, apply屬性.既然作為方法的屬性,那它們的使用就當然是針對方法的了.這兩個方法是容易混淆的,因為它們的作用一樣,只是使用方式不同.

$.proxy(fn,context)改變this的指向 ?fn必須是一個函數

ES5還定義了一個方法：bind()

js改變this指向方法call,apply;jq改變this指向方法$.proxy()

12、知道哪些ES6語法，解構賦值數組和對象的區別？

ES6常用知識總結（20%的知識占80%的份額）

數組以序列號一一對應，這是一個有序的對應關系。
而對象根據屬性名一一對應，這是一個無序的對應關系，屬性名一致即可。根據這個特性，使用解析結構從對象中獲取屬性值更加具有可用性。

13、你對jQuery優化有哪些建議？

?1、總是使用#id去尋找element.??在Classes前面使用Tags

?2、緩存jQuery對象，可以用逗號隔開一次定義多個本地變量，這樣可以節省一些字節。

?3、更好的利用鏈

?4、事件委托（又名：冒泡事件）

?5、遵從$(windows).load

參考：jQuery代碼性能優化的10種方法

14、AMD和CMD

AMD：即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發的規范。由于不是JavaScript原生支持，使用AMD規范進行頁面開發需要用到對應的庫函數，也就是大名鼎鼎RequireJS，實際上AMD 是 RequireJS 在推廣過程中對模塊定義的規范化的產出。

requireJS主要解決兩個問題

1、多個js文件可能有依賴關系，被依賴的文件需要早于依賴它的文件加載到瀏覽器?
2、js加載的時候瀏覽器會停止頁面渲染，加載文件越多，頁面失去響應時間越長?

require([dependencies], function(){});?
require()函數接受兩個參數

第一個參數是一個數組，表示所依賴的模塊
第二個參數是一個回調函數，當前面指定的模塊都加載成功后，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊

require()函數在加載依賴的函數的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。

CMD：即Common Module Definition通用模塊定義，CMD規范是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載（可以說運行、解析）時機上有所不同?

前端模塊化，AMD與CMD的區別

15、如何創建一個對象，劃出內存圖

一、原始方法

通過new關鍵字生成一個對象，然后根據JavaScript是動態語言的特性來添加屬性和方法，構造一個對象。其中的this表示調用該方法的對象。

二：工廠方法（構造函數）

<script>function Person(name,age){this.name = name;this.age = age;this.showName = function () {console.log(this.name);};this.showAge = function () {console.log(this.age);};}var obj1 = new Person("Kitty","21");var obj2 = new Person("Luo","22");obj1.showName();//Kittyobj1.showAge();//21
 obj2.showName();//luoobj2.showAge();//22
</script>

工廠方法為每個對象都創建邏輯相同的方法，很浪費內存。

三：混合的構造函數/原型方式

<script>function Person(name,age){this.name = name;this.age = age;this.array = new Array("Kitty","luo");}Person.prototype.showName = function (){console.log(this.name);};Person.prototype.showArray = function (){console.log(this.array);};var obj1 = new Person("Kitty",21);var obj2 = new Person("luo",22);obj1.array.push("Wendy");//向obj1的array屬性添加一個元素
 obj1.showArray();//Kitty,luo,Wendyobj1.showName();//Kittyobj2.showArray();//Kitty,luoobj2.showName();//luo
</script>

四：動態原型方法

<script>function Person(name,age){this.name = name;this.age = age;this.array = new Array("Kitty","luo");//如果Person對象中_initialized 為undefined，表明還沒有為Person的原型添加方法if(typeof Person._initialized  == "undefined"){Person.prototype.showName = function () {console.log(this.name);};Person.prototype.showArray = function () {console.log(this.array);};Person._initialized = true;}}var obj1 = new Person("Kitty",21);var obj2 = new Person("luo",22);obj1.array.push("Wendy");//向obj1的array屬性添加一個元素
 obj1.showArray();//Kitty,luo,Wendyobj1.showName();//Kittyobj2.showArray();//Kitty,luoobj2.showName();//luo
</script>

參考：JavaScript如何創建一個對象

16、new具體做了哪些事情

var fn = function () { };
var fnObj = new fn();

（1）創建一個空對象

var obj = newobject();

（2）設置原型鏈

obj._proto_ = fn.prototype;

原型鏈：三張圖搞懂JavaScript的原型對象與原型鏈

（3）讓fn的this指向obj，并執行fn的函數體

var result = fn.call(obj);

（4）判斷fn的返回值類型，如果是值類型，返回obj。如果是引用類型，就返回這個引用類型的對象。

if (typeof(result) == "object"){  fnObj = result;  
} else {  fnObj = obj;
}

new 操作符具體干了什么？

創建一個新的對象
將構造函數的作用域賦值給新對象（this執行新的對象）
執行構造函數的代碼
返回新的對象

17、CSS3有哪些新特性，如何兼容CSS3和H5新標簽？

CSS3新特性：

border-radius
box-shadow
border-image
text-overflow
@font-face 規則
//2D轉換
translate()
rotate()
scale()
skew()
matrix()
//3D轉換
rotateX()
rotateY()

 漸變：linear-gradient、radial-gradient
 transition  //過渡@keyframes   animation   //動畫

//多列
column-count    //多少列
column-gap    //列的間隙
//多列邊框
column-rule-style
column-rule-width
column-rule-color
column-rulecolumn-span   //元素跨越多少列
column-width  //列寬

box-sizing
Flex Box
@media  CSS3 根據設置自適應顯示
@media screen and (max-width: 1000px) and (min-width: 700px)?{
??? ul li a:before?{
????????content:?"Email: ";
????????font-style:?italic;
????????color:?#666666;
??? }
}

CSS3兼容寫法： -webkit-, -ms- （IE）或 -moz- （FF），-o-

?IE8瀏覽器中還沒有添加對HTML5新標簽的支持，所以在IE8中無法直接展現HTML5新標簽中的內容。慶幸的是IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，代碼如下：

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){document.createElement(e[i])
}

瀏覽器支持新標簽后，還需要添加標簽默認的樣式：
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}

參考：關于H5新標簽的瀏覽器兼容問題的詳解

18、doctype聲明，嚴格模式和混合模式是什么，意義？

放在網頁頂部的doctype聲明是讓瀏覽器進入正確呈現模式的關鍵。瀏覽器自動切換到恰當的呈現模式，以便正確顯示由doctype聲明所指定的文檔種類。

?doctype聲明指出閱讀程序應該用什么規則集來解釋文檔中的標記。在Web文檔的情況下，“閱讀程序”通常是瀏覽器或者校驗器這樣的一個程序，“規則”則是W3C所發布的一個文檔類型定義（DTD）中包含的規則。

DOCTYPE聲明作用及用法詳解

19、瀏覽器常見兼容問題

1：不同瀏覽器的標簽默認的外補丁和內補丁不同

解決方案：css里?*{margin:0;padding:0;}

2：圖片默認有間距

解決方案：使用float屬性為img布局

3：透明度的兼容css設置

最全整理瀏覽器兼容性問題與解決方案、常見的瀏覽器兼容性問題總結

20、定位有哪些

static：默認值，塊級元素和行內元素按照各自的特性進行顯示

relative:相對定位,元素相對于原本位置的定位，元素不脫離文檔流，位置會被保留，其他的元素位置不會受到影響，不會改變元素的display屬性

absolute：絕對定位，相對于static以外的第一個父元素進行定位，如何不存在這樣的包含塊則相對于body進行定位。脫離文檔流，并改變了display屬性，元素本身生成塊級框（可以設置寬高，不設置寬度時寬高由內容撐開，不繼承父級寬度，可以在一行顯示，換行符不解析）

fixed:固定定位，相對于瀏覽器窗口進行定位。脫離文檔流，并改變了display屬性，元素本身生成塊級框。

inherit:從父元素繼承 position 屬性的值。IE8以及以前的版本都不支持inherit屬性。

sticky:粘性定位，它結合了結合了position:relative?和?position:fixed?兩種定位功能于一體的特殊定位

21、如何實現div居中，如何讓float元素居中

.center {  display: -webkit-flex;  -webkit-justify-content: center;  -webkit-align-items: center;  }

.center {position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); }

//浮動元素居中
//子元素在父元素里面垂直居中
//父元素設置
｛display:table-cell;vertical-align:middle; ｝
//浮動元素既垂直又水平居中的方法
    {display:table-cell;vertical-align:middle;margin:0 auto;}

DIV居中的幾種方法

22、如何區分html和html5

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

23、CSS選擇器有哪些？它們的優先級順序怎么樣？CSS3增加了哪些偽類選擇器？

?ID選擇符 #box
類選擇符 .box
標簽 div
偽類和偽元素?link、visited、active、hover

總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性

CSS選擇器優先級總結

24、對json的理解

JSON，是一種輕量級數據交換格式，是一種傳遞對象的語法，JSON能夠做到字符串到對象之間的轉換

JSON.stringify()方法用于將一個值轉為字符串。該字符串應該符合JSON格式，并且可以被JSON.parse()方法還原　

　　默認情況下，JSON.stringify()輸出的JSON字符串不包括任何空格字符或縮進

25、get和post的區別

get和post是HTTP與服務器交互的方式，get用于獲取數據，post用于提交數據?

GET和POST本質上就是TCP鏈接，并無差別。但是由于HTTP的規定和瀏覽器/服務器的限制，導致他們在應用過程中體現出一些不同。

GET后退按鈕/刷新無害，POST數據會被重新提交（瀏覽器應該告知用戶數據會被重新提交）。
GET能被緩存，POST不能緩存 。
GET歷史參數保留在瀏覽器歷史中。POST參數不會保存在瀏覽器歷史中。
GET對數據長度有限制，當發送數據時，GET 方法向 URL 添加數據；URL 的長度是受限制的（URL 的最大長度是 2048 個字符）。POST無限制。
與 POST 相比，GET 的安全性較差，因為所發送的數據是 URL 的一部分。

GET和POST還有一個重大區別，簡單的說：

GET產生一個TCP數據包；POST產生兩個TCP數據包。

長的說：

對于GET方式的請求，瀏覽器會把http header和data一并發送出去，服務器響應200（返回數據）；

而對于POST，瀏覽器先發送header，服務器響應100 continue，瀏覽器再發送data，服務器響應200 ok（返回數據）。

GET和POST兩種基本請求方法的區別、get和post區別？

26、link與@import的區別

1.從屬關系區別
@import是 CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。

2.加載順序區別
加載頁面時，link標簽引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢后被加載。

3.兼容性區別
@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標簽作為 HTML 元素，不存在兼容性問題。

4.DOM可控性區別
可以通過 JS 操作 DOM ，插入link標簽來改變樣式；由于 DOM 方法是基于文檔的，無法使用@import的方式插入樣式。

就結論而言，強烈建議使用link標簽，慎用@import方式。

參考：link和@import的區別

?27、如何實現移動端字體大小屏幕自適應，百分比方法的缺點，rem的作用

（1）用媒體查詢+rem

@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {//針對iPhone 4, 5c,5s, 所有iPhone6的放大模式，個別iPhone6的標準模式
html{font-size:10px;}
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {//針對大多數iPhone6的標準模式
html{font-size:12px;}
}@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {//針對所有iPhone6+的放大模式
html{font-size:16px;}}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {//針對所有iPhone6+的標準模式,414px寫為412px是由于三星Nexus 6為412px，可一并處理
html{<font-size:20px;}
}

（2）js+rem

按照設計稿的寬去設置一個合適的rem ,配合js查詢屏幕大小來改變html的font-size，從而達到適配各種屏幕的效果

(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;<br>window.innerWidth>max ?  window.innerWidth : max;if (!clientWidth) return;docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
//這個方法就是在監聽屏幕的寬度，然后根據不同的屏幕做出反應
//orientationchange :檢測屏幕發生反轉時，就是是橫屏還是豎屏時
//clientWidth :就是設備的寬度
//docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 核心就是這句設置根元素的字體大小是clientWidth/320*20
//document.documentElement.clientWidth 屏幕寬度

（3）CSS3的計算calc和vw單位

calc()的運算規則

使用“+”、“-”、“*” 和 “/”四則運算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進行計算；
表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。

.elm {/*Firefox*/-moz-calc(expression);/*chrome safari*/-webkit-calc(expression);/*Standard */calc();}

VW：相對于視口的寬度。視口被均分為100單位的vw，也就是說在375寬度的屏幕中，1vw等于3.75px，320的屏幕中，1vw等于3.2px。這樣的話對于不同尺寸的屏幕有了一個統一的單位來進行衡量，這時我們再結合rem，即對HTML設置字體大小font-size：calc(100vw/18.75)——這是以iPhone6的尺寸為設計圖時做的計算，此時在iPhone6尺寸的頁面中1rem為20px；

28、如何封裝ajax？參數是什么對象？

export const BASEURL = '/api/'export function ajax(options){    let config = {url:options.url,method:options.method || 'get',params:options.params || {},data:options.data || {},headers:options.headers || {}}axios.interceptors.response.use((response) => {     //響應攔截器if (response.data.errorCode === '401') {router.push('/login')message({message:'會話失效，請重新登陸',type:'error'})return response} else {return response}}, (error) => {return Promise.reject(error)})return axios(config).catch((e) => {if(!e.response){router.push('/login')message({message:'會話失效，請重新登陸',type:'error'})}else{if(e.response.status === 504){message({message:"網關超時",type:'error'})}else{message({message:e.response.data.msg,type:'error'})}}})
}