【前端面試】Part 1：2020屆初級前端校招筆試題及面經總結 —— 基礎知識題

個人總結

很高興今天收到了開獎電話，拿到本科SP成功結束了秋招！

一輪輪的筆面試是對自己查缺補漏、學習成長的過程。
反思自己對前端的學習過程：2017年10月加入Smartlab411，起步階段看書比較多但不夠透徹，大部分看完代碼片就開始擼代碼，到了暑假實驗室師兄準備秋招畢業，我們也擔上了主程的任務，從去年暑假開始更多的是鍛鍊動手能力，後來前端體系升級導師採用了React作爲管理端框架，一點點的踩坑，一步步的摸索。雖說自己的代碼理解力提高了不少但對原理的概念稍微有點薄弱，面試提問也被問倒，在此決定分享總結自己的面經。

PS：悲慘的是我八月初硬拉導致右手韌帶斷裂，目前正在恢復中，這段時間只能靠左手碼字。

高頻題目（答案後續更新）

---

1. 原型鏈

概念：
1).只要創建了一個新函數，就會爲該函數創建一個prototype屬性，這個屬性指向函數的原型對象；

2).所有原型對象都會自動獲得一個constructor（構造函數）屬性，這個屬性包含一個指向prototype屬性所在函數的指針；

3).當調用構造函數創建一個新實例後，該實例的內部將包含一個指針（內部屬性），指向構造函數的原型對象。

綜上所述，假如我們讓原型對象等於另一個類型的實例，則此時的原型對象將包含一個指向另一個原型的實例，相應地，另一個原型中也包含着一個指向另一個構造函數的指針。假如另一個原型又是另一個類型的實例，那麼上述關係依然成立，如此層層遞進，就構成了實例與原型的鏈條，這就是原型鏈。

首先要理解構造函數、原型對象、實例對象，我們以案例講解：
構造函數：function Fn(){};
原型對象：Fn.prototype;
實例：const fn = new Fn();

上述滿足原型三要素以及內部指針指向：
1. 構造函數通過prototype指向原型對象： Fn.prototype  => Fn.protype 
2. 原型對象通過constructor指向構造函數：Fn.prototype.constructor => Fn(){};
3. 實例通過__proto__指向原型對象：fn.__proto__ => Fn.protype;
4. 實例通過__proto__指向原型對象再通過constructor指向構造函數：fn.__proto__.constructor => Fn(){};
上面關係可以通過畫圖理解，三者呈三角關係，通過指正關聯，

***** 拓展isPrototypeOf() 和 getPrototypeOf() ************
*														*
******************* isPrototypeOf() *********************
*														*
*    通過Object.isPrototypeOf來判斷從屬關係      	   	    *
*    Fn.prototype.isPrototypeOf(fn);				    *
*    Object.prototype.isPrototypeOf(fn);		        *
*    Object.prototype.isPrototypeOf(Fn);    		    *    
* 														*
******************** getPrototypeOf() *******************
* 														*
*    此時爲Fn的原型對象添加一個屬性      					*
*    var proto = Object.getPrototypeOf(fn);				*
*    proto.name = 'Luvsta';								*
*    打印 Fn.prototype === proto; // true				*	
*    得到結果：兩者相等; 									*
*    proto = {name: "Luvsta", constructor: ƒ} 		    *
*    Fn.prototype = {name: "Luvsta", constructor: ƒ};   *
*														*
*********************************************************

2. 閉包

概念： 閉包是指有權訪問另一個函數作用域中變量的函數，創建閉包的最常見的方式就是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變量,利用閉包可以突破作用鏈域，將函數內部的變量和方法傳遞到外部。

 閉包的特性：
 1.函數內再嵌套函數
 2.內部函數可以引用外層的參數和變量
 3.參數和變量不會被垃圾回收機制回收

3.HTTP

這裏不詳細贅述計網的概念，主要分爲以下幾個方面：
1.談一談HTTP/1.0/1.1/2.0以及HTTPS的區別
2.什麼是無狀態服務，有狀態服務呢？
3.狀態碼 筆者面試問到了206、301、302、304，其他的自行閱讀學習
4.有了解HTTPS的SSL嗎？對稱加密和非對稱加密算法
5.TCP、UPD的區別，TCP是如何保證可靠傳輸的？
6.socket有了解嗎？在你的項目中爲何要將心跳設置爲15s

4.TCP的3次握手、4次揮手

這裏需要掌握髮送了哪些指令以及Client和Server端的狀態

---

第1題：初始化一個div標籤，它的默認寬度(width)是多少？

初始化一個div默認寬度繼承父級元素寬度，之所以不顯示div是因爲高度爲0；
如果父元素設置了浮動，子元素也浮動那麼這時候div的寬度爲0。

---

第2題：如何用純div+css實現三欄佈局，左右固定寬度，中間自動填充

利用flex彈性盒子佈局
父元素display:flex
左右子元素寬度設定固定值寬度(width)，中間子元素flex:1
如果想進一步實現多列自動響應式設置flex:1即可
本題儘可能不要採用js動態算變化的寬度，首先考慮用戶體驗問題。

---

第3題：JavaScript的函數作用域

1.全局作用域
顯示聲明：用var聲明變量

	var name = "luvsta";
    var foo = function () { console.log("this is a function") };
    /*---------全局變量會掛載到 window 對象上------------*/
    console.log(window.name)    // "luvsta"
    console.log(window.foo)		// ƒ () { console.log("this is a function") }
    
隱式聲明：不用var聲明變量

	function foo(){
		name = "luvsta";        // 直接變量名賦值
		return name;
	}
	foo();
	console.log(window.name);   // luvsta 此時name爲全局變量
	

2.函數作用域
變量在函數作用域內，外部無法直接訪問函數內部變量,但可以通過return訪問函數內部變量

	function foo(){
		var name = "luvsta";
		return name;
	}
	console.log(foo()); // luvsta

值得一提的是立即執行函數是一個單獨的作用域

	(function(){
		var name = "luvsta"
	})();

	console.log(window.name); // undefined
	

3.塊級作用域（ES6）
塊級作用域藉助let、const聲明變量，在函數執行後變量回收消失，let的優勢體現在for循環中的變量

	for(let i = 0 ; i < 5 ; i++ ){
		setTimeout(function () {
   	     console.log(i);	  // 0 1 2 3 4 		
  	  }, 200);
	}

	for(var i = 0 ; i < 5 ; i++ ){
		setTimeout(function () {
   	     console.log(i);	 // 5 5 5 5 5 	
  	  }, 200);
	}


4.詞法作用域
詞法作用域是指一個變量的可見性，當我們要聲明一個變量時，JS引擎總會從最近的一個域向外層域查找；

	var name = 'luvsta';
	function foo() {
	  console.log(name);		// "luvsta"
	}
	function bar() {
 	 var name = 'sam';
 	 foo();
	}
	bar();
在該案例中，JS查找name這個變量時候發現全局的name更近一些。

5.動態作用域
該作用域查找變量方式與詞法作用域相反，與this引用機制有關
	動態作用域是基於調用棧的，而不是代碼中的作用域嵌套；

掘金文章：談談 JavaScript 的作用域 ——作者：leiting1998

---

第4題：let、var、const的區別

let 的用法類似於 var，但是 let 只在所在的代碼塊內有效，所以我們一般使用 let 替代 var。而 const 用來聲明常量。

var：1）聲明在函數外部 2）未定義直接賦值的變量 3）所有Window對象
let：局部變量 只在所處塊級作用域有效 沒有變量提升 會出現暫時性死區 特性（在聲明前使用let變量會報錯）
const：定義常量 通常不可變 聲明的同時必須賦值 否則報錯。

掘金文章：淺談var、let和const區別——作者：馬猴燒酒

---

第5題：隱式轉換

1.String + Number => String ( "1"+1 = "2")
2.String + String => String ( "1"+"1"= "11")
3.Number + Number => Number ( 1+1= 2)
4.Boolean + String => String ( true + "1" = "true1" )
5.Boolean + Number => Number ( true + 1 = 2 )
6.Object + Object => String  ( {}+{}="[object Object][object Object]")
7.Object + Array =  String ( {} + [] = "[object Object]" ) ( [1,2]+{} = "12[obj]") ( [1,2,,]+[3]+{} = "1,2,3[obj]" )

實例：
a. 1 + null = 1;
b. 1 + undefined = NaN
c. "2" > "10" = true
d. "2" > 10 = false
e.  2 > "1t" =false
f. NaN == NaN => false
g. [] == [0] == [''] == ['0'] == false // true
h. if([] || [] == false){ return true }; 

---

第6題：瀏覽器解析url的過程

URL解析：首先判斷你輸入的是一個合法的 URL 還是一個待搜索的關鍵詞，並且根據你輸入的內容進行自動完成、字符編碼等操作。
DNS查詢：瀏覽器緩存->操作系統緩存->路由器緩存->ISP DNS緩存->根域名服務器查詢
TCP連接：按我課本中TCP/IP網絡模型來說
	1.應用層：發起http請求
		請求報頭(Headers),請求方法,目標地址、遵循協議
		請求body
	2.傳輸層：TCP報文傳輸（TCP三次握手的建立）
	3.網絡層：IP協議查詢Mac地址
	4.鏈路層：以太網協議
	在發送請求時從應用層層層包裹數據，每一層都要對數據進行封裝。
處理請求：接受 TCP 報文後，會對連接進行處理，對HTTP協議進行解析（請求方法、域名、路徑等），並且進行一些驗證。
接受響應：瀏覽器接收到來自服務器的響應資源後，會對資源進行分析。首先查看 Response header，根據不同狀態碼做不同的事（比如上面提到的重定向）
渲染頁面：不同的瀏覽器內核，渲染過程也不完全相同。

經典面試題：從 URL 輸入到頁面展現到底發生什麼？——作者：Fundebug

---

第7題：函數調用的幾種方式

1.函數的調用 this指向全局Window
2.方法調用 
3.用new關鍵字創建一個新的函數調用、構造器調用
4.call、apply直接調用 bind創建一個實例調用

---

第8題：什麼是重繪（Repaint）、重排（Reflow）

先解釋瀏覽器的運行機制：
a.構建DOM樹：渲染引擎解析HTML文檔 首先將標籤轉換爲DOM樹中的DOM節點生成內容樹（包括JS生成的標籤）
b.構建渲染樹：解析對應的CSS樣式文件信息
c.佈局渲染樹：從根節點遞歸調用 計算每一個元素的大小、位置 給出每個節點的精確位置。
d.繪製渲染樹：遍歷渲染樹

當元素的位置、大小以及其他屬性確定下來後，瀏覽器會按照這些元素的特性繪製一遍並將內容呈現在頁面上。
重繪（repaint）：當一個元素外觀的改變所觸發的瀏覽器行爲 瀏覽器會根據新特性重繪從而展示新的外觀。
重排（重構|迴流|reflow）：當DOM樹中的一部分元素因爲大小、佈局、隱藏等改變而需要重新構建就稱之爲迴流(reflow)，每個頁面至少發生迴流一次在第一次加載頁面的時候。
重繪不一定重排，重排一定重繪。
觸發重排例子：
a.頁面渲染初始化
b.添加或刪除可見的DOM元素
c.元素位置的改變，使用動畫
d.元素尺寸的改變——大小、外邊距、邊框
e.瀏覽器窗口發生變化
f.填充的內容發生改變，文本圖片改變而引起的計算
g.offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)
重繪重排的代價：耗時，導致瀏覽器卡慢
優化：瀏覽器自己的優化，瀏覽器本身會維護一個隊裏，把所有的迴流、重繪的操作放入這個隊列，當隊列中的操作數量達到了一個閾值或者一個時間間隔就進行處理。這樣把多個事件變成了一次迴流。
另一種就是減少重繪和重排也就是減少DOM操作，但可以合併多次DOM和樣式的修改並減少style的樣式的請求。
1.直接改變元素的className
2.display:none
3.不要經常訪問flush隊列，如果要訪問利用緩存
4.創建多個節點用DocumentFragment創建後一次性加入DOM樹

---

第9題：什麼是防抖（Debounce）、節流（Throttle）

防抖概念(debounce)：在事件被觸發n秒後再執行回調，如果這個時間間隔內又觸發則重新計時
例子：頻繁輸入時則不發送數據，當停止輸入後才發送

節流概念(throttle)：規定一個單位時間內，只能觸發一次函數。如果單位時間內觸發多次，則只有一次生效。
例子：不過怎麼輸入，定時候會發送。

總結：
·防抖：search搜索聯想 減少資源請求。 窗口發生resize的時候，用防抖使迴流只觸發一次。
·節流：鼠標不停點擊，單位時間內只觸發一次。監聽滾動，滾到底部是否加載更多。

---

第10題：什麼是懶加載、預加載

懶加載：懶加載是延遲加載。
案例：當訪問一個page的時候，如果有img圖片先用一張低像素低資源圖把img佔位，當圖片出現在瀏覽器的視窗內再加載真實路徑的圖片。

預加載：提前加載資源，當用戶查看時可從本地緩存直接渲染
案例：訪問門戶網站時，圖片先加載到瀏覽器中，這樣圖片就會很快的加載出來，不會出現區域空白或者看到圖片一片片渲染。

區別：一個是延遲加載或者不加載，而另一個是提前加載。

---

第11題：狀態碼的瞭解

下面附上面上歡聚時代的大三學弟的博客
【HTTP】10分鐘帶你快速瞭解HTTP中常見的狀態碼（內附大量實例）

---

第12題：JQuery鏈式調用的實現

雖然現在很多公司不用JQuery這種輕量級框架了，但有些關於js的問題還是會問，就拿鏈式調用來說（塗鴉智能電話一面）

$('#luvsta').width('100px').height('100px');

實現原理：JQuery中提示了一個方法,該方法可以將原生JS元素對象 轉換成JQ對象同時在一個對象裏this指向的是該對象本身，我們在鏈式調用的時候，這些方法都存在於對象內部，因此所有this都可以訪問這些方法且不會報錯undefined。

var Jq = {

	foo1:function(){
		// do smt1
		return this;
	},
	foo2:function(){
		// do smt2
		return this;
	}
}

---

第13題：什麼是this指針，如何改變它的指向

從例子直接開講

function foo() {
    console.log(this);  // window
}

const foo1 = () => {
    console.log(this);  // window
}

var obj = {
    name: function () {
        console.log(this);  // name:function(){}
    }
}

var obj1 = {
    name: () => {
        console.log(this);  // ()=>{}
    }
}

(function(){
	console.log(this);   // window
})();

總結： 全局環境下this指向window對象，函數作爲對象屬性時，this指向對象的實例；
嚴格模式下箭頭函數沒有this指針。

---

第14題：說說你對HTML5語義化標籤的理解

語義化的優點：

• 代碼結構更清晰，易於閱讀和開發
• 降低維護成本，在樣式加載失敗時更容易找到error
• 方便多平臺根據語義渲染頁面
• 有利於SEO（搜索引擎優化）

引入HTML5語義化新標籤

• header,footer,acticle,aside:article,nav,section,figure,hgroup,datalist,audio,video,embed;
• HTML5 標籤 mark,process,ruby,time,wbr,details
• HTML5 媒體標籤 radio,video
• HTML5 新增input type類型 email,url,rang,number,search
• HTML5 新增form元素 datalist,keygen
• HTML5 新增form屬性 autocomplete,novalidata
• HTML5 新增input屬性 multiple(可選多個值),pattern(驗證模式),placeholder(佔位符),autofocus(自動獲取焦點)

---

第15題：ES6中的Promise函數的三種狀態

• Pending - 進行中
• Fulfilled - 成功
• Rejected - 失敗

Promise對象，可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數,但Promise對象的狀態不受外界影響，Promise對象代表一個異步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗），只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態，這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。

另外在這些基礎知識外還要補充學習事件循環（EventLoop）和Promise鏈式調用等；
關於Promise拓展的題目很多，但總結下來大同小異，近期針對Promise我準備單開一篇博客分享。

---

第16題：判斷一個對象是數組最精準的方式

Object.prototype.toString.call(new Array());

---

第17題：CSS中可以繼承的屬性

1、字體系列屬性

font：組合字體

font-family：規定元素的字體系列

font-weight：設置字體的粗細

font-size：設置字體的尺寸

font-style：定義字體的風格

font-variant：設置小型大寫字母的字體顯示文本，這意味着所有的小寫字母均會被轉換爲大寫，但是所有使用小型大寫字體的字母與其餘文本相比，其字體尺寸更小。

font-stretch：對當前的 font-family 進行伸縮變形。所有主流瀏覽器都不支持。

font-size-adjust：爲某個元素規定一個 aspect 值，這樣就可以保持首選字體的 x-height。

2、文本系列屬性

text-indent：文本縮進

text-align：文本水平對齊

line-height：行高

word-spacing：增加或減少單詞間的空白（即字間隔）

letter-spacing：增加或減少字符間的空白（字符間距）

text-transform：控制文本大小寫

direction：規定文本的書寫方向

color：文本顏色

3、元素可見性：visibility

4、表格佈局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表佈局屬性：list-style-type、list-style-image、list-style-position、list-style

6、生成內容屬性：quotes

7、光標屬性：cursor

8、頁面樣式屬性：page、page-break-inside、windows、orphans

9、聲音樣式屬性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

---

第18題：瀏覽器緩存有了解嗎？說說他們的區別

1. Cookie

Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制爲4KB左右。它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數據來實現的。

2. LocalStorage

localStorage 是 HTML5 標準中新加入的技術，它並不是什麼劃時代的新東西。早在 IE 6 時代，就有一個叫 userData 的東西用於本地存儲，而當時考慮到瀏覽器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多數瀏覽器所支持，如果你的網站需要支持 IE6+，那以 userData 作爲你的 polyfill 的方案是種不錯的選擇。

3. SessionStorage

sessionStorage與localStorage的接口類似，但保存數據的生命週期與localStorage不同，做過後端的同學都知道Session這個詞，翻譯過來就是會話。而sessionStorage是前端的一個概念。它只是可以將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但是葉敏啊關閉後，sessionStorage中的數據就會被清空。

三者的異同
數據上的生命週期的不同
Cookie 一般由服務器生成，可設置失效時間，如果在瀏覽器端生成cookie，默認是關閉後失效。

localStorage 除非被永久清除，否則永久保存。

sessionStorage 僅在當前會話會有效，關閉頁面或瀏覽器後被清除

存放數據的大小不同
Cookie 一般爲4kb

localStorage 和 sessionStorage 一般爲5mb

與服務器端通信不同
Cookie 每次都會攜帶HTTP頭中，如果使用cookie保存過多數據會帶來性能問題

localStorage 和 sessionStorage 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。

易用性
Cookie 需要程序員自己來封裝，原生的cookie接口不夠友好

localStorage 和 sessionStorage 原生接口可以接受，可以封裝來對Object和Array有更好的支持。

---

第19題：DOM事件流的三個階段（事件委託）

1. 事件捕獲階段
2. 處於目標階段
3. 事件冒泡階段

---

第20題：JS繼承的幾種方式

有八種繼承方式
1.原型鏈繼承
2.構造函數繼承
3.原型式繼承
4.組合繼承
5.寄生繼承
6.寄生組合繼承
7.混入方式繼承多個對象
8.ES6類Class繼承extens

掘金文章：JavaScript常用八種繼承方案 —— 作者：木易陽說

---

第21題：CSS選擇器的權重

1. ID選擇器 +100
2. class類選擇器 +10
3. 元素、僞元素選擇器 +1
4. 其他選擇器 +0

相同權重 以後寫的爲準

---

第22題：JS基本數據類型

口訣：NNUSB

1. Null
2. Number
3. undefined
4. String
5. Boolean
6. Symbol （ES6）

---

第23題：BFC有了解嗎？

BFC概念
Formatting context(格式化上下文)是W3C CSS2.1規範中的一個概念，它是頁面中的一塊渲染區域，並有一套渲染規則，它決定了其子元素如何定位，以及和其他元素的關係和相互作用。
BFC是Black Formatting Contexts(塊級格式化上下文) 屬於定位方案的普通流
具有BFC特性的元素可以看做是隔離了的獨立容器，容器裏的元素不會在佈局上影響到外面的元素，並且BFC具有普通容器所沒有的一些特性。
如何處罰BFC：只要元素滿足下面任何一種條件即可觸發BFC特性：
a.body根元素
b.浮動元素：float除none以外的值
c.絕對定位元素：position (absolute、fixed)
d.display 爲inline-block、table-cells、flex
e.overflow除了visible以外的值(hidden、auto、scroll)

BFC可以包含浮動元素(清除浮動)，容器內元素浮動導致元素高度塌陷後，如果觸發容器的BFC則容器會包裹浮動元素
BFC可以組織元素被浮動覆蓋，兩個平級塊級元素，第一個元素浮動了給第二元素設置overflow:hidden 可以解決元素覆蓋問題

---

第24題：null和undefined的區別？

null 表示一個對象是“沒有值”的值，也就是值爲“空”；
undefined 表示一個變量聲明瞭沒有初始化(賦值)；

undefined不是一個有效的JSON，而null是；
undefined的類型(typeof)是undefined；
null的類型(typeof)是object；

再來一個例子：

null
Q：有張三這個人麼？
A：有！
Q：張三有房子麼？
A：沒有！

undefined
Q：有張三這個人麼？
A：有！
Q: 張三有多少歲？
A: 不知道（沒有被告訴）

---

第25題：哪些操作會造成內存泄漏？

1. 意外的全局變量引起的內存泄露

function getName(){
  name = "luvsta"; // name成爲一個全局變量，不會被回收
}

2. 閉包引起的內存泄露

for(var i = 0 ; i < arr.len ; i++){
	// 此時的i污染了全局變量i
}

3. 沒有清理的DOM元素引用
4. 被遺忘的定時器或者回調

var someResouce = getData();
setInterval(function(){
   var node=document.getElementById('Node');
   if(node){
       node.innerHTML=JSON.stringify(someResouce)
   }
},1000);

這樣的代碼很常見, 如果 id 爲 Node 的元素從 DOM 中移除, 該定時器仍會存在, 同時, 因爲回調函數中包含對 someResource 的引用, 定時器外面的 someResource 也不會被釋放。

5. 子元素存在引起的內存泄露

---

第26題：Ajax->XHR對象以及異步請求

Ajax的全稱：Asynchronous Javascript And XML。
異步傳輸+js+xml。

所謂異步，在這裏簡單地解釋就是：向服務器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行後續操作，與此同時，頁面是不會發生整頁刷新的，提高了用戶體驗。

1. 創建XMLHttpRequest對象,也就是創建一個異步調用對象
2. 創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
3. 設置響應HTTP請求狀態變化的函數
4. 發送HTTP請求
5. 獲取異步調用返回的數據

在實際項目中，更多的運用的是基於JQuery封裝的ajax請求或者是基於Promise語法封裝的fetch請求

基於JQuery的ajax請求

//請求參數
var list = {};
//
$.ajax({
    //請求方式
    type: "POST",
    //請求的媒體類型
    contentType: "application/json;charset=UTF-8",
    //請求地址 對應後臺接口
    url: "http://127.0.0.1/admin/list/",
    //數據，json字符串
    data: JSON.stringify(list),
    //請求成功的回調
    success: function (result) {
        console.log(result);
    },
    //請求失敗的回調，包含具體的錯誤信息
    error: function (e) {
        console.log(e.status);
        console.log(e.responseText);
    }
});

基於Promise語法的fetch請求

export const ip = 'http://127.0.0.1:8081';

export default function request(method, url, body, history) {

    method = method.toUpperCase();

    if (method === 'GET') {
        //fetch的GET不允許有body，參數只能放在url中
        body = undefined;
    } else {
        body = body && JSON.stringify(body);
    }

    return fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: body
    }).then((res) => {
        if (res.status === 401) {
            history.push('/');
            return Promise.reject('Unauthorized.');
        } else {
            return res.json();
        }        
    });
}

export const get = url => request('GET', url);

export const post = (url, body) => request('POST', url, body);

---

第27題：HTTP2.0的瞭解

---

第28題：Cookie可設置的屬性

1. Name ：cookie的key
2. Value ：cookie的value
3. Domain ：可以訪問此cookie的域名
4. Path ：可以訪問此cookie的頁面路徑
5. Expires / Max-Age ：cookie超時時間
6. Size ：cookie的大小
7. HttpOnly ： true的話則HTTP請求頭中會帶有此cookie信息 而且不能通過document.cookie來訪問
8. Secure ：是否只能通過https來傳遞此cookie
9. SameSite ：用來防止CSRF攻擊和用戶追蹤

---

第29題：DOM渲染的機制

1. 構建DOM樹
2. 構建渲染樹
3. 佈局渲染樹
4. 繪製渲染書

---

第30題：深、淺拷貝

淺拷貝： 只拷貝對象的引用（指針），值還是指向原對象的內存

eg：

var foo = {
	a : 1,
	b : 2
}

var foo1 = foo; // 發生淺拷貝

foo1.a = 2; 

console.log(foo.a);   //  ...2 

深拷貝： 會拷貝創建一個一模一樣的對象，與原對象不共享內存

function deepClone(initalObj, finalObj) {
    var obj = finalObj || {};
    for (var i in initalObj) {
        var prop = initalObj[i];

        // 避免相互引用對象導致死循環，如initalObj.a = initalObj的情況
        if (prop === obj) {
            continue;
        }

        if (typeof prop === 'object') {
            obj[i] = (prop.constructor === Array) ? [] : {};
            arguments.callee(prop, obj[i]);
        } else {
            obj[i] = prop;
        }
    }
    return obj;
}

---

第31題：變量交換值的四種方式（不採用中間變量）

如何讓 a=2 ，b=4的值交換

算術運算

a = a + b;
b = a - b;
a = a - b;

異或運算

a = a ^ b;
b = a ^ b;
a = a ^ b;

ES6解構

[a,b] = [b,a];

數組特性

a = [a,b];
b = a[0];
a = a[1];

---

第32題：遇到的跨域問題以及如何解決

---

第33題：Promise函數真題，考宏、微任務以及async

---

第34題：數組去重（不用ES6語法）

---

第35題：Symbol(‘1’) === Symbol(‘1’) ?

答： 不相等

---

第36題：對象的defineProperty

如何給一個對象定義屬性和賦值

1. obj.a = '';
2. obj['a'] = '';
3. Object.defineProperty();語法定義

Object.defineProperty(); 使用說明

Object.defineProperty() [ obj , prop , desc ];

1. obj 爲被定義或修改的對象
2. prop 爲被定義或修改的屬性key
3. desc 參數如下
   a. value; // 對應key的value，默認爲undefined
   b.configurable; // 是否配置，以及能否刪除，默認爲false
   c.writable; // 是否可更改，默認爲false
   d.enumerable; // 是否爲枚舉類型，默認爲false
   f.get; // 默認爲undefined
   g.set; // 默認爲undefined

let proto = Object.defineProperties({}, {
    foo: {
        value: 'bar',
        writable: false,
        configurable: true,
        enumerable:false,
        get:function(){},
        set:function(){}
    }
})

console.log(proto);

---

第37題：SVG和Canvas的區別和性能問題

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以爲某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪製的圖形均被視爲對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

---

Canvas

Canvas 通過 JavaScript 來繪製 2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。

區別

SVG

• 不依賴分辨率
• 支持事件處理器
• 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
• 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
• 不適合遊戲應用

Canvas

• 依賴分辨率
• 不支持事件處理器
• 弱的文本渲染能力
• 能夠以 .png 或 .jpg 格式保存結果圖像
• 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

---

第38題：apply(),call(),bind()區別

bind()
ECMAScript還定義了一個叫bind()的方法。這個方法會創建一個函數的實例，其this值會被綁定給傳入bind()函數的值。

var name = "name:";
var person = {name: "luvsta"};
function sayHi () {
console.log(this.name + ': hi')
}
var ISay = sayHi.bind(person);
ISay(); // luvsta:hi

---

第39題：說一說對Web Component的理解

---

第40題：服務端如何主動向客戶端推送消息

---

第41題：EventBus事件總線

---

第42題：數組去重、扁平化

見《Part 3：基礎編程題》

---

第43題：TCP、UDP的區別

---

第44題：TCP如何保證穩定傳輸

---

第45題：說一下JQuery中的deferred對象

---

第46題：對SEO的瞭解

---

第47題：Sass和Less的區別？

---

第48題：雪碧圖（精靈圖）和base64的區別

---

第49題：[ vue ] 中 name屬性的作用

開始一個全新的項目，每天都要元氣滿滿呀~在劃分模塊和創建單頁面組件時，常常寫到name。嵌套路由中，index.vue極爲常見，那麼在vue中，export default { name: ‘xxx’} 中的name到底有啥作用呢？

• 組件自身的遞歸調用，就是在當前組件中，調用組件自己 （React類似）
• 當我們使用vue.js官方提供的調試工具調試時，可以看到組件的名稱，更好地定位（React類似）
• 就是當我們使用 keep-alive時可以使用include和exclude指定需要緩存和不需要緩存的組件。指定的依據就是組件的name

以上就是vue.js中組件export default 中name的三種作用。調試和keep-alive是我們開發中常用的功能，關於組件的遞歸調用，還是第一次實踐，遞歸時，大家一定要注意遞歸的條件，否則會進入死循環。

---

第50題：請簡述skiplist （LevelDB、Redis底層）

---

第51題：爲什麼要使用事件委託

事件委託

事件委託就是利用事件冒泡機制指定一個事件處理程序，來管理某一類型的所有事件。
即：利用冒泡的原理，把事件加到父級上，觸發執行效果。

好處：

1. 只在內存中開闢了一塊空間，節省資源同時減少了dom操作，提高性能
2. 對於新添加的元素也會有之前的事件