使用閉包主要是爲了設計私有的方法和變量。 優勢是能夠避免全局變量的污染, 缺點是閉包會常駐內存,會增大內存使用量,使用不當很容易形成內存泄露
第一:每一個特定的域名下最多生成20個cookiecss
1.IE6或更低版本最多20個cookie 2.IE7和以後的版本最後能夠有50個cookie。 3.Firefox最多50個cookie 4.chrome和Safari沒有作硬性限制
第二:cookie的最大大約爲4096字節,爲了兼容性,通常不能超過4095字節html
優勢:極高的擴展性和可用性前端
1.經過良好的編程,控制保存在cookie中的session對象的大小。 2.經過加密和安全傳輸技術(SSL),減小cookie被破解的可能性。 3.只在cookie中存放不敏感數據,即便被盜也不會有重大損失。 4.控制cookie的生命期,使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。
缺點:web
1.`Cookie`數量和長度的限制。每一個domain最多隻能有20條cookie,每一個cookie長度不能超過4KB,不然會被截掉。 2.安全性問題。若是cookie被人攔截了,那人就能夠取得全部的session信息。即便加密也與事無補,由於攔截者並不須要知道cookie的意義,他只要原樣轉發cookie就能夠達到目的了。 3.有些狀態不可能保存在客戶端。例如,爲了防止重複提交表單,咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端,那麼它起不到任何做用。
本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。 所以sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲
用於持久化的本地存儲,除非主動刪除數據,不然數據是永遠不會過時的
Cookie的大小是受限的,而且每次你請求一個新的頁面的時候Cookie都會被髮送過去,這樣無形中浪費了帶寬,另外cookie還須要指定做用域,不能夠跨域調用 cookie須要前端開發者本身封裝setCookie,getCookie
(1) link屬於HTML標籤,而@import是CSS提供的; (2) 頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載; (3) import只在IE5以上才能識別,而link是HTML標籤,無兼容問題; (4) link方式的樣式的權重 高於@import的權重.
box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-boxchrome
摘自連接描述編程
級格式化上下文,是CSS中的一個渲染機制,BFC就至關於一個盒子,內部的元素與外界的元素互不干擾。它不會影響外部的佈局,外部的佈局也不會影響到它.
- 內部的BOX會在垂直方向上一個接一個的放置 - 於同一個BFC的倆個相鄰的BOX的margin會發生重疊,與方向無關。 - 每一個元素的左外邊距與包含塊的左邊界相接觸(從左到右),即便浮動元素也是如此 - BFC的區域不會與float的元素區域重疊 - 計算BFC的高度時,浮動子元素也參與計算 - BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素,反之亦然
要阻止margin重疊,只要將倆個元素別放在一個BFC中便可
使得父元素包含子元素,常見的方式是爲父元素設置overflow:hidden或者浮動父元素。根本緣由在於建立BFC的元素,子浮動元素也會參與其高度計算,即不會產生高度塌陷問題
與浮動元素相鄰的已生成BFC的元素不能與浮動元素互相覆蓋。利用該特性能夠做爲多欄佈局的一種實現方式. 特色在於左右倆欄的寬度固定,中間欄能夠根據瀏覽器寬度自適應
undefined是一個表示"無"的原始值,轉爲數值時爲NaN跨域
null是一個表示"無"的對象,轉爲數值時爲0瀏覽器
document.write只能重繪整個頁面 innerHTML能夠重繪頁面的一部分
原理緩存
HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術),經過這個文件上的解析清單離線存儲資源,這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時,瀏覽器會經過被離線存儲的數據進行頁面展現
使用安全
.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%); }
.parent{ display: table-cell; vertical-align:middle; }
absolute配合tranform
.parent{ position:relative; } .child{ position:absolute; top: 50%; transform: translateY(-50%); }
.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%); }
.parent{ display: flex; justify-content: center; }
.parent{ display: flex; align-items: center; }
.parent{ display: flex; justify-content: center; align-items: center; }