摘要：原文鏈接征服前端面試，僅供學(xué)習(xí)使用前端知識(shí)集錦原型我們創(chuàng)建的每一個(gè)函數(shù)，都可以有一個(gè)屬性，該屬性指向一個(gè)對(duì)象。線程的劃分尺度小于進(jìn)程，使得多線程程序的并發(fā)性高。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制。

原文鏈接：征服前端面試，僅供學(xué)習(xí)使用
前端知識(shí)集錦2

我們創(chuàng)建的每一個(gè)函數(shù)，都可以有一個(gè)prototype屬性，該屬性指向一個(gè)對(duì)象。這個(gè)對(duì)象，就是原型。

當(dāng)我們?cè)趧?chuàng)建對(duì)象時(shí)，可以根據(jù)自己的需求，選擇性的將一些屬性和方法通過(guò)prototype屬性，掛載在原型對(duì)象上。而每一個(gè)new出來(lái)的實(shí)例，都有一個(gè)proto屬性，該屬性指向構(gòu)造函數(shù)的原型對(duì)象，通過(guò)這個(gè)屬性，讓實(shí)例對(duì)象也能夠訪問(wèn)原型對(duì)象上的方法。因此，當(dāng)所有的實(shí)例都能夠通過(guò)proto訪問(wèn)到原型對(duì)象時(shí)，原型對(duì)象的方法與屬性就變成了共有方法與屬性。

// 聲明構(gòu)造函數(shù)
function Person(name, age) {
    this.name = name;
    this.age = age;
}
 
// 通過(guò)prototye屬性，將方法掛載到原型對(duì)象上
Person.prototype.getName = function() {
    return this.name;
}

var p1 = new Person("tim", 10);
var p2 = new Person("jak", 22);

console.log(p1.getName === p2.getName); // true

通過(guò)圖示我們可以看出，構(gòu)造函數(shù)的prototype與所有實(shí)例對(duì)象的proto都指向原型對(duì)象。而原型對(duì)象的constructor指向構(gòu)造函數(shù)。

我們知道所有的函數(shù)都有一個(gè)叫做toString的方法。那么這個(gè)方法到底是在哪里的呢？

先隨意聲明一個(gè)函數(shù)：

function foo() {}

其中foo是Function對(duì)象的實(shí)例。而Function的原型對(duì)象同時(shí)又是Object的實(shí)例。這樣就構(gòu)成了一條原型鏈。原型鏈的訪問(wèn)，其實(shí)跟作用域鏈有很大的相似之處，他們都是一次單向的查找過(guò)程。因此實(shí)例對(duì)象能夠通過(guò)原型鏈，訪問(wèn)到處于原型鏈上對(duì)象的所有屬性與方法。這也是foo最終能夠訪問(wèn)到處于Object原型對(duì)象上的toString方法的原因。

作用域鏈的作用是保證執(zhí)行環(huán)境里有權(quán)訪問(wèn)的變量和函數(shù)是有序的，作用域鏈的變量只能向上訪問(wèn)，變量訪問(wèn)到window對(duì)象即被終止，作用域鏈向下訪問(wèn)變量是不被允許的。

第一種理解（紅寶書(shū)）：是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)，創(chuàng)建閉包的最常見(jiàn)的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)，通過(guò)另一個(gè)函數(shù)訪問(wèn)這個(gè)函數(shù)的局部變量。

第二種理解（你不知道的javascript）：當(dāng)函數(shù)可以記住并訪問(wèn)所在的詞法作用域時(shí)，就產(chǎn)生了閉包，這個(gè)函數(shù)持有對(duì)該詞法作用域的引用，這個(gè)引用就叫做閉包。

閉包本質(zhì)還是函數(shù)，只不過(guò)這個(gè)函數(shù)綁定了上下文環(huán)境（函數(shù)內(nèi)部引用的所有變量）。

缺點(diǎn)：常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。
作用(使用場(chǎng)景)：可以用來(lái)管理私有變量和私有方法，將對(duì)變量（狀態(tài)）的變化封裝在安全的環(huán)境中，使得這些變量不能被外部隨意修改，同時(shí)又可以通過(guò)指定的函數(shù)接口來(lái)操作。
閉包有三個(gè)特性：

函數(shù)嵌套函數(shù)

函數(shù)內(nèi)部可以引用外部的參數(shù)和變量

參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

題外話：

JavaScript的作用域就是詞法作用域而不是動(dòng)態(tài)作用域；

詞法作用域最重要的特征是它的定義過(guò)程發(fā)生在代碼的書(shū)寫(xiě)階段；

動(dòng)態(tài)作用域的作用域鏈?zhǔn)腔谡{(diào)用棧的 詞法作用域的作用域鏈?zhǔn)腔诖a中的作用域嵌套。

JavaScript的this總是指向一個(gè)對(duì)象，而具體指向哪個(gè)對(duì)象是在運(yùn)行時(shí)基于函數(shù)的執(zhí)行環(huán)境動(dòng)態(tài)綁定的，而非函數(shù)被聲明時(shí)的環(huán)境。

this的指向：

作為普通函數(shù)調(diào)用（this指向全局對(duì)象window對(duì)象）

作為對(duì)象的方法調(diào)用（this指向該對(duì)象）

構(gòu)造器調(diào)用（this指向用new返回的這個(gè)對(duì)象）

call、apply、bind的調(diào)用（this指向第一個(gè)參數(shù)對(duì)象）

函數(shù)作為參數(shù)傳遞

函數(shù)作為返回值輸出

創(chuàng)建一個(gè)新對(duì)象；

將構(gòu)造函數(shù)的作用域賦給新對(duì)象（因此this就指向了這個(gè)新對(duì)象）；

執(zhí)行構(gòu)造函數(shù)中的代碼（為這個(gè)新對(duì)象添加屬性）

返回新對(duì)象

簡(jiǎn)單原型鏈繼承：

function Super(){
    this.name = "hzzly";
}
function Sub(){
    // ...
}
Sub.prototype = new Super();    // 核心

缺點(diǎn)：
修改sub1.name后sub2.name也變了，因?yàn)閬?lái)自原型對(duì)象的引用屬性是所有實(shí)例共享的。

構(gòu)造函數(shù)式繼承：

function Super(val){
    this.val = val;
    this.fun = function(){  // 實(shí)例函數(shù)
        // ...
    }
}

function Sub(val){
    Super.call(this, val);   // 核心
    // ...
}

缺點(diǎn)：
無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類實(shí)例都持有一個(gè)新的fun函數(shù)，太多了就會(huì)影響性能，內(nèi)存爆炸。

組合式繼承

function Super(){
    this.name = "hzzly";
}

// 原型函數(shù)
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...

function Sub(){
    Super.call(this);   // 核心
    // ...
}

Sub.prototype = new Super();    // 核心

缺點(diǎn)：
子類原型上有一份多余的父類實(shí)例屬性，因?yàn)楦割悩?gòu)造函數(shù)被調(diào)用了兩次，生成了兩份，而子類實(shí)例上的那一份屏蔽了子類原型上父類的。又是內(nèi)存浪費(fèi)。

寄生組合式繼承

function Super(){
    this.name = "hzzly";
}

Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...

function Sub(){
   Super.call(this);   // 核心
    // ...
}

Sub.prototype=Object.create(Super.prototype)   // 核心
Sub.prototype.constructor=Sub   // 核心

es6的class繼承方式

class A {
}
class B extends A {
}
B.__proto__ === A   // true
B.prototype.__proto__ === A.prototype   // true

es6引入了class、extends、super、static(部分為ES2016標(biāo)準(zhǔn))

null是一個(gè)表示”無(wú)”的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示”無(wú)”的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。

undefined表示”缺少值”，就是此處應(yīng)該有一個(gè)值，但是還沒(méi)有定義。

null表示”沒(méi)有對(duì)象”，即該處不應(yīng)該有值。

三者都是用來(lái)改變函數(shù)的this對(duì)象的指向的。

三者第一個(gè)參數(shù)都是this要指向的對(duì)象，也就是想指定的上下文。

call 傳入的參數(shù)數(shù)量不固定，第二部分參數(shù)要一個(gè)一個(gè)傳，用，隔開(kāi)。

apply 接受兩個(gè)參數(shù)，第二個(gè)參數(shù)為一個(gè)帶下標(biāo)的集合，可以為數(shù)組，也可以為類數(shù)組。

bind 是返回一個(gè)改變了上下文的函數(shù)副本，便于稍后調(diào)用；apply 、call 則是立即調(diào)用。

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。

localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。

cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。

cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙，考慮到安全應(yīng)當(dāng)使用session。

session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問(wèn)增多，會(huì)比較占用你服務(wù)器的性能，考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。

單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。每次請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去，與服務(wù)器進(jìn)行交互。

數(shù)據(jù)體積方面：JSON相對(duì)于XML來(lái)講，數(shù)據(jù)的體積小，傳遞的速度更快些。

列表項(xiàng)目：JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互。

數(shù)據(jù)描述方面：JSON對(duì)數(shù)據(jù)的描述性比XML較差。

傳輸速度方面：JSON的速度要遠(yuǎn)遠(yuǎn)快于XML。

調(diào)用localstorge、cookies等本地存儲(chǔ)方式

一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程。

線程的劃分尺度小于進(jìn)程，使得多線程程序的并發(fā)性高。

進(jìn)程在執(zhí)行過(guò)程中擁有獨(dú)立的內(nèi)存單元，而多個(gè)線程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率。

線程在執(zhí)行過(guò)程中與進(jìn)程還是有區(qū)別的。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制。

從邏輯角度來(lái)看，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒(méi)有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用，來(lái)實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jìn)程和線程的重要區(qū)別。

漸進(jìn)增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí)：一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

網(wǎng)頁(yè)內(nèi)容

減少 http請(qǐng)求次數(shù)

減少 DNS查詢次數(shù)

避免頁(yè)面跳轉(zhuǎn)

緩存 Ajax

延遲加載

提前加載

減少 DOM元素?cái)?shù)量

避免 404

服務(wù)器

使用CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))

添加Expires或Cache-Control報(bào)文頭

Gzip壓縮傳輸文件

CSS

將樣式表置頂

用代替@import

JavaScript

把腳本置于頁(yè)面底部

使用外部JavaScript和CSS

精簡(jiǎn)JavaScript和CSS

去除重復(fù)腳本

減少DOM訪問(wèn)

圖片

優(yōu)化圖像

優(yōu)化CSS Spirite

不要在HTML中縮放圖片

favicon.ico要小而且可緩存

jsonp

CORS

document.domain+iframe

window.name

window.postMessage

jsonp的原理是動(dòng)態(tài)插入script標(biāo)簽

這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。
指一段腳本只能讀取來(lái)自同一來(lái)源的窗口和文檔的屬性。

內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在。

垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為 0（沒(méi)有其他對(duì)象引用過(guò)該對(duì)象），或?qū)υ搶?duì)象的惟一引用是循環(huán)的，那么該對(duì)象的內(nèi)存即可回收。

setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏。

閉包、控制臺(tái)日志、循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)，就會(huì)產(chǎn)生一個(gè)循環(huán)）

標(biāo)記清除：這是JavaScript最常見(jiàn)的垃圾回收方式，當(dāng)變量進(jìn)入執(zhí)行環(huán)境的時(shí)候，比如函數(shù)中聲明一個(gè)變量，垃圾回收器將其標(biāo)記為“進(jìn)入環(huán)境”，當(dāng)變量離開(kāi)環(huán)境的時(shí)候（函數(shù)執(zhí)行結(jié)束）將其標(biāo)記為“離開(kāi)環(huán)境”。

引用計(jì)數(shù)：引用計(jì)數(shù)的策略是跟蹤記錄每個(gè)值被使用的次數(shù)，當(dāng)聲明了一個(gè) 變量并將一個(gè)引用類型賦值給該變量的時(shí)候這個(gè)值的引用次數(shù)就加1，如果該變量的值變成了另外一個(gè)，則這個(gè)值得引用次數(shù)減1，當(dāng)這個(gè)值的引用次數(shù)變?yōu)?的時(shí) 候，說(shuō)明沒(méi)有變量在使用，這個(gè)值沒(méi)法被訪問(wèn)了，因此可以將其占用的空間回收，這樣垃圾回收器會(huì)在運(yùn)行的時(shí)候清理掉引用次數(shù)為0的值占用的空間。

事件處理機(jī)制：IE是事件冒泡、firefox同時(shí)支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。

阻止冒泡：ev.stopPropagation()

變量必須聲明后再使用

函數(shù)的參數(shù)不能有同名屬性，否則報(bào)錯(cuò)

禁止this指向全局對(duì)象

不能使用with語(yǔ)句

增加了保留字

arguments不會(huì)自動(dòng)反映函數(shù)參數(shù)的變化

設(shè)立”嚴(yán)格模式”的目的：

消除Javascript語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;

消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；

提高編譯器效率，增加運(yùn)行速度；

為未來(lái)新版本的Javascript做好鋪墊。

事件代理（Event Delegation），又稱之為事件委托。即是把原本需要綁定的事件委托給父元素，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽(tīng)的職務(wù)。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高性能。

異步函數(shù)在執(zhí)行結(jié)束后，會(huì)在事件隊(duì)列中添加一個(gè)事件（回調(diào)函數(shù)）(遵循先進(jìn)先出原則)，主線程中的代碼執(zhí)行完畢后（即一次循環(huán)結(jié)束），下一次循環(huán)開(kāi)始就在事件隊(duì)列中“讀取”事件，然后調(diào)用它所對(duì)應(yīng)的回調(diào)函數(shù)。這個(gè)過(guò)程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱為Event Loop（事件循環(huán)）
主線程運(yùn)行的時(shí)候，產(chǎn)生堆（heap）和棧（stack），棧中的代碼（同步任務(wù)）調(diào)用各種外部API，它們?cè)凇比蝿?wù)隊(duì)列”中加入各種事件（click，load，done）。只要棧中的代碼執(zhí)行完畢，主線程就會(huì)去讀取”任務(wù)隊(duì)列”，依次執(zhí)行那些事件所對(duì)應(yīng)的回調(diào)函數(shù)。
執(zhí)行棧中的代碼（同步任務(wù)），總是在讀取”任務(wù)隊(duì)列”（異步任務(wù)）之前執(zhí)行。

瀏覽器緩存（Browser Caching）是瀏覽器端保存數(shù)據(jù)用于快速讀取或避免重復(fù)資源請(qǐng)求的優(yōu)化機(jī)制，有效的緩存使用可以避免重復(fù)的網(wǎng)絡(luò)請(qǐng)求和瀏覽器快速地讀取本地?cái)?shù)據(jù)。

http緩存：http緩存是基于HTTP協(xié)議的瀏覽器文件級(jí)緩存機(jī)制。即針對(duì)文件的重復(fù)請(qǐng)求情況下，瀏覽器可以根據(jù)協(xié)議頭判斷從服務(wù)器端請(qǐng)求文件還是從本地讀取文件判斷expires，如果未過(guò)期，直接讀取http緩存文件

indexDB：是一個(gè)在客戶端存儲(chǔ)可觀數(shù)量的結(jié)構(gòu)化數(shù)據(jù),并且為這些數(shù)據(jù)添加索引進(jìn)行高性能檢索。

cookie：指一般網(wǎng)站為了辨別用戶身份、儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過(guò)加密）。cookie一般通過(guò)http請(qǐng)求中在頭部一起發(fā)送到服務(wù)器端。一條cookie記錄主要由鍵、值、域、過(guò)期時(shí)間、大小組成，一般用戶保存用戶的認(rèn)證信息。

localstorage：localStorage是h5的一種新的本地緩存方案,加快下次頁(yè)面打開(kāi)時(shí)的渲染速度,除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。

sessionstorage：也是h5的一種本地緩存方案，數(shù)據(jù)的存儲(chǔ)僅特定于某個(gè)會(huì)話中，也就是說(shuō)數(shù)據(jù)只保持到瀏覽器關(guān)閉，當(dāng)瀏覽器關(guān)閉后重新打開(kāi)這個(gè)頁(yè)面時(shí)， 之前的存儲(chǔ)已經(jīng)被清除。

es6是一個(gè)新的標(biāo)準(zhǔn)，它包含了許多新的語(yǔ)言特性和庫(kù)，是JS最實(shí)質(zhì)性的一次升級(jí)。比如’箭頭函數(shù)’、’字符串模板’、’generators(生成器)’、’async/await’、’解構(gòu)賦值’、’class’等等，還有就是引入module模塊的概念。
箭頭函數(shù)可以讓this指向固定化，這種特性很有利于封裝回調(diào)函數(shù)。
(1) 函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。
(2) 不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤。
(3) 不可以使用arguments對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用Rest參數(shù)代替。
(4) 不可以使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)。

async/await是寫(xiě)異步代碼的新方式，以前的方法有回調(diào)函數(shù)和Promise。

async/await是基于Promise實(shí)現(xiàn)的，它不能用于普通的回調(diào)函數(shù)。

async/await與Promise一樣，是非阻塞的。

async/await使得異步代碼看起來(lái)像同步代碼，這正是它的魔力所在。

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件監(jiān)聽(tīng)——更合理和更強(qiáng)大。
所謂Promise，簡(jiǎn)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語(yǔ)法上說(shuō)，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。

Promise對(duì)象有以下兩個(gè)特點(diǎn):

對(duì)象的狀態(tài)不受外界影響，Promise對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：Pending（進(jìn)行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失?。?/p>

一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。

CommonJS是服務(wù)器端模塊的規(guī)范，Node.js采用了這個(gè)規(guī)范。CommonJS規(guī)范加載模塊是同步的，也就是說(shuō)，只有加載完成，才能執(zhí)行后面的操作。AMD規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)。
AMD推薦的風(fēng)格通過(guò)返回一個(gè)對(duì)象做為模塊對(duì)象，CommonJS的風(fēng)格通過(guò)對(duì)module.exports或exports的屬性賦值來(lái)達(dá)到暴露模塊對(duì)象的目的。

Gulp就是為了規(guī)范前端開(kāi)發(fā)流程，實(shí)現(xiàn)前后端分離、模塊化開(kāi)發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等功能的一個(gè)前端自動(dòng)化構(gòu)建工具。

Gulp就像是一個(gè)產(chǎn)品的流水線，整個(gè)產(chǎn)品從無(wú)到有，都要受流水線的控制，在流水線上我們可以對(duì)產(chǎn)品進(jìn)行管理。

Gulp是通過(guò)task對(duì)整個(gè)開(kāi)發(fā)過(guò)程進(jìn)行構(gòu)建。

當(dāng)下最熱門(mén)的前端資源模塊化管理和打包工具

可以很好的管理模塊以及各個(gè)模塊之間的依賴

對(duì)js、css、圖片等資源文件都支持打包

有獨(dú)立的配置文件webpack.config.js

可以將代碼切割成不同的chunk，實(shí)現(xiàn)按需加載，降低了初始化時(shí)間

可以生成優(yōu)化且合并后的靜態(tài)資源

兩大特色：

代碼可以自動(dòng)完成編譯

loader 可以處理各種類型的靜態(tài)文件，并且支持串聯(lián)操作

display:none 隱藏對(duì)應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會(huì)合攏，就當(dāng)他從來(lái)不存在。

visibility:hidden 隱藏對(duì)應(yīng)的元素，但是在文檔布局中仍保留原來(lái)的空間。

A：共同點(diǎn)：
對(duì)內(nèi)聯(lián)元素設(shè)置float和absolute屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。
B：不同點(diǎn)：
float仍會(huì)占據(jù)位置，position會(huì)覆蓋文檔流中的其他元素。

content-box：讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高，一旦修改了元素的邊框或內(nèi)距，就會(huì)影響元素的盒子尺寸，就不得不重新計(jì)算元素的盒子尺寸，從而影響整個(gè)頁(yè)面的布局。

border-box：讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）。設(shè)置width/height屬性指的是border + padding + content

static 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中。

relative 生成相對(duì)定位的元素，相對(duì)于其在普通流中的位置進(jìn)行定位。

absolute 生成絕對(duì)定位的元素， 相對(duì)于最近一級(jí)的 定位不是 static 的父元素來(lái)進(jìn)行定位。

fixed （老IE不支持）生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

浮動(dòng)元素脫離文檔流，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。

使用空標(biāo)簽清除浮動(dòng)：這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義css clear:both. 弊端就是增加了無(wú)意義標(biāo)簽。

使用overflow：設(shè)置overflow為hidden或者auto，給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

使用after偽對(duì)象清除浮動(dòng)：該方法只適用于非IE瀏覽器。該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置 height:0，否則該元素會(huì)比實(shí)際高出若干像素。

#box:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

父元素的高度無(wú)法被撐開(kāi)，影響與父元素同級(jí)的元素

與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后

若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)

CSS3實(shí)現(xiàn)圓角（border-radius）

陰影（box-shadow）

對(duì)文字加特效（text-shadow、）

線性漸變（gradient）

旋轉(zhuǎn)（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜

增加了更多的CSS選擇器

多背景

rgba

在CSS3中唯一引入的偽元素是::selection.

媒體查詢

多欄布局

border-image

CSS Sprites 其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請(qǐng)求的開(kāi)銷，因?yàn)檎?qǐng)求耗時(shí)比較長(zhǎng)；請(qǐng)求雖然可以并發(fā)，但是也有限制，一般瀏覽器都是6個(gè)。對(duì)于未來(lái)而言，就不需要這樣做了，因?yàn)橛辛薶ttp2。

去掉或者丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)；

有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的有效信息：爬蟲(chóng)依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重；

方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來(lái)渲染網(wǎng)頁(yè)；

便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，是下一步吧網(wǎng)頁(yè)的重要?jiǎng)酉?，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

?告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。

嚴(yán)格模式的排版和 JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。

在混雜模式中，頁(yè)面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。

?不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。

該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過(guò)渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁(yè)，而 Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁(yè)。

所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記;

所有標(biāo)簽的元素和屬性的名字都必須使用小寫(xiě);

所有的XML標(biāo)記都必須合理嵌套;

所有的屬性必須用引號(hào)””括起來(lái);

把所有<和&特殊符號(hào)用編碼表示;

給所有屬性賦一個(gè)值;

不要在注釋內(nèi)容中使“–”;

圖片必須有說(shuō)明文字。

語(yǔ)義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）

音頻、視頻API(audio,video)

畫(huà)布(Canvas) API

地理(Geolocation) API

拖拽釋放(Drag and drop) API

本地離線存儲(chǔ)

表單控件，calendar、date、time、email、url、search

HTTP請(qǐng)求的方法或動(dòng)作，比如是get還是post請(qǐng)求；

正在請(qǐng)求的URL（請(qǐng)求的地址）；

請(qǐng)求頭，包含一些客戶端環(huán)境信息、身份驗(yàn)證信息等；

請(qǐng)求體（請(qǐng)求正文），可以包含客戶提交的查詢字符串信息、表單信息等。

Accept:text/html,image/*(告訴服務(wù)器，瀏覽器可以接受文本，網(wǎng)頁(yè)圖片)

Accept-Charaset:ISO-8859-1 [接受字符編碼：iso-8859-1]

Accept-Encoding:gzip,compress[可以接受 gzip,compress壓縮后數(shù)據(jù)]

Accept-Language:zh-cn[瀏覽器支持的語(yǔ)言]

Host:localhost:8080[瀏覽器要找的主機(jī)]

If-Modified-Since:Tue, 09 May 2017 01:34:02 GMT[告訴服務(wù)器我這緩存中有這個(gè)文件,該文件的時(shí)間是…]

User-Agent:Nozilla/4.0(Com…)[告訴服務(wù)器我的瀏覽器內(nèi)核，客戶端環(huán)境信]

Cookie：[身份驗(yàn)證信息]

Connection:close/Keep-Alive [保持鏈接，發(fā)完數(shù)據(jù)后，我不關(guān)閉鏈接]

(1) 一個(gè)數(shù)字和文字組成的狀態(tài)碼，用來(lái)顯示請(qǐng)求是成功還是失??；
(2) 響應(yīng)頭，響應(yīng)頭也和請(qǐng)求頭一樣包含許多有用的信息，例如服務(wù)器類型、日期時(shí)間、內(nèi)容類型和長(zhǎng)度等；
(3) 響應(yīng)體（響應(yīng)正文）。

響應(yīng)頭字段：

Cache-Control:[告訴瀏覽器如何緩存頁(yè)面(因?yàn)闉g覽器的兼容性最好設(shè)置兩個(gè))]

Connection:close/Keep-Alive [保持鏈接，發(fā)完數(shù)據(jù)后，我不關(guān)閉鏈接]

Content-Type:text/html;charset=gb2312[內(nèi)容格式和編碼]

Last-Modified:Tue,11 Juj,2017 18 18:29:20[告訴瀏覽器該資源上次更新時(shí)間是多少]

ETag:”540-54f0d59b8b680”

Expires:Fri, 26 May 2017 13:28:33 GMT [失效日期]

server:apache tomcat nginx [哪種服務(wù)器]

display:none 的節(jié)點(diǎn)不會(huì)被加入 Render Tree，而 visibility: hidden 則會(huì)，所以，如果某個(gè)節(jié)點(diǎn)最開(kāi)始是不顯示的，設(shè)為 display:none 是更優(yōu)的。

建一個(gè)空對(duì)象和空數(shù)組，循環(huán)遍歷需要去重的數(shù)組，判斷對(duì)象有沒(méi)有此屬性，沒(méi)有的話就給對(duì)象添加此屬性，并向空數(shù)組中push這個(gè)值。

//es5
function unique(arr){
    var obj = {}
    var result = []
    for(var i in arr){
        if(!obj[arr[i]]){
            obj[arr[i]] = true;
            result.push(arr[i]);
        }
    }
    return result;
}

//es6
[...new Set(arr)]