摘要：原文鏈接征服前端面試，僅供學習使用前端知識集錦原型我們創建的每一個函數，都可以有一個屬性，該屬性指向一個對象。線程的劃分尺度小于進程，使得多線程程序的并發性高。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。

原文鏈接：征服前端面試，僅供學習使用
前端知識集錦2

我們創建的每一個函數，都可以有一個prototype屬性，該屬性指向一個對象。這個對象，就是原型。

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

// 聲明構造函數
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

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

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

先隨意聲明一個函數：

function foo() {}

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

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

第一種理解（紅寶書）：是指有權訪問另一個函數作用域中的變量的函數，創建閉包的最常見的方式就是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變量。

第二種理解（你不知道的javascript）：當函數可以記住并訪問所在的詞法作用域時，就產生了閉包，這個函數持有對該詞法作用域的引用，這個引用就叫做閉包。

閉包本質還是函數，只不過這個函數綁定了上下文環境（函數內部引用的所有變量）。

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

函數嵌套函數

函數內部可以引用外部的參數和變量

參數和變量不會被垃圾回收機制回收

題外話：

JavaScript的作用域就是詞法作用域而不是動態作用域；

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

動態作用域的作用域鏈是基于調用棧的 詞法作用域的作用域鏈是基于代碼中的作用域嵌套。

JavaScript的this總是指向一個對象，而具體指向哪個對象是在運行時基于函數的執行環境動態綁定的，而非函數被聲明時的環境。

this的指向：

作為普通函數調用（this指向全局對象window對象）

作為對象的方法調用（this指向該對象）

構造器調用（this指向用new返回的這個對象）

call、apply、bind的調用（this指向第一個參數對象）

函數作為參數傳遞

函數作為返回值輸出

創建一個新對象；

將構造函數的作用域賦給新對象（因此this就指向了這個新對象）；

執行構造函數中的代碼（為這個新對象添加屬性）

返回新對象

簡單原型鏈繼承：

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

缺點：
修改sub1.name后sub2.name也變了，因為來自原型對象的引用屬性是所有實例共享的。

構造函數式繼承：

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

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

缺點：
無法實現函數復用，每個子類實例都持有一個新的fun函數，太多了就會影響性能，內存爆炸。

組合式繼承

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

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

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

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

缺點：
子類原型上有一份多余的父類實例屬性，因為父類構造函數被調用了兩次，生成了兩份，而子類實例上的那一份屏蔽了子類原型上父類的。又是內存浪費。

寄生組合式繼承

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標準)

null是一個表示”無”的對象，轉為數值時為0；undefined是一個表示”無”的原始值，轉為數值時為NaN。

undefined表示”缺少值”，就是此處應該有一個值，但是還沒有定義。

null表示”沒有對象”，即該處不應該有值。

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

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

call 傳入的參數數量不固定，第二部分參數要一個一個傳，用，隔開。

apply 接受兩個參數，第二個參數為一個帶下標的集合，可以為數組，也可以為類數組。

bind 是返回一個改變了上下文的函數副本，便于稍后調用；apply 、call 則是立即調用。

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

localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

cookie不是很安全，別人可以分析存放在本地的COOKIE并進行COOKIE欺騙，考慮到安全應當使用session。

session會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能，考慮到減輕服務器性能方面，應當使用COOKIE。

單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。每次請求一個新的頁面的時候Cookie都會被發送過去，與服務器進行交互。

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

列表項目：JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。

數據描述方面：JSON對數據的描述性比XML較差。

傳輸速度方面：JSON的速度要遠遠快于XML。

調用localstorge、cookies等本地存儲方式

一個程序至少有一個進程,一個進程至少有一個線程。

線程的劃分尺度小于進程，使得多線程程序的并發性高。

進程在執行過程中擁有獨立的內存單元，而多個線程共享內存，從而極大地提高了程序的運行效率。

線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。

從邏輯角度來看，多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。但操作系統并沒有將多個線程看做多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。

漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

網頁內容

減少 http請求次數

減少 DNS查詢次數

避免頁面跳轉

緩存 Ajax

延遲加載

提前加載

減少 DOM元素數量

避免 404

服務器

使用CDN(內容分發網絡)

添加Expires或Cache-Control報文頭

Gzip壓縮傳輸文件

CSS

將樣式表置頂

用代替@import

JavaScript

把腳本置于頁面底部

使用外部JavaScript和CSS

精簡JavaScript和CSS

去除重復腳本

減少DOM訪問

圖片

優化圖像

優化CSS Spirite

不要在HTML中縮放圖片

favicon.ico要小而且可緩存

jsonp

CORS

document.domain+iframe

window.name

window.postMessage

jsonp的原理是動態插入script標簽

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

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

垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。

閉包、控制臺日志、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

標記清除：這是JavaScript最常見的垃圾回收方式，當變量進入執行環境的時候，比如函數中聲明一個變量，垃圾回收器將其標記為“進入環境”，當變量離開環境的時候（函數執行結束）將其標記為“離開環境”。

引用計數：引用計數的策略是跟蹤記錄每個值被使用的次數，當聲明了一個 變量并將一個引用類型賦值給該變量的時候這個值的引用次數就加1，如果該變量的值變成了另外一個，則這個值得引用次數減1，當這個值的引用次數變為0的時 候，說明沒有變量在使用，這個值沒法被訪問了，因此可以將其占用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數為0的值占用的空間。

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

阻止冒泡：ev.stopPropagation()

變量必須聲明后再使用

函數的參數不能有同名屬性，否則報錯

禁止this指向全局對象

不能使用with語句

增加了保留字

arguments不會自動反映函數參數的變化

設立”嚴格模式”的目的：

消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;

消除代碼運行的一些不安全之處，保證代碼運行的安全；

提高編譯器效率，增加運行速度；

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

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

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

瀏覽器緩存（Browser Caching）是瀏覽器端保存數據用于快速讀取或避免重復資源請求的優化機制，有效的緩存使用可以避免重復的網絡請求和瀏覽器快速地讀取本地數據。

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

indexDB：是一個在客戶端存儲可觀數量的結構化數據,并且為這些數據添加索引進行高性能檢索。

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

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

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

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

async/await是寫異步代碼的新方式，以前的方法有回調函數和Promise。

async/await是基于Promise實現的，它不能用于普通的回調函數。

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

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

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

Promise對象有以下兩個特點:

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

一旦狀態改變，就不會再變，任何時候都可以得到這個結果。

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

Gulp就是為了規范前端開發流程，實現前后端分離、模塊化開發、版本控制、文件合并與壓縮、mock數據等功能的一個前端自動化構建工具。

Gulp就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上我們可以對產品進行管理。

Gulp是通過task對整個開發過程進行構建。

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

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

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

有獨立的配置文件webpack.config.js

可以將代碼切割成不同的chunk，實現按需加載，降低了初始化時間

可以生成優化且合并后的靜態資源

兩大特色：

代碼可以自動完成編譯

loader 可以處理各種類型的靜態文件，并且支持串聯操作

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

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

A：共同點：
對內聯元素設置float和absolute屬性，可以讓元素脫離文檔流，并且可以設置其寬高。
B：不同點：
float仍會占據位置，position會覆蓋文檔流中的其他元素。

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

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

static 默認值。沒有定位，元素出現在正常的流中。

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

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

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

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

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

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

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

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

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

與浮動元素同級的非浮動元素（內聯元素）會跟隨其后

若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

CSS3實現圓角（border-radius）

陰影（box-shadow）

對文字加特效（text-shadow、）

線性漸變（gradient）

旋轉（transform）

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

增加了更多的CSS選擇器

多背景

rgba

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

媒體查詢

多欄布局

border-image

CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以并發，但是也有限制，一般瀏覽器都是6個。對于未來而言，就不需要這樣做了，因為有了http2。

去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構；

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

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

便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

?告知瀏覽器的解析器用什么文檔標準解析這個文檔。

嚴格模式的排版和 JS 運作模式是以該瀏覽器支持的最高標準運行。

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

?不存在或格式不正確會導致文檔以混雜模式呈現。

該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

所有的標記都必須要有一個相應的結束標記;

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

所有的XML標記都必須合理嵌套;

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

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

給所有屬性賦一個值;

不要在注釋內容中使“–”;

圖片必須有說明文字。

語義化更好的內容標簽（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（請求的地址）；

請求頭，包含一些客戶端環境信息、身份驗證信息等；

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

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

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

Accept-Encoding:gzip,compress[可以接受 gzip,compress壓縮后數據]

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

Host:localhost:8080[瀏覽器要找的主機]

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

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

Cookie：[身份驗證信息]

Connection:close/Keep-Alive [保持鏈接，發完數據后，我不關閉鏈接]

(1) 一個數字和文字組成的狀態碼，用來顯示請求是成功還是失??；
(2) 響應頭，響應頭也和請求頭一樣包含許多有用的信息，例如服務器類型、日期時間、內容類型和長度等；
(3) 響應體（響應正文）。

響應頭字段：

Cache-Control:[告訴瀏覽器如何緩存頁面(因為瀏覽器的兼容性最好設置兩個)]

Connection:close/Keep-Alive [保持鏈接，發完數據后，我不關閉鏈接]

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

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

ETag:”540-54f0d59b8b680”

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

server:apache tomcat nginx [哪種服務器]

第一次握手，客戶端給服務器發送數據包（帶SYN標志的數據包）。此時服務器確認自己可以接收客戶端的包，而客戶端不確認服務器是否接收到了自己發的數據包。
第二次握手，服務器端回復（回傳一個帶有SYN/ACK標志的數據包以示傳達確認信息）客戶端。此時客戶端確認自己發的包被服務器收到，也確認自己可以正常接收服務器包，客戶端對此次通信沒有疑問了。服務器也可以確認自己能接收到客戶端的包，但不能確認客戶端能否接收自己發的包。
第三次握手，客戶端回復（發送端再回傳一個帶ACK標志的數據包，代表“握手”結束）服務器。 客戶端已經沒有疑問了，服務器也確認剛剛客戶端收到了自己的數據包。兩邊都沒有問題，開始通信。

為什么要三次握手：
為了防止已失效的連接請求報文段突然又傳送到了服務端，因而產生錯誤。也防止了服務器端的一直等待而浪費資源;
TCP作為一種可靠傳輸控制協議，其核心思想：既要保證數據可靠傳輸，又要提高傳輸的效率，而用三次恰恰可以滿足以上兩方面的需求！

主機向服務器發送一個斷開連接的請求（ 不早了，我該走了 ）,發送一個FIN報文段；

服務器接到請求后發送確認收到請求的信號（ 知道了 ）回一個ACK報文段；

服務器向主機發送斷開通知（ 我也該走了 ）發送FIN報文段，請求關閉連接；

主機接到斷開通知后斷開連接并反饋一個確認信號（ 嗯，好的 ），服務器收到確認信號后也斷開連接；

TCP（Transmission Control Protocol，傳輸控制協議）是基于連接的協議，也就是說，在正式收發數據前，必須和對方建立可靠的連接。一個TCP連接必須要經過三次“對話”才能建立起來。

UDP（User Data Protocol，用戶數據報協議）是與TCP相對應的協議。它是面向非連接的協議，它不與對方建立連接，而是直接就把數據包發送過去！

UDP適用于一次只傳送少量數據、對可靠性要求不高的應用環境。

HTTP協議通常承載于TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了我們常說的HTTPS

默認HTTP的端口號為80，HTTPS的端口號為443

HTTPS 相對于 HTTP 性能上差點，因為多了 SSL/TLS 的幾次握手和加密解密的運算處理，但是加密解密的運算處理已經可以通過特有的硬件來加速處理。

把Last-Modified和ETag請求的http報頭一起使用，可利用客戶端（例如瀏覽器）的緩存。ETag用于標識資源的狀態，當資源發生變更時，如果其頭信息中一個或者多個發生變化，或者消息實體發生變化，那么ETag也隨之發生變化。瀏覽器下載組件的時候，會將它們存儲到瀏覽器緩存中。如果需要再次獲取相同的組件，瀏覽器將檢查組件的緩存時間，假如已經過期，那么瀏覽器將發送一個條件GET請求到服務器，服務器判斷緩存還有效，則發送一個304響應，告訴瀏覽器可以重用緩存組件。

Expires 用來控制緩存的失效日期
Cache-Control 用來控制網頁的緩存 常見的取值有private、no-cache、max-age、must-revalidate等，默認為private。

HTTP/2引入了“服務端推（server push）”的概念，它允許服務端在客戶端需要數據之前就主動地將數據發送到客戶端緩存中，從而提高性能。

HTTP/2提供更多的加密支持

HTTP/2使用多路技術，允許多個消息在一個連接上同時交差。

它增加了頭壓縮（header compression），因此即使非常小的請求，其請求和響應的header都只會占用很小比例的帶寬。

瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求（TCP三次握手）；

服務器交給后臺處理完成后返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；

瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部數據結構（如HTML的DOM）；

載入解析到的資源文件，渲染頁面，完成。

瀏覽器請求到HTML代碼后，在生成DOM的最開始階段，并行發起css、圖片、js的請求，無論他們是否在HEAD里。瀏覽器會將HTML解析成一個DOM樹，DOM 樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點。

CSS文件下載完成，開始構建CSSOM

所有CSS文件下載完成，CSSOM構建結束后，和 DOM 一起生成 Render Tree。

有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關系。下一步操作就是計算出每個節點在屏幕中的位置。

最后一步，按照算出來的規則，把內容渲染到屏幕上。

以上五個步驟前3個步驟因為DOM、CSSOM、Render Tree都可能在第一次Painting后又被更新多次，比如JS修改了DOM或者CSS屬性。Layout 和 Painting 也會被重復執行，除了DOM、CSSOM更新的原因外，圖片下載完成后也需要調用Layout 和 Painting來更新網頁。

display:none 的節點不會被加入 Render Tree，而 visibility: hidden 則會，所以，如果某個節點最開始是不顯示的，設為 display:none 是更優的。

協議部分

域名部分

端口部分

虛擬目錄部分：從域名后的第一個“/”開始到最后一個“/”為止

文件名部分：從域名后的最后一個“/”開始到“？”為止

參數部分：從“？”開始到“#”為止之間的部分

錨部分：從“#”開始到最后

GET：一般用于信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在1024字節，Get是通過地址欄來傳值。

POST：一般用于修改服務器上的資源，對所發送的信息沒有限制。（常用于發送表單數據，新建、修改等），Post是通過提交表單來傳值。

1xx（臨時響應）:表示臨時響應并需要請求者繼續執行操作的狀態碼。
2xx（成功）:表示成功處理了請求的狀態碼。
200（成功）：服務器已成功處理了請求。通常，這表示服務器提供了請求的網頁。
3xx（重定向）：要完成請求，需要進一步操作。
301（永久移動）：請求的網頁已永久移動到新位置。
302（臨時移動）：服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來響應以后的請求。
304（未修改）：自從上次請求后，請求的網頁未修改過。
4xx（請求錯誤）：這些狀態碼表示請求可能出錯，妨礙了服務器的處理。
400（錯誤請求）：服務器不理解請求的語法。
404（未找到）：服務器找不到請求的網頁。
5xx（服務器錯誤）:這些狀態碼表示服務器在處理請求時發生內部錯誤。
500（服務器內部錯誤）：服務器遇到錯誤，無法完成請求。
503（服務不可用）：服務器目前無法使用（由于超載或停機維護）。

應用層

表示層

會話層（從上往下）（HTTP、FTP、SMTP、DNS）

傳輸層（TCP和UDP）

網絡層（IP）

物理層

數據鏈路層（以太網）

服務器首先產生ETag，服務器可在稍后使用它來判斷頁面是否已經被修改。本質上，客戶端通過將該記號傳回服務器要求服務器驗證其（客戶端）緩存。

304是HTTP狀態碼，服務器用來標識這個文件沒修改，不返回內容，瀏覽器在接收到個狀態碼后，會使用瀏覽器已緩存的文件

http keep-alive是為了讓tcp活得更久一點，以便在同一個連接上傳送多個http，提高socket的效率。而tcp keep-alive是TCP的一種檢測TCP連接狀況的保鮮機制。

sql注入原理

就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。

XSS

指的是攻擊者往Web頁面里插入惡意html標簽或者javascript代碼。比如：攻擊者在論壇中放一個看似安全的鏈接，騙取用戶點擊后，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶原本以為的信任站點。

CSRF

CSRF是代替用戶完成指定的動作，需要知道其他用戶頁面的代碼和數據包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟：1、登錄受信任網站A，并在本地生成Cookie。2、在不登出A的情況下，訪問危險網站B。

建一個空對象和空數組，循環遍歷需要去重的數組，判斷對象有沒有此屬性，沒有的話就給對象添加此屬性，并向空數組中push這個值。

//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)]

請參考專欄相關文章

前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

實現界面交互

提升用戶體驗

在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。也就是說是在不改變UI的情況下，對網站進行優化，在擴展的同時保持一致的UI。

減少代碼間的耦合

讓代碼保持彈性

嚴格按規范編寫代碼

設計可擴展的API

代替舊有的框架、語言(如VB)

增強用戶體驗

通常來說對于速度的優化也包含在重構中

先期團隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等；

編寫習慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；

標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）；

頁面進行標注（例如 頁面 模塊 開始和結束）；

CSS跟HTML 分文件夾并行存放，命名都得統一（例如style.css）；

JS 分文件夾存放 命名以該JS功能為準的英文翻譯。

圖片采用整合的 images.png png8 格式文件使用盡量整合在一起使用方便將來的管理