一? ?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
垂直居中
設置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元素設置一個字體大小坞嘀，然后其他元素的長度單位就為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)
父級設置高度
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標簽都有一個對應的節(jié)點肮砾，并且每一個文本也都會有一個對應的文本節(jié)點。DOM樹的根節(jié)點就是 documentElement袋坑，對應的是html標簽唇敞。
2.瀏覽器解析CSS代碼，計算出最終的樣式數(shù)據(jù)咒彤。構(gòu)建CSSOM樹疆柔。對CSS代碼中非法的語法它會直接忽略掉。解析CSS的時候會按照如下順序來定義優(yōu)先級：瀏覽器默認設置 < 用戶設置 < 外鏈樣式 < 內(nèi)聯(lián)樣式 < html中的style镶柱。
3.DOM Tree + CSSOM --> 渲染樹（rendering tree）旷档。渲染樹和DOM樹有點像，但是是有區(qū)別的歇拆。
DOM樹完全和html標簽一一對應鞋屈，但是渲染樹會忽略掉不需要渲染的元素，比如head故觅、display:none的元素等厂庇。而且一大段文本中的每一個行在渲染樹中都是獨立的一個節(jié)點。渲染樹中的每一個節(jié)點都存儲有對應的css屬性输吏。
4.一旦渲染樹創(chuàng)建好了权旷，瀏覽器就可以根據(jù)渲染樹直接把頁面繪制到屏幕上。
以上四個步驟并不是一次性順序完成的贯溅。如果DOM或者CSSOM被修改拄氯，以上過程會被重復執(zhí)行。實際上它浅，CSS和JavaScript往往會多次修改DOM或者CSSOM译柏。
說一下CORS？
CORS是一種新標準姐霍，支持同源通信鄙麦，也支持跨域通信典唇。fetch是實現(xiàn)CORS通信的
如何中斷ajax請求？
一種是設置超時時間讓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當前被點擊的元素
說一下宏任務和微任務？
宏任務：當前調(diào)用棧中執(zhí)行的任務稱為宏任務急迂。（主代碼快影所，定時器等等）。
微任務： 當前（此次事件循環(huán)中）宏任務執(zhí)行完僚碎，在下一個宏任務開始之前需要執(zhí)行的任務為微任務猴娩。（可以理解為回調(diào)事件，promise.then勺阐，proness.nextTick等等）卷中。
宏任務中的事件放在callback queue中，由事件觸發(fā)線程維護渊抽；微任務的事件放在微任務隊列中蟆豫，由js引擎線程維護。
說一下繼承的幾種方式及優(yōu)缺點懒闷？
借用構(gòu)造函數(shù)繼承十减，使用call或apply方法，將父對象的構(gòu)造函數(shù)綁定在子對象上
原型繼承愤估，將子對象的prototype指向父對象的一個實例
組合繼承
原型鏈繼承的缺點
字面量重寫原型會中斷關(guān)系帮辟，使用引用類型的原型，并且子類型還無法給超類型傳遞參數(shù)玩焰。
借用構(gòu)造函數(shù)（類式繼承）
借用構(gòu)造函數(shù)雖然解決了剛才兩種問題由驹，但沒有原型，則復用無從談起昔园。
組合式繼承
組合式繼承是比較常用的一種繼承方法荔棉，其背后的思路是使用原型鏈實現(xiàn)對原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承蒿赢。這樣润樱，既通過在原型上定義方法實現(xiàn)了函數(shù)復用，又保證每個實例都有它自己的屬性羡棵。
說一下閉包壹若？
閉包的實質(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是服務器返回的概说，指定了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的響應碼及含義柿冲？
1xx(臨時響應)
100: 請求者應當繼續(xù)提出請求。
101(切換協(xié)議) 請求者已要求服務器切換協(xié)議兆旬，服務器已確認并準備進行切換假抄。
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(服務器錯誤)
500：服務器錯誤经瓷。
501：請求還沒有被實現(xiàn)爆哑。
