面試問題總結
面試了兩家公司，第一家沒有筆試直接面試，第二家筆試+面試，將記得住的問題記錄下來，答案本身找的，有好的答案歡迎提出。javascript
一、響應式佈局
一家公司問了em和rem的區別，另外一家公司先問了一下px,em,rem的區別，而後又問是否熟悉響應式佈局php
（1）px,em,rem的區別css
px:像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。html
em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。實際上只須要知道em是相對於父元素的就好了，父元素字體大小是10px，1em就等於10px。前端
rem也是相對長度單位，但相對的只是HTML根元素html5
目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。java
p {font-size:14px; font-size:.875rem;}
（2）響應式佈局ios
流式佈局%，em,rem，彈性佈局flex都屬於響應式佈局,固然最出名的是媒體查詢web
流式佈局和彈性佈局及配合媒體查詢 是 響應性佈局的最好方式。面試
詳情參考手把手教你響應式佈局（一）
二、兩欄佈局，一側固定一側自適應的幾種方式
<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;
三、h5廢棄的標籤和屬性及新增的標籤和屬性
四、瀏覽器的內核有哪些
一、IE瀏覽器內核：Trident內核，也被稱爲IE內核；
二、Chrome瀏覽器內核：Chromium內核 → Webkit內核 → Blink內核；
三、Firefox瀏覽器內核：Gecko內核，也被稱Firefox內核；
四、Safari瀏覽器內核：Webkit內核；
五、Opera瀏覽器內核：最初是自主研發的Presto內核，後跟隨谷歌，從Webkit到Blink內核；
五、box-sizing有哪幾種
box-sizing: content-box | border-box | inherit;
六、經過原生js和jQuery獲取元素的區別
jQuery獲取的是jQuery對象，原生js獲取到的是DOM元素
七、工做中的增刪改查是哪些方法
新增一條數據，編輯原有數據，刪除數據，查詢數據
八、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 ：當前組件已被刪除，清空相關內容
九、你作過哪些性能優化
1、減小HTTP請求
CSS Sprites直譯過來就是CSS精靈
在能夠大量使用字體圖標的地方咱們能夠儘量使用字體圖標，字體圖標能夠減小不少圖片的使用，從而減小http請求，字體圖標還能夠經過CSS來設置顏色、大小等樣式
合併腳本 和樣式表：將多個樣式表或者腳本文件合併到一個文件中，能夠減小HTTP請求的數量從而縮短效應時間。
然而合併全部文件對許多人尤爲是編寫模塊化代碼的人來講是不能忍的，並且合併全部的樣式文件或者腳本文件可能會致使在一個頁面加載時加載了多於本身所須要的樣式或者腳本，對於只訪問該網站一個（或幾個）頁面的人來講反而增長了下載量，因此你們應該本身權衡利弊
2、使用CDN
3、添加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頭
4、壓縮組件
從HTTP1.1開始，Web客戶端能夠經過HTTP請求中的Accept-Encoding頭來表示對壓縮的支持
Accept-Encoding: gzip,deflate
若是Web服務器看到請求中有這個頭，就會使用客戶端列出來的方法中的一種來進行壓縮。Web服務器經過響應中的Content-Encoding來通知 Web客戶端。
Content-Encoding: gzip
5、將樣式表放在頭部
首先說明一下，將樣式表放在頭部對於實際頁面加載的時間並不能形成太大影響，可是這會減小頁面首屏出現的時間，使頁面內容逐步呈現，改善用戶體驗，防止「白屏」。
咱們老是但願頁面可以儘快顯示內容，爲用戶提供可視化的回饋，這對網速慢的用戶來講是很重要的。
將樣式表放在文檔底部會阻止瀏覽器中的內容逐步出現。爲了不當樣式變化時重繪頁面元素，瀏覽器會阻塞內容逐步呈現，形成「白屏」。這源自瀏覽器的行爲：若是樣式表仍在加載，構建呈現樹就是一種浪費，由於全部樣式表加載解析完畢以前務虛會之任何東西
6、將腳本放在底部
更樣式表相同，腳本放在底部對於實際頁面加載的時間並不能形成太大影響，可是這會減小頁面首屏出現的時間，使頁面內容逐步呈現。
js的下載和執行會阻塞Dom樹的構建（嚴謹地說是中斷了Dom樹的更新），因此script標籤放在首屏範圍內的HTML代碼段裏會截斷首屏的內容。
下載腳本時並行下載是被禁用的——即便使用了不一樣的主機名，也不會啓用其餘的下載。由於腳本可能修改頁面內容，所以瀏覽器會等待；另外，也是爲了保證腳本可以按照正確的順序執行，由於後面的腳本可能與前面的腳本存在依賴關係，不按照順序執行可能會產生錯誤。
7、使用外部的JavaScript和CSS
內聯腳本或者樣式能夠減小HTTP請求，按理來講能夠提升頁面加載的速度。然而在實際狀況中，當腳本或者樣式是從外部引入的文件，瀏覽器就有可能緩存它們，從而在之後加載的時候可以直接使用緩存，而HTML文檔的大小減少，從而提升加載速度。
影響因素：
一、每一個用戶產生的頁面瀏覽量越少，內聯腳本和樣式的論據越強勢。譬如一個用戶每月只訪問你的網站一兩次，那麼這種狀況下內聯將會更好。而若是該用戶可以產生不少頁面瀏覽量，那麼緩存的樣式和腳本將會極大減小下載的時間，提交頁面加載速度。
二、若是你的網站不一樣的頁面之間使用的組件大體相同，那麼使用外部文件能夠提升這些組件的重用率。
8、精簡JavaScript
移除沒必要要的空白字符（空格，換行、製表符），這樣整個文件的大小就變小了。
通常來講，壓縮產生的節省是高於精簡的，在生產環境中，精簡和壓縮同時使用可以最大限度的得到更多的節省。
CSS的精簡
CSS的精簡帶來的節省通常來講是小於JavaScript精簡的，由於CSS中註釋和空白相對較少。
除了移除空白、註釋以外，CSS能夠經過優化來得到更多的節省：
合併相同的類；
移除不使用的類；
9、避免重定向
當頁面發生了重定向，就會延遲整個HTML文檔的傳輸。在HTML文檔到達以前，頁面中不會呈現任何東西，也沒有任何組件會被下載。
來看一個實際例子：對於ASP.NET webform開發來講，對於新手很容易犯一個錯誤，就是把頁面的鏈接寫成服務器控件後臺代碼裏，例如用一個Button控件，在它的後臺click事件中寫上：Response.Redirect("")；然而這個Button的做用只是轉移URL，這是很是低效的作法，由於點擊Button後，先發送一個Post請求給服務器，服務器處理Response.Redirect("")後就發送一個302響應給瀏覽器，瀏覽器再根據響應的URL發送GET請求。正確的作法應該是在html頁面直接使用a標籤作連接，這樣就避免了多餘的post和重定向。
十、截取字符串的方法有哪些？參數的區別？
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″); }
十一、改變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()
十二、知道哪些ES6語法，解構賦值數組和對象的區別？
數組以序列號一一對應，這是一個有序的對應關係。
而對象根據屬性名一一對應，這是一個無序的對應關係，屬性名一致便可。根據這個特性，使用解析結構從對象中獲取屬性值更加具備可用性。
1三、你對jQuery優化有哪些建議？
一、老是使用#id去尋找element. 在Classes前面使用Tags
二、緩存jQuery對象，能夠用逗號隔開一次定義多個本地變量，這樣能夠節省一些字節。
三、更好的利用鏈
四、事件委託（又名：冒泡事件）
五、聽從$(windows).load
1四、AMD和CMD
AMD： 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發的規範。因爲不是JavaScript原生支持，使用AMD規範進行頁面開發須要用到對應的庫函數，也就是大名鼎鼎RequireJS，實際上AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化的產出。
requireJS主要解決兩個問題
一、多個js文件可能有依賴關係，被依賴的文件須要早於依賴它的文件加載到瀏覽器
二、js加載的時候瀏覽器會中止頁面渲染，加載文件越多，頁面失去響應時間越長
require([dependencies], function(){});
require()函數接受兩個參數
第一個參數是一個數組，表示所依賴的模塊
第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可使用這些模塊
require()函數在加載依賴的函數的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數，只有前面的模塊都加載成功後，纔會運行，解決了依賴性的問題。
CMD： 即Common Module Definition通用模塊定義，CMD規範是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS同樣，只不過在模塊定義方式和模塊加載（能夠說運行、解析）時機上有所不一樣
1五、如何建立一個對象，劃出內存圖
1、原始方法
經過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();//Kitty obj1.showAge();//21 obj2.showName();//luo obj2.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,Wendy obj1.showName();//Kitty obj2.showArray();//Kitty,luo obj2.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,Wendy obj1.showName();//Kitty obj2.showArray();//Kitty,luo obj2.showName();//luo </script>
參考：JavaScript如何建立一個對象
1六、new具體作了哪些事情
var fn = function () { }; var fnObj = new fn();
（1）建立一個空對象
var obj = newobject();
（2）設置原型鏈
obj._proto_ = fn.prototype;
（3）讓fn的this指向obj，並執行fn的函數體
var result = fn.call(obj);
（4）判斷fn的返回值類型，若是是值類型，返回obj。若是是引用類型，就返回這個引用類型的對象。
if (typeof(result) == "object"){ fnObj = result; } else { fnObj = obj; }
new 操做符具體幹了什麼？
- 建立一個新的對象
- 將構造函數的做用域賦值給新對象（this執行新的對象）
- 執行構造函數的代碼
- 返回新的對象
1七、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-rule column-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}
1八、doctype聲明，嚴格模式和混合模式是什麼，意義？
放在網頁頂部的doctype聲明是讓瀏覽器進入正確呈現模式的關鍵。瀏覽器自動切換到恰當的呈現模式，以便正確顯示由doctype聲明所指定的文檔種類。
doctype聲明指出閱讀程序應該用什麼規則集來解釋文檔中的標記。在Web文檔的狀況下，「閱讀程序」一般是瀏覽器或者校驗器這樣的一個程序，「規則」則是W3C所發佈的一個文檔類型定義（DTD）中包含的規則。
1九、瀏覽器常見兼容問題
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 兩種定位功能於一體的特殊定位
2一、如何實現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居中的幾種方法
2二、如何區分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支持HTML5新標籤：
2三、CSS選擇器有哪些？它們的優先級順序怎麼樣？CSS3增長了哪些僞類選擇器？
ID選擇符 #box
類選擇符 .box
標籤 div
僞類和僞元素 link、visited、active、hover
總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
CSS選擇器優先級總結
2四、對json的理解
JSON，是一種輕量級數據交換格式，是一種傳遞對象的語法，JSON可以作到字符串到對象之間的轉換
JSON.stringify()方法用於將一個值轉爲字符串。該字符串應該符合JSON格式，而且能夠被JSON.parse()方法還原
默認狀況下，JSON.stringify()輸出的JSON字符串不包括任何空格字符或縮進
2五、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區別？
2六、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方式。
2七、如何實現移動端字體大小屏幕自適應，百分比方法的缺點，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；
2八、如何封裝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' }) } } }) }
2九、事件委託的原理是什麼？何時須要事件委託？
事件委託的原理是事件冒泡機制
當動態建立元素的時候，由於DOM不存在的時候沒法添加事件，因此須要委託給父元素
30、懶加載多頁面優化
- 1. vue 面試問題總結
- 2. .net面試問題總結
- 3. java 面試問題總結
- 4. Java面試問題總結
- 5. 面試問題總結
- 6. 111111111111111111111111JVM面試問題總結
- 7. MySQL 面試問題總結
- 8. HR面試問題總結（HR面經）
- 9. 面試常問問題總結
- 10. flask面試常問問題總結
- 更多相關文章...
- • Lua 調試(Debug) - Lua 教程
- • Markdown 標題 - Markdown 教程
- • 算法總結-雙指針
- • 算法總結-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vue 面試問題總結
- 2. .net面試問題總結
- 3. java 面試問題總結
- 4. Java面試問題總結
- 5. 面試問題總結
- 6. 111111111111111111111111JVM面試問題總結
- 7. MySQL 面試問題總結
- 8. HR面試問題總結（HR面經）
- 9. 面試常問問題總結
- 10. flask面試常問問題總結