前端知識點聚集整理（上）

前端面試基礎總結

一、跨域解決辦法:

一、 經過jsonp跨域
二、 document.domain + iframe跨域
三、 location.hash + iframe
四、 window.name + iframe跨域
五、 postMessage跨域
六、 跨域資源共享（CORS）
七、 nginx代理跨域
八、 nodejs中間件代理跨域
九、 WebSocket協議跨域

二、同源策略下有幾個標籤不受限制:

<img src="" alt="" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src=""></script>

三、JS代碼壓縮原理:

基於Base62 encode壓縮方式
	簡單來講就是將相同的單詞進行壓縮，具體爲將全部單詞抽取出來做爲一個詞典，
	而後將源代碼中表示單詞的地方改成引用詞典的下標

四、Object.create()

建立一個新對象，使用現有的對象來提供新建立的對象的__proto__。
Object.create(null)在該對象上沒有繼承 Object.prototype 原型鏈上的屬性或者方法
	如：toString(), hasOwnProperty()等方法
    正確的寫法：Object.create(Object.prototype);

五、canvas繪圖環境

經過調試canvas對象的getContext()方法。

六、進制轉換:

Number.toString(radix)

這個函數只能將十進制數字轉換爲任意進制的字符串形式，一樣，radix表示進制，取值2~36。
		(10).toString(2)//"1010"轉2進制
		(1000).toString(36)//"rs" 轉36進制

Number.parseInt(string , radix)

這個是把字符串(只能由字母和數字組成)，這個只能是由低進制轉高進制，
		Number.parseInt('010',8)//8
		Number.parseInt('20',2)//NaN

七、koa2洋蔥模型:

回調函數的嵌套
compose函數中將`context`一路傳下去給中間件
將`middleware`中的下一個中間件`fn`做爲將來`next`的返回值
咱們在使用use的時候將middleware存在一個數組裏面，當攔截到請求時執行callback方法，callback中調用了compose，
compose方法使用遞歸執行中間件，遍歷完成返回promise.resolve()，實際最後執行的代碼也是promise嵌套的形式。

八、Array.of和new Array:

一、Array.of(3)輸出[3];new Array(3)輸出[undefined,undefined,undefined,]

九、DNS在進行域名解析時

DNS在進行域名解析時使用UDP，可是在域名服務器之間傳輸時使用的是TCP

十、CSS權重:

！important>行內樣式>id選擇器>類選擇器>標籤選擇器>通配符>繼承，color可繼承則爲最高

十一、:before和:after的使用方法:

在類選擇器後面用：before和：after鏈接，表示輸出在標籤先後的行內樣式，
若是加上display:block輸出在標籤上下的塊級樣式,也可用於清楚浮動

十二、閉包的定義:

一、函數內部的變量爲私有變量，外部不能訪問，可是函數內部的函數能夠訪問，
	   閉包就是在函數內返回一個函數，使得在全局下能夠經過函數內返回的函數訪問到函數的變量
    二、函數執行造成不能被釋放的私有棧內存

閉包的使用場景：

一、使用場景一:給對象設置私有變量而且利用特權方法去訪問私有屬性
	    二、封裝相關功能集
    優缺點:
        1.保護函數內的變量安全,增強了封裝性
        2.在內存中維持一個變量(用的太多就變成了缺點，佔內存)
    緣由:
        1.在閉包的做用域鏈中引用了html元素未釋放內存
        2.出現了循環引用

1三、文件傳輸

一、FormData(二進制文件信息 提交爲文件格式)

文件名須要經過md5加密+時間戳+hash進行處理，產生惟一的文件名，使用FormData()

二、base64編碼(流信息 提交爲表單格式)

let file='表單id'.files[0]
		let file_=new FileReader()
		file_.readAsDataURL(file)   獲取文件base64編碼
		   //file_.readAsDataBuffer(file)也能夠轉換成ArryBuffer格式
		file_.onload=e=>{
			console.log(e.target.result)//拿到編碼
		}

大文件上傳

一、blob切片(blob.prototype.slice)

同時發送請求(利用http能夠多個併發傳遞6~7)
    都上傳以後向服務器發送合併請求(兩次請求)
傳輸接片文件的時候爲提交爲文件格式,傳輸合併請求時爲表單格式

前端靜態文本下載

純文本：  down_.href = window.URL.createObjectURL(new Blob(["Hello World"]));
	對象  ：	 var obj_blob = new Blob([JSON.stringify([1, 2, 3], null, 2)])
		     URL.createObjectURL(obj_blob)

1四、null 與 undefined:

JavaScript 中，null 是一個能夠被分配的值，設置爲 null 的變量意味着其無值。
而 undefined 則表明着某個變量雖然聲明瞭可是還沒有進行過任何賦值。

1五、Loader和Plugin的不一樣？

不一樣的做用

一、Loader直譯爲"加載器"。Webpack將一切文件視爲模塊，可是webpack原生是隻能解析js文件，
		   若是想將其餘文件也打包的話，就會用到loader。 因此Loader的做用是讓webpack
		   擁有了加載和解析非JavaScript文件的能力。
  二、Plugin直譯爲"插件"。Plugin能夠擴展webpack的功能，讓webpack具備更多的靈活性。 
	       在 Webpack 運行的生命週期中會廣播出許多事件，Plugin 能夠監聽這些事件，
		   在合適的時機經過 Webpack 提供的 API 改變輸出結果。

不一樣的用法

一、Loader在module.rules中配置，也就是說他做爲模塊的解析規則而存在。 類型爲數組，每一項都是一個Object，
	   裏面描述了對於什麼類型的文件（test），使用什麼加載(loader)和使用的參數（options）
  二、Plugin在plugins中單獨配置。 類型爲數組，每一項是一個plugin的實例，參數都經過構造函數傳入。

1六、對象類型:

普通對象-Object 數組對象-Array 正則對象-RegExp 日期對象-Date 數學函數-Math 函數對象-Function

1七、事件冒泡(Event Bubbling) :

Event Bubbling 即指某個事件不只會觸發當前元素，還會以嵌套順序傳遞到父元素中。
直觀而言就是對於某個子元素的點擊事件一樣會被父元素的點擊事件處理器捕獲。

1八、事件流被分爲3個階段:

捕獲階段，目標階段，冒泡階段

1九、若是存在多個事件:

document.onclick=function(){}後註冊的事件會覆蓋先註冊的事件，
使用addEventListener(type,listener,useCapture)則不會，
useCapture:默認爲false,事件冒泡從下往上逐級打印，true時相反

20、V8 中執行一段JS代碼的整個過程：

一、生成了 AST (類對象類型)
二、將 AST 經過 V8 的解釋器(也叫Ignition)轉換爲字節碼
三、在執行字節碼的過程當中，若是發現某一部分代碼重複出現，那麼 V8 將它記作熱點代碼(HotSpot)，
   而後將這麼代碼編譯成機器碼保存起來，這個用來編譯的工具就是V8的編譯器，代碼執行的時間越久，那麼執行效率會愈來愈高
//經過解釋器逐行解釋代碼，省去了一次性將所有的字節碼都轉換成機器碼大大下降了內存的壓力

2一、async函數

不管async函數有無await操做， 其老是返回一個Promise。

1. 若是async函數中是return一個值， 這個值就是Promise對象中resolve的值；
2. 若是async函數中是throw一個值， 這個值就是Promise對象中reject的值

2二、window.location

window.location.search（獲取當頁面參數"?ww=xx&ww=xx"）
	window.location.href（獲取當前頁面地址）

2三、require.context():

若是遇到從一個文件夾引入不少模塊的狀況,可使用require.context(),
	它會遍歷文件夾中的指定文件,而後自動導入,使得不須要每次顯式的調用import導入模塊
	require.context():
		可使用 require.context() 方法來建立本身的（模塊）上下文。
			這個方法有 3 個參數：
				要搜索的文件夾目錄
				是否還應該搜索它的子目錄
				以及一個匹配文件的正則表達式。
				
	require.context("./test", false, /\.test\.js$/);
	//（建立了）一個包含了 test 文件夾（不包含子目錄）下面的、全部文件名以 `.test.js` 結尾的、
	// 能被 require 請求到的文件的上下文。
	
	require.context模塊導出（返回）一個（require）函數
		導出的方法有 3 個屬性： resolve, keys, id。
		resolve 接受一個參數request,request爲test文件夾下面匹配文件的相對路徑
		keys 返回匹配成功模塊的名字組成的數組
		id 是上下文模塊裏面所包含的模塊 id

2四、事件循環:

（1）全部同步任務都在主線程上執行，造成一個執行棧（execution context stack）。
（2）主線程以外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。
（3）一旦"執行棧"中的全部同步任務執行完畢，系統就會讀取"任務隊列"，看看裏面有哪些事件。
	那些對應的異步任務，因而結束等待狀態，進入執行棧，開始執行。
（4）主線程不斷重複上面的第三步。

2五、Class 和構造函數的區別:

1. 不存在變量提高 
2. 方法默認是不可枚舉的 
3. class 必須使用 new 調用  
4. ES6能夠繼承靜態方法，而構造函數不能

2六、MVVM模式:

一、M就是Model模型層，存的一個數據對象。
二、V就是View視圖層，全部的html節點在這一層。
三、VM就是ViewModel，它經過data屬性鏈接Model模型層，經過el屬性鏈接View視圖層。

2七、垃圾回收機制：

棧內存:
 按照執行順序，也就是上下文切換以後，棧頂的空間會自動被回收
v8引擎的堆垃圾回收機制:
	新生代內存:64 位和 32 位系統下分別爲 32MB 和 16MB
 	新生代中的變量若是通過屢次回收後依然存在，那麼就會被放入到老生代內存中
	新生代的對象主要經過 Scavenge算法 進行垃圾回收。
	老生代的對象主要經過進行標記-清除進行垃圾回收：
		首先會遍歷堆中的全部對象， 對它們作上標記，而後對於代碼環境中使用的變量以及被強引用的變量取消標記，
		剩下的就是要刪除的變量了，在隨後的清除階段對其進行空間的回收。
引起內存碎片的問題?
	存活對象的空間不連續對後續的空間分配形成障礙,V8在清除階段結束後，把存活的對象所有往一端靠攏。(最耗時間)		   
	爲了下降全堆垃圾回收帶來的停頓時間，回收方式爲增量標記（incremental marking）。

2八、position:sticky:

position:relative 和 position:fixed 兩種定位功能於一體的特殊定位，且position:sticky元素的任意父節點的 
overflow 屬性必須是 visible

2九、CORS原理

CORS原理只須要向響應頭header中注入Access-Control-Allow-Origin，這樣瀏覽器檢測到header中的
Access-Control-Allow-Origin，則就能夠跨域操做了,CORS須要瀏覽器和服務器同時支持。IE瀏覽器不能低於IE10。
簡單請求
 HEAD GET POST HTTP頭部信息不超出幾個字段
   Content-Type字段類型是application/x-www-form-urlencoded、multipart/form-data、text/plain
非簡單請求
   請求方法是PUT或DELETE，Content-Type字段類型是application/json

30、四種類型的常見 JavaScript 內存泄露:

1：意外的全局變量 
2：被遺忘的計時器或回調函數 
3：脫離 DOM 的引用 
4：閉包

3一、數組的數據存儲*:

初始化空數組時，使用快數組，快數組使用連續的內存空間，當數組長度達到最大時，JSArray 會進行動態的擴容，
以存儲更多的元素，相對慢數組，性能要好得多。當數組中 hole 太多時，會轉變成慢數組，即以哈希表的方式
（ key-value 的形式）存儲數據，以節省內存空間。

兩種存儲方式

fast：是 V8 實現的一個相似於數組的類，它表示一段連續的內存，可使用索引直接定位。
	   新建立的空數組默認就是快數組。當數組滿（數組的長度達到數組在內存中申請的內存容量最大值）的時候，
	   繼續 push 時， JSArray 會進行動態的擴容，以存儲更多的元素。
 slow：以哈希表的形式存儲在內存空間裏，它不須要開闢連續的存儲空間，
	   但須要額外維護一個哈希表，與快數組相比，性能相對較差。

存儲方式轉換

fast 轉變爲 slow

一、當加入的索引值 index 比當前容量 capacity 差值大於等於 1024 時
二、快數組新容量是擴容後的容量 3 倍之多時
	例：var arr = [1, 2, 3]
		arr[2000] = 10;
		當往 arr 增長一個 2000 的索引時，arr 被轉成慢數組。節省了大量的內存空間

slow 轉變爲 fast

當慢數組的元素可存放在快數組中且長度在 smi 之間且僅節省了50%的空間，則會轉變爲快數組

數組進行push操做時

申請新的長度內存空間
將數組拷貝到新的數組中
把新數組放到當前length位置
數組的length+1
返回 length

3二、對象進行比較:

經過JSON.stringify()轉爲字符串，在進行比較，或者遞歸，或者Deep Equal模組方法

3三、前端登陸方案：

session: 一、客戶端訪問login接口，服務器收到後校驗信息，正確後會在服務器端存儲一個sessionId和session的映射關係
	     二、服務器端返回response，而且將sessionId以set-cookie的方式發送到客戶端，這樣sessionId就存在了客戶端。
	     三、客戶端發送非登陸請求時，服務端就能經過cookie中的sessionId找到對應的session來知道此次請求是誰發的
token: 一、客戶端訪問login接口，服務器收到後校驗信息，正確後返回一個包含用戶信息的token
	   二、客戶端拿到token後，每次請求將token加入http請求的header中
單點登陸（SingleSign-On，SSO）：在多個應用系統中，只須要登陸一次，就能夠訪問其餘相互信任的應用系統。

3四、前端性能監控

performance
memory字段表明JavaScript對內存的佔用。
navigation字段統計的是一些網頁導航相關的數據：
	redirectCount:重定向的數量（只讀），可是這個接口有同源策略限制，即僅能檢測同源的重定向；
	type 返回值應該是0,1,2 中的一個。分別對應三個枚舉值:
		0 : TYPE_NAVIGATE (用戶經過常規導航方式訪問頁面，好比點一個連接，或者通常的get方式)
		1 : TYPE_RELOAD (用戶經過刷新，包括JS調用刷新接口等方式訪問頁面)
		2 : TYPE_BACK_FORWARD (用戶經過後退按鈕訪問本頁面)
最重要的是timing字段的統計數據，它包含了網絡、解析等一系列的時間數據。
	var time = performance.timing
	performance.getEntries()
	'重定向時間:' + (time.redirectEnd - time.redirectStart) / 1000
	'DNS解析時間:' + (time.domainLookupEnd - time.domainLookupStart) / 1000
	'TCP完成握手時間:' + (time.connectEnd - time.connectStart) / 1000
	'HTTP請求響應完成時間:' + (time.responseEnd - time.requestStart) / 1000
	'onload事件時間:' + (time.loadEventEnd - time.loadEventStart) / 1000

3五、塊級元素:

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

（1）老是重新行開始
（2）高度，行高、外邊距以及內邊距均可以控制。
（3）寬度默認是容器的100%
（4）能夠容納內聯元素和其餘塊元素。

3六、行內元素:

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin能夠設置，垂直方向的無效。
（3）默認寬度就是它自己內容的寬度。
（4）行內元素只能容納文本或則其餘行內元素。（a特殊 a裏面能夠放塊級元素 ）

3七、行內元素:

<img />、<input />、<td>

（1）和相鄰行內元素（行內塊）在一行上,可是之間會有空白縫隙。
（2）默認寬度就是它自己內容的寬度。
（3）高度，行高、外邊距以及內邊距均可以控制。

3八、重繪(repaint):

當元素樣式的改變不影響佈局時，瀏覽器將使用重繪對元素進行更新，此時因爲只須要UI層面的從新像素繪製，所以 損耗較少

3九、迴流(reflow):

當元素的尺寸、結構或觸發某些屬性時，瀏覽器會從新渲染頁面，稱爲迴流。
 此時，瀏覽器須要從新通過計算，計算後還須要從新頁面佈局，所以是較重的操做。會觸發迴流的操做

40、JSON.parse():

JSON.parse(JSON.stringify(c,['title']))，JSON.stringify只選取數組內的進行格式化

4一、cdn

cdn 也叫內容分發網絡，cdn就是經過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，下降網絡擁塞，
	使得提升用戶訪問響應速度和命中率。

4二、js中i++與++i的區別：

使用i++時，i先將自身的值賦值給變量a，而後再自增1
使用++i時，i先將自身的值自增1,再將自增後的值賦值給變量a

4三、怪異盒子模型：

一、元素的寬度和高度指的是元素內容的寬度和高度，而在怪異的盒子模型中寬度和高度還包含了 padding 和 border。
二、行內元素在怪異盒子模型中設置高度會生效

4四、監聽頁面位置

event.clientX,event.clientY表示點擊事件發生時候的位置
x軸：pageXOffset
y軸：pageYOffset

懶加載：

第一種

獲取屏幕可視窗口高度：document.documentElement.clientHeight
獲取觀測元素相對於文檔頂部的距離：element.offsetTop
獲取可視窗口距離文檔頂部的距離即滾動條的距離：document.documentElement.scrollTop
offsetTop - scrollTop - clientHeight <= 0(該元素出現)

第二種

Element.getBoundingClientRect()方法
方法返回的一組矩形的集合，就是該元素的 CSS 邊框大小，位置
function isInSight(el){
const bound = el.getBoundingClientRect();
const clientHeight = window.innerHeight;
return bound.top <= clientHeight + 100;
}

4五、promise

promise是js中的一個對象，用於生成可能在未來產生結果的值且返回一個promise對象

promise 能夠有三種狀態，一旦肯定就不能返回:
    pending：初始狀態，既不是成功也不是失敗
    fulfilled：意味着操做徹底成功
    rejected：意味着操做失敗

catch和reject

Promise.then的第二個參數捕捉不了‘異常捕獲’和‘冒泡錯誤’，只能由catch語句進行捕獲，
而且reject是用來拋出異常的，catch是用來處理異常的；

4六、javascript會阻塞dom的解析

當解析過程當中遇到<script>標籤的時候，便會中止解析過程，轉而去處理腳本

<script defer>瀏覽器會異步的下載該文件而且不會影響到後續DOM的渲染；
<script async>並不會按着script在頁面中的順序來執行，而是誰先加載完誰執行。

4七、宏任務和微任務

宏任務中若是有微任務則繼續執行，若是依然爲宏任務則跳出執行
微任務中若是有宏任務則跳出執行，若是依然爲微任務則繼續執行

		Promise.resolve().then(() => {
			console.log('promise1');
			const timer2 = setTimeout(() => {
				console.log('timer2')
			}, 0)
		});
		const timer1 = setTimeout(() => {
			console.log('timer1')
			Promise.resolve().then(() => {
				console.log('promise2')
			})
		}, 0)
		
		console.log('start');
		'start'
		'promise1'
		'timer1'
		'promise2'
		'timer2

4八、閉包做用域

閉包中return function(){}實際上是返回給全局了，this的做用域已是window了
閉包中的this指向調用函數環境的上一級

var num = 1
var obj = {
	num: 2,
	getone: function() {
		var num = 3
		window.num = 4
		return function() {
			return this.num
		}
	}
}
obj.getone()() //4

var name = "window做用域";
var object = {
	name: "對象做用域",
	getNameFunc: function() {
		return function() {
			return this.name;
		};
	}
};
object.getNameFunc()(); //"window做用域"

4九、css特效：

rotateY：定義沿 Y 軸的 3D 旋轉，可實現翻書的效果
translateY：沿着 Y 軸移動元素
perspective(n)：改變3D元素是怎樣查看透視圖（注：隻影響 3D 轉換元素）
scaleY：定義 2D 縮放轉換時，改變元素的高度；定義 3D 縮放轉換時，經過給定一個 Y 軸的值

50、jquery鏈式調用原理：

jq的方法都是掛在原型的，那麼若是咱們每次在內部方法返回this，也就是返回實例對象，
那麼咱們就能夠繼續調用原型上的方法了，這樣的就節省代碼量，提升代碼的效率，代碼看起來更優雅

5一、jwt：

優勢：
    1. 可擴展性好 session是保存在服務端的，而jwt是保存在客戶端的
    2. 無狀態 jwt不在服務端存儲任何狀態
缺點：
    1. 安全性 jwt的payload是使用base64編碼的，並無加密
    2. 性能 因爲是無狀態使用JWT，全部的數據都被放到JWT裏致使jwt太長。
    3. 一次性 jwt是一次性的。想修改裏面的內容，就必須簽發一個新的jwt。

5二、TCP 和 UDP 的區別:

TCP是一個面向鏈接的、可靠的、基於字節流的傳輸層協議。

UDP是一個面向無鏈接的傳輸層協議,基於報文。

簡述三次握手
	一、從最開始雙方都處於CLOSED狀態。而後服務端開始監聽某個端口，進入了LISTEN狀態	
	二、而後客戶端主動發起鏈接，發送 SYN , 本身變成了SYN-SENT狀態
	三、服務端接收到，返回SYN和ACK(對應客戶端發來的SYN)，本身變成了SYN-REVD。
	四、以後客戶端再發送ACK給服務端，本身變成了ESTABLISHED狀態；服務端收到ACK以後，也變成了ESTABLISHED狀態。
	五、另外須要提醒你注意的是，從圖中能夠看出，SYN 是須要消耗一個序列號的，
	下次發送對應的 ACK 序列號要加1，爲何呢？只須要記住一個規則:
		凡是須要對端確認的，必定消耗TCP報文的序列號。

5三、關於meta標籤的幾個常見做用

一、向搜索引擎說明你的網頁的關鍵詞
二、告訴搜索引擎你的站點的主要內容
三、告訴搜索引擎你的站點的製做的做者
四、禁用緩存

5四、垂直居中:

一、 利用 line-height實現居中，這種方法適合純文字類
二、 經過設置父容器 相對定位，子級設置 絕對定位，標籤經過margin實現自適應居中
三、 父級設置相對定位，子級設置絕對定位，而且經過位移 transform實現
	 絕對定位和margin-left: -width/2, 前提是父元素position: relative
三、 flex佈局使用justify-content:center

5五、函數克里化

用閉包把參數保存起來，當參數的數量足夠執行函數了，就開始執行函數

const curry = fn =>
		// 返回一個新函數，接收參數爲 ...args
			judge = (...args) =>  
		//新函數接收的參數長度是否等於 fn 參數須要接收的長度	  
			args.length === fn.length ?  
		// 知足要求，執行 fn 函數，傳入新函數的參數
			fn(...args) :
		// 不知足要求，遞歸 currying 函數
		// 新的 fn 爲 bind 返回的新函數，新的 length 爲 fn 剩餘參數的長度
			(...arg) => judge(...args, ...arg)

		var fn = curry(function(a, b, c) {
			return a + b + c;
		});
		
		console.log(fn(1, 2, 3)) // ["a", "b", "c"]
		console.log(fn(1, 2)(3)) // ["a", "b", "c"]
		console.log(fn(1)(2)(3)) // ["a", "b", "c"]

5六、對象中的valueOf

如何讓 if(a == 1 && a == 2 &&a == 3) 條件成立？

var a = {
    value: 0,
    valueOf: function() {
        this.value++;
        return this.value;
      }
    };
	
    返回自身，至關於自身自增

5七、用省略號表明多餘的字符:

.box{
        display: inline-block;
        white-space: nowrap;
        width: 50%;
        overflow: hidden;
        text-overflow:ellipsis;
    }

5八、淺拷貝

只是拷貝了基本類型的數據，而引用類型數據，複製後也是會發生引用，咱們把這種拷貝叫作「（淺複製）淺拷貝」，
換句話說，淺複製僅僅是指向被複制的內存地址，若是原地址中對象被改變了，那麼淺複製出來的對象也會相應改變。

數組經常使用的淺拷貝方法有:

slice、
Array.from()、
var arr2 = arr.map(item=> item)、
以及es6的解構、
var arr2 = [...arr]

對象經常使用的淺拷貝方法:

Object.assign(),es6解構

5九、深拷貝：

在計算機中開闢了一塊新的內存地址用於存放複製的對象。

深拷貝方法：JSON.parse(JSON.stringify()) 面臨問題：

對象的屬性值是函數時，沒法拷貝。
    原型鏈上的屬性沒法拷貝
    不能正確的處理 Date 類型的數據
    不能處理 RegExp
    會忽略 symbol
    會忽略 undefined

60、commonJS AMD CMD

commonJS(經過node的fs的功能，內部添加一個匿名函數並返回)
	commonJS運行於服務器端，node.js的模塊系統，就是參照CommonJS規範實現的，每一個模塊都是一個單獨的做用域。
	模塊只有一個出口，module.exports對象，咱們須要把模塊但願輸出的內容放入該對象。
	
AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊 
	AMD在加載模塊完成後就會執行改模塊，全部模塊都加載執行完後會進入require的回調函數，執行主邏輯，
	這樣的效果就是依賴模塊的執行順序和書寫順序不必定一致，看網絡速度，哪一個先下載下來，哪一個先執行，可是主邏輯必定在全部依賴加載完成後才執行
			define('xxx',[],function(){
				return 'AMD'
			})
			require(['xxx'],function(xxx){
				console.log(xxx)//'AMD'
			})
	
CMD推崇就近依賴，只有在用到某個模塊的時候再去require 	
	CMD加載完某個依賴模塊後並不執行，只是下載而已，在全部依賴模塊加載完成後進入主邏輯，
	遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是徹底一致的
	
	這也是不少人說AMD用戶體驗好，由於沒有延遲，依賴模塊提早執行了，CMD性能好，由於只有用戶須要的時候才執行的緣由

6一、變量提高：

一、若是聲明一個變量的時候沒有使用var關鍵字，那麼這個變量將是一個全局變量
二、局部變量優先級大於全局變量
三、函數是一等公民,因此函數聲明會覆蓋變量聲明，可是，若是這個變量或者函數其中是賦值了的，那麼另一個將沒法覆蓋它
四、全局變量：全部在函數外面聲明的變量都處於全局做用域中。在瀏覽器環境中，這個全局做用域就是Window對象。
五、變量的提高：只是其聲明(定義)提高，而變量的賦值並不會提高。
六、var命令聲明的變量，無論在什麼位置，變量聲明都會被提高到函數體的頭部

6二、性能優化：

（1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 
（2） 減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，減小請求次數 
（3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。 
（4） 當須要設置的樣式不少時設置className而不是直接操做style。 
（5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。 
（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。 
（7） 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。

6三、內存泄漏：

內存泄露是指一塊被分配的內存既不能使用，又不能回收，多個對象循環引用、循環引用本身、直到瀏覽器進程結束。

新舊虛擬dom 的比較，若是有差別就以新的爲準，而後再插入的真實的dom中，從新渲染不設key，newCh和oldCh只會進行頭尾兩端的相互比較，
設key後，除了頭尾兩端的比較外，還會從用key生成的對象oldKeyToIdx中查找匹配的節點，因此爲節點設置key能夠更高效的利用dom
流程：
    一、用JS對象模擬DOM（虛擬DOM）
    二、把此虛擬DOM轉成真實DOM並插入頁面中（render）
    三、若是有事件發生修改了虛擬DOM，比較兩棵虛擬DOM樹的差別，獲得差別對象（diff）
    四、把差別對象應用到真正的DOM樹上（patch）

6五、跨域:

cookie跨域:
	path表示cookie所在的目錄,path子路徑下的頁面均可以訪問path
	domain表示的是cookie所在的域
		如域A爲love.haorooms.com，域B爲resource.haorooms.com，
		domain設置爲.haorooms.com；A B皆可訪問
		domain設置爲resource.haorooms.com； 只有B能夠訪問
localStorage跨域：
	可使用postMessage和iframe

6六、JSONP：

利用在頁面中建立<script>節點的方法向不一樣域提交HTTP請求的方法稱爲JSONP，能夠解決跨域提交Ajax請求的問題。

JSONP的優勢是：

它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；
它的兼容性更好，在更加古老的瀏覽器中均可以運行,不須要XMLHttpRequest或ActiveX的支持；而且在請求完畢後能夠經過調用callback的方式回傳結果。

JSONP的缺點則是：

它只支持GET請求而不支持POST等其它類型的HTTP請求；
它只支持跨域HTTP請求這種狀況，
不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題。

6七、進程與線程：

瀏覽器是多進程的

Browser 進程、GPU 進程、瀏覽器渲染進程等

瀏覽器的渲染進程是多線程

GUI 渲染線程、JavaScript 引擎線程、事件觸發線程、定時觸發器線程

6八、解決高度塌陷：

一、在塌陷的父元素的最後添加一個空白的div，而後對該div進行清除浮動
二、設置元素的類型爲inline-block
三、設置overflow爲一個非默認值，通常都是使用overflow:hidden來開啓BFC ！最推薦   
四、使用after僞類，向父元素後添加一個塊元素，並對其清除浮動。

6九、TCP的三次握手和四次揮手：

第一次握手：客戶端發送一個SYN碼給服務器，要求創建數據鏈接；
第二次握手： 服務器SYN和本身處理一個SYN（標誌）；叫SYN+ACK（確認包）；發送給客戶端，能夠創建鏈接
第三次握手： 客戶端再次發送ACK向服務器，服務器驗證ACK沒有問題，則創建起鏈接；

第一次揮手： 客戶端發送FIN(結束)報文，通知服務器數據已經傳輸完畢；
第二次揮手: 服務器接收到以後，通知客戶端我收到了SYN,發送ACK(確認)給客戶端，數據尚未傳輸完成 
第三次揮手： 服務器已經傳輸完畢，再次發送FIN通知客戶端，數據已經傳輸完畢
第四次揮手： 客戶端再次發送ACK,進入TIME_WAIT狀態；服務器和客戶端關閉鏈接；

70、TCP與UDP區別總結：

一、每一條TCP鏈接只能是點到點的;UDP支持一對一，一對多，多對一和多對多的交互通訊
二、TCP提供可靠的服務。也就是說，經過TCP鏈接傳送的數據，無差錯，不丟失，不重複，且按序到達;UDP盡最大努力交付，即不保證可靠交付
三、TCP面向字節流，其實是TCP把數據當作一連串無結構的字節流;UDP是面向報文的

7一、 http知識點

一、 看到網頁有亂碼，則頗有多是某個請求的 Content-Type 響應頭丟失或者是值設置不當形成的
二、 即使是不須要發送請求體的 GET 請求，請求頭區域下方也必須留一個空行（CRLF）
三、 服務端能夠根據客戶端發送的 Accept-Encoding 請求頭來分別返回不一樣壓縮格式（Gzip、Brotli）的文件
四、 服務端返回的 Date 響應頭表示服務器上的系統時間，Date 響應頭有參與緩存時長的計算
五、 HTTP 是無狀態的，網站是經過 Cookie 請求頭來識別出兩個請求是否是來自同一個瀏覽器的
六、 Access-Control-Allow-Origin 響應頭只支持配置單個的域名或者是 * ，不支持配置多個特定的域名
七、 若是請求頭或響應頭中包含Connection: Keep-Alive，表示創建了持久鏈接，這樣TCP鏈接會一直保持，以後請求統一站點的資源會複用這個鏈接。
	瀏覽器中的緩存做用分爲兩種狀況，一種是須要發送HTTP請求，一種是不須要發送

7一、數組轉對象

var a = Object.assign({}, [1, 2, 3]);
var a =  {...[1, 2, 3]};

7二、script的type="text/template"屬性

<script>設置type="text/template"
標籤裏面的內容不會被執行，也不會顯示在頁面上，可是能夠在另外一個script裏面經過獲取插入到頁面中。
這樣就把大段的HTML操做從js裏面分離開了。

7三、react建立方式

react用function建立和用class建立區在因而否有狀態，
	class建立具備生命週期特性，有this，指向react.component對象的實例
	function建立沒有生命週期特性，沒有this，須要reactHook來操做

7四、畫三角形：

.box{
	            width: 0;
	            height: 0;
	            border-top: 100px solid white;
	            border-bottom: 100px solid blue;
	            border-left: 100px solid white;
	            border-right: 100px solid white;
	        }

7四、字符排序：

將須要排序的字符與數字創建對象的鍵值關係
	經過數字的排序方法對字符進行排序

7五、get...By..和querySelector：

getXXXByXXX 獲取的是動態集合
	querySelector獲取的是靜態集合(快照)
	動態獲取的元素會隨文檔改變，而靜態的不會獲取出來以後就和文檔的改變無關了。
	HTMLCollection是元素集合而NodeList是節點集合

7五、 其餘

Element是類型爲ELEMENT_NODE的Node。
WeakMap只能以複雜數據類型做爲key，而且key值是弱引用，對於垃圾回收更加友好。
sort中：當數組長度小於等於10的時候，採用插入排序，大於10的時候，採用快排
node和java的區別。 
	(1)一種是解釋性語言，一種是編譯型語言
	(2)Node是單線程的，Java是多線程的，所以Node沒有多線程死鎖、狀態同步等問題
filter(濾鏡) 屬性
blur(px) 給圖像設置高斯模糊。
contrast(%) 調整圖像的對比度
brightness(%) 調整圖像的亮度
grayscale(%) 將圖像轉換爲灰度圖像
opacity(%) 轉化圖像的透明程度
hue-rotate(deg) 給圖像應用色相旋轉