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

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

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

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

// 聲明構(gòu)造函數(shù)
function Person(name, age) {
    this.name = name;
    this.age = age;
}
 
// 通過prototye屬性，將方法掛載到原型對象上
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

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

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

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

function foo() {}

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

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

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

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

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

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

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

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

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

題外話：

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

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

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

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

this的指向：

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

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

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

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

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

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

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

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

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

返回新對象

簡單原型鏈繼承：

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

缺點(diǎn)：
修改sub1.name后sub2.name也變了，因?yàn)閬碜栽蛯ο蟮囊脤傩允撬袑?shí)例共享的。

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

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

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

缺點(diǎn)：
無法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類實(shí)例都持有一個(gè)新的fun函數(shù)，太多了就會影響性能，內(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è)表示”無”的對象，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示”無”的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

減少 http請求次數(shù)

減少 DNS查詢次數(shù)

避免頁面跳轉(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

把腳本置于頁面底部

使用外部JavaScript和CSS

精簡JavaScript和CSS

去除重復(fù)腳本

減少DOM訪問

圖片

優(yōu)化圖像

優(yōu)化CSS Spirite

不要在HTML中縮放圖片

favicon.ico要小而且可緩存

jsonp

CORS

document.domain+iframe

window.name

window.postMessage

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

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

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

垃圾回收器定期掃描對象，并計(jì)算引用了每個(gè)對象的其他對象的數(shù)量。如果一個(gè)對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的，那么該對象的內(nèi)存即可回收。

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

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

標(biāo)記清除：這是JavaScript最常見的垃圾回收方式，當(dāng)變量進(jìn)入執(zhí)行環(huán)境的時(shí)候，比如函數(shù)中聲明一個(gè)變量，垃圾回收器將其標(biāo)記為“進(jìn)入環(huán)境”，當(dāng)變量離開環(huán)境的時(shí)候（函數(shù)執(zhí)行結(jié)束）將其標(biāo)記為“離開環(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í) 候，說明沒有變量在使用，這個(gè)值沒法被訪問了，因此可以將其占用的空間回收，這樣垃圾回收器會在運(yùn)行的時(shí)候清理掉引用次數(shù)為0的值占用的空間。

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

阻止冒泡：ev.stopPropagation()

變量必須聲明后再使用

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

禁止this指向全局對象

不能使用with語句

增加了保留字

arguments不會自動反映函數(shù)參數(shù)的變化

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

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

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

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

為未來新版本的Javascript做好鋪墊。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

兩大特色：

代碼可以自動完成編譯

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

父元素的高度無法被撐開，影響與父元素同級的元素

與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后

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

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

陰影（box-shadow）

對文字加特效（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)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因?yàn)檎埱蠛臅r(shí)比較長；請求雖然可以并發(fā)，但是也有限制，一般瀏覽器都是6個(gè)。對于未來而言，就不需要這樣做了，因?yàn)橛辛薶ttp2。

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

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

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

便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要?jiǎng)酉颍裱璚3C標(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)行。

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

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

該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 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)頁，而 Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。

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

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

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

所有的屬性必須用引號””括起來;

把所有<和&特殊符號用編碼表示;

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

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

圖片必須有說明文字。

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

音頻、視頻API(audio,video)

畫布(Canvas) API

地理(Geolocation) API

拖拽釋放(Drag and drop) API

本地離線存儲

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

HTTP請求的方法或動作，比如是get還是post請求；

正在請求的URL（請求的地址）；

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

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

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

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

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

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

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)碼，用來顯示請求是成功還是失敗；
(2) 響應(yīng)頭，響應(yīng)頭也和請求頭一樣包含許多有用的信息，例如服務(wù)器類型、日期時(shí)間、內(nèi)容類型和長度等；
(3) 響應(yīng)體（響應(yīng)正文）。

響應(yīng)頭字段：

Cache-Control:[告訴瀏覽器如何緩存頁面(因?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)不會被加入 Render Tree，而 visibility: hidden 則會，所以，如果某個(gè)節(jié)點(diǎn)最開始是不顯示的，設(shè)為 display:none 是更優(yōu)的。

建一個(gè)空對象和空數(shù)組，循環(huán)遍歷需要去重的數(shù)組，判斷對象有沒有此屬性，沒有的話就給對象添加此屬性，并向空數(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)]