閉包的理解

使用閉包主要是為了設計私有的方法和變量。優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露

Cookie

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

1.IE6或更低版本最多20個cookie2.IE7和之后的版本最后可以有50個cookie。3.Firefox最多50個cookie4.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重疊：

要阻止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各種居中

水平居中

• inline-block配合text-align

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

• table配合margin

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

• abasolute配合transform

.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;}

• absolute配合transform

.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;}

總結

以上是生活随笔為你收集整理的收集一些常用的前端知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。