一左权、CSS問題
web前端全棧資料粉絲福利（面試題、視頻痴颊、資料筆記赏迟、進階路線）
1.flex布局
display:flex; 在父元素設(shè)置，子元素受彈性盒影響蠢棱，默認排成一行锌杀，如果超出一行，按比例壓縮 flex:1; 子元素設(shè)置泻仙，設(shè)置子元素如何分配父元素的空間糕再，flex:1,子元素寬度占滿整個父元素align-items:center 定義子元素在父容器中的對齊方式，center 垂直居中justify-content:center 設(shè)置子元素在父元素中居中玉转，前提是子元素沒有把父元素占滿突想，讓子元素水平居中。
2.css3的新特性
transtion transition-property 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。
transition-duration 規(guī)定完成過渡效果需要多少秒或毫秒蒿柳。
transition-timing-function 規(guī)定速度效果的速度曲線饶套。
transition-delay 定義過渡效果何時開始。
animation屬性可以像Flash制作動畫一樣垒探，通過控制關(guān)鍵幀來控制動畫的每一步妓蛮，實現(xiàn)更為復(fù)雜的動畫效果。
ainimation實現(xiàn)動畫效果主要由兩部分組成：
通過類似Flash動畫中的幀來聲明一個動畫圾叼；
在animation屬性中調(diào)用關(guān)鍵幀聲明的動畫蛤克。
translate 3D建模效果
3.img中alt和title的區(qū)別
圖片中的 alt屬性是在圖片不能正常顯示時出現(xiàn)的文本提示。alt有利于SEO優(yōu)化
圖片中的 title屬性是在鼠標(biāo)在移動到元素上的文本提示夷蚊。
4.用純CSS創(chuàng)建一個三角形
<style>
? ? div {
? ? ? ? width: 0;
? ? ? ? height: 0;
? ? ? ? border-top: 40px solid transparent;
? ? ? ? border-left: 40px solid transparent;
? ? ? ? border-right: 40px solid transparent;
? ? ? ? border-bottom: 40px solid #ff0000;
? ? }
? ? </style>
</head>
<body>
? <div></div>
</body>
5.如何理解CSS的盒子模型构挤？
標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding
低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding)
6.如何讓一個div水平居中
已知寬度，block元素 惕鼓，添加添加margin:0 auto屬性筋现。
已知寬度，絕對定位的居中 箱歧，上下左右都為0矾飞，margin:auto
7.如何讓一個div水平垂直居中
div {
position: relative / fixed; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-top:-150px;
margin-left:-250px;
外邊距為自身寬高的一半 */
background-color: pink; /* 方便看效果 */
}
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px; /* 可省 */
height: 100px; /* 可省 */
background-color: pink; /* 方便看效果 */
}?
8.如何清除浮動？
clear清除浮動（添加空div法）在浮動元素下方添加空div,并給該元素寫css樣式 {clear:both;height:0;overflow:hidden;}
給浮動元素父級設(shè)置高度
父級同時浮動（需要給父級同級元素添加浮動）
父級設(shè)置成inline-block呀邢，其margin: 0 auto居中方式失效
給父級添加overflow:hidden 清除浮動方法
萬能清除法 after偽類 清浮動（現(xiàn)在主流方法洒沦，推薦使用）
float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
9.css3實現(xiàn)三欄布局，左右固定价淌，中間自適應(yīng)
圣杯布局/雙飛翼布局
<style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? .middle,
? ? ? ? .left,
? ? ? ? .right {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? float: left;
? ? ? ? ? ? min-height: 130px;
? ? ? ? }
? ? ? ? .container {
? ? ? ? ? ? padding: 0 220px 0 200px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .left {
? ? ? ? ? ? margin-left: -100%;
? ? ? ? ? ? left: -200px;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? background: red;
? ? ? ? }
? ? ? ? .right {
? ? ? ? ? ? margin-left: -220px;
? ? ? ? ? ? right: -220px;
? ? ? ? ? ? width: 220px;
? ? ? ? ? ? background: green;
? ? ? ? }
? ? ? ? .middle {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? background: blue;
? ? ? ? ? ? word-break: break-all;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class='container'>
? ? ? ? <div class='middle'></div>
? ? ? ? <div class='left'></div>
? ? ? ? <div class='right'></div>
? ? </div>
</body>
10.display:none 和 visibility: hidden的區(qū)別
display:none 隱藏對應(yīng)的元素申眼，在文檔布局中不再給它分配空間，它各邊的元素會合攏蝉衣，就當(dāng)他從來不存在括尸。
visibility:hidden 隱藏對應(yīng)的元素，但是在文檔布局中仍保留原來的空間病毡。
11.CSS中 link 和@import 的區(qū)別是姻氨？
link屬于HTML標(biāo)簽，而@import是CSS提供的頁面被加載的時剪验，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載
import只在IE5以上才能識別前联，而link是HTML標(biāo)簽功戚，無兼容問題
link方式的樣式的權(quán)重 高于@import的權(quán)重.
12.position的absolute與fixed共同點與不同點
共同點： 改變行內(nèi)元素的呈現(xiàn)方式，display被置為block 讓元素脫離普通流似嗤，不占據(jù)空間 默認會覆蓋到非定位元素上
不同點： absolute的”根元素“是可以設(shè)置的 fixed的”根元素“固定為瀏覽器窗口啸臀。當(dāng)你滾動網(wǎng)頁，fixed元素與瀏覽器窗口之間的距離是不變的。
13..transition和animation的區(qū)別
Animation和transition大部分屬性是相同的乘粒，他們都是隨時間改變元素的屬性值豌注，他們的主要區(qū)別是transition需要觸發(fā)一個事件才能改變屬性， 而animation不需要觸發(fā)任何事件的情況下才會隨時間改變屬性值灯萍，并且transition為2幀轧铁，從from .... to，而animation可以一幀一幀的旦棉。
transition 規(guī)定動畫的名字 規(guī)定完成過渡效果需要多少秒或毫秒 規(guī)定速度效果 定義過渡效果何時開始 animation 指定要綁定到選擇器的關(guān)鍵幀的名稱
14.CSS優(yōu)先級
不同級別：總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認屬性
1.屬性后面加!import 會覆蓋頁面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素內(nèi)的樣式
3.id選擇器
4.類選擇器
5.標(biāo)簽選擇器
6.通配符選擇器（*）
7.瀏覽器自定義或繼承
**同一級別：后寫的會覆蓋先寫的**
css選擇器的解析原則：選擇器定位DOM元素是從右往左的方向齿风，這樣可以盡早的過濾掉一些不必要的樣式規(guī)則和元素
15.雪碧圖：
多個圖片集成在一個圖片中的圖
使用雪碧圖可以減少網(wǎng)絡(luò)請求的次數(shù)，加快允許的速度
通過background-position绑洛，去定位圖片在屏幕的哪個位置
二救斑、JS問題
1.typeof和instance of 檢測數(shù)據(jù)類型有什么區(qū)別？
相同點： 都常用來判斷一個變量是否為空真屯，或者是什么類型的脸候。
不同點： typeof 返回值是一個字符串，用來說明變量的數(shù)據(jù)類型 instanceof 用于判斷一個變量是否屬于某個對象的實例.
16.使元素消失的方法
多個圖片集成在一個圖片中的圖
使用雪碧圖可以減少網(wǎng)絡(luò)請求的次數(shù)绑蔫，加快允許的速度
通過background-position运沦，去定位圖片在屏幕的哪個位置
.談一談深克隆和淺克隆晾匠？
淺克隆: 只是拷貝了基本類型的數(shù)據(jù)茶袒，而引用類型數(shù)據(jù)，復(fù)制后也是會發(fā)生引用凉馆，我們把這種拷貝叫做“（淺復(fù)制）淺拷貝”薪寓，換句話說，淺復(fù)制僅僅是指向被復(fù)制的內(nèi)存地址澜共，如果原地址中對象被改變了向叉，那么淺復(fù)制出來的對象也會相應(yīng)改變。
深克锣露： 創(chuàng)建一個新對象母谎，屬性中引用的其他對象也會被克隆，不再指向原有對象地址京革。
JSON.parse奇唤、JSON.stringify()
3.es6的新特性都有哪些？
let定義塊級作用域變量 沒有變量的提升匹摇，必須先聲明后使用 let聲明的變量咬扇，不能與前面的let，var廊勃，conset聲明的變量重名
const 定義只讀變量 const聲明變量的同時必須賦值懈贺，const聲明的變量必須初始化，一旦初始化完畢就不允許修改 const聲明變量也是一個塊級作用域變量 const聲明的變量沒有“變量的提升”，必須先聲明后使用 const聲明的變量不能與前面的let梭灿， var 画侣， const聲明的變量重 const定義的對象\數(shù)組中的屬性值可以修改,基礎(chǔ)數(shù)據(jù)類型不可以
ES6可以給形參函數(shù)設(shè)置默認值
在數(shù)組之前加上三個點（...）展開運算符
數(shù)組的解構(gòu)賦值、對象的解構(gòu)賦值
箭頭函數(shù)的特點 箭頭函數(shù)相當(dāng)于匿名函數(shù)堡妒，是不能作為構(gòu)造函數(shù)的配乱，不能被new 箭頭函數(shù)沒有arguments實參集合,取而代之用...剩余運算符解決 箭頭函數(shù)沒有自己的this。他的this是繼承當(dāng)前上下文中的this 箭頭函數(shù)沒有函數(shù)原型 箭頭函數(shù)不能當(dāng)做Generator函數(shù)涕蚤，不能使用yield關(guān)鍵字 不能使用call宪卿、apply、bind改變箭頭函數(shù)中this指向 Set數(shù)據(jù)結(jié)構(gòu)万栅，數(shù)組去重
4.==和===區(qū)別是什么佑钾？
=賦值
==返回一個布爾值钩述；相等返回true圆存，不相等返回false棕孙； 允許不同數(shù)據(jù)類型之間的比較稠屠； 如果是不同類型的數(shù)據(jù)進行污筷，會默認進行數(shù)據(jù)類型之間的轉(zhuǎn)換蔫骂； 如果是對象數(shù)據(jù)類型的比較试浙，比較的是空間地址
=== 只要數(shù)據(jù)類型不一樣佳恬，就返回false徒役；
5.常見的設(shè)計模式有哪些孽尽？
1、js工廠模式
2忧勿、js構(gòu)造函數(shù)模式
3杉女、js原型模式
4、構(gòu)造函數(shù)+原型的js混合模式
5鸳吸、構(gòu)造函數(shù)+原型的動態(tài)原型模式
6熏挎、觀察者模式
7、發(fā)布訂閱模式
6.call bind apply 的區(qū)別晌砾？
call() 和apply()的第一個參數(shù)相同坎拐，就是指定的對象。這個對象就是該函數(shù)的執(zhí)行上下文养匈。
call()和apply()的區(qū)別就在于哼勇，兩者之間的參數(shù)。
call()在第一個參數(shù)之后的 后續(xù)所有參數(shù)就是傳入該函數(shù)的值呕乎。
apply() 只有兩個參數(shù)猴蹂，第一個是對象，第二個是數(shù)組楣嘁，這個數(shù)組就是該函數(shù)的參數(shù)。 bind() 方法和前兩者不同在于： bind() 方法會返回執(zhí)行上下文被改變的函數(shù)而不會立即執(zhí)行，而前兩者是 直接執(zhí)行該函數(shù)逐虚。他的參數(shù)和call()相同聋溜。
7.js繼承方式有哪些？
原型鏈繼承 核心： 將父類的實例作為子類的原型
構(gòu)造繼承 核心：使用父類的構(gòu)造函數(shù)來增強子類實例叭爱，等于是復(fù)制父類的實例屬性給子類
實例繼承 核心：為父類實例添加新特性撮躁，作為子類實例返回
拷貝繼承
組合繼承 核心：通過調(diào)用父類構(gòu)造，繼承父類的屬性并保留傳參的優(yōu)點买雾，然后通過將父類實例作為子類原型把曼，實現(xiàn) 函數(shù)復(fù)用
寄生組合繼承 核心：通過寄生方式，砍掉父類的實例屬性漓穿，這樣嗤军，在調(diào)用兩次父類的構(gòu)造的時候，就不會初始化兩次實 例方法/屬性晃危，避免的組合繼承的缺點
8.你怎樣看待閉包叙赚？
個人感覺，簡單來說閉包就是在函數(shù)里面聲明函數(shù)僚饭，本質(zhì)上說就是在函數(shù)內(nèi)部和函數(shù)外部搭建起一座橋梁震叮，使得子函數(shù)可以訪問父函數(shù)中所有的局部變量，但是反之不可以鳍鸵，這只是閉包的作用之一苇瓣，另一個作用，則是保護變量不受外界污染偿乖，使其一直存在內(nèi)存中击罪，在工作中我們還是少使用閉包的好，因為閉包太消耗內(nèi)存汹想，不到萬不得已的時候盡量不使用外邓。
9.你是如何理解原型和原型鏈的？
把所有的對象共用的屬性全部放在堆內(nèi)存的一個對象（共用屬性組成的對象）古掏，然后讓每一個對象的 __proto__存儲這個「共用屬性組成的對象」的地址损话。而這個共用屬性就是原型，原型出現(xiàn)的目的就是為了減少不必要的內(nèi)存消耗槽唾。而原型鏈就是對象通過__proto__向當(dāng)前實例所屬類的原型上查找屬性或方法的機制丧枪，如果找到Object的原型上還是沒有找到想要的屬性或者是方法則查找結(jié)束，最終會返回undefined
10.瀏覽器渲染的主要流程是什么?
將html代碼按照深度優(yōu)先遍歷來生成DOM樹庞萍。 css文件下載完后也會進行渲染拧烦，生成相應(yīng)的CSSOM。 當(dāng)所有的css文件下載完且所有的CSSOM構(gòu)建結(jié)束后钝计，就會和DOM一起生成Render Tree恋博。 接下來齐佳，瀏覽器就會進入Layout環(huán)節(jié)，將所有的節(jié)點位置計算出來债沮。 最后炼吴，通過Painting環(huán)節(jié)將所有的節(jié)點內(nèi)容呈現(xiàn)到屏幕上。
11.從輸入url地址到頁面相應(yīng)都發(fā)生了什么疫衩？
1硅蹦、瀏覽器的地址欄輸入URL并按下回車。
2闷煤、瀏覽器查找當(dāng)前URL是否存在緩存童芹，并比較緩存是否過期。3鲤拿、DNS解析URL對應(yīng)的IP假褪。
4、根據(jù)IP建立TCP連接（三次握手）皆愉。
5嗜价、HTTP發(fā)起請求。
6幕庐、服務(wù)器處理請求久锥，瀏覽器接收HTTP響應(yīng)。
7异剥、渲染頁面瑟由，構(gòu)建DOM樹。
8冤寿、關(guān)閉TCP連接（四次揮手）
12.session歹苦、cookie、localStorage的區(qū)別
相同點 都是保存在瀏覽器端督怜，且同源的殴瘦。
不同點
cookie數(shù)據(jù)始終在同源的http請求中攜帶，即cookie在瀏覽器和服務(wù)器間來回傳遞号杠。
而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器蚪腋，僅在本地保存。
cookie數(shù)據(jù)還有路徑（path）的概念姨蟋，可以限制cookie只屬于某個路徑下屉凯。 存儲大小限制也不同，cookie數(shù)據(jù)不能超過4k眼溶，同時因為每次http請求都會攜帶cookie悠砚，所以cookie只適合保存很小的數(shù)據(jù)。
sessionStorage和localStorage 雖然也有存儲大小的限制堂飞，但比cookie大得多灌旧，可以達到5M或更大绑咱。 數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效节榜，自然也就不可能持久保持羡玛；
localStorage：始終有效，窗口或瀏覽器關(guān)閉也一直保存宗苍，因此用作持久數(shù)據(jù)；
cookie只在設(shè)置的cookie過期時間之前一直有效薄榛，即使窗口或瀏覽器關(guān)閉讳窟。 作用域不同，sessionStorage不在不同的瀏覽器窗口中共享敞恋，即使是同一個頁面丽啡；
localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的硬猫。
13.js中跨域方法
同源策略（協(xié)議+端口號+域名要相同）
1补箍、jsonp跨域(只能解決get） 原理：動態(tài)創(chuàng)建一個script標(biāo)簽。利用script標(biāo)簽的src屬性不受同源策略限制啸蜜，因為所有的src屬性和href屬性都不受同源策略的限制坑雅，可以請求第三方服務(wù)器資源內(nèi)容
步驟： 1).去創(chuàng)建一個script標(biāo)簽 2).script的src屬性設(shè)置接口地址 3).接口參數(shù)，必須要帶一個自定義函數(shù)名衬横，要不然后臺無法返回數(shù)據(jù) 4).通過定義函數(shù)名去接受返回的數(shù)據(jù)
2裹粤、document.domain 基礎(chǔ)域名相同 子域名不同
3、window.name 利用在一個瀏覽器窗口內(nèi)蜂林，載入所有的域名都是共享一個window.name
4遥诉、服務(wù)器設(shè)置對CORS的支持 原理：服務(wù)器設(shè)置Access-Control-Allow-Origin HTTP響應(yīng)頭之后，瀏覽器將會允許跨域請求
5噪叙、利用h5新特性window.postMessage()
14.前端有哪些頁面優(yōu)化方法?
減少 HTTP請求數(shù)
從設(shè)計實現(xiàn)層面簡化頁面
合理設(shè)置 HTTP緩存
資源合并與壓縮
合并 CSS圖片矮锈，減少請求數(shù)的又一個好辦法。
將外部腳本置底（將腳本內(nèi)容在頁面信息內(nèi)容加載后再加載）
多圖片網(wǎng)頁使用圖片懶加載睁蕾。
在js中盡量減少閉包的使用
盡量合并css和js文件
盡量使用字體圖標(biāo)或者SVG圖標(biāo)苞笨，來代替?zhèn)鹘y(tǒng)的PNG等格式的圖片
減少對DOM的操作
在JS中避免“嵌套循環(huán)”和 “死循環(huán)”
盡可能使用事件委托（事件代理）來處理事件綁定的操作
15.Ajax的四個步驟
1.創(chuàng)建ajax實例
2.執(zhí)行open 確定要訪問的鏈接 以及同步異步
3.監(jiān)聽請求狀態(tài)
4.發(fā)送請求
16.數(shù)組去重的方法
ES6的set對象 先將原數(shù)組排序，在與相鄰的進行比較惫霸，如果不同則存入新數(shù)組
function unique(arr){
? ? var arr2 = arr.sort();
? ? var res = [arr2[0]];
? ? for(var i=1;i<arr2.length;i++){
? ? ? ? if(arr2[i] !== res[res.length-1]){
? ? ? ? res.push(arr2[i]);
? ? }
}
return res;
}
利用下標(biāo)查詢
function unique(arr){
? ? var newArr = [arr[0]];
? ? for(var i=1;i<arr.length;i++){
? ? ? ? if(newArr.indexOf(arr[i]) == -1){
? ? ? ? newArr.push(arr[i]);
? ? }
}
return newArr;
}
17.ajax中g(shù)et和post請求的區(qū)別
get 一般用于獲取數(shù)據(jù)
get請求如果需要傳遞參數(shù)猫缭，那么會默認將參數(shù)拼接到url的后面；然后發(fā)送給服務(wù)器壹店；
get請求傳遞參數(shù)大小是有限制的猜丹；是瀏覽器的地址欄有大小限制；
get安全性較低
get 一般會走緩存硅卢，為了防止走緩存射窒，給url后面每次拼的參數(shù)不同藏杖；放在?后面，一般用個時間戳
post 一般用于發(fā)送數(shù)據(jù)
post傳遞參數(shù)脉顿，需要把參數(shù)放進請求體中蝌麸，發(fā)送給服務(wù)器；
post請求參數(shù)放進了請求體中艾疟，對大小沒有要求来吩；
post安全性比較高；
post請求不會走緩存蔽莱；
18.ajax的狀態(tài)碼
2開頭
200 : 代表請求成功弟疆；
3開頭
301 : 永久重定向；
302: 臨時轉(zhuǎn)移
304 : 讀取緩存 [表示瀏覽器端有緩存盗冷，并且服務(wù)端未更新怠苔，不再向服務(wù)端請求資源]
307:臨時重定向
以4開頭的都是客戶端的問題；
400 :數(shù)據(jù)/格式錯誤
401: 權(quán)限不夠仪糖；（身份不合格柑司，訪問網(wǎng)站的時候，登錄和不登錄是不一樣的）
404 : 路徑錯誤锅劝，找不到文件
以5開頭都是服務(wù)端的問題
500 : 服務(wù)器的問題
503: 超負荷攒驰；
19.移動端的兼容問題
給移動端添加點擊事件會有300S的延遲 如果用點擊事件，需要引一個fastclick.js文件鸠天，解決300s的延遲 一般在移動端用ontouchstart讼育、ontouchmove、ontouchend
移動端點透問題,touchstart 早于 touchend 早于click,click的觸發(fā)是有延遲的稠集，這個時間大概在300ms左右奶段，也就是說我們tap觸發(fā)之后蒙層隱藏， 此時 click還沒有觸發(fā)剥纷，300ms之后由于蒙層隱藏痹籍，我們的click觸發(fā)到了下面的a鏈接上 盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)晦鞋。 用fastclick蹲缠，github.com/ftlabs/fast…?用preventDefault阻止a標(biāo)簽的click 消除 IE10 里面的那個叉號 input:-ms-clear{display:none;}
設(shè)置緩存 手機頁面通常在第一次加載后會進行緩存，然后每次刷新會使用緩存而不是去重新向服務(wù)器發(fā)送請求悠垛。如果不希望使用緩存可以設(shè)置no-cache线定。
圓角BUG 某些Android手機圓角失效 background-clip: padding-box; 防止手機中網(wǎng)頁放大和縮小 這點是最基本的，做為手機網(wǎng)站開發(fā)者來說應(yīng)該都知道的确买，就是設(shè)置meta中的viewport
設(shè)置用戶截止縮放斤讥，一般寫視口的時候就已經(jīng)寫好了。
20.JS中同步和異步,以及js的事件流
同步：在同一時間內(nèi)做一件事情
異步：在同一時間內(nèi)做多個事情 JS是單線程的湾趾，每次只能做一件事情芭商，JS運行在瀏覽器中派草，瀏覽器是多線程的，可以在同一時間執(zhí)行多個任務(wù)铛楣。
21.JS中常見的異步任務(wù)
定時器近迁、ajax、事件綁定簸州、回調(diào)函數(shù)鉴竭、async await、promise
22.TCP的三次握手和四次揮手
三次握手
第一次握手：客戶端發(fā)送一個SYN碼給服務(wù)器岸浑，要求建立數(shù)據(jù)連接拓瞪；
第二次握手： 服務(wù)器SYN和自己處理一個SYN（標(biāo)志）；叫SYN+ACK（確認包）助琐；發(fā)送給客戶端，可以建立連接
第三次握手： 客戶端再次發(fā)送ACK向服務(wù)器面氓，服務(wù)器驗證ACK沒有問題兵钮，則建立起連接；
四次揮手
第一次揮手： 客戶端發(fā)送FIN(結(jié)束)報文舌界，通知服務(wù)器數(shù)據(jù)已經(jīng)傳輸完畢掘譬；
第二次揮手: 服務(wù)器接收到之后，通知客戶端我收到了SYN,發(fā)送ACK(確認)給客戶端呻拌，數(shù)據(jù)還沒有傳輸完成
第三次揮手： 服務(wù)器已經(jīng)傳輸完畢葱轩，再次發(fā)送FIN通知客戶端，數(shù)據(jù)已經(jīng)傳輸完畢
第四次揮手： 客戶端再次發(fā)送ACK,進入TIME_WAIT狀態(tài)藐握；服務(wù)器和客戶端關(guān)閉連接靴拱；
23.為什么建立連接是三次握手，而斷開連接是四次揮手呢?
建立連接的時候猾普， 服務(wù)器在LISTEN狀態(tài)下袜炕，收到建立連接請求的SYN報文后，把ACK和SYN放在一個報文里發(fā)送給客戶端初家。 而關(guān)閉連接時偎窘，服務(wù)器收到對方的FIN報文時，僅僅表示對方不再發(fā)送數(shù)據(jù)了但是還能接收數(shù)據(jù)溜在，而自己也未必全部數(shù)據(jù)都發(fā)送給對方了陌知，所以己方可以立即關(guān)閉，也可以發(fā)送一些數(shù)據(jù)給對方后掖肋，再發(fā)送FIN報文給對方來表示同意現(xiàn)在關(guān)閉連接仆葡，因此，己方ACK和FIN一般都會分開發(fā)送培遵，從而導(dǎo)致多了一次浙芙。
24.DOM diff原理
如果元素類型發(fā)生變化登刺，直接替換
如果是文本，則比較文本里面的內(nèi)容嗡呼，是否有差異纸俭，如果是元素就需要比較當(dāng)前元素的屬性是否相等,會先比較key， 在比較類型 為什么 react中循環(huán) 建議不要使用索引 ,如果純?yōu)榱苏故?那可以使用索引
25.作用域
全局作用域
瀏覽器打開一個頁面時南窗，瀏覽器會給JS代碼提供一個全局的運行環(huán)境揍很，那么這個環(huán)境就是全局作用域 一個頁面只有一個全局作用域，全局作用域下有一個window對象 window是全局作用域下的最大的一個內(nèi)置對象（全局作用域下定義的變量和函數(shù)都會存儲在window下） 如果是全局變量万伤，都會給window新增一個鍵值對窒悔；屬性名就是變量名，屬性值就是變量所存儲的值 如果變量只被var過敌买，那么存儲值是undefined 在私有作用域中是可以獲取到全局變量的简珠，但是在全局作用域中不能獲取私有變量
私有作用域
函數(shù)執(zhí)行會形成一個新的私有的作用域（執(zhí)行多次，形成多個私有作用域） 私有作用域在全局作用域中形成虹钮，具有包含的關(guān)系聋庵； 在一個全局作用域中，可以有很多個私有作用域 在私有作用域下定義的變量都是私有變量 形參也是私有變量 函數(shù)體中通過function定義的函數(shù)也是私有的芙粱，在全局作用域不能使用祭玉；
塊級作用域
es6中新引入的一種作用域 在js中常見到的if{}、for{}春畔、while{}脱货、try{}、catch{}律姨、switch case{}都是塊級作用域 var obj = {} //對象的大括號不是塊級作用域 塊級作用域中的同一變量不能被重復(fù)聲明（塊級下var和function不能重名振峻，否則會報錯） 作用域鏈
上級作用域
函數(shù)在哪里定義，他的上一級作用域就是哪线召，和函數(shù)在哪個作用域下執(zhí)行沒有關(guān)系 作用域鏈：當(dāng)獲取變量所對應(yīng)的值時铺韧，首先看變量是否是私有變量，如果不是私有變量缓淹，要繼續(xù)向上一級作用域中查找哈打，如果上一級也沒有，那么會繼續(xù)向上一級查找讯壶，直到找到全局作用域為止料仗；如果全局作用域也沒有，則會報錯伏蚊；這樣一級一級向上查找立轧，就會形成作用域鏈 當(dāng)前作用域沒有的，則會繼續(xù)向上一級作用域查找 當(dāng)前函數(shù)的上一級作用域跟函數(shù)在哪個作用域下執(zhí)行沒有關(guān)系，只跟函數(shù)在哪定義有關(guān)（重點）
26.Promise處理異步
他是ES6中新增加的一個類（new Promise）,目的是為了管理JS中的異步編程的氛改，所以把他稱為“Promise設(shè)計模式” new Promise 經(jīng)歷三個狀態(tài)：padding(準(zhǔn)備狀態(tài)：初始化成功帐萎、開始執(zhí)行異步的任務(wù))、fullfilled(成功狀態(tài))胜卤、rejected(失敗狀態(tài))== Promise本身是同步編程的疆导，他可以管理異步操作的（重點），new Promise的時候葛躏，會把傳遞的函數(shù)立即執(zhí)行 Promise函數(shù)天生有兩個參數(shù)澈段，resolve(當(dāng)異步操作執(zhí)行成功，執(zhí)行resolve方法),rejected(當(dāng)異步操作失敗舰攒，執(zhí)行reject方法) then()方法中有兩個函數(shù)败富，第一個傳遞的函數(shù)是resolve,第二個傳遞的函數(shù)是reject ajax中false代表同步，true代表異步摩窃，如果使用異步兽叮，不等ajax徹底完成
27.map和forEach的區(qū)別
相同點
都是循環(huán)遍歷數(shù)組中的每一項 forEach和map方法里每次執(zhí)行匿名函數(shù)都支持3個參數(shù)，參數(shù)分別是item（當(dāng)前每一項）猾愿、index（索引值）充择、arr（原數(shù)組），需要用哪個的時候就寫哪個 匿名函數(shù)中的this都是指向window 只能遍歷數(shù)組
不同點
map方法返回一個新的數(shù)組匪蟀，數(shù)組中的元素為原始數(shù)組調(diào)用函數(shù)處理后的值。(原數(shù)組進行處理之后對應(yīng)的一個新的數(shù)組宰僧。) map()方法不會改變原始數(shù)組 map()方法不會對空數(shù)組進行檢測 forEach()方法用于調(diào)用數(shù)組的每個元素材彪，將元素傳給回調(diào)函數(shù).(沒有return，返回值是undefined）
注意：forEach對于空數(shù)組是不會調(diào)用回調(diào)函數(shù)的琴儿。
28.async await函數(shù)
async/await函數(shù)是異步代碼的新方式
async/await是基于promise實現(xiàn)的
async/await使異步代碼更像同步代碼
await 只能在async函數(shù)中使用段化，不能再普通函數(shù)中使用，要成對出現(xiàn)
默認返回一個promise實例造成，不能被改變
await下面的代碼是異步显熏，后面的代碼是同步的
29.this指向
全局作用域下的this指向window
如果給元素的事件行為綁定函數(shù)，那么函數(shù)中的this指向當(dāng)前被綁定的那個元素
函數(shù)中的this晒屎，要看函數(shù)執(zhí)行前有沒有 . , 有 . 的話喘蟆，點前面是誰，this就指向誰鼓鲁，如果沒有點蕴轨，指向window
自執(zhí)行函數(shù)中的this永遠指向window
定時器中函數(shù)的this指向window
構(gòu)造函數(shù)中的this指向當(dāng)前的實例
call、apply骇吭、bind可以改變函數(shù)的this指向
箭頭函數(shù)中沒有this橙弱，如果輸出this，就會輸出箭頭函數(shù)定義時所在的作用域中的this
30.原型
所有的函數(shù)數(shù)據(jù)類型都天生自帶一個prototype屬性，該屬性的屬性值是一個對象 prototype的屬性值中天生自帶一個constructor屬性棘脐，其constructor屬性值指向當(dāng)前原型所屬的類 所有的對象數(shù)據(jù)類型斜筐，都天生自帶一個_proto_屬性，該屬性的屬性值指向當(dāng)前實例所屬類的原型
31.異步回調(diào)（如何解決回調(diào)地獄）
promise蛀缝、generator顷链、async/await
promise： 1.是一個對象，用來傳遞異步操作的信息内斯。代表著某個未來才會知道結(jié)果的時間蕴潦，并未這個事件提供統(tǒng)一的api，供進異步處理
? 2.有了這個對象俘闯，就可以讓異步操作以同步的操作的流程來表達出來潭苞，避免層層嵌套的回調(diào)地獄
? 3.promise代表一個異步狀態(tài)，有三個狀態(tài)pending（進行中）真朗，Resolve(以完成）此疹，Reject（失敗）
? 4.一旦狀態(tài)改變遮婶，就不會在變蝗碎。任何時候都可以得到結(jié)果。從進行中變?yōu)橐酝瓿苫蛘呤?/p>
promise.all() 里面狀態(tài)都改變旗扑，那就會輸出蹦骑，得到一個數(shù)組
promise.race() 里面只有一個狀態(tài)變?yōu)閞ejected或者fulfilled即輸出
promis.finally()不管指定不管Promise對象最后狀態(tài)如何，都會執(zhí)行的操作（本質(zhì)上還是then方法的特例）
32.前端事件流
事件流描述的是從頁面中接受事件的順序臀防，事件 捕獲階段 處于目標(biāo)階段 事件冒泡階段 addeventListener 最后這個布爾值參數(shù)如果是true眠菇，表示在捕獲階段調(diào)用事件處理程序；如果是false袱衷，表示在冒泡階段調(diào)用事件處理程序捎废。
? 1、事件捕獲階段：實際目標(biāo)div在捕獲階段不會接受事件致燥，也就是在捕獲階段登疗，事件從document到<html>再到<body>就停止了。
? ? ? 2嫌蚤、處于目標(biāo)階段：事件在div發(fā)生并處理辐益，但是事件處理會被看成是冒泡階段的一部分。
? ? ? 3脱吱、冒泡階段：事件又傳播回文檔
? 阻止冒泡事件event.stopPropagation()
? function stopBubble(e) {
? ? if (e && e.stopPropagation) { // 如果提供了事件對象event 這說明不是IE瀏覽器
? ? ? e.stopPropagation()
? ? } else {
? ? ? window.event.cancelBubble = true //IE方式阻止冒泡
? ? ? ? ? }
? ? }
? 阻止默認行為event.preventDefault()
function stopDefault(e) {
? ? if (e && e.preventDefault) {
? ? ? e.preventDefault()
? ? } else {
? ? ? // IE瀏覽器阻止函數(shù)器默認動作的行為
? ? ? window.event.returnValue = false
? ? }
? }
33.事件如何先捕獲后冒泡荷腊？
在DOM標(biāo)準(zhǔn)事件模型中，是先捕獲后冒泡急凰。但是如果要實現(xiàn)先冒泡后捕獲的效果女仰， 對于同一個事件猜年，監(jiān)聽捕獲和冒泡，分別對應(yīng)相應(yīng)的處理函數(shù)疾忍，監(jiān)聽到捕獲事件乔外，先暫緩執(zhí)行，直到冒泡事件被捕獲后再執(zhí)行捕獲事件一罩。
哪些事件不支持冒泡事件：鼠標(biāo)事件：mouserleave mouseenter 焦點事件：blur focus UI事件：scroll resize
34. 如何判斷一個變量是對象還是數(shù)組（prototype.toString.call()）杨幼。
千萬不要使用typeof來判斷對象和數(shù)組，因為這種類型都會返回object聂渊。
typeOf()是判斷基本類型的Boolean,Number差购，symbol, undefined, String。 對于引用類型：除function汉嗽，都返回object null返回object欲逃。
installOf() 用來判斷A是否是B的實例，installof檢查的是原型饼暑。
toString() 是Object的原型方法稳析，對于 Object 對象，直接調(diào)用 toString() 就能返回 [Object Object] 弓叛。而對于其他對象彰居，則需要通過 call / apply 來調(diào)用才能返回正確的類型信息。
hasOwnProperty()方法返回一個布爾值撰筷，指示對象自身屬性中是否具有指定的屬性陈惰，該方法會忽略掉那些從原型鏈上繼承到的屬性。
isProperty()方法測試一個對象是否存在另一個對象的原型鏈上毕籽。
35.setTimeout 和 setInterval的機制
因為js是單線程的奴潘。瀏覽器遇到etTimeout 和 setInterval會先執(zhí)行完當(dāng)前的代碼塊，在此之前會把定時器推入瀏覽器的
待執(zhí)行時間隊列里面影钉，等到瀏覽器執(zhí)行完當(dāng)前代碼之后會看下事件隊列里有沒有任務(wù)，有的話才執(zhí)行定時器里的代碼
36.splice和slice掘剪、map和forEach平委、 filter()、reduce()的區(qū)別
1.slice(start,end):方法可以從已有數(shù)組中返回選定的元素夺谁，返回一個新數(shù)組廉赔，
包含從start到end（不包含該元素）的數(shù)組方法
注意：該方法不會更新原數(shù)組，而是返回一個子數(shù)組
2.splice():該方法想或者從數(shù)組中添加或刪除項目匾鸥，返回被刪除的項目蜡塌。（該方法會改變原數(shù)組）
splice(index, howmany,item1,...itemx)
·index參數(shù)：必須，整數(shù)規(guī)定添加或刪除的位置勿负，使用負數(shù)馏艾，從數(shù)組尾部規(guī)定位置
·howmany參數(shù)：必須，要刪除的數(shù)量，
·item1..itemx:可選琅摩，向數(shù)組添加新項目
3.map()：會返回一個全新的數(shù)組铁孵。使用于改變數(shù)據(jù)值的時候。會分配內(nèi)存存儲空間數(shù)組并返回房资，forEach（）不會返回數(shù)據(jù)
4.forEach(): 不會返回任何有價值的東西蜕劝，并且不打算改變數(shù)據(jù)，單純的只是想用數(shù)據(jù)做一些事情轰异，他允許callback更改原始數(shù)組的元素
5.reduce(): 方法接收一個函數(shù)作為累加器岖沛，數(shù)組中的每一個值（從左到右）開始縮減，最終計算一個值搭独，不會改變原數(shù)組的值
6.filter(): 方法創(chuàng)建一個新數(shù)組婴削，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。它里面通過function去做處理
VUE問題
1.聊聊對vue的理解
vue是一個漸進式的JS框架戳稽。他易用馆蠕，靈活，高效惊奇； 可以把一個頁面分隔成多個組件互躬；當(dāng)其他頁面有類似功能時，直接讓封裝的組件進行復(fù)用颂郎； 他是構(gòu)建用戶界面的聲明式框架吼渡，只關(guān)心圖層；不關(guān)心具體是如何實現(xiàn)的
2.V-model的原理是什么乓序？
Vue的雙向數(shù)據(jù)綁定是由數(shù)據(jù)劫持結(jié)合發(fā)布者訂閱者實現(xiàn)的寺酪。 數(shù)據(jù)劫持是通過Object.defineProperty()來劫持對象數(shù)據(jù)的setter和getter操作。 在數(shù)據(jù)變動時作你想做的事
原理 通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化替劈，通過Compile來解析編譯模板指令寄雀，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數(shù)據(jù)變化->視圖更新 在初始化vue實例時陨献，遍歷data這個對象盒犹，給每一個鍵值對利用Object.definedProperty對data的鍵值對新增get和set方法，利用了事件監(jiān)聽DOM的機制眨业，讓視圖去改變數(shù)據(jù)
3.談?wù)剬ι芷诘睦斫?/p>
beforeCreate階段：vue實例的掛載元素el和數(shù)據(jù)對象data都是undefined急膀，還沒有初始化。
created階段：vue實例的數(shù)據(jù)對象data有了龄捡，可以訪問里面的數(shù)據(jù)和方法卓嫂，未掛載到DOM，el還沒有
beforeMount階段：vue實例的el和data都初始化了聘殖，但是掛載之前為虛擬的dom節(jié)點
mounted階段：vue實例掛載到真實DOM上晨雳，就可以通過DOM獲取DOM節(jié)點
beforeUpdate階段：響應(yīng)式數(shù)據(jù)更新時調(diào)用行瑞，發(fā)生在虛擬DOM打補丁之前，適合在更新之前訪問現(xiàn)有的DOM悍募，比如手動移除已添加的事件監(jiān)聽器
updated階段：虛擬DOM重新渲染和打補丁之后調(diào)用蘑辑，組成新的DOM已經(jīng)更新，避免在這個鉤子函數(shù)中操作數(shù)據(jù)坠宴，防止死循環(huán)
beforeDestroy階段：實例銷毀前調(diào)用洋魂，實例還可以用，this能獲取到實例喜鼓，常用于銷毀定時器副砍，解綁事件
destroyed階段：實例銷毀后調(diào)用，調(diào)用后所有事件監(jiān)聽器會被移除庄岖，所有的子實例都會被銷毀
4.VUE和REACT有什么區(qū)別豁翎？
react整體是函數(shù)式的思想，把組件設(shè)計成純組件隅忿，狀態(tài)和邏輯通過參數(shù)傳入心剥，所以在react中，是單向數(shù)據(jù)流背桐；
vue的思想是響應(yīng)式的优烧，也就是基于是數(shù)據(jù)可變的，通過對每一個屬性建立Watcher來監(jiān)聽链峭，當(dāng)屬性變化的時候畦娄，響應(yīng)式的更新對應(yīng)的虛擬dom。
5.vuex的流程
頁面通過mapAction異步提交事件到action弊仪。action通過commit把對應(yīng)參數(shù)同步提交到mutation熙卡。
mutation會修改state中對于的值。 最后通過getter把對應(yīng)值跑出去，在頁面的計算屬性中
通過mapGetter來動態(tài)獲取state中的值
6.vuex有哪幾種狀態(tài)和屬性
state中保存著共有數(shù)據(jù)，數(shù)據(jù)是響應(yīng)式的
getter可以對state進行計算操作融击，主要用來過濾一些數(shù)據(jù)，可以在多組件之間復(fù)用
mutations定義的方法動態(tài)修改state中的數(shù)據(jù)颓鲜，通過commit提交方法，方法必須是同步的
actions將mutations里面處理數(shù)據(jù)的方法變成異步的禾嫉，就是異步操作數(shù)據(jù)，通store.dispatch來分發(fā)actions蚊丐，把異步的方法寫在actions中熙参，通過commit提交mutations，進行修改數(shù)據(jù)麦备。
modules：模塊化vuex
7.vue路由的兩種模式
hash ——即地址欄URL中的#符號（此hsah 不是密碼學(xué)里的散列運算） hash 雖然出現(xiàn)URL中孽椰，但不會被包含在HTTP請求中昭娩，對后端完全沒有影響，因此改變hash不會重新加載頁面黍匾。
history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法
這兩個方法應(yīng)用于瀏覽器的歷史記錄站栏渺，在當(dāng)前已有的back、forward锐涯、go 的基礎(chǔ)之上磕诊，它們提供了對歷史記錄進行修改的功能。只是當(dāng)它們執(zhí)行修改是纹腌，雖然改變了當(dāng)前的URL霎终，但你瀏覽器不會立即向后端發(fā)送請求。
8.vue中 key 值的作用
當(dāng) Vue.js 用v-for正在更新已渲染過的元素列表時升薯，它默認用“就地復(fù)用”策略莱褒。 如果數(shù)據(jù)項的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序涎劈，而是簡單復(fù)用此處每個元素广凸，并且確保它在特定索引下顯示已被渲染過的每個元素。
key的作用主要是為了高效的更新虛擬DOM蛛枚。
9$route和$router的區(qū)別
$route是“路由信息對象”谅海，包括path，params坤候，hash胁赢，query，fullPath白筹，matched智末，name等路由信息參數(shù)。
$router是“路由實例”對象包括了路由的跳轉(zhuǎn)方法徒河，鉤子函數(shù)等系馆。
10.vue-router守衛(wèi)
導(dǎo)航守衛(wèi) router.beforeEach 全局前置守衛(wèi)
to: Route: 即將要進入的目標(biāo)（路由對象）
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。（一定要用這個函數(shù)才能去到下一個路由顽照，如果不用就攔截） 執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)由蘑。
next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了代兵，則導(dǎo)航的狀態(tài)就是 confirmed (確認的)尼酿。
next(false): 取消進入路由，url地址重置為from路由地址(也就是將要離開的路由地址)植影。
// main.js 入口文件
? ? import router from './router'; // 引入路由
? ? router.beforeEach((to, from, next) => {
? ? ? next();
? ? });
? ? router.beforeResolve((to, from, next) => {
? ? ? next();
? ? });
? ? router.afterEach((to, from) => {
? ? ? console.log('afterEach 全局后置鉤子');
? ? });
組件內(nèi)的守衛(wèi) 你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)
const router = new VueRouter({
? routes: [
? ? {
? ? ? path: '/foo',
? ? ? component: Foo,
? ? ? beforeEnter: (to, from, next) => {
? ? ? ? // ...
? ? ? }
? ? }
? ]
})
組件內(nèi)的守衛(wèi) 你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)
const Foo = {
? template: `...`,
? beforeRouteEnter (to, from, next) {
? ? // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
? ? // 不裳擎！能！獲取組件實例 `this`
? ? // 因為當(dāng)守衛(wèi)執(zhí)行前思币，組件實例還沒被創(chuàng)建
? },
? beforeRouteUpdate (to, from, next) {
? ? // 在當(dāng)前路由改變鹿响，但是該組件被復(fù)用時調(diào)用
? ? // 舉例來說羡微，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候惶我，
? ? // 由于會渲染同樣的 Foo 組件妈倔，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用绸贡。
? ? // 可以訪問組件實例 `this`
? },
? beforeRouteLeave (to, from, next) {
? ? // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用盯蝴，我們用它來禁止用戶離開
? ? // 可以訪問組件實例 `this`
? ? // 比如還未保存草稿，或者在用戶離開前恃轩，
? ? 將setInterval銷毀结洼，防止離開之后，定時器還在調(diào)用叉跛。
? }
}
11.axios是什么松忍？怎么使用？描述使用它實現(xiàn)登錄功能的流程筷厘？
請求后臺資源的模塊鸣峭。
$ npm install axios -S裝好 復(fù)制代碼
然后發(fā)送的是跨域，需在配置文件中config/index.js進行設(shè)置酥艳。后臺如果是Tp5則定義一個資源路由摊溶。 js中使用import進來，然后.get或.post充石。返回在.then函數(shù)中如果成功莫换，失敗則是在.catch函數(shù)中
12.vue修飾符
stop：阻止事件的冒泡
prevent：阻止事件的默認行為
once：只觸發(fā)一次
self：只觸發(fā)自己的事件行為時，才會執(zhí)行
13.vue項目中的性能優(yōu)化
1.不要在模板里面寫過多表達式
2.循環(huán)調(diào)用子組件時添加key
3.頻繁切換的使用v-show骤铃，不頻繁切換的使用v-if
4.盡量少用float拉岁，可以用flex
5.按需加載，可以用require或者import()按需加載需要的組件
6.路由懶加載
14.vue.extend和vue.component
extend 是構(gòu)造一個組件的語法器惰爬。 然后這個組件你可以作用到Vue.component這個全局注冊方法里 還可以在任意vue模板里使用組件喊暖。 也可以作用到vue實例或者某個組件中的components屬性中并在內(nèi)部使用apple組件。
Vue.component 你可以創(chuàng)建 撕瞧，也可以取組件陵叽。
常見的兼容問題
png24位的圖片在iE6瀏覽器上出現(xiàn)背景 解決方案是做成PNG8.也可以引用一段腳本處理.
瀏覽器默認的margin和padding不同。 解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一丛版。
IE6雙邊距bug:塊屬性標(biāo)簽float后巩掺，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大页畦。
浮動ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下胖替，如果對元素設(shè)置了浮動，同時又設(shè)置了margin-left或margin-right，margin值會加倍刊殉。） #box{ float:left; width:10px; margin:0 0 0 100px;}
React問題
1.react和vue的區(qū)別
=> 相同點：
1.數(shù)據(jù)驅(qū)動頁面，提供響應(yīng)式的試圖組件
2.都有virtual DOM,組件化的開發(fā)州胳，通過props參數(shù)進行父子之間組件傳遞數(shù)據(jù)记焊，都實現(xiàn)了webComponents規(guī)范
3.數(shù)據(jù)流動單向，都支持服務(wù)器的渲染SSR
4.都有支持native的方法栓撞，react有React native遍膜， vue有wexx
=> 不同點：
1.數(shù)據(jù)綁定：Vue實現(xiàn)了雙向的數(shù)據(jù)綁定，react數(shù)據(jù)流動是單向的
2.數(shù)據(jù)渲染：大規(guī)模的數(shù)據(jù)渲染瓤湘，react更快
3.使用場景：React配合Redux架構(gòu)適合大規(guī)模多人協(xié)作復(fù)雜項目瓢颅，Vue適合小快的項目
4.開發(fā)風(fēng)格：react推薦做法jsx + inline style把html和css都寫在js了
vue是采用webpack + vue-loader單文件組件格式，html, js, css同一個文件
2.redux中的reducer（純函數(shù)）
Redux數(shù)據(jù)流里弛说，reduces其實是根據(jù)之前的狀態(tài)（previous state）和現(xiàn)有的action（current action）
更新state(這個state可以理解為上下累加器的結(jié)果）
每次redux reducer被執(zhí)行時挽懦，state和action被傳入，這個state根據(jù)action進行累加或者是'自身消減'(reduce),
進而返回最新的state,這也就是典型reduce函數(shù)的用法：state ->? action ->? state
3.react的refs
refs就想一個逃生窗木人，允許我們之間訪問dom元素或者組件實例信柿，可以向組件添加一個ref屬性的值是一個回調(diào)函數(shù)，
它將接受地城dom元素或組件的已掛在實例醒第，作為第一個參數(shù)
4.react中的keys
幫組我們跟蹤哪些項目已更改渔嚷、添加、從列表中刪除稠曼，key是獨一無二的形病，可以讓我們高效的去定位元素，并且操作它
5.React的生命周期
三個狀態(tài)：Mounting(已插入真實的DOM）
? Updating(正在被重新渲染)
? Unmounting(已移除真實的DOM)
componentDIdMount 在第一次渲染后調(diào)用霞幅，只在客服端漠吻。之后組件已經(jīng)生成對應(yīng)的DOM結(jié)構(gòu)，
componentDidUpdate 在組件完成更新后立即調(diào)用蝗岖，在出初始化是不會調(diào)用
6.React子組件向父組件傳值
父組件通過props 給子組件傳遞數(shù)據(jù)侥猩，子組件則是通過調(diào)用父組件傳給它的函數(shù)給父組件傳遞數(shù)據(jù)。
7.為什么虛擬DOM會提高性能?www.zhihu.com/question/29…
虛擬DOM相當(dāng)于在js和真實dom中間加了一個緩存抵赢，利用dom diff算法避免了沒有必要的doom操作欺劳，從而提高性能
具體實現(xiàn)步驟：
·用JavaScript對象結(jié)構(gòu)表示DOM樹的結(jié)構(gòu)；然后用這個樹構(gòu)建一個真正的DOM樹铅鲤，插到文檔中
·當(dāng)狀態(tài)變更的時候划提，重新構(gòu)造一棵樹的對象樹，然后用新的樹和舊的樹進行對比邢享，記錄兩棵樹差異
·把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DOM樹上鹏往，試圖就更新了。
8.diff算法
1.把樹形結(jié)構(gòu)按照層級分解骇塘，只比較同級元素
2.給列表結(jié)構(gòu)的每個單元添加key屬性伊履，方便比較韩容。在實際代碼中，會對新舊兩棵樹進行一個深度優(yōu)先的遍歷唐瀑，這樣每個節(jié)點都會有一個標(biāo)記
3.在深度優(yōu)先遍歷的時候群凶，每遍歷到一個節(jié)點就把該節(jié)點和新的樹進行對比。如果有差異的話就記錄到一個對象里面
Vritual DOM 算法主要實現(xiàn)上面步驟的三個函數(shù)：element哄辣， diff请梢， patch。然后就可以實際的進行使用
react只會匹配相同的class的component（這里的class指的是組件的名字）
合并操作力穗，條用component的setState方法的時候毅弧，React將其標(biāo)記為dirty.到每一個時間循環(huán)借宿，React檢查所有標(biāo)記dirty的component重新繪制
4.選擇性子樹渲染当窗」蛔可以重寫shouldComponentUpdate提高diff的性能
9.簡述下flux的思想
flux的最大特點，就是數(shù)據(jù)的‘單向流動’ 1.用戶訪問View 2.View發(fā)出用戶的Action 3.Dispatcher收到Action,要求state進行相應(yīng)的更新 4.store更新后崖面，發(fā)出一個‘change’事件后咆霜，更新頁面
10.reac性能優(yōu)化是哪個周期函
shouldComponentUpdate 這個方法用來判斷是否需要調(diào)用render方法重新描繪dom.因為dom的描繪非常消耗性能， 如果我們在shouldComponentUpdate方法中能夠?qū)懗龈鼉?yōu)化的dom diff算法嘶朱，可以極大的提高性能
11.react怎么劃分業(yè)務(wù)組件和技術(shù)組件
根據(jù)組件的職責(zé)通常把組件分為UI組件和容器組件 UI組件負責(zé)UI的呈現(xiàn)蛾坯，容器組件負責(zé)管理數(shù)據(jù)和邏輯 兩者通過React-redux提供connect方法聯(lián)系起來
12.setState
setState通過一個隊列機制實現(xiàn)state更新，當(dāng)執(zhí)行setState時疏遏，會將需要更新的state很后放入狀態(tài)隊列
而不會立即更新this.state脉课，隊列機制可以高效地批量更新state。如果不通過setState而直接修改this.state的值
那么該state將不會被放入狀態(tài)隊列中财异。當(dāng)下次調(diào)用setState并對狀態(tài)隊列進行合并時倘零，就會忽略之前修改的state，造成不可預(yù)知的錯誤
同時戳寸，也利用了隊列機制實現(xiàn)了setState的異步更新呈驶，避免了頻繁的重復(fù)更新state
同步更新state:
setState 函數(shù)并不會阻塞等待狀態(tài)更新完畢，因此 setNetworkActivityIndicatorVisible 有可能先于數(shù)據(jù)渲染完畢就執(zhí)行疫鹊。
第二個參數(shù)是一個回調(diào)函數(shù)袖瞻，在setState的異步操作結(jié)束并且組件已經(jīng)重新渲染的時候執(zhí)行
也就是說，我們可以通過這個回調(diào)來拿到更新的state的值拆吆，實現(xiàn)代碼的同步
例子：componentDidMount() {
fetch('https://test.com')
.then((res) => res.json())
.then(
? ? (data) => {
this.setState({ data:data });
StatusBar.setNetworkActivityIndicatorVisible(false);
? ? ? ? }
