總結面試最喜歡出的前端面試題，不看就錯過了高薪資

說說你對閉包的理解

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

閉包有三個特性：

• 函數嵌套函數

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

• 參數和變數不會被垃圾回收機制回收請你談談Cookie的弊端

請你談談Cookie的弊端

對於web前端的學習有不懂的，或者不知道學習路線，不知道學習方法，不知道該如何紮實能找到工作的朋友，我還是要推薦下我自己建的前端學習群：477149581，首先你要是前端黨，其次不管你是小白還是大牛，我都挺歡迎，小白嘛，主動點多問問題也就學好了，群里每天分享乾貨，包括我自己最近花了一星期整理的一份適合2017年自學的最新web前端資料，送給大家，歡迎初學和進階中的小夥伴。

cookie雖然在持久保存客戶端數據提供了方便，分擔了伺服器存儲的負擔，但還是有很多局限性的。 第一：每個特定的域名下最多生成20個cookie

1.IE6或更低版本最多20個cookie

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

3.Firefox最多50個cookie

4.chrome和Safari沒有做硬性限制

IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。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.有些狀態不可能保存在客戶端。例如，為了防止重複提交表單，我們需要在伺服器端保存一個計數器。如果我們把這個計數器保存在客戶端，那麼它起不到任何作用。

瀏覽器本地存儲在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。

web storage和cookie的區別

Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。

除此之外，Web Storage擁有setItemgetItemremoveItemclear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。

但是cookie也是不可以或缺的：cookie的作用是與伺服器進行交互，作為HTTP規範的一部分而存在 ，而Web Storage僅僅是為了在本地「存儲」數據而生

瀏覽器的支持除了IE７及以下不支持外，其他標準瀏覽器都完全支持(ie及FF需在web伺服器里運行)，值得一提的是IE總是辦好事，例如IE7、IE6中的userData其實就是javascript本地存儲的解決方案。通過簡單的代碼封裝可以統一到所有的瀏覽器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

cookie 和session 的區別：

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

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

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

4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。

5、所以個人建議：

將登陸信息等重要信息存放為SESSION

其他信息如果需要保留，可以放在COOKIE中

position:absolute和float屬性的異同

• A：共同點：

  對內聯元素設置float和absolute屬性，可以讓元素脫離文檔流，並且可以設置其寬高。

• B：不同點：float仍會佔據位置，position會覆蓋文檔流中的其他元素。

介紹一下box-sizing屬性？

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

content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border+ padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高

CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3新增偽類有那些？

• id選擇器（ # myid）

• 類選擇器（.myclassname）

• 標籤選擇器（div, h1, p）

• 相鄰選擇器（h1 + p）

• 子選擇器（ul > li）

• 後代選擇器（li a）

• 通配符選擇器（ * ）

• 屬性選擇器（a[rel = "external"]）

• 偽類選擇器（a: hover, li:nth-child）

可繼承的樣式： font-size font-family color, text-indent;

不可繼承的樣式：border padding margin width height ;

CSS3新增偽類舉例：

• p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。

• p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。

• p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。

• p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。

• p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。

• :enabled :disabled 控制表單控制項的禁用狀態。

• :checked 單選框或複選框被選中。

XML和JSON的區別？

(1).數據體積方面。

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

(2).數據交互方面。

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

(3).數據描述方面。

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

(4).傳輸速度方面。

JSON的速度要遠遠快於XML。

常見兼容性問題？

• png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段腳本處理.

• 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

• IE6雙邊距bug:塊屬性標籤float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。

• 浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;}

這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)

• 漸進識別的方式，從總體中逐漸排除局部。

css

.bb{

background-color:#f1ee18;/*所有識別*/

.background-color:#00deff9; /*IE6、7、8識別*/

+background-color:#a200ff;/*IE6、7識別*/

_background-color:#1e0bd1;/*IE6識別*/

}

超鏈接訪問過後hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

• 上下margin重合問題

ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。

解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。