酷播亮新聞
最棒的知識補給站

常用前端知識積累

閉包的理解

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

Cookie

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

IE6或更低版本最多20個cookie

IE7和之後的版本最後可以有50個cookie。

Firefox最多50個cookie

chrome和Safari沒有做硬性限制

第二:cookie的最大大約為4096位元組,為了兼容性,一般不能超過4095位元組

優點:極高的擴展性和可用性

通過良好的編程,控制保存在cookie中的session對象的大小。

通過加密和安全傳輸技術(SSL),減少cookie被破解的可能性。

只在cookie中存放不敏感數據,即使被盜也不會有重大損失。

控制cookie的生命期,使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。

缺點:

數量和長度的限制。每個domain最多只能有20條cookie,每個cookie長度不能超過4KB,否則會被截掉。

安全性問題。如果cookie被人攔截了,那人就可以取得所有的session信息。即使加密也與事無補,因為攔截者並不需要知道cookie的意義,他只要原樣轉發cookie就可以達到目的了。

有些狀態不可能保存在客戶端。例如,為了防止重複提交表單,我們需要在伺服器端保存一個計數器。如果我們把這個計數器保存在客戶端,那麼它起不到任何作用。

瀏覽器本地存儲

sessionStorage

本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。 因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲

localStorage

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

web storage和cookie的區別

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

link 和@import 的區別是

link屬於HTML標籤,而@import是CSS提供的;

頁面被載入的時,link會同時被載入,而@import引用的CSS會等到頁面被載入完再載入;

import只在IE5以上才能識別,而link是HTML標籤,無兼容問題;

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

水平居中

垂直居中

table-cell配合vertical-align

absolute配合tranform

水平+垂直居中

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

全能的flex

原文:https://segmentfault.com/a/1190000013115595


喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 JavaScript 的精彩文章:
如有侵權請來信告知:酷播亮新聞 » 常用前端知識積累