https://github.com/haizlin/fe-interview

2厌漂、http緩存

• 強緩存
  強緩存就是給資源設置個過期時間，客戶端每次請求資源時都會看是否過期杂靶；只有在過期才會去詢問服務器教藻。
  不會向服務器發(fā)送請求,直接從緩存中讀取資源
• 協(xié)商緩存
  請求資源時虫给，服務端和最新資源做對比昆稿。
  如果資源沒更改，返回304厉熟，瀏覽器讀取本地緩存导盅。
  如果資源有更改，返回200揍瑟，返回最新的資源白翻。
  協(xié)商緩存和強緩存使用場景：服務器上的資源會更新，這個時候如果我們還訪問本地緩存，那么對用戶來說滤馍，那就相當于資源沒有更新岛琼，用戶看到的還是舊的資源；所以我們希望服務器上的資源更新了瀏覽器就請求新的資源巢株，沒有更新就使用本地的緩存槐瑞，以最大程度的減少因網絡請求而產生的資源浪費。所以一般會使用協(xié)商緩存
• 本地存儲
  本地存儲主要有以下幾種,localStorage阁苞、sessionStorage困檩、cookie、websql那槽、indexDB.

localStorage
在前端設置,可以減少數據請求悼沿，長期存儲。
sessionStorage
在前端設置倦炒，只存在當前會話中即重新打開瀏覽器則數據消失
cookie
在后端設置,保存在客戶端本地文件,通過set-cookie設置且Cookie的內容自動在請求的時候被傳遞到服務器

3显沈、nginx負載均衡

使用upstream設置不同的服務器，以便每次訪問的時候逢唤，都會訪問到不同的服務器

image.png

5拉讯、key使用index會有什么問題

key是這條數據唯一的標識，用來追蹤列表中哪條元素進行變動了鳖藕。如果數組某項數據刪除魔慷，以前的數據和重新渲染后的數據隨著 key 值的變化從而沒法建立關聯(lián)關系. 這就失去了 key 值存在的意義，可能就會導致數據錯亂著恩。一般都會使用每條數據的id院尔，因為id是唯一的

6、css優(yōu)先級

內聯(lián)樣式>ID選擇器>類選擇器（Class）

8喉誊、絕對定位和相對定位的區(qū)別

絕對定位:是相對于元素最近的已定位的祖先元素邀摆，如果元素沒有已定位的祖先元素，那么它的位置則是相對于body
相對定位:相對于元素在文檔中的初始位置

9伍茄、let栋盹、const、var的區(qū)別

const一般用于聲明常量敷矫，var和let一般用于聲明變量
const和let不能重復定義屬性名例获，而var可以，并且var存在變量提升的現象
var可以跨快訪問

10曹仗、get和post的區(qū)別

get返回時榨汤，不會重新請求，而post返回時怎茫，會重新提交表單
get沒有post安全收壕，因為get請求參數直接暴露在url上
get參數通過url傳遞，post放在body中
get請求參數長度有限制，post沒有
get請求參數會被保存在瀏覽器歷史中啼器，而post不會

11旬渠、常用狀態(tài)碼

200 - 成功
301 - 重定向
304 - 一般用于協(xié)商緩存，向后臺發(fā)請求讀取資源端壳，如果本地有緩存，則返回304讀取本地緩存
400 - 前臺數據格式有錯誤
401 - 權限不足
403 - 服務器拒絕請求
500 - 服務器內部錯誤
503 - 服務器維護

12枪蘑、react調用setState后發(fā)生了什么

react會觸發(fā)調和過程损谦，react會以相對高效的方式根據新的狀態(tài)構建react元素樹并且重新渲染界面，react會自動計算新數樹與舊樹的差異岳颇，然后根據差異來渲染照捡。

14、react為什么虛擬 dom 會提高性能?

虛擬 dom 相當于在 js 和真實 dom 中間加了一個緩存话侧，利用 dom diff 算法避免了沒有必要的 dom 操作栗精，從而提高性能。傳統(tǒng)diff算法復雜度達到 O(n^3) 瞻鹏，n是樹的節(jié)點數悲立，而虛擬dom中的Diff算法復雜度只需要O(n)復雜度

15、了解redux嗎新博？

redux是公共管理狀態(tài)的薪夕，主要有三個核心方法，action,reducer,store赫悄，工作流程就是view調用dispatch觸發(fā)action原献，action可以寫異步操作，然后分發(fā)dispatch埂淮，reducer會根據action分發(fā)的dispatch中的type和state來更新狀態(tài)姑隅。當我們在組件中使用則需要使用connect將組件與store連接起來。

16倔撞、JS事件循環(huán)

首先JS是單線程的讲仰，一般的代碼都會按順序執(zhí)行，如果遇到異步代碼误窖，會將異步代碼放到另一個線程叮盘，這個線程我們叫工作線程，主線程繼續(xù)執(zhí)行剩余的代碼霹俺，當工作線程異步代碼執(zhí)行完成過后柔吼，比如setTimeout時間到了或者axios得到了數據，該線程就會將回調函數放到消息隊列里面去丙唧，當主線程代碼執(zhí)行完過后愈魏，會檢查任務隊列是否有任務要執(zhí)行，如果有，則會執(zhí)行培漏，如果沒有溪厘，則會一直循環(huán)等待任務到來。

17牌柄、什么是閉包和內存泄漏

閉包通俗來講畸悬，就是a函數里面還有b函數，而b函數可以訪問a函數里面的變量珊佣。
因為閉包會攜帶它的函數的作用域蹋宦，這樣會導致多余的內存被占用，這就是內存泄漏
在推出函數之前咒锻，將變量賦值為null冷冗，就可解決內存泄漏

18、async和await的原理和使用

在異步代碼的函數上加上async惑艇，在異步代碼前加上await蒿辙，這樣使用的話，我們即使調用的異步代碼滨巴，也會變成類似于同步思灌，只有讓這個異步代碼執(zhí)行完過后，才會執(zhí)行下面的代碼兢卵，好處就是promise一般會通過then方法來獲取異步數據习瑰，如果過多的話，就會造成回調地獄秽荤，代碼可讀性差甜奄，使用async/await可以使代碼很簡潔。

19窃款、MVVM是什么课兄？

MVVM即Model-View-ViewModel的簡寫。模型（Model）指的是后端傳遞的數據晨继。視圖(View)指的是所看到的頁面烟阐。視圖模型(ViewModel)是mvvm模式的核心，它是連接view和model的橋梁紊扬。例如react的state和vue的data里面蜒茄，然后頁面數據是從這個state或data里面取到的

20、css和less區(qū)別

less是css預處理語言餐屎，擴展了css檀葛。

• less可以聲明變量，@color: #4D926F;
• less可以混合腹缩，即b樣式可以直接調用a樣式

21屿聋、form表單提交和ajax提交表單區(qū)別

• ajax是異步的空扎，網頁不需要刷新，form表單提交則需要刷新
• ajax提交是在后臺新建請求润讥，form表單則是趨勢放棄本頁面转锈，再申請

22、Promise是什么楚殿？

promise是一個對象撮慨，內部有三個狀態(tài)，resolved,rejected,pending勒魔。當我們new一個promise對象的時候甫煞，會傳入一個回調函數，這回調函數有resolve和reject兩個方法冠绢。想改變狀態(tài)只能調用resolve()或者reject()這兩個方法，并且resolve可以將異步數據存儲在內部data里面常潮，然后他們通過.then方法來獲取數據弟胀，then方法可以接受兩個參數，一個成功的回調喊式，一個失敗的回調孵户。但是我們獲取數據一般是通過async/await來獲取數據。這樣可以避免回調地獄岔留。

23夏哭、高階函數是什么？

高階函數就是指函數作為可以作為另外一個函數的參數

24献联、組件化開發(fā)有什么好處竖配？

• 可組合：便于將復雜的UI拆分成多個簡單的UI組件
• 可復用：每個組件都具有獨立功能，可使用在多個場景
• 便于維護：每個組件都有自己的功能里逆，便于開發(fā)者維護

25进胯、什么是跨域？

當一個url的協(xié)議原押、域名胁镐、端口三者之間任意一個與當前url不同即為跨域，跨域則是因為受到瀏覽器同源策略的限制诸衔，同源就是指兩個頁面具有相同的協(xié)議盯漂、域名、端口號笨农。

26就缆、怎么解決跨域？

• 1磁餐、nginx反向代理
• 2违崇、jsonp請求阿弃，但是只能處理get請求
• 3、CORS跨域
  cors全稱是跨域資源共享羞延，cors需要瀏覽器和服務器同時支持渣淳，瀏覽器會將請求分為兩大類，一類是簡單請求伴箩，一類是復雜請求.
• 簡單請求一般就是get入愧，post，并且頭部信息也不能帶多余的參數嗤谚，當瀏覽器發(fā)現是簡單請求時棺蛛，請求頭會多一個字段origin，origin會指出當前請求屬于哪個域巩步，服務器會根據這個值決定是否允許跨域旁赊。
• 特殊請求，例如put椅野，delete等终畅，則會在發(fā)送請求之前先發(fā)送一個預檢測請求，服務器收到預檢測請求竟闪，如果允許跨域离福，客戶端則能成功發(fā)送請求

27、react框架的優(yōu)點

1炼蛤、react速度快妖爷，因為含有虛擬dom
2、組件化理朋，便于維護
3絮识、單向數據流，便于閱讀代碼
4暗挑、純粹的javaScript語法笋除，沒有任何專有的react語法

28、vue框架和react框架的區(qū)別

• vue使用html模板進行渲染炸裆，只是在html上多了一些特有的屬性垃它，例如v-for，v-if等烹看，而react則是使用jsx語法国拇，jsx語法則是可以再javaScript中寫html

29、什么是回調函數惯殊？

回調函數則是函數作為參數傳入另外一個函數酱吝，這個作為參數的函數會在某個時機被調用，這就是回調函數

30土思、xss跨站腳本如何進行务热？防御手段忆嗜？

如何進行：xss是指惡意攻擊者利用網站沒有對用戶提交的數據進行過濾處理，進而添加一些惡意代碼崎岂，嵌入到Web頁面捆毫，從而利用用戶的身份進行某種動作
防御手段：不信任客戶端提交的任何數據，只要是客戶端提交的就應該先進行對應的過濾處理冲甘。

31绩卤、CSRF跨站請求偽造如何進行？防御手段江醇？

如何進行：當用戶在某網頁登錄后濒憋，在沒有關閉網頁的情況下，收到惡意鏈接陶夜，點擊鏈接凛驮，則會利用瀏覽器的cookie把密碼改掉。
防御手段：后端使用jwt技術驗證token条辟，使用axios請求

32辐烂、web上傳漏洞如何進行？防御手段捂贿？

如何進行：用戶上傳了一個可執(zhí)行的腳本文件，并通過腳本文件獲得了執(zhí)行服務器端命令的能力
防御手段：1胳嘲、前后端都對文件后綴名進行限制
2厂僧、吧文件上傳目錄的權限設置為只讀

33、什么是盒子模型了牛？

盒子模型從外到內由margin颜屠、border、padding鹰祸、content組成

34甫窟、簡要說一下css的元素分類

塊級元素：div,p,h1,form,ul,li;
行內元素 : span,a,label,input,img,strong,em;

35、axios有什么好處蛙婴？

• 支持promise語法
• 攔截請求頭和響應
• 自動轉換json數據
• 客戶端支持防止csrf

36粗井、冒泡排序

比較相鄰的元素，如果前者比后者大街图，則交換浇衬，大的在右邊，雙重循環(huán)餐济，最外層循環(huán)arr.length - 1耘擂，內層循環(huán)比較相鄰兩個數的大小，直到吧最大的數放在最右邊絮姆，外層循環(huán)arr.length-1次醉冤，然后數組就會從小到大排列秩霍。

37、快排排序

一個數組里面尋找中間的值作為基準蚁阳，然后創(chuàng)建兩個空數組铃绒，循環(huán)原數組，將數組的每個值跟基準比較韵吨，比基準小的存在一個數組匿垄，比基準大的存在一個數組，然后遞歸執(zhí)行以上操作归粉，最后將兩個數組合并椿疗。

38、為什么要清楚浮動糠悼，如何清除届榄？

當給元素設置了浮動float過后，就會產生高度塌陷的情況倔喂，就是如果子元素高度大于父元素時铝条，父元素就包含不住子元素了。

• 給父元素添加偽元素清楚浮動

.clear-float:after{
   display:block;
   content : "";
   clear:both;
   height:0
}

• 父級盒子觸發(fā)BFC

39席噩、實現數組去重

• 使用indexOf（）去重班缰，首先創(chuàng)建一個空數組，然后原數組循環(huán)遍歷悼枢，然后判斷如果當前的這個值在創(chuàng)建的新數組里面沒有埠忘，也就是等于-1，那么就添加馒索，如果有莹妒，則不添加。

 let res = []
    for (let i = 0; i < arr.length; i++) {
        if (res.indexOf(arr[i]) === -1) {
            res.push(arr[i])
        }
    }

• 使用ES6绰上，Set去重

const arr = [1,2,2,3,4,5,3]
console.log(new Set(arr))

40旨怠、談一談箭頭函數

• 箭頭函數可以更改this的指向，使this指向上下文
• 箭頭函數后面只要一條語句時蜈块，可以直接寫在后面
• 箭頭函數需要返回一個對象時鉴腻，則需要使用（{}）

41、談一談ES6中的模塊化

ES6的模塊化分為導出（export）與導入（import）兩個模塊疯趟。如果希望外部能讀取模塊當中的內容拘哨，就必須使用export暴露出去，然后在另外一個文件中用Import引入該模塊信峻，一個模塊如果只有一個默認導出的話倦青，就使用export default，引入的時候也可使用as進行重命名盹舞。

42产镐、JS原型鏈和原型

• prototype是函數才有的屬性
• __proto __是每個對象都有的屬性
  當我們定義一個函數的時候隘庄，就會產生一個原型對象，當我們使用這個函數構造對象癣亚，該對象都會從原型對象中繼承屬性丑掺、方法。
  當JS尋找該對象的屬性時述雾，先會查找對象本身是否存在該屬性街州，如果不存在，則會在原型鏈上查找玻孟。
  因為任何對象都有proto,所以會形成一個鏈條唆缴，當我們到頂點的時候，就會發(fā)現proto里面只有object了黍翎，因為JS中任何對象都是Object的實例面徽。

43、使用原型鏈實現js繼承

• 思路就是讓子類的原型等于父類的實例匣掸，因為父類的實例趟紊，就繼承了父類的屬性和方法，然后父類的屬性和方法就定義在子類的原型對象上碰酝，這樣子類就實現了繼承父類

 //父方法
  function SupperFunction(flag1){
    this.flag1 = flag1;
  }

  //子方法
  function SubFunction(flag2){
    this.flag2 = flag2;
  }

  //父實例
  var superInstance = new SupperFunction(true);

  //子繼承父
  SubFunction.prototype = superInstance;

  //子實例
  var subInstance = new SubFunction(false);

  //子調用自己和父的屬性
  console.log(subInstance.flag1);
  console.log(subInstance.flag2);

44霎匈、Vue組件間的通信

• 通常父組件傳遞給子組件使用props
• 子組件傳遞給父組件，使用ref屬性送爸，獲取真實dom
• 子組件使用emit方法
• 使用vux

45唧躲、介紹Vuex

vuex能對vue項目進行狀態(tài)管理，主要一般通過state碱璃，mutations，action這三個模塊構造饭入，state是保存所有數據嵌器，mutations用來保存所有方法，用來改變state的數據谐丢，action一般暴露給用戶使用爽航，可執(zhí)行異步操作，用來觸發(fā)mutatios的方法乾忱，用來改變數據讥珍。一般在頁面中通過mapState來讀取數據，通過mapActions來操作action窄瘟。面對復雜的應用我們還需要創(chuàng)建modules衷佃，將vuex的store對象拆分成模塊來寫。

46蹄葱、vuex的優(yōu)缺點

優(yōu)點首先是

• 代碼看得更簡潔了氏义，我們閱讀代碼時锄列，不需要去看組件之間如何傳遞數據的，特別是非父子組件傳遞
• 減少了ajax請求惯悠，可以從store里面直接取
  缺點：
• 每次刷新vuex也就會刷新邻邮，但是我一般需要長久存儲的數據，我會存儲在localStorage里面克婶，然后vuex再讀取筒严。

47、vue雙向數據綁定原理

實現雙向數據綁定主要是結合發(fā)布者-訂閱者的模式情萤，通過Object.defineProperty()來劫持各個屬性的setter鸭蛙，getter，在數據變動時發(fā)給訂閱者紫岩，觸發(fā)相應的監(jiān)聽回調规惰，當把一個普通的對象作為data選項時，vue將遍歷它的屬性并且轉換為getter/setter泉蝌。

48歇万、sum求和，可以傳入多個參數

使用arguments這個API勋陪，arguments為函數傳入的實參贪磺，并且會轉換為數組形式，這樣的話就好做了诅愚，遍歷實參寒锚，相加，最后返回违孝。

49刹前、多維數組降為一維數組

將數組轉換為字符串，再切割字符串

let arr = [1, 2, 3, 4, 5, [6, 7, 8, [9, 10, 11, 12, [13, 14, 15, 16]]]]
console.log(arr.toString())  
let newArr = arr.toString().split(',')
console.log(newArr)  

50雌桑、什么是TCP

OSI一共有7層網絡模型喇喉，應用層、表示層校坑、會話層拣技、傳輸層、網絡層耍目、數據鏈路層膏斤、物理層，TCP和UDP是傳輸層的協(xié)議邪驮。
TCP無論哪一方向另一方發(fā)送數據之前莫辨，都會在雙方之間建立一條連接。連接是通過“三次握手”進行初始化的。三次握手的目的是建立可靠的通信連接衔掸，確認雙方的發(fā)送與接收是否正常烫幕。完成了三次握手，客戶端和服務端就可以開始傳送數據了敞映。
三次握手的步驟

• 第一次握手较曼，客戶端發(fā)送請求建立連接，請求報文段
• 第二次握手振愿，服務器收到請求捷犹，發(fā)送同意并請求與客戶端建立連接
• 第三次握手，客戶端收到請求冕末，發(fā)送同意與服務器建立連接
  當客戶端與服務器通過三次握手建立了TCP連接過后萍歉，當數據傳送完畢，相應的就要斷開TCP連接了档桃，于是就有了四次分手的步驟枪孩。
  四次分手的步驟
• 第一次分手，客戶端發(fā)送斷開請求
• 第二次分手藻肄，服務器收到斷開請求蔑舞，發(fā)送同意斷開連接的請求
• 第三次分手，服務器發(fā)送請求斷開連接
• 第四次分手嘹屯，客戶端收到攻询，發(fā)送同意斷開連接

51、為什么TCP是三次握手州弟，而不是兩次

可能會形成死鎖钧栖。假設客戶端給服務器發(fā)送了一個連接請求報文，服務端成功接收并給客戶端發(fā)送了確認應答報文婆翔，此時服務端并不能確認該應答報文是否成功到了客戶端拯杠，但因為兩次握手，所以這時候服務端就處于成功連接的狀態(tài)了啃奴，并給客戶端發(fā)送數據阴挣。如果客戶端未收到服務端的應答報文，則不知道服務器是否確認好建立連接纺腊，甚至不知道自己發(fā)送給服務器的報文是否成功抵達，此時客戶端會認為連接并未成功建立，會忽略服務端發(fā)送過來的任何數據。而服務端發(fā)送的數據未得到相應超時時幻工，會重復發(fā)送同樣的數據唯竹，這樣就形成了死鎖。

52热押、TCP和UDP的區(qū)別

TCP是一種面向連接，可靠穩(wěn)定的傳輸協(xié)議轮纫，建立連接需要經歷三次握手趁仙，握手成功才可通信洪添，但是速度比較慢，效率比較低雀费，容易被DOS干奢，DDOS攻擊。
UDP是一種面向無連接盏袄，不可靠的傳輸協(xié)議忿峻，會直接建立連接，速度快辕羽，沒有三次握手的機制逛尚，所以會相對安全，但是UDP還是可能會被flood攻擊刁愿，在網絡不好的情況绰寞，容易發(fā)生丟包。

• 當對網絡通信質量有要求時铣口，比如：整個數據要準確無誤的傳遞給對方滤钱，這往往對于一些要求可靠的應用，比如HTTP,HTTPS,FTP等傳輸文件的協(xié)議枷踏，POP,SMTP等郵件的傳輸協(xié)議菩暗。常見使用TCP協(xié)議的應用：
  1.瀏覽器使用的：HTTP
  2.FlashFXP:FTP
  3.Outlook:POP，SMTP
  4.QQ文件傳輸
  UDP 文件傳輸協(xié)議
• 對當前網絡通訊質量要求不高的時候旭蠕，要求網絡通訊速度盡量的快停团，這時就使用UDP
  日常生活中常見使用UDP協(xié)議：
  1.QQ語音
  2.QQ視頻

HTTP請求報文

HTTP的請求報文包括：請求行(request line)、請求頭部(header)掏熬、空行 和 請求數據(request data) 四個部分組成佑稠。

• 請求行包括： 請求方法，URL(包括參數信息)旗芬，協(xié)議版本這些信息
• 請求頭部(Header)
• 空行(CR+LF)：請求報文用空行表示header和請求數據的分隔
• 請求數據：GET方法沒有攜帶數據舌胶， POST方法會攜帶一個body

瀏覽器渲染的步驟

• 處理HTML標記并構建DOM樹
• 處理CSS標記并構建CSSOM樹
• 將DOM與CSSOM合并成一個渲染樹
• 根據渲染樹來布局，計算每個節(jié)點的布局信息
• 將各個節(jié)點繪制到屏幕上

53疮丛、輸入url后發(fā)生了什么

• 用戶輸入url通過DNS解析為對應的IP地址
• TCP連接
• 發(fā)送http請求
• 返回http響應
• 瀏覽器解析渲染頁面
• 斷開TCP連接

54幔嫂、重繪和重排的區(qū)別

重繪不一定重排，重排必定導致重繪

• 重繪：指一個元素外觀被改變誊薄，瀏覽器會根據元素新屬性重新繪制履恩，使元素呈現新的外觀，比如改變某個元素的背景色呢蔫、文字顏色切心、邊框顏色等
• 重排 ：當渲染樹的一部分更新并且節(jié)點的尺寸發(fā)生了變化，瀏覽器會使渲染樹種受到影響的部分失效，并且重新構造渲染樹绽昏。
  引發(fā)重排：
  1协屡、添加、刪除可見的dom
  2全谤、元素的位置改變
  3肤晓、元素的尺寸改變
  4、頁面渲染初始化
  5啼县、瀏覽器窗口尺寸改變
  優(yōu)化
  瀏覽器會維護一個隊列材原，把所有引起重拍、重繪的操作放入這個隊列季眷，等隊列到了一定的數量或者到了一定的時間間隔余蟹，瀏覽器就會進行處理，這樣多次重排重繪就會進行成一次重排重繪
• 不要一條一條修改dom樣式子刮，寫在定義好css的class中
• 為動畫元件使用絕對定位威酒，修改樣式就不會進行重繪

54、HTML行內元素挺峡、塊狀元素葵孤、行內塊狀元素的區(qū)別

使用display可以將三者任意轉換，

• 行內元素橱赠，最常用的就是span
  （1）尤仍、設置寬高無效
  （2）、margin僅左右有效
  （3）狭姨、不會自動換行
• 塊狀元素宰啦，具有代表性的就是div
  （1）、能夠識別寬高
  （2）饼拍、margin和padding均有效
  （3）赡模、可以自動換行
• 行內塊狀元素，
  （1）师抄、能夠識別寬高
  （2）漓柑、不會自動換行
  （3）、默認排列方式從左到右

55叨吮、http和https的區(qū)別

https的ssl加密是在傳輸層實現的

• http傳輸的數據都是未加密的辆布，而https是通過ssl協(xié)議對數據進行加密處理
• https協(xié)議需要ca證書，費用較高
• http協(xié)議的端口為80茶鉴，而https協(xié)議端口為443

56锋玲、移動端怎么做適配的

• 使用viewport，隨著屏幕寬度變化蛤铜，頁面也會跟著變化

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

width設置成了設備的寬度，initial-scale控制了頁面加載時候的縮放等級，maximum-scale為用戶最大縮放值围肥，user-scalabel是否允許用戶進行縮放

57剿干、box-sizing屬性

box-sizing是更改盒子模型基準，有兩個選項穆刻，一個是content-box置尔，一個是border-box。還有一個是inherit默認的是content-box氢伟。
其實兩者的區(qū)別也就是盒子的寬高是否包含border和padding榜轿，如果是content-box那么寬高就是固定的，如果是border-box朵锣，那么寬高就是設定的寬高再減去border和padding谬盐，就是這個盒子的寬高。
inherit是繼承父元素的box-sizing诚些。

58飞傀、宏任務與微任務

宏任務例如，script诬烹，setTimeout砸烦，setInterval
微任務例如Promise.then
執(zhí)行一個宏任務，執(zhí)行過程中如果遇到微任務绞吁，就會將微任務添加到微任務的隊列幢痘，宏任務執(zhí)行完畢過后，會立即按順序執(zhí)行微任務家破，當這個宏任務執(zhí)行完畢后颜说，開始進行渲染，渲染完畢后员舵，開始下一個宏任務脑沿。

59、BFC是什么马僻？

BFC是塊級格式化上下文庄拇，是用于布局塊級盒子的一塊渲染區(qū)域。
一般觸發(fā)BFC的條件

• 根元素韭邓，即html元素
• float的值不為none
• overflow的值為hideen
• display的值為inline-block
• position的值為absolute或者fixed
  作用
• 可以阻止元素被浮動的元素覆蓋
• 清除浮動
• 解決同一個BFC區(qū)域的垂直方向margin塌陷的問題
  屬于同一個BFC的兩個相鄰的box的margin會重疊措近，以大的為主。要想解決這個問題女淑，可以將兩個盒子分為不同的BFC中瞭郑。

60、AST抽象語法樹

抽象語法樹鸭你，是源代碼的抽象語法結構的樹狀表現形式屈张，一般指編程語言的源代碼

61擒权、put、post阁谆、patch的區(qū)別

post用來創(chuàng)建資源碳抄，多次執(zhí)行，會導致多條資源重復創(chuàng)建
put一般用來更新已知資源
patch對已知資源進行局部更新

62场绿、vue-router原理

vue-router是應用在單頁面應用中剖效。
單頁面：第一次進入頁面的時候會請求一個html文件，當url變化時焰盗，js會感知到璧尸，js會將當前的頁面清除掉，判斷當前url需要顯示哪個組件熬拒，清除不需要的爷光，顯示需要的組件。
實現原理：更新視圖但不重新請求頁面
前端路由主要有兩種模式梦湘，hash模式和history模式瞎颗，hash會在域名后面加一個#號，hash雖然會出現在url中捌议，但不會包括在http請求中而history則不存在哼拔，沒有#號，這種模式需要服務端支持瓣颅。服務端接收到請求后倦逐，都指向同一個html文件。
vue-router也是利用了這兩個特性來實現前端路由

63宫补、Node.js中間件

中間件主要是指封裝所有http請求細節(jié)處理的方法檬姥，比如記錄日志、權限驗證粉怕、異常處理等健民。
中間件是從http請求發(fā)起到響應結束過程中的處理方法，通常需要對請求和響應進行處理贫贝。

64秉犹、什么是DNS、FTP稚晚，基于什么協(xié)議崇堵？

DNS（Domain Name System）：域名解析協(xié)議，端口號：53客燕；通過域名解析獲得域名所對應的IP

FTP（File Transfer Protocol）：文件傳輸協(xié)議鸳劳，端口號：21；用戶可通過客戶機程序向遠程主機上傳文件也搓；或從遠程主機上下載文件赏廓。

• FTP用的TCP協(xié)議涵紊。
• DNS域名解析時用的UDP協(xié)議，DNS區(qū)域傳輸的時候使用的TCP協(xié)議幔摸。
  輔域名服務器會定時（一般3小時）向主域名服務器進行查詢以便了解數據是否有變動栖袋，這就是區(qū)域傳輸。

65抚太、Vue生命周期

beforeCreate : 組件創(chuàng)建之前
created：組件創(chuàng)建后
beforeMount：組件掛載之前
mounted:掛載完成
beforeUpdate：數據更新前
updated：數據更新后
beforeDestory：實例銷毀之前
destored：實例銷毀后

65、防抖和節(jié)流

防抖：讓某個時間期限內昔案，事件處理函數只執(zhí)行一次尿贫，例如獲取滾動條位置，就要每3S執(zhí)行一次踏揣，可以使用定時器來實現庆亡，我們可以在一個方法里面使用閉包來存儲一個狀態(tài)，定時器每次執(zhí)行捞稿，都會返回一個類似于ID又谋，ID是用來關閉定時器的，每次執(zhí)行該方法娱局，如果有ID就清除該ID的定時器彰亥，并且創(chuàng)建一個新的定時器。

function dbbounce(fn,delay){
        let timer = null
        return function(){
            //setTimeout每次執(zhí)行衰齐，會返回給我一個特殊的值任斋，這個值是用來關閉定時器的,每次執(zhí)行該方法時，如果有timer就清楚上個定時器
            //如果沒有就執(zhí)行定時器
            if(timer){
                clearTimeout(timer)
            }
            timer = setTimeout(fn,delay)
        }
    }

    function showTop (){
        var scrollTop = document.documentElement.scrollTop
        console.log('滾動距離',scrollTop)
    }

    window.onscroll = dbbounce(showTop,3000)

節(jié)流:函數執(zhí)行一次后耻涛，在某個時間段內暫時失效废酷，過段時間再重新激活，使用閉包存儲一個布爾類型的狀態(tài)抹缕，每次執(zhí)行該方法時澈蟆，如果狀態(tài)為false則不執(zhí)行，如果狀態(tài)為true卓研，則會使狀態(tài)先等于false趴俘，達到冷卻的效果，再調用定時器鉴分，定時器完成過后哮幢，會將狀態(tài)改為true。

 function throttle(fn, delay) {
        let valid = true
        return function () {
            //類似于技能能卻志珍，執(zhí)行完一次橙垢，有間隔時間，時間走完了伦糯，才能再執(zhí)行
            //滾動時柜某，如果狀態(tài)為false就不執(zhí)行嗽元，如果狀態(tài)為true，在間隔期間設置狀態(tài)為false喂击，然后在執(zhí)行定時器剂癌，定時器執(zhí)行完，將狀態(tài)改為true
            if (!valid) {
                return false
            }
            valid = false
            setTimeout(() => {
                fn()
                valid = true
            }, delay)

        }
    }

    function showTop() {
        var scrollTop = document.documentElement.scrollTop
        console.log('滾動距離', scrollTop)
    }

    window.onscroll = throttle(showTop, 2000)

66翰绊、ajax佩谷，axios和fetch有什么區(qū)別

ajax

• 本身針對MVC的編程，不符合現在MVVM的框架
• JQuery整個項目太大监嗜，單純使用ajax卻要引入整個JQuery
  axios
• 支持Promise語法
• 客戶端支持防止CSRF
• 攔截請求頭和響應
• 自動轉換json數據
  fetch
• fetch只對網絡請求報錯谐檀，對400,500都當做成功的請求，需要封裝去處理裁奇。

67桐猬、為什么JS是單線程的？

JS作為瀏覽器腳本語言刽肠，JS的主要用途是與用戶互動溃肪，以及操作DOM。這決定了只能是單線程音五，否則會帶來復雜的同步問題惫撰，比如，假如JS有兩個線程躺涝，一個線程在某個DOM節(jié)點上添加內容润绎，另一個線程刪除了這個節(jié)點，這時候瀏覽器就不知道應該以哪個為準诞挨。

68莉撇、路由懶加載

路由懶加載也叫按需加載，即在需要的時候進行加載惶傻，單頁應用棍郎，利用webpack打包后的文件會非常大，造成進入首頁時银室，需要加載的內容過多涂佃，時間過長，會出現長時間白屏蜈敢，而運用懶加載可以將頁面進行劃分辜荠，需要的時候加載頁面，減少首頁加載用時抓狭。

routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]

69伯病、前端項目優(yōu)化

• 路由懶加載
• 開啟nginx的gzip壓縮
• 抽取公用組件和方法，清除冗余代碼
• 使用壓縮工具壓縮圖片否过，例如tinypng

72午笛、水平垂直居中

• flex布局惭蟋， justify-content: center; align-items: center;

• 給父元素設置相對定位，給子元素設置絕對定位

 #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
}

73药磺、兩個等號和三個等號的區(qū)別

• 三個等號稱為等同符告组，當兩邊值類型相同時，直接比較值癌佩，若類型不相同木缝，直接返回false
• 兩個等號稱為等值符，當等號兩邊類型相同時围辙，直接比較值氨肌，若不相同，則先轉化為類型相同的值酌畜，在進行比較。
  類型轉換規(guī)則：
  （1）如果等號兩邊是boolean卿叽、string桥胞、number三者中任意兩者進行比較時，優(yōu)先轉換為數字進行比較考婴。
  （2）如果等號兩邊出現了null或undefined,null和undefined除了和自己相等贩虾，就彼此相等

74、常用操作字符串方法

• split(sep沥阱，limit)：將字符串分割為字符數組缎罢，limit為從頭開始執(zhí)行分割的最大數量
• slice(start,end)：返回字符索引在start和end（不含）之間的子串
• substr(start，length)：從字符索引start的位置開始考杉，返回長度為length的子串
• substring(from,to)：返回字符索引在from和to（不含）之間的子串
• charAt(index):返回指定索引處的字符串
• charCodeAt(index):返回指定索引處的字符的Unicode的值
• lastIndexOf(str):返回str在父串中最后一次出現的位置策精，若沒有則返回-1
• indexOf(str):返回str在父串中第一次出現的位置，若沒有則返回-1

75崇棠、常用操作數組方法

• push()咽袜，向數組的末尾添加元素
• pop()，刪除數組中最后一個元素
• unshift()枕稀，向數組開頭添加元素
• shift()，刪除數組第一個元素
• splice(index,howmany,item1....)：添加/刪除數組元素萎坷，index規(guī)定位置，howmany為刪除的數量哆档，item1......可選向數組添加的新項目
• sort()，對數組元素進行排序瓜浸，并返回這個數組寞秃，sort的比較函數有兩個參數偶惠，返回a-b則使升序，返回b-a則是降序
• slice(start,end)：返回數組下標在start和end（不含）之間的值
• indexOf() 查找數組是否存在某個元素忽孽，返回下標
• lastIndexOf() 查找指定元素在數組中的最后一個位置
• includes() 查找數組是否包含某個元素 返回布爾
• filter（function） 過濾原始數組，返回新數組
  function(currentValue,index,arr): 數組中每個元素需要調用的函數兄一。
  // 回調函數的參數

1. currentValue(必須),數組當前元素的值
2. index(可選), 當前元素的索引值
3. arr(可選),數組對象本身

76厘线、什么是事件委托

事件委托就是利用事件冒泡，只指定一個事件處理程序出革，就可以管理某一類型的所有事件造壮。
當我們有很多dom需要添加處理事件，比如ul下面有很多l(xiāng)i骂束，我們給每個li都要添加相同的點擊事件耳璧，通常會用for循環(huán)，給它們添加點擊事件展箱，這有很大的性能弊端

77旨枯、call、bind混驰、apply的區(qū)別攀隔？

• bind 返回一個函數, 第一個參數是改變this指向的對象 直接傳參
• apply 對函數的直接調用, 第一個參數是改變this指向的對象 參數用數組包裹
• call 對函數直接調用,第一個參數是改變this指向的對象 直接傳參

78、深拷貝和淺拷貝的區(qū)別

它們最根本的區(qū)別在于是否真正獲取了一個對象的復制實體栖榨，而不是引用
淺拷貝現在可以使用Object.assign快速實現
Object.assign()只有源對象昆汹，沒有目標對象時為淺拷貝
JSON.parse(JSON.stringify())可以實現深拷貝

79、JSON.parse和JSON.stringify的區(qū)別

• JSON.parse()【從一個字符串中解析出json對象】
• JSON.stringify()【從一個對象中解析出字符串】

80婴栽、JS動畫和CSS3動畫差異性

css3后來添加了transform動畫函數
css3動畫與js動畫的區(qū)別：
js功能涵蓋面比css3廣
css3比js更易實現
css3存在兼容問題 js不存在兼容問題

81筹煮、join("")和toString()的區(qū)別

join（“”）轉換為字符串時，會將逗號去掉

82居夹、JS基本數據類型

基礎類型：Undefined,Null,Boolean,Number,String,Symbol
引用類型：Object,Array
symbol生成的是一個全局唯一的值,Symbol(1) === Symbol(1)是為false的败潦。

83、ES6新特性

• promise
• async/await
• class
• 箭頭函數
• 擴展運算符

84准脂、談談ES6中的class

首先class是用來創(chuàng)建類的劫扒，在傳統(tǒng)的js中，沒有類的概念狸膏。class的作用讓原型對象的寫法更加清晰

• 首先我們在類里面寫方法時沟饥，方法時直接定義在原型對象上面
• constructor就相當于構造函數，接受參數
• 類必須使用new調用

85、擴展運算符

擴展運算符就是遍歷目標對象广料，拷貝到當前對象中
擴展運算符如果目標對象中含有引用數據類型艾杏，則使用擴展運算符拷貝出來的則是淺拷貝盅藻。

86氏淑、vue和react的事件綁定對比

首先vue的特色是雙向綁定假残，而react是單向綁定，其實vue的雙向綁定也可以使用單向綁定加上onChange事件監(jiān)聽來實現阳惹。

87、Hooks是什么

原來我們寫一個組件需要去聲明一個類仿便，但是使用了hooks就不需要了嗽仪，就直接使用function創(chuàng)建一個函數柒莉，然后使用useState來管理狀態(tài)兢孝，然后在返回html模板就可以成功創(chuàng)建一個組件了

88跨蟹、webpack是什么，loader是什么夯秃？

webpack是前端構建的一個工具仓洼，loader其實就是提供了打包方案色建，就比如webpack不知道怎么打包圖片模塊镀岛、css模塊漂羊、js模塊時，就會使用各種loader來幫助Webpack打包
比如：
image-loader：加載并且壓縮圖片文件
babel-loader：把 ES6 轉換成 ES5
css-loader：加載 CSS椭豫，支持模塊化赏酥、壓縮裸扶、文件導入等特性
eslint-loader：通過 ESLint 檢查 JavaScript 代碼

plugin其實主要是監(jiān)聽一些webpack事件的呵晨，然后做優(yōu)化

89熬尺、CSS可繼承的屬性

1粱哼、字體系列屬性揭措，例如字體粗細绊含，風格，大小
2不翩、文本系列屬性，例如行高器钟，文本顏色
無繼承的屬性：display傲霸，背景屬性昙啄，盒子模型的屬性梳凛，定位屬性

談一談RCM自動升級這個項目梳杏？

公司每次有升級包十性，就需要在這創(chuàng)建任務劲适，上傳升級包，然后對任務可視化操作烹植，顯示進度和狀態(tài)信息等刊橘，可以編輯颂鸿，可以查看詳情嘴纺，可以下載對比文件等栽渴，除此之外還有一些基準文件配置闲擦、郵箱配置墅冷、常用工具等功能寞忿。
1腔彰、表單聯(lián)動太多，開始想著用change方法來監(jiān)聽數據搓逾，最后編輯的時候恃逻，因為需要初始化數據寇损，最后才采用的watch的深度監(jiān)聽
2矛市、formdata傳遞數組浊吏，當時后端需求就是我需要傳一個數組救氯，這個數組每一個對象里面都包含的有文件着憨，所以我選擇采
用Formdata形式傳遞數據給后臺甲抖，而formdata添加數據又是key,value的形式准谚，所以我添加時key就是將數組轉為語義化來命名。
3樊破、下載瀏覽器默認打開的文件哲戚。

談一談你做項目遇到的困難

1、最開始做項目的時候档押，跨域問題以及服務器配置
2令宿、前期對數據的處理粒没，例如數組癞松，或者對象類型的方法了解的太少