一? ?css部分
1.calc, support, media各自的含義及用法？
@support主要是用于檢測瀏覽器是否支持CSS的某個屬性，其實就是條件判斷，如果支持某個屬性，你可以寫一套樣式，如果不支持某個屬性，你也可以提供另外一套樣式作為替補。
calc() 函數(shù)用于動態(tài)計算長度值。 calc()函數(shù)支持 "+", "-", "*", "/" 運算；
@media 查詢，你可以針對不同的媒體類型定義不同的樣式。
2.css水平、垂直居中的寫法，請至少寫出4種？
水平居中
行內(nèi)元素:?text-align: center
塊級元素:?margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中
設(shè)置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;
3.1rem、1em、1vh、1px各自代表的含義？
rem
rem是全部的長度都相對于根元素<html>元素。通常做法是給html元素設(shè)置一個字體大小，然后其他元素的長度單位就為rem。
em
子元素字體大小的em是相對于父元素字體大小
元素的width/height/padding/margin用em的話是相對于該元素的font-size
vw/vh
全稱是 Viewport Width 和 Viewport Height，視窗的寬度和高度，相當于 屏幕寬度和高度的 1%，不過，處理寬度的時候%單位更合適，處理高度的 話 vh 單位更好。
px
px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
一般電腦的分辨率有{1920*1024}等不同的分辨率
1920*1024 前者是屏幕寬度總共有1920個像素,后者則是高度為1024個像素
4.畫一條0.5px的直線？
height: 1px;
transform: scale(0.5,0.5);
5.說一下盒模型？
盒模型的組成，由里向外content,padding,border,margin.
在IE盒子模型中，width表示content+padding+border這三個部分的寬度
在標準的盒子模型中，width指content部分的寬度
box-sizing的使用
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默認屬性是content-box
6.畫一個三角形？
.a{
? ? ? ? ? ? width: 0;
? ? ? ? ? ? height: 0;
? ? ? ? ? ? border-width: 100px;
? ? ? ? ? ? border-style: solid;
? ? ? ? ? ? border-color: transparent #0099CC transparent transparent;
? ? ? ? ? ? transform: rotate(90deg); /*順時針旋轉(zhuǎn)90°*/
}
<div class="a"></div>
7.清除浮動的幾種方式，及原理？
::after / <br> / clear: both
創(chuàng)建父級?BFC(overflow:hidden)
父級設(shè)置高度
BFC （塊級格式化上下文），是一個獨立的渲染區(qū)域，讓處于?BFC?內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會相互影響。
觸發(fā)條件:
根元素
position: absolute/fixed
display: inline-block / table
float?元素
ovevflow !== visible
規(guī)則:
屬于同一個?BFC?的兩個相鄰?Box?垂直排列
屬于同一個?BFC?的兩個相鄰?Box?的?margin?會發(fā)生重疊
BFC?的區(qū)域不會與?float?的元素區(qū)域重疊
計算?BFC?的高度時，浮動子元素也參與計算
文字層不會被浮動層覆蓋，環(huán)繞于周圍
html
說一下<label>標簽的用法
label標簽主要是方便鼠標點擊使用，擴大可點擊的范圍，增強用戶操作體驗
遍歷A節(jié)點的父節(jié)點下的所有子節(jié)點
<script>
? ? var b=document.getElementById("a").parentNode.children;
? ? console.log(b)
</script>
js
用js遞歸的方式寫1到100求和？
function add(num1,num2){
var num = num1+num2;
? ? ? ? if(num2+1>100){
return num;
}else{
? return add(num,num2+1)
? ? ? ? }
}
var sum =add(1,2);? ? ??
??function?addNum(n)?{
????????????console.log(n);
????????????if?(n?==?1)?return?1;
????????????return?addNum(n?-?1)?+?n
?}
? console.log(addNum(100));
頁面渲染html的過程？
瀏覽器渲染頁面的一般過程：
1.瀏覽器解析html源碼，然后創(chuàng)建一個 DOM樹。并行請求 css/image/js在DOM樹中，每一個HTML標簽都有一個對應(yīng)的節(jié)點，并且每一個文本也都會有一個對應(yīng)的文本節(jié)點。DOM樹的根節(jié)點就是 documentElement，對應(yīng)的是html標簽。
2.瀏覽器解析CSS代碼，計算出最終的樣式數(shù)據(jù)。構(gòu)建CSSOM樹。對CSS代碼中非法的語法它會直接忽略掉。解析CSS的時候會按照如下順序來定義優(yōu)先級：瀏覽器默認設(shè)置 < 用戶設(shè)置 < 外鏈樣式 < 內(nèi)聯(lián)樣式 < html中的style。
3.DOM Tree + CSSOM --> 渲染樹（rendering tree）。渲染樹和DOM樹有點像，但是是有區(qū)別的。
DOM樹完全和html標簽一一對應(yīng)，但是渲染樹會忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一個行在渲染樹中都是獨立的一個節(jié)點。渲染樹中的每一個節(jié)點都存儲有對應(yīng)的css屬性。
4.一旦渲染樹創(chuàng)建好了，瀏覽器就可以根據(jù)渲染樹直接把頁面繪制到屏幕上。
以上四個步驟并不是一次性順序完成的。如果DOM或者CSSOM被修改，以上過程會被重復(fù)執(zhí)行。實際上，CSS和JavaScript往往會多次修改DOM或者CSSOM。
說一下CORS？
CORS是一種新標準，支持同源通信，也支持跨域通信。fetch是實現(xiàn)CORS通信的
如何中斷ajax請求？
一種是設(shè)置超時時間讓ajax自動斷開，另一種是手動停止ajax請求，其核心是調(diào)用XML對象的abort方法，ajax.abort()
說一下事件代理？
事件委托是指將事件綁定到目標元素的父元素上，利用冒泡機制觸發(fā)該事件
ulEl.addEventListener('click', function(e){
? ? var target = event.target || event.srcElement;
? ? if(!!target && target.nodeName.toUpperCase() === "LI"){
? ? ? ? console.log(target.innerHTML);
? ? }
}, false);
target、currentTarget的區(qū)別？
currentTarget當前所綁定事件的元素
target當前被點擊的元素
說一下宏任務(wù)和微任務(wù)？
宏任務(wù)：當前調(diào)用棧中執(zhí)行的任務(wù)稱為宏任務(wù)。（主代碼快，定時器等等）。
微任務(wù)： 當前（此次事件循環(huán)中）宏任務(wù)執(zhí)行完，在下一個宏任務(wù)開始之前需要執(zhí)行的任務(wù)為微任務(wù)。（可以理解為回調(diào)事件，promise.then，proness.nextTick等等）。
宏任務(wù)中的事件放在callback queue中，由事件觸發(fā)線程維護；微任務(wù)的事件放在微任務(wù)隊列中，由js引擎線程維護。
說一下繼承的幾種方式及優(yōu)缺點？
借用構(gòu)造函數(shù)繼承，使用call或apply方法，將父對象的構(gòu)造函數(shù)綁定在子對象上
原型繼承，將子對象的prototype指向父對象的一個實例
組合繼承
原型鏈繼承的缺點
字面量重寫原型會中斷關(guān)系，使用引用類型的原型，并且子類型還無法給超類型傳遞參數(shù)。
借用構(gòu)造函數(shù)（類式繼承）
借用構(gòu)造函數(shù)雖然解決了剛才兩種問題，但沒有原型，則復(fù)用無從談起。
組合式繼承
組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實現(xiàn)對原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承。這樣，既通過在原型上定義方法實現(xiàn)了函數(shù)復(fù)用，又保證每個實例都有它自己的屬性。
說一下閉包？
閉包的實質(zhì)是因為函數(shù)嵌套而形成的作用域鏈
閉包的定義即：函數(shù)?A?內(nèi)部有一個函數(shù)?B，函數(shù)?B?可以訪問到函數(shù)?A?中的變量，那么函數(shù)?B?就是閉包
export和export default的區(qū)別？
使用上的不同
export default? xxx
import xxx from './'
export xxx
import {xxx} from './'
說一下自己常用的es6的功能？
let/const、箭頭函數(shù)、模塊化、class、promise
什么是會話cookie,什么是持久cookie?
cookie是服務(wù)器返回的，指定了expire time（有效期）的是持久cookie,沒有指定的是會話cookie
數(shù)組去重？
var arr=['12','32','89','12','12','78','12','32'];
? ? // 最簡單數(shù)組去重法
? ? function unique1(array){
? ? ? ? var n = []; //一個新的臨時數(shù)組
? ? ? ? for(var i = 0; i < array.length; i++){ //遍歷當前數(shù)組
? ? ? ? ? ? if (n.indexOf(array[i]) == -1)
? ? ? ? ? ? ? ? n.push(array[i]);
? ? ? ? }
? ? ? ? return n;
? ? }
? ? arr=unique1(arr);
? ? // 速度最快， 占空間最多（空間換時間）
? ? function unique2(array){
? ? ? ? var n = {}, r = [], type;
? ? ? ? for (var i = 0; i < array.length; i++) {
? ? ? ? ? ? type = typeof array[i];
? ? ? ? ? ? if (!n[array[i]]) {
? ? ? ? ? ? ? ? n[array[i]] = [type];
? ? ? ? ? ? ? ? r.push(array[i]);
? ? ? ? ? ? } else if (n[array[i]].indexOf(type) < 0) {
? ? ? ? ? ? ? ? n[array[i]].push(type);
? ? ? ? ? ? ? ? r.push(array[i]);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return r;
? ? }
? ? //數(shù)組下標判斷法
? ? function unique3(array){
? ? ? ? var n = [array[0]]; //結(jié)果數(shù)組
? ? ? ? for(var i = 1; i < array.length; i++) { //從第二項開始遍歷
? ? ? ? ? ? if (array.indexOf(array[i]) == i)
? ? ? ? ? ? ? ? n.push(array[i]);
? ? ? ? }
? ? ? ? return n;
? ? }
es6
es6方法數(shù)組去重
arr=[...new Set(arr)];
es6方法數(shù)組去重，第二種方法
function dedupe(array) {
? return Array.from(new Set(array));? ? ? //Array.from()能把set結(jié)構(gòu)轉(zhuǎn)換為數(shù)組
}
get、post的區(qū)別
1.get傳參方式是通過地址欄URL傳遞，是可以直接看到get傳遞的參數(shù)，post傳參方式參數(shù)URL不可見，get把請求的數(shù)據(jù)在URL后通過？連接，通過&進行參數(shù)分割。post將參數(shù)存放在HTTP的包體內(nèi)
2.get傳遞數(shù)據(jù)是通過URL進行傳遞，對傳遞的數(shù)據(jù)長度是受到URL大小的限制，URL最大長度是2048個字符。post沒有長度限制
3.get后退不會有影響，post后退會重新進行提交
4.get請求可以被緩存，post不可以被緩存
5.get請求只URL編碼，post支持多種編碼方式
6.get請求的記錄會留在歷史記錄中，post請求不會留在歷史記錄
7.get只支持ASCII字符，post沒有字符類型限制
你所知道的http的響應(yīng)碼及含義？
1xx(臨時響應(yīng))
100: 請求者應(yīng)當繼續(xù)提出請求。
101(切換協(xié)議) 請求者已要求服務(wù)器切換協(xié)議，服務(wù)器已確認并準備進行切換。
2xx(成功)
200：正確的請求返回正確的結(jié)果
201：表示資源被正確的創(chuàng)建。比如說，我們 POST 用戶名、密碼正確創(chuàng)建了一個用戶就可以返回 201。
202：請求是正確的，但是結(jié)果正在處理中，這時候客戶端可以通過輪詢等機制繼續(xù)請求。
3xx(已重定向)
300：請求成功，但結(jié)果有多種選擇。
301：請求成功，但是資源被永久轉(zhuǎn)移。
303：使用 GET 來訪問新的地址來獲取資源。
304：請求的資源并沒有被修改過
4xx(請求錯誤)
400：請求出現(xiàn)錯誤，比如請求頭不對等。
401：沒有提供認證信息。請求的時候沒有帶上 Token 等。
402：為以后需要所保留的狀態(tài)碼。
403：請求的資源不允許訪問。就是說沒有權(quán)限。
404：請求的內(nèi)容不存在。
5xx(服務(wù)器錯誤)
500：服務(wù)器錯誤。
501：請求還沒有被實現(xiàn)。
