閉包的理解

使用閉包主要是為了設計私有的方法和變數。 優點是可以避免全域性變數的汙染， 缺點是閉包會常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體洩露

Cookie

• 第一：每個特定的域名下最多生成20個cookie

1. IE6或更低版本最多20個cookie
2. IE7和之後的版本最後可以有50個cookie。
3. Firefox最多50個cookie
4. chrome和Safari沒有做硬性限制

• 第二：cookie的最大大約為4096位元組，為了相容性，一般不能超過4095位元組

優點:極高的擴充套件性和可用性

1. 通過良好的程式設計，控制儲存在cookie中的session物件的大小。
2. 通過加密和安全傳輸技術（SSL），減少cookie被破解的可能性。
3. 只在cookie中存放不敏感資料，即使被盜也不會有重大損失。
4. 控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。

缺點:

1. Cookie數量和長度的限制。每個domain最多隻能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2. 安全性問題。如果cookie被人攔截了，那人就可以取得所有的session資訊。即使加密也與事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
3. 有些狀態不可能儲存在客戶端。例如，為了防止重複提交表單，我們需要在伺服器端儲存一個計數器。如果我們把這個計數器儲存在客戶端，那麼它起不到任何作用。

瀏覽器本地儲存

sessionStorage

本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。 因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存

localStorage

用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的

web storage和cookie的區別

Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了頻寬，另外cookie還需要指定作用域，不可以跨域呼叫 cookie需要前端開發者自己封裝setCookie，getCookie

link 和@import 的區別是

1. link屬於HTML標籤，而@import是CSS提供的;
2. 頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
3. import只在IE5以上才能識別，而link是HTML標籤，無相容問題;
4. link方式的樣式的權重 高於@import的權重.

box-sizing屬性

box-sizing屬性主要用來控制元素的盒模型的解析模式。預設值是content-box

• content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設定width/height屬性指的是content部分的寬/高
• border-box：讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設定width/height屬性指的是border + padding + content

BFC規範的理解

級格式化上下文，是CSS中的一個渲染機制，BFC就相當於一個盒子，內部的元素與外界的元素互不干擾。它不會影響外部的佈局，外部的佈局也不會影響到它.

建立BFC

• float的值不是none
• position 的值不是static或者relative
• display的值是inline-block,table-cell,flex,table-caption或者inline-flex
• overflow的值不是visible

BFC的特性

• 內部的BOX會在垂直方向上一個接一個的放置
• 於同一個BFC的倆個相鄰的BOX的margin會發生重疊，與方向無關。
• 每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此
• BFC的區域不會與float的元素區域重疊
• 計算BFC的高度時，浮動子元素也參與計算
• BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之亦然

BFC在佈局中的應用

要阻止margin重疊，只要將倆個元素別放在一個BFC中即可

使得父元素包含子元素，常見的方式是為父元素設定overflow：hidden或者浮動父元素。根本原因在於建立BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題

與浮動元素相鄰的已生成BFC的元素不能與浮動元素互相覆蓋。利用該特性可以作為多欄佈局的一種實現方式. 特點在於左右倆欄的寬度固定，中間欄可以根據瀏覽器寬度自適應

null和undefined的區別

undefined

undefined是一個表示"無"的原始值，轉為數值時為NaN

• 變數被宣告瞭，但沒有賦值時，就等於undefined
• 呼叫函式時，應該提供的引數沒有提供，該引數等於undefined
• 物件沒有賦值的屬性，該屬性的值為undefined
• 函式沒有返回值時，預設返回undefined

null

null是一個表示"無"的物件，轉為數值時為0

• 作為函式的引數，表示該函式的引數不是物件
• 作為物件原型鏈的終點

documen.write和 innerHTML的區別

document.write只能重繪整個頁面 innerHTML可以重繪頁面的一部分

HTML5的離線儲存

原理

HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示

使用

• 在文件的 html 標籤設定 manifest 屬性，如 manifest="/offline.appcache"
• 在專案中新建 manifest 檔案，manifest 檔案的命名建議：xxx.appcache
• 在 web 伺服器配置正確的 MIME-type，即 text/cache-manifest

css各種居中

水平居中

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

.child{
    display:table;
    margin: 0 auto;
}

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform: translateX(-50%);
}

垂直居中

• table-cell配合vertical-align

.parent{
    display: table-cell;
    vertical-align:middle;
}

• absolute配合tranform

.parent{
    position:relative;
}
.child{
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
}

水平+垂直居中

• inline-block配合text-align加上table-cell配合vertical-align

.parent{
    display: table-cell;
    vertical-align:middle;
    text-align:center;
}
.child{
    display: inline-block;
}

.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

全能的flex

.parent{
    display: flex;
    justify-content: center;
}

.parent{
    display: flex;
    align-items: center;
}

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}