一、CSS問題
web前端全棧資料粉絲福利（面試題、視頻、資料筆記、進(jìn)階路線）
1.flex布局
display:flex; 在父元素設(shè)置，子元素受彈性盒影響，默認(rèn)排成一行，如果超出一行，按比例壓縮 flex:1; 子元素設(shè)置，設(shè)置子元素如何分配父元素的空間，flex:1,子元素寬度占滿整個(gè)父元素align-items:center 定義子元素在父容器中的對(duì)齊方式，center 垂直居中justify-content:center 設(shè)置子元素在父元素中居中，前提是子元素沒有把父元素占滿，讓子元素水平居中。
2.css3的新特性
transtion transition-property 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。
transition-duration 規(guī)定完成過渡效果需要多少秒或毫秒。
transition-timing-function 規(guī)定速度效果的速度曲線。
transition-delay 定義過渡效果何時(shí)開始。
animation屬性可以像Flash制作動(dòng)畫一樣，通過控制關(guān)鍵幀來(lái)控制動(dòng)畫的每一步，實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫效果。
ainimation實(shí)現(xiàn)動(dòng)畫效果主要由兩部分組成：
通過類似Flash動(dòng)畫中的幀來(lái)聲明一個(gè)動(dòng)畫；
在animation屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫。
translate 3D建模效果
3.img中alt和title的區(qū)別
圖片中的 alt屬性是在圖片不能正常顯示時(shí)出現(xiàn)的文本提示。alt有利于SEO優(yōu)化
圖片中的 title屬性是在鼠標(biāo)在移動(dòng)到元素上的文本提示。
4.用純CSS創(chuàng)建一個(gè)三角形
<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.如何讓一個(gè)div水平居中
已知寬度，block元素 ，添加添加margin:0 auto屬性。
已知寬度，絕對(duì)定位的居中 ，上下左右都為0，margin:auto
7.如何讓一個(gè)div水平垂直居中
div {
position: relative / fixed; /* 相對(duì)定位或絕對(duì)定位均可 */
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.如何清除浮動(dòng)？
clear清除浮動(dòng)（添加空div法）在浮動(dòng)元素下方添加空div,并給該元素寫css樣式 {clear:both;height:0;overflow:hidden;}
給浮動(dòng)元素父級(jí)設(shè)置高度
父級(jí)同時(shí)浮動(dòng)（需要給父級(jí)同級(jí)元素添加浮動(dòng)）
父級(jí)設(shè)置成inline-block，其margin: 0 auto居中方式失效
給父級(jí)添加overflow:hidden 清除浮動(dòng)方法
萬(wàn)能清除法 after偽類 清浮動(dòng)（現(xiàn)在主流方法，推薦使用）
float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
9.css3實(shí)現(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 隱藏對(duì)應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會(huì)合攏，就當(dāng)他從來(lái)不存在。
visibility:hidden 隱藏對(duì)應(yīng)的元素，但是在文檔布局中仍保留原來(lái)的空間。
11.CSS中 link 和@import 的區(qū)別是？
link屬于HTML標(biāo)簽，而@import是CSS提供的頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載
import只在IE5以上才能識(shí)別，而link是HTML標(biāo)簽，無(wú)兼容問題
link方式的樣式的權(quán)重 高于@import的權(quán)重.
12.position的absolute與fixed共同點(diǎn)與不同點(diǎn)
共同點(diǎn)： 改變行內(nèi)元素的呈現(xiàn)方式，display被置為block 讓元素脫離普通流，不占據(jù)空間 默認(rèn)會(huì)覆蓋到非定位元素上
不同點(diǎn)： absolute的”根元素“是可以設(shè)置的 fixed的”根元素“固定為瀏覽器窗口。當(dāng)你滾動(dòng)網(wǎng)頁(yè)，fixed元素與瀏覽器窗口之間的距離是不變的。
13..transition和animation的區(qū)別
Animation和transition大部分屬性是相同的，他們都是隨時(shí)間改變?cè)氐膶傩灾担麄兊闹饕獏^(qū)別是transition需要觸發(fā)一個(gè)事件才能改變屬性， 而animation不需要觸發(fā)任何事件的情況下才會(huì)隨時(shí)間改變屬性值，并且transition為2幀，從from .... to，而animation可以一幀一幀的。
transition 規(guī)定動(dòng)畫的名字 規(guī)定完成過渡效果需要多少秒或毫秒 規(guī)定速度效果 定義過渡效果何時(shí)開始 animation 指定要綁定到選擇器的關(guān)鍵幀的名稱
14.CSS優(yōu)先級(jí)
不同級(jí)別：總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
1.屬性后面加!import 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素內(nèi)的樣式
3.id選擇器
4.類選擇器
5.標(biāo)簽選擇器
6.通配符選擇器（*）
7.瀏覽器自定義或繼承
**同一級(jí)別：后寫的會(huì)覆蓋先寫的**
css選擇器的解析原則：選擇器定位DOM元素是從右往左的方向，這樣可以盡早的過濾掉一些不必要的樣式規(guī)則和元素
15.雪碧圖：
多個(gè)圖片集成在一個(gè)圖片中的圖
使用雪碧圖可以減少網(wǎng)絡(luò)請(qǐng)求的次數(shù)，加快允許的速度
通過background-position，去定位圖片在屏幕的哪個(gè)位置
二、JS問題
1.typeof和instance of 檢測(cè)數(shù)據(jù)類型有什么區(qū)別？
相同點(diǎn)： 都常用來(lái)判斷一個(gè)變量是否為空，或者是什么類型的。
不同點(diǎn)： typeof 返回值是一個(gè)字符串，用來(lái)說明變量的數(shù)據(jù)類型 instanceof 用于判斷一個(gè)變量是否屬于某個(gè)對(duì)象的實(shí)例.
16.使元素消失的方法
多個(gè)圖片集成在一個(gè)圖片中的圖
使用雪碧圖可以減少網(wǎng)絡(luò)請(qǐng)求的次數(shù)，加快允許的速度
通過background-position，去定位圖片在屏幕的哪個(gè)位置
.談一談深克隆和淺克??？
淺克隆: 只是拷貝了基本類型的數(shù)據(jù)，而引用類型數(shù)據(jù)，復(fù)制后也是會(huì)發(fā)生引用，我們把這種拷貝叫做“（淺復(fù)制）淺拷貝”，換句話說，淺復(fù)制僅僅是指向被復(fù)制的內(nèi)存地址，如果原地址中對(duì)象被改變了，那么淺復(fù)制出來(lái)的對(duì)象也會(huì)相應(yīng)改變。
深克?。?創(chuàng)建一個(gè)新對(duì)象，屬性中引用的其他對(duì)象也會(huì)被克隆，不再指向原有對(duì)象地址。
JSON.parse、JSON.stringify()
3.es6的新特性都有哪些？
let定義塊級(jí)作用域變量 沒有變量的提升，必須先聲明后使用 let聲明的變量，不能與前面的let，var，conset聲明的變量重名
const 定義只讀變量 const聲明變量的同時(shí)必須賦值，const聲明的變量必須初始化，一旦初始化完畢就不允許修改 const聲明變量也是一個(gè)塊級(jí)作用域變量 const聲明的變量沒有“變量的提升”，必須先聲明后使用 const聲明的變量不能與前面的let， var ， const聲明的變量重 const定義的對(duì)象\數(shù)組中的屬性值可以修改,基礎(chǔ)數(shù)據(jù)類型不可以
ES6可以給形參函數(shù)設(shè)置默認(rèn)值
在數(shù)組之前加上三個(gè)點(diǎn)（...）展開運(yùn)算符
數(shù)組的解構(gòu)賦值、對(duì)象的解構(gòu)賦值
箭頭函數(shù)的特點(diǎn) 箭頭函數(shù)相當(dāng)于匿名函數(shù)，是不能作為構(gòu)造函數(shù)的，不能被new 箭頭函數(shù)沒有arguments實(shí)參集合,取而代之用...剩余運(yùn)算符解決 箭頭函數(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ū)別是什么？
=賦值
==返回一個(gè)布爾值；相等返回true，不相等返回false； 允許不同數(shù)據(jù)類型之間的比較； 如果是不同類型的數(shù)據(jù)進(jìn)行，會(huì)默認(rèn)進(jìn)行數(shù)據(jù)類型之間的轉(zhuǎn)換； 如果是對(duì)象數(shù)據(jù)類型的比較，比較的是空間地址
=== 只要數(shù)據(jù)類型不一樣，就返回false；
5.常見的設(shè)計(jì)模式有哪些？
1、js工廠模式
2、js構(gòu)造函數(shù)模式
3、js原型模式
4、構(gòu)造函數(shù)+原型的js混合模式
5、構(gòu)造函數(shù)+原型的動(dòng)態(tài)原型模式
6、觀察者模式
7、發(fā)布訂閱模式
6.call bind apply 的區(qū)別？
call() 和apply()的第一個(gè)參數(shù)相同，就是指定的對(duì)象。這個(gè)對(duì)象就是該函數(shù)的執(zhí)行上下文。
call()和apply()的區(qū)別就在于，兩者之間的參數(shù)。
call()在第一個(gè)參數(shù)之后的 后續(xù)所有參數(shù)就是傳入該函數(shù)的值。
apply() 只有兩個(gè)參數(shù)，第一個(gè)是對(duì)象，第二個(gè)是數(shù)組，這個(gè)數(shù)組就是該函數(shù)的參數(shù)。 bind() 方法和前兩者不同在于： bind() 方法會(huì)返回執(zhí)行上下文被改變的函數(shù)而不會(huì)立即執(zhí)行，而前兩者是 直接執(zhí)行該函數(shù)。他的參數(shù)和call()相同。
7.js繼承方式有哪些？
原型鏈繼承 核心： 將父類的實(shí)例作為子類的原型
構(gòu)造繼承 核心：使用父類的構(gòu)造函數(shù)來(lái)增強(qiáng)子類實(shí)例，等于是復(fù)制父類的實(shí)例屬性給子類
實(shí)例繼承 核心：為父類實(shí)例添加新特性，作為子類實(shí)例返回
拷貝繼承
組合繼承 核心：通過調(diào)用父類構(gòu)造，繼承父類的屬性并保留傳參的優(yōu)點(diǎn)，然后通過將父類實(shí)例作為子類原型，實(shí)現(xiàn) 函數(shù)復(fù)用
寄生組合繼承 核心：通過寄生方式，砍掉父類的實(shí)例屬性，這樣，在調(diào)用兩次父類的構(gòu)造的時(shí)候，就不會(huì)初始化兩次實(shí) 例方法/屬性，避免的組合繼承的缺點(diǎn)
8.你怎樣看待閉包？
個(gè)人感覺，簡(jiǎn)單來(lái)說閉包就是在函數(shù)里面聲明函數(shù)，本質(zhì)上說就是在函數(shù)內(nèi)部和函數(shù)外部搭建起一座橋梁，使得子函數(shù)可以訪問父函數(shù)中所有的局部變量，但是反之不可以，這只是閉包的作用之一，另一個(gè)作用，則是保護(hù)變量不受外界污染，使其一直存在內(nèi)存中，在工作中我們還是少使用閉包的好，因?yàn)殚]包太消耗內(nèi)存，不到萬(wàn)不得已的時(shí)候盡量不使用。
9.你是如何理解原型和原型鏈的？
把所有的對(duì)象共用的屬性全部放在堆內(nèi)存的一個(gè)對(duì)象（共用屬性組成的對(duì)象），然后讓每一個(gè)對(duì)象的 __proto__存儲(chǔ)這個(gè)「共用屬性組成的對(duì)象」的地址。而這個(gè)共用屬性就是原型，原型出現(xiàn)的目的就是為了減少不必要的內(nèi)存消耗。而原型鏈就是對(duì)象通過__proto__向當(dāng)前實(shí)例所屬類的原型上查找屬性或方法的機(jī)制，如果找到Object的原型上還是沒有找到想要的屬性或者是方法則查找結(jié)束，最終會(huì)返回undefined
10.瀏覽器渲染的主要流程是什么?
將html代碼按照深度優(yōu)先遍歷來(lái)生成DOM樹。 css文件下載完后也會(huì)進(jìn)行渲染，生成相應(yīng)的CSSOM。 當(dāng)所有的css文件下載完且所有的CSSOM構(gòu)建結(jié)束后，就會(huì)和DOM一起生成Render Tree。 接下來(lái)，瀏覽器就會(huì)進(jìn)入Layout環(huán)節(jié)，將所有的節(jié)點(diǎn)位置計(jì)算出來(lái)。 最后，通過Painting環(huán)節(jié)將所有的節(jié)點(diǎn)內(nèi)容呈現(xiàn)到屏幕上。
11.從輸入url地址到頁(yè)面相應(yīng)都發(fā)生了什么？
1、瀏覽器的地址欄輸入U(xiǎn)RL并按下回車。
2、瀏覽器查找當(dāng)前URL是否存在緩存，并比較緩存是否過期。3、DNS解析URL對(duì)應(yīng)的IP。
4、根據(jù)IP建立TCP連接（三次握手）。
5、HTTP發(fā)起請(qǐng)求。
6、服務(wù)器處理請(qǐng)求，瀏覽器接收HTTP響應(yīng)。
7、渲染頁(yè)面，構(gòu)建DOM樹。
8、關(guān)閉TCP連接（四次揮手）
12.session、cookie、localStorage的區(qū)別
相同點(diǎn) 都是保存在瀏覽器端，且同源的。
不同點(diǎn)
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。
而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下。 存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)。
sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。 數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；
localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；
cookie只在設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。 作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；
localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
13.js中跨域方法
同源策略（協(xié)議+端口號(hào)+域名要相同）
1、jsonp跨域(只能解決get） 原理：動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽。利用script標(biāo)簽的src屬性不受同源策略限制，因?yàn)樗械膕rc屬性和href屬性都不受同源策略的限制，可以請(qǐng)求第三方服務(wù)器資源內(nèi)容
步驟： 1).去創(chuàng)建一個(gè)script標(biāo)簽 2).script的src屬性設(shè)置接口地址 3).接口參數(shù)，必須要帶一個(gè)自定義函數(shù)名，要不然后臺(tái)無(wú)法返回?cái)?shù)據(jù) 4).通過定義函數(shù)名去接受返回的數(shù)據(jù)
2、document.domain 基礎(chǔ)域名相同 子域名不同
3、window.name 利用在一個(gè)瀏覽器窗口內(nèi)，載入所有的域名都是共享一個(gè)window.name
4、服務(wù)器設(shè)置對(duì)CORS的支持 原理：服務(wù)器設(shè)置Access-Control-Allow-Origin HTTP響應(yīng)頭之后，瀏覽器將會(huì)允許跨域請(qǐng)求
5、利用h5新特性window.postMessage()
14.前端有哪些頁(yè)面優(yōu)化方法?
減少 HTTP請(qǐng)求數(shù)
從設(shè)計(jì)實(shí)現(xiàn)層面簡(jiǎn)化頁(yè)面
合理設(shè)置 HTTP緩存
資源合并與壓縮
合并 CSS圖片，減少請(qǐng)求數(shù)的又一個(gè)好辦法。
將外部腳本置底（將腳本內(nèi)容在頁(yè)面信息內(nèi)容加載后再加載）
多圖片網(wǎng)頁(yè)使用圖片懶加載。
在js中盡量減少閉包的使用
盡量合并css和js文件
盡量使用字體圖標(biāo)或者SVG圖標(biāo)，來(lái)代替?zhèn)鹘y(tǒng)的PNG等格式的圖片
減少對(duì)DOM的操作
在JS中避免“嵌套循環(huán)”和 “死循環(huán)”
盡可能使用事件委托（事件代理）來(lái)處理事件綁定的操作
15.Ajax的四個(gè)步驟
1.創(chuàng)建ajax實(shí)例
2.執(zhí)行open 確定要訪問的鏈接 以及同步異步
3.監(jiān)聽請(qǐng)求狀態(tài)
4.發(fā)送請(qǐng)求
16.數(shù)組去重的方法
ES6的set對(duì)象 先將原數(shù)組排序，在與相鄰的進(jìn)行比較，如果不同則存入新數(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ǐng)求的區(qū)別
get 一般用于獲取數(shù)據(jù)
get請(qǐng)求如果需要傳遞參數(shù)，那么會(huì)默認(rèn)將參數(shù)拼接到url的后面；然后發(fā)送給服務(wù)器；
get請(qǐng)求傳遞參數(shù)大小是有限制的；是瀏覽器的地址欄有大小限制；
get安全性較低
get 一般會(huì)走緩存，為了防止走緩存，給url后面每次拼的參數(shù)不同；放在?后面，一般用個(gè)時(shí)間戳
post 一般用于發(fā)送數(shù)據(jù)
post傳遞參數(shù)，需要把參數(shù)放進(jìn)請(qǐng)求體中，發(fā)送給服務(wù)器；
post請(qǐng)求參數(shù)放進(jìn)了請(qǐng)求體中，對(duì)大小沒有要求；
post安全性比較高；
post請(qǐng)求不會(huì)走緩存；
18.ajax的狀態(tài)碼
2開頭
200 : 代表請(qǐng)求成功；
3開頭
301 : 永久重定向；
302: 臨時(shí)轉(zhuǎn)移
304 : 讀取緩存 [表示瀏覽器端有緩存，并且服務(wù)端未更新，不再向服務(wù)端請(qǐng)求資源]
307:臨時(shí)重定向
以4開頭的都是客戶端的問題；
400 :數(shù)據(jù)/格式錯(cuò)誤
401: 權(quán)限不夠；（身份不合格，訪問網(wǎng)站的時(shí)候，登錄和不登錄是不一樣的）
404 : 路徑錯(cuò)誤，找不到文件
以5開頭都是服務(wù)端的問題
500 : 服務(wù)器的問題
503: 超負(fù)荷；
19.移動(dòng)端的兼容問題
給移動(dòng)端添加點(diǎn)擊事件會(huì)有300S的延遲 如果用點(diǎn)擊事件，需要引一個(gè)fastclick.js文件，解決300s的延遲 一般在移動(dòng)端用ontouchstart、ontouchmove、ontouchend
移動(dòng)端點(diǎn)透問題,touchstart 早于 touchend 早于click,click的觸發(fā)是有延遲的，這個(gè)時(shí)間大概在300ms左右，也就是說我們tap觸發(fā)之后蒙層隱藏， 此時(shí) click還沒有觸發(fā)，300ms之后由于蒙層隱藏，我們的click觸發(fā)到了下面的a鏈接上 盡量都使用touch事件來(lái)替換click事件。例如用touchend事件(推薦)。 用fastclick，github.com/ftlabs/fast…?用preventDefault阻止a標(biāo)簽的click 消除 IE10 里面的那個(gè)叉號(hào) input:-ms-clear{display:none;}
設(shè)置緩存 手機(jī)頁(yè)面通常在第一次加載后會(huì)進(jìn)行緩存，然后每次刷新會(huì)使用緩存而不是去重新向服務(wù)器發(fā)送請(qǐng)求。如果不希望使用緩存可以設(shè)置no-cache。
圓角BUG 某些Android手機(jī)圓角失效 background-clip: padding-box; 防止手機(jī)中網(wǎng)頁(yè)放大和縮小 這點(diǎn)是最基本的，做為手機(jī)網(wǎng)站開發(fā)者來(lái)說應(yīng)該都知道的，就是設(shè)置meta中的viewport
設(shè)置用戶截止縮放，一般寫視口的時(shí)候就已經(jīng)寫好了。
20.JS中同步和異步,以及js的事件流
同步：在同一時(shí)間內(nèi)做一件事情
異步：在同一時(shí)間內(nèi)做多個(gè)事情 JS是單線程的，每次只能做一件事情，JS運(yùn)行在瀏覽器中，瀏覽器是多線程的，可以在同一時(shí)間執(zhí)行多個(gè)任務(wù)。
21.JS中常見的異步任務(wù)
定時(shí)器、ajax、事件綁定、回調(diào)函數(shù)、async await、promise
22.TCP的三次握手和四次揮手
三次握手
第一次握手：客戶端發(fā)送一個(gè)SYN碼給服務(wù)器，要求建立數(shù)據(jù)連接；
第二次握手： 服務(wù)器SYN和自己處理一個(gè)SYN（標(biāo)志）；叫SYN+ACK（確認(rèn)包）；發(fā)送給客戶端，可以建立連接
第三次握手： 客戶端再次發(fā)送ACK向服務(wù)器，服務(wù)器驗(yàn)證ACK沒有問題，則建立起連接；
四次揮手
第一次揮手： 客戶端發(fā)送FIN(結(jié)束)報(bào)文，通知服務(wù)器數(shù)據(jù)已經(jīng)傳輸完畢；
第二次揮手: 服務(wù)器接收到之后，通知客戶端我收到了SYN,發(fā)送ACK(確認(rèn))給客戶端，數(shù)據(jù)還沒有傳輸完成
第三次揮手： 服務(wù)器已經(jīng)傳輸完畢，再次發(fā)送FIN通知客戶端，數(shù)據(jù)已經(jīng)傳輸完畢
第四次揮手： 客戶端再次發(fā)送ACK,進(jìn)入TIME_WAIT狀態(tài)；服務(wù)器和客戶端關(guān)閉連接；
23.為什么建立連接是三次握手，而斷開連接是四次揮手呢?
建立連接的時(shí)候， 服務(wù)器在LISTEN狀態(tài)下，收到建立連接請(qǐng)求的SYN報(bào)文后，把ACK和SYN放在一個(gè)報(bào)文里發(fā)送給客戶端。 而關(guān)閉連接時(shí)，服務(wù)器收到對(duì)方的FIN報(bào)文時(shí)，僅僅表示對(duì)方不再發(fā)送數(shù)據(jù)了但是還能接收數(shù)據(jù)，而自己也未必全部數(shù)據(jù)都發(fā)送給對(duì)方了，所以己方可以立即關(guān)閉，也可以發(fā)送一些數(shù)據(jù)給對(duì)方后，再發(fā)送FIN報(bào)文給對(duì)方來(lái)表示同意現(xiàn)在關(guān)閉連接，因此，己方ACK和FIN一般都會(huì)分開發(fā)送，從而導(dǎo)致多了一次。
24.DOM diff原理
如果元素類型發(fā)生變化，直接替換
如果是文本，則比較文本里面的內(nèi)容，是否有差異，如果是元素就需要比較當(dāng)前元素的屬性是否相等,會(huì)先比較key， 在比較類型 為什么 react中循環(huán) 建議不要使用索引 ,如果純?yōu)榱苏故?那可以使用索引
25.作用域
全局作用域
瀏覽器打開一個(gè)頁(yè)面時(shí)，瀏覽器會(huì)給JS代碼提供一個(gè)全局的運(yùn)行環(huán)境，那么這個(gè)環(huán)境就是全局作用域 一個(gè)頁(yè)面只有一個(gè)全局作用域，全局作用域下有一個(gè)window對(duì)象 window是全局作用域下的最大的一個(gè)內(nèi)置對(duì)象（全局作用域下定義的變量和函數(shù)都會(huì)存儲(chǔ)在window下） 如果是全局變量，都會(huì)給window新增一個(gè)鍵值對(duì)；屬性名就是變量名，屬性值就是變量所存儲(chǔ)的值 如果變量只被var過，那么存儲(chǔ)值是undefined 在私有作用域中是可以獲取到全局變量的，但是在全局作用域中不能獲取私有變量
私有作用域
函數(shù)執(zhí)行會(huì)形成一個(gè)新的私有的作用域（執(zhí)行多次，形成多個(gè)私有作用域） 私有作用域在全局作用域中形成，具有包含的關(guān)系； 在一個(gè)全局作用域中，可以有很多個(gè)私有作用域 在私有作用域下定義的變量都是私有變量 形參也是私有變量 函數(shù)體中通過function定義的函數(shù)也是私有的，在全局作用域不能使用；
塊級(jí)作用域
es6中新引入的一種作用域 在js中常見到的if{}、for{}、while{}、try{}、catch{}、switch case{}都是塊級(jí)作用域 var obj = {} //對(duì)象的大括號(hào)不是塊級(jí)作用域 塊級(jí)作用域中的同一變量不能被重復(fù)聲明（塊級(jí)下var和function不能重名，否則會(huì)報(bào)錯(cuò)） 作用域鏈
上級(jí)作用域
函數(shù)在哪里定義，他的上一級(jí)作用域就是哪，和函數(shù)在哪個(gè)作用域下執(zhí)行沒有關(guān)系 作用域鏈：當(dāng)獲取變量所對(duì)應(yīng)的值時(shí)，首先看變量是否是私有變量，如果不是私有變量，要繼續(xù)向上一級(jí)作用域中查找，如果上一級(jí)也沒有，那么會(huì)繼續(xù)向上一級(jí)查找，直到找到全局作用域?yàn)橹?；如果全局作用域也沒有，則會(huì)報(bào)錯(cuò)；這樣一級(jí)一級(jí)向上查找，就會(huì)形成作用域鏈 當(dāng)前作用域沒有的，則會(huì)繼續(xù)向上一級(jí)作用域查找 當(dāng)前函數(shù)的上一級(jí)作用域跟函數(shù)在哪個(gè)作用域下執(zhí)行沒有關(guān)系，只跟函數(shù)在哪定義有關(guān)（重點(diǎn)）
26.Promise處理異步
他是ES6中新增加的一個(gè)類（new Promise）,目的是為了管理JS中的異步編程的，所以把他稱為“Promise設(shè)計(jì)模式” new Promise 經(jīng)歷三個(gè)狀態(tài)：padding(準(zhǔn)備狀態(tài)：初始化成功、開始執(zhí)行異步的任務(wù))、fullfilled(成功狀態(tài))、rejected(失敗狀態(tài))== Promise本身是同步編程的，他可以管理異步操作的（重點(diǎn)），new Promise的時(shí)候，會(huì)把傳遞的函數(shù)立即執(zhí)行 Promise函數(shù)天生有兩個(gè)參數(shù)，resolve(當(dāng)異步操作執(zhí)行成功，執(zhí)行resolve方法),rejected(當(dāng)異步操作失敗，執(zhí)行reject方法) then()方法中有兩個(gè)函數(shù)，第一個(gè)傳遞的函數(shù)是resolve,第二個(gè)傳遞的函數(shù)是reject ajax中false代表同步，true代表異步，如果使用異步，不等ajax徹底完成
27.map和forEach的區(qū)別
相同點(diǎn)
都是循環(huán)遍歷數(shù)組中的每一項(xiàng) forEach和map方法里每次執(zhí)行匿名函數(shù)都支持3個(gè)參數(shù)，參數(shù)分別是item（當(dāng)前每一項(xiàng)）、index（索引值）、arr（原數(shù)組），需要用哪個(gè)的時(shí)候就寫哪個(gè) 匿名函數(shù)中的this都是指向window 只能遍歷數(shù)組
不同點(diǎn)
map方法返回一個(gè)新的數(shù)組，數(shù)組中的元素為原始數(shù)組調(diào)用函數(shù)處理后的值。(原數(shù)組進(jìn)行處理之后對(duì)應(yīng)的一個(gè)新的數(shù)組。) map()方法不會(huì)改變?cè)紨?shù)組 map()方法不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè) forEach()方法用于調(diào)用數(shù)組的每個(gè)元素，將元素傳給回調(diào)函數(shù).(沒有return，返回值是undefined）
注意：forEach對(duì)于空數(shù)組是不會(huì)調(diào)用回調(diào)函數(shù)的。
28.async await函數(shù)
async/await函數(shù)是異步代碼的新方式
async/await是基于promise實(shí)現(xiàn)的
async/await使異步代碼更像同步代碼
await 只能在async函數(shù)中使用，不能再普通函數(shù)中使用，要成對(duì)出現(xiàn)
默認(rèn)返回一個(gè)promise實(shí)例，不能被改變
await下面的代碼是異步，后面的代碼是同步的
29.this指向
全局作用域下的this指向window
如果給元素的事件行為綁定函數(shù)，那么函數(shù)中的this指向當(dāng)前被綁定的那個(gè)元素
函數(shù)中的this，要看函數(shù)執(zhí)行前有沒有 . , 有 . 的話，點(diǎn)前面是誰(shuí)，this就指向誰(shuí)，如果沒有點(diǎn)，指向window
自執(zhí)行函數(shù)中的this永遠(yuǎn)指向window
定時(shí)器中函數(shù)的this指向window
構(gòu)造函數(shù)中的this指向當(dāng)前的實(shí)例
call、apply、bind可以改變函數(shù)的this指向
箭頭函數(shù)中沒有this，如果輸出this，就會(huì)輸出箭頭函數(shù)定義時(shí)所在的作用域中的this
30.原型
所有的函數(shù)數(shù)據(jù)類型都天生自帶一個(gè)prototype屬性，該屬性的屬性值是一個(gè)對(duì)象 prototype的屬性值中天生自帶一個(gè)constructor屬性，其constructor屬性值指向當(dāng)前原型所屬的類 所有的對(duì)象數(shù)據(jù)類型，都天生自帶一個(gè)_proto_屬性，該屬性的屬性值指向當(dāng)前實(shí)例所屬類的原型
31.異步回調(diào)（如何解決回調(diào)地獄）
promise、generator、async/await
promise： 1.是一個(gè)對(duì)象，用來(lái)傳遞異步操作的信息。代表著某個(gè)未來(lái)才會(huì)知道結(jié)果的時(shí)間，并未這個(gè)事件提供統(tǒng)一的api，供進(jìn)異步處理
? 2.有了這個(gè)對(duì)象，就可以讓異步操作以同步的操作的流程來(lái)表達(dá)出來(lái)，避免層層嵌套的回調(diào)地獄
? 3.promise代表一個(gè)異步狀態(tài)，有三個(gè)狀態(tài)pending（進(jìn)行中），Resolve(以完成），Reject（失?。?/p>
? 4.一旦狀態(tài)改變，就不會(huì)在變。任何時(shí)候都可以得到結(jié)果。從進(jìn)行中變?yōu)橐酝瓿苫蛘呤?/p>
promise.all() 里面狀態(tài)都改變，那就會(huì)輸出，得到一個(gè)數(shù)組
promise.race() 里面只有一個(gè)狀態(tài)變?yōu)閞ejected或者fulfilled即輸出
promis.finally()不管指定不管Promise對(duì)象最后狀態(tài)如何，都會(huì)執(zhí)行的操作（本質(zhì)上還是then方法的特例）
32.前端事件流
事件流描述的是從頁(yè)面中接受事件的順序，事件 捕獲階段 處于目標(biāo)階段 事件冒泡階段 addeventListener 最后這個(gè)布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。
? 1、事件捕獲階段：實(shí)際目標(biāo)div在捕獲階段不會(huì)接受事件，也就是在捕獲階段，事件從document到<html>再到<body>就停止了。
? ? ? 2、處于目標(biāo)階段：事件在div發(fā)生并處理，但是事件處理會(huì)被看成是冒泡階段的一部分。
? ? ? 3、冒泡階段：事件又傳播回文檔
? 阻止冒泡事件event.stopPropagation()
? function stopBubble(e) {
? ? if (e && e.stopPropagation) { // 如果提供了事件對(duì)象event 這說明不是IE瀏覽器
? ? ? e.stopPropagation()
? ? } else {
? ? ? window.event.cancelBubble = true //IE方式阻止冒泡
? ? ? ? ? }
? ? }
? 阻止默認(rèn)行為event.preventDefault()
function stopDefault(e) {
? ? if (e && e.preventDefault) {
? ? ? e.preventDefault()
? ? } else {
? ? ? // IE瀏覽器阻止函數(shù)器默認(rèn)動(dòng)作的行為
? ? ? window.event.returnValue = false
? ? }
? }
33.事件如何先捕獲后冒泡？
在DOM標(biāo)準(zhǔn)事件模型中，是先捕獲后冒泡。但是如果要實(shí)現(xiàn)先冒泡后捕獲的效果， 對(duì)于同一個(gè)事件，監(jiān)聽捕獲和冒泡，分別對(duì)應(yīng)相應(yīng)的處理函數(shù)，監(jiān)聽到捕獲事件，先暫緩執(zhí)行，直到冒泡事件被捕獲后再執(zhí)行捕獲事件。
哪些事件不支持冒泡事件：鼠標(biāo)事件：mouserleave mouseenter 焦點(diǎn)事件：blur focus UI事件：scroll resize
34. 如何判斷一個(gè)變量是對(duì)象還是數(shù)組（prototype.toString.call()）。
千萬(wàn)不要使用typeof來(lái)判斷對(duì)象和數(shù)組，因?yàn)檫@種類型都會(huì)返回object。
typeOf()是判斷基本類型的Boolean,Number，symbol, undefined, String。 對(duì)于引用類型：除function，都返回object null返回object。
installOf() 用來(lái)判斷A是否是B的實(shí)例，installof檢查的是原型。
toString() 是Object的原型方法，對(duì)于 Object 對(duì)象，直接調(diào)用 toString() 就能返回 [Object Object] 。而對(duì)于其他對(duì)象，則需要通過 call / apply 來(lái)調(diào)用才能返回正確的類型信息。
hasOwnProperty()方法返回一個(gè)布爾值，指示對(duì)象自身屬性中是否具有指定的屬性，該方法會(huì)忽略掉那些從原型鏈上繼承到的屬性。
isProperty()方法測(cè)試一個(gè)對(duì)象是否存在另一個(gè)對(duì)象的原型鏈上。
35.setTimeout 和 setInterval的機(jī)制
因?yàn)閖s是單線程的。瀏覽器遇到etTimeout 和 setInterval會(huì)先執(zhí)行完當(dāng)前的代碼塊，在此之前會(huì)把定時(shí)器推入瀏覽器的
待執(zhí)行時(shí)間隊(duì)列里面，等到瀏覽器執(zhí)行完當(dāng)前代碼之后會(huì)看下事件隊(duì)列里有沒有任務(wù)，有的話才執(zhí)行定時(shí)器里的代碼
36.splice和slice、map和forEach、 filter()、reduce()的區(qū)別
1.slice(start,end):方法可以從已有數(shù)組中返回選定的元素，返回一個(gè)新數(shù)組，
包含從start到end（不包含該元素）的數(shù)組方法
注意：該方法不會(huì)更新原數(shù)組，而是返回一個(gè)子數(shù)組
2.splice():該方法想或者從數(shù)組中添加或刪除項(xiàng)目，返回被刪除的項(xiàng)目。（該方法會(huì)改變?cè)瓟?shù)組）
splice(index, howmany,item1,...itemx)
·index參數(shù)：必須，整數(shù)規(guī)定添加或刪除的位置，使用負(fù)數(shù)，從數(shù)組尾部規(guī)定位置
·howmany參數(shù)：必須，要?jiǎng)h除的數(shù)量，
·item1..itemx:可選，向數(shù)組添加新項(xiàng)目
3.map()：會(huì)返回一個(gè)全新的數(shù)組。使用于改變數(shù)據(jù)值的時(shí)候。會(huì)分配內(nèi)存存儲(chǔ)空間數(shù)組并返回，forEach（）不會(huì)返回?cái)?shù)據(jù)
4.forEach(): 不會(huì)返回任何有價(jià)值的東西，并且不打算改變數(shù)據(jù)，單純的只是想用數(shù)據(jù)做一些事情，他允許callback更改原始數(shù)組的元素
5.reduce(): 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每一個(gè)值（從左到右）開始縮減，最終計(jì)算一個(gè)值，不會(huì)改變?cè)瓟?shù)組的值
6.filter(): 方法創(chuàng)建一個(gè)新數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。它里面通過function去做處理
VUE問題
1.聊聊對(duì)vue的理解
vue是一個(gè)漸進(jìn)式的JS框架。他易用，靈活，高效； 可以把一個(gè)頁(yè)面分隔成多個(gè)組件；當(dāng)其他頁(yè)面有類似功能時(shí)，直接讓封裝的組件進(jìn)行復(fù)用； 他是構(gòu)建用戶界面的聲明式框架，只關(guān)心圖層；不關(guān)心具體是如何實(shí)現(xiàn)的
2.V-model的原理是什么？
Vue的雙向數(shù)據(jù)綁定是由數(shù)據(jù)劫持結(jié)合發(fā)布者訂閱者實(shí)現(xiàn)的。 數(shù)據(jù)劫持是通過Object.defineProperty()來(lái)劫持對(duì)象數(shù)據(jù)的setter和getter操作。 在數(shù)據(jù)變動(dòng)時(shí)作你想做的事
原理 通過Observer來(lái)監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來(lái)解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化->視圖更新 在初始化vue實(shí)例時(shí)，遍歷data這個(gè)對(duì)象，給每一個(gè)鍵值對(duì)利用Object.definedProperty對(duì)data的鍵值對(duì)新增get和set方法，利用了事件監(jiān)聽DOM的機(jī)制，讓視圖去改變數(shù)據(jù)
3.談?wù)剬?duì)生命周期的理解
beforeCreate階段：vue實(shí)例的掛載元素el和數(shù)據(jù)對(duì)象data都是undefined，還沒有初始化。
created階段：vue實(shí)例的數(shù)據(jù)對(duì)象data有了，可以訪問里面的數(shù)據(jù)和方法，未掛載到DOM，el還沒有
beforeMount階段：vue實(shí)例的el和data都初始化了，但是掛載之前為虛擬的dom節(jié)點(diǎn)
mounted階段：vue實(shí)例掛載到真實(shí)DOM上，就可以通過DOM獲取DOM節(jié)點(diǎn)
beforeUpdate階段：響應(yīng)式數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前，適合在更新之前訪問現(xiàn)有的DOM，比如手動(dòng)移除已添加的事件監(jiān)聽器
updated階段：虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用，組成新的DOM已經(jīng)更新，避免在這個(gè)鉤子函數(shù)中操作數(shù)據(jù)，防止死循環(huán)
beforeDestroy階段：實(shí)例銷毀前調(diào)用，實(shí)例還可以用，this能獲取到實(shí)例，常用于銷毀定時(shí)器，解綁事件
destroyed階段：實(shí)例銷毀后調(diào)用，調(diào)用后所有事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例都會(huì)被銷毀
4.VUE和REACT有什么區(qū)別？
react整體是函數(shù)式的思想，把組件設(shè)計(jì)成純組件，狀態(tài)和邏輯通過參數(shù)傳入，所以在react中，是單向數(shù)據(jù)流；
vue的思想是響應(yīng)式的，也就是基于是數(shù)據(jù)可變的，通過對(duì)每一個(gè)屬性建立Watcher來(lái)監(jiān)聽，當(dāng)屬性變化的時(shí)候，響應(yīng)式的更新對(duì)應(yīng)的虛擬dom。
5.vuex的流程
頁(yè)面通過mapAction異步提交事件到action。action通過commit把對(duì)應(yīng)參數(shù)同步提交到mutation。
mutation會(huì)修改state中對(duì)于的值。 最后通過getter把對(duì)應(yīng)值跑出去，在頁(yè)面的計(jì)算屬性中
通過mapGetter來(lái)動(dòng)態(tài)獲取state中的值
6.vuex有哪幾種狀態(tài)和屬性
state中保存著共有數(shù)據(jù)，數(shù)據(jù)是響應(yīng)式的
getter可以對(duì)state進(jìn)行計(jì)算操作，主要用來(lái)過濾一些數(shù)據(jù)，可以在多組件之間復(fù)用
mutations定義的方法動(dòng)態(tài)修改state中的數(shù)據(jù)，通過commit提交方法，方法必須是同步的
actions將mutations里面處理數(shù)據(jù)的方法變成異步的，就是異步操作數(shù)據(jù)，通store.dispatch來(lái)分發(fā)actions，把異步的方法寫在actions中，通過commit提交mutations，進(jìn)行修改數(shù)據(jù)。
modules：模塊化vuex
7.vue路由的兩種模式
hash ——即地址欄URL中的#符號(hào)（此hsah 不是密碼學(xué)里的散列運(yùn)算） hash 雖然出現(xiàn)URL中，但不會(huì)被包含在HTTP請(qǐng)求中，對(duì)后端完全沒有影響，因此改變hash不會(huì)重新加載頁(yè)面。
history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法
這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄站，在當(dāng)前已有的back、forward、go 的基礎(chǔ)之上，它們提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改是，雖然改變了當(dāng)前的URL，但你瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。
8.vue中 key 值的作用
當(dāng) Vue.js 用v-for正在更新已渲染過的元素列表時(shí)，它默認(rèn)用“就地復(fù)用”策略。 如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序，而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。
key的作用主要是為了高效的更新虛擬DOM。
9$route和$router的區(qū)別
$route是“路由信息對(duì)象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)。
$router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等。
10.vue-router守衛(wèi)
導(dǎo)航守衛(wèi) router.beforeEach 全局前置守衛(wèi)
to: Route: 即將要進(jìn)入的目標(biāo)（路由對(duì)象）
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。（一定要用這個(gè)函數(shù)才能去到下一個(gè)路由，如果不用就攔截） 執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。
next(false): 取消進(jìn)入路由，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) {
? ? // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
? ? // 不！能！獲取組件實(shí)例 `this`
? ? // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
? },
? beforeRouteUpdate (to, from, next) {
? ? // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
? ? // 舉例來(lái)說，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
? ? // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
? ? // 可以訪問組件實(shí)例 `this`
? },
? beforeRouteLeave (to, from, next) {
? ? // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用，我們用它來(lái)禁止用戶離開
? ? // 可以訪問組件實(shí)例 `this`
? ? // 比如還未保存草稿，或者在用戶離開前，
? ? 將setInterval銷毀，防止離開之后，定時(shí)器還在調(diào)用。
? }
}
11.axios是什么？怎么使用？描述使用它實(shí)現(xiàn)登錄功能的流程？
請(qǐng)求后臺(tái)資源的模塊。
$ npm install axios -S裝好 復(fù)制代碼
然后發(fā)送的是跨域，需在配置文件中config/index.js進(jìn)行設(shè)置。后臺(tái)如果是Tp5則定義一個(gè)資源路由。 js中使用import進(jìn)來(lái)，然后.get或.post。返回在.then函數(shù)中如果成功，失敗則是在.catch函數(shù)中
12.vue修飾符
stop：阻止事件的冒泡
prevent：阻止事件的默認(rèn)行為
once：只觸發(fā)一次
self：只觸發(fā)自己的事件行為時(shí)，才會(huì)執(zhí)行
13.vue項(xiàng)目中的性能優(yōu)化
1.不要在模板里面寫過多表達(dá)式
2.循環(huán)調(diào)用子組件時(shí)添加key
3.頻繁切換的使用v-show，不頻繁切換的使用v-if
4.盡量少用float，可以用flex
5.按需加載，可以用require或者import()按需加載需要的組件
6.路由懶加載
14.vue.extend和vue.component
extend 是構(gòu)造一個(gè)組件的語(yǔ)法器。 然后這個(gè)組件你可以作用到Vue.component這個(gè)全局注冊(cè)方法里 還可以在任意vue模板里使用組件。 也可以作用到vue實(shí)例或者某個(gè)組件中的components屬性中并在內(nèi)部使用apple組件。
Vue.component 你可以創(chuàng)建 ，也可以取組件。
常見的兼容問題
png24位的圖片在iE6瀏覽器上出現(xiàn)背景 解決方案是做成PNG8.也可以引用一段腳本處理.
瀏覽器默認(rèn)的margin和padding不同。 解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。
IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。
浮動(dòng)ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下，如果對(duì)元素設(shè)置了浮動(dòng)，同時(shí)又設(shè)置了margin-left或margin-right，margin值會(huì)加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;}
React問題
1.react和vue的區(qū)別
=> 相同點(diǎn)：
1.數(shù)據(jù)驅(qū)動(dòng)頁(yè)面，提供響應(yīng)式的試圖組件
2.都有virtual DOM,組件化的開發(fā)，通過props參數(shù)進(jìn)行父子之間組件傳遞數(shù)據(jù)，都實(shí)現(xiàn)了webComponents規(guī)范
3.數(shù)據(jù)流動(dòng)單向，都支持服務(wù)器的渲染SSR
4.都有支持native的方法，react有React native， vue有wexx
=> 不同點(diǎn)：
1.數(shù)據(jù)綁定：Vue實(shí)現(xiàn)了雙向的數(shù)據(jù)綁定，react數(shù)據(jù)流動(dòng)是單向的
2.數(shù)據(jù)渲染：大規(guī)模的數(shù)據(jù)渲染，react更快
3.使用場(chǎng)景：React配合Redux架構(gòu)適合大規(guī)模多人協(xié)作復(fù)雜項(xiàng)目，Vue適合小快的項(xiàng)目
4.開發(fā)風(fēng)格：react推薦做法jsx + inline style把html和css都寫在js了
vue是采用webpack + vue-loader單文件組件格式，html, js, css同一個(gè)文件
2.redux中的reducer（純函數(shù)）
Redux數(shù)據(jù)流里，reduces其實(shí)是根據(jù)之前的狀態(tài)（previous state）和現(xiàn)有的action（current action）
更新state(這個(gè)state可以理解為上下累加器的結(jié)果）
每次redux reducer被執(zhí)行時(shí)，state和action被傳入，這個(gè)state根據(jù)action進(jìn)行累加或者是'自身消減'(reduce),
進(jìn)而返回最新的state,這也就是典型reduce函數(shù)的用法：state ->? action ->? state
3.react的refs
refs就想一個(gè)逃生窗，允許我們之間訪問dom元素或者組件實(shí)例，可以向組件添加一個(gè)ref屬性的值是一個(gè)回調(diào)函數(shù)，
它將接受地城dom元素或組件的已掛在實(shí)例，作為第一個(gè)參數(shù)
4.react中的keys
幫組我們跟蹤哪些項(xiàng)目已更改、添加、從列表中刪除，key是獨(dú)一無(wú)二的，可以讓我們高效的去定位元素，并且操作它
5.React的生命周期
三個(gè)狀態(tài)：Mounting(已插入真實(shí)的DOM）
? Updating(正在被重新渲染)
? Unmounting(已移除真實(shí)的DOM)
componentDIdMount 在第一次渲染后調(diào)用，只在客服端。之后組件已經(jīng)生成對(duì)應(yīng)的DOM結(jié)構(gòu)，
componentDidUpdate 在組件完成更新后立即調(diào)用，在出初始化是不會(huì)調(diào)用
6.React子組件向父組件傳值
父組件通過props 給子組件傳遞數(shù)據(jù)，子組件則是通過調(diào)用父組件傳給它的函數(shù)給父組件傳遞數(shù)據(jù)。
7.為什么虛擬DOM會(huì)提高性能?www.zhihu.com/question/29…
虛擬DOM相當(dāng)于在js和真實(shí)dom中間加了一個(gè)緩存，利用dom diff算法避免了沒有必要的doom操作，從而提高性能
具體實(shí)現(xiàn)步驟：
·用JavaScript對(duì)象結(jié)構(gòu)表示DOM樹的結(jié)構(gòu)；然后用這個(gè)樹構(gòu)建一個(gè)真正的DOM樹，插到文檔中
·當(dāng)狀態(tài)變更的時(shí)候，重新構(gòu)造一棵樹的對(duì)象樹，然后用新的樹和舊的樹進(jìn)行對(duì)比，記錄兩棵樹差異
·把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DOM樹上，試圖就更新了。
8.diff算法
1.把樹形結(jié)構(gòu)按照層級(jí)分解，只比較同級(jí)元素
2.給列表結(jié)構(gòu)的每個(gè)單元添加key屬性，方便比較。在實(shí)際代碼中，會(huì)對(duì)新舊兩棵樹進(jìn)行一個(gè)深度優(yōu)先的遍歷，這樣每個(gè)節(jié)點(diǎn)都會(huì)有一個(gè)標(biāo)記
3.在深度優(yōu)先遍歷的時(shí)候，每遍歷到一個(gè)節(jié)點(diǎn)就把該節(jié)點(diǎn)和新的樹進(jìn)行對(duì)比。如果有差異的話就記錄到一個(gè)對(duì)象里面
Vritual DOM 算法主要實(shí)現(xiàn)上面步驟的三個(gè)函數(shù)：element， diff， patch。然后就可以實(shí)際的進(jìn)行使用
react只會(huì)匹配相同的class的component（這里的class指的是組件的名字）
合并操作，條用component的setState方法的時(shí)候，React將其標(biāo)記為dirty.到每一個(gè)時(shí)間循環(huán)借宿，React檢查所有標(biāo)記dirty的component重新繪制
4.選擇性子樹渲染?？梢灾貙憇houldComponentUpdate提高diff的性能
9.簡(jiǎn)述下flux的思想
flux的最大特點(diǎn)，就是數(shù)據(jù)的‘單向流動(dòng)’ 1.用戶訪問View 2.View發(fā)出用戶的Action 3.Dispatcher收到Action,要求state進(jìn)行相應(yīng)的更新 4.store更新后，發(fā)出一個(gè)‘change’事件后，更新頁(yè)面
10.reac性能優(yōu)化是哪個(gè)周期函
shouldComponentUpdate 這個(gè)方法用來(lái)判斷是否需要調(diào)用render方法重新描繪dom.因?yàn)閐om的描繪非常消耗性能， 如果我們?cè)趕houldComponentUpdate方法中能夠?qū)懗龈鼉?yōu)化的dom diff算法，可以極大的提高性能
11.react怎么劃分業(yè)務(wù)組件和技術(shù)組件
根據(jù)組件的職責(zé)通常把組件分為UI組件和容器組件 UI組件負(fù)責(zé)UI的呈現(xiàn)，容器組件負(fù)責(zé)管理數(shù)據(jù)和邏輯 兩者通過React-redux提供connect方法聯(lián)系起來(lái)
12.setState
setState通過一個(gè)隊(duì)列機(jī)制實(shí)現(xiàn)state更新，當(dāng)執(zhí)行setState時(shí)，會(huì)將需要更新的state很后放入狀態(tài)隊(duì)列
而不會(huì)立即更新this.state，隊(duì)列機(jī)制可以高效地批量更新state。如果不通過setState而直接修改this.state的值
那么該state將不會(huì)被放入狀態(tài)隊(duì)列中。當(dāng)下次調(diào)用setState并對(duì)狀態(tài)隊(duì)列進(jìn)行合并時(shí)，就會(huì)忽略之前修改的state，造成不可預(yù)知的錯(cuò)誤
同時(shí)，也利用了隊(duì)列機(jī)制實(shí)現(xiàn)了setState的異步更新，避免了頻繁的重復(fù)更新state
同步更新state:
setState 函數(shù)并不會(huì)阻塞等待狀態(tài)更新完畢，因此 setNetworkActivityIndicatorVisible 有可能先于數(shù)據(jù)渲染完畢就執(zhí)行。
第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，在setState的異步操作結(jié)束并且組件已經(jīng)重新渲染的時(shí)候執(zhí)行
也就是說，我們可以通過這個(gè)回調(diào)來(lái)拿到更新的state的值，實(shí)現(xiàn)代碼的同步
例子：componentDidMount() {
fetch('https://test.com')
.then((res) => res.json())
.then(
? ? (data) => {
this.setState({ data:data });
StatusBar.setNetworkActivityIndicatorVisible(false);
? ? ? ? }
