前端面試題集錦
整理了一些關於前端的面試題
HTML&CSS
1.請描述一下 cookie，sessionStorage 和 localStorage 的區別？
cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
cookie數據始終在同源的http請求中攜帶（即使不需要），也會在瀏覽器和服務器間來回傳遞。
sessionStorage 和 localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie 數據大小不能超過4k 。
sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有效期時長：
localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
2.iframe有那些缺點？
iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
優點：局部刷新 不用每次請求就刷新整個頁面。
3.如何實現瀏覽器內多個標籤頁之間的通信?
WebSocket、SharedWorker
也可以調用localstorge、cookies等本地存儲方式。
localstorge另一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信。
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常。
4.如何在頁面上實現一個圓形的可點擊區域？
（1）map+area或者svg
（2）border-radius
（3）純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標座標等等
5.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？
（1）有兩種： IE 盒子模型、W3C 盒子模型。
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)。
（3）區 別： IE的content部分把 border 和 padding計算了進去。
6.CSS優先級算法如何計算？
優先級就近原則，同權重情況下樣式定義最近者爲準;
載入樣式以最後載入的定位爲準;
優先級爲:
!important > id > class > tag
important比內聯優先級高(style)
7.爲什麼要使用CSS sprites（精靈）
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-position”的組合進行背景定位，這樣可以減少很多圖片請求的開銷，因爲請求耗時比較長；請求雖然可以併發，但是如果請求太多會給服務器增加很大的壓力。（性能優化）
8.display:none 和 visibility:hidden的區別？
display:none 隱藏對應的元素，在文檔佈局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在 ，不佔位。
visibility:hidden 隱藏對應的元素，但是在文檔佈局中仍保留原來的空間，佔位。
9.position的absolute與fixed區別
absolute 浮動定位是相對於父級中設置position爲relative或者absolute最近的父級元素（往上找不到父集的relation 就以html定位）。
fixed浮動定位是相對於瀏覽器視窗的。
10.IE 8以下版本的瀏覽器中的盒模型有什麼不同？
IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框
JavaScript
1.JS數組去重
以下是展示三種方法：
Array.prototype.unique1 = function () {
var n = []; //一個新的臨時數組
for (var i = 0; i < this.length; i++) //遍歷當前數組
{
//如果當前數組的第i已經保存進了臨時數組，那麼跳過，
//否則把當前項push到臨時數組裏面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
Array.prototype.unique2 = function()
{
var n = {},r=[]; //n爲hash表，r爲臨時數組
for(var i = 0; i < this.length; i++) //遍歷當前數組
{
if (!n[this[i]]) //如果hash表中沒有當前項
{
n[this[i]] = true; //存入hash表
r.push(this[i]); //把當前數組的當前項push到臨時數組裏面
}
}
return r;
}
Array.prototype.unique3 = function()
{
var n = [this[0]]; //結果數組
for(var i = 1; i < this.length; i++) //從第二項開始遍歷
{
//如果當前數組的第i項在當前數組中第一次出現的位置不是i，
//那麼表示第i項是重複的，忽略掉。否則存入結果數組
if (this.indexOf(this[i]) == i) n.push(this[i]);
2.js操作獲取和設置cookie
//創建cookie
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + ‘=’ + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += ‘; expires=’ + expires;
}
if (path) {
cookieText += ‘; expires=’ + expires;
}
if (domain) {
cookieText += ‘; domain=’ + domain;
}
if (secure) {
cookieText += ‘; secure’;
}
document.cookie = cookieText;
}
//獲取cookie
function getCookie(name) {
var cookieName = encodeURIComponent(name) + ‘=’;
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(’;’, cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
}
3.ajax 有那些優缺點?如何解決跨域問題?
（Q1）
優點：
（1）通過異步模式，提升了用戶體驗.
（2）優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少了帶寬佔用.
（3）Ajax在客戶端運行，承擔了一部分本來由服務器承擔的工作，減少了大用戶量下的服務器負載。
（4）Ajax可以實現動態不刷新（局部刷新）
缺點：
（1）安全問題 AJAX暴露了與服務器交互的細節。
（2）對搜索引擎的支持比較弱。
（3）不容易調試。
（Q2）jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面。
4.JavaScript原型，原型鏈 ? 有什麼特點？
（1）原型對象也是普通的對象，是對象一個自帶隱式的 proto 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不爲null的話，我們就稱之爲原型鏈。
（2）原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。
5.GET和POST的區別，何時使用POST？
GET：一般用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符
POST：一般用於修改服務器上的資源，對所發送的信息沒有限制。
GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，
也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
然而，在以下情況中，請使用 POST 請求：
無法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
6.請解釋一下 JavaScript 的同源策略
概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。
這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
爲什麼要有同源限制？
我們舉例說明：比如一個黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登錄時，他的頁面就可以通過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。
7.Flash、Ajax各自的優缺點，在使用中如何取捨？
Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。
Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。
共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操作DOM
8.什麼是閉包？
閉包，官方對閉包的解釋是：一個擁有許多變量和綁定了這些變量的環境的表達式（通常是一個函數），因而這些變量也是該表達式的一部分。閉包的特點：
（1）作爲一個函數變量的一個引用，當函數返回時，其處於激活狀態。
（2） 一個閉包就是當一個函數返回時，一個沒有釋放資源的棧區。
簡單的說，Javascript允許使用內部函數—即函數定義和函數表達式位於另一個函數的函數體內。而且，這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被調用時，就會形成閉包。
9.javascript裏面的繼承怎麼實現，如何避免原型鏈上面的對象共享
用構造函數和原型鏈的混合模式去實現繼承，避免對象共享可以參考經典的extend()函數，很多前端框架都有封裝的，就是用一個空函數當做中間變量
10.ajax過程
(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.
(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.
jQuery四種事件綁定方式.bind(),.live(),.delegate(),on()的區別
參考： http://blog.csdn.net/helloliuhai/article/details/19987509
個人理解：
事件委託指的就是目標自身不處理事件，委託給其父元素或祖先元素，甚至是根元素（document）
bind 的優點和缺點
優點：
這個方法提供了一種在各種瀏覽器之間對事件處理的兼容性解決方案
非常方便簡單的綁定事件到元素上
.click(), .hover()…這些非常方便的事件綁定，都是bind的一種簡化處理方式
對於利用ID選出來的元素是非常好的，不僅僅是很快的可以hook上去(因爲一個頁面只有一個id),而且當事件發生時，handler可以立即被執行(相對於後面的live, delegate)實現方式
缺點：
它會綁定事件到所有的選出來的元素上
它不會綁定到在它執行完後動態添加的那些元素上
當元素很多時，會出現效率問題
當頁面加載完的時候，你纔可以進行bind()，所以可能產生效率問題
.live() 的優點和缺點
優點：
這裏僅有一次的事件綁定，綁定到document上而不像.bind()那樣給所有的元素挨個綁定
那些動態添加的elemtns依然可以觸發那些早先綁定的事件，因爲事件真正的綁定是在document上
你可以在document ready之前就可以綁定那些需要的事件
缺點：
從1.7開始已經不被推薦了，所以你也要開始逐步淘汰它了。
Chaining沒有被正確的支持
當使用event.stopPropagation()是沒用的，因爲都要到達document
因爲所有的selector/event都被綁定到document, 所以當我們使用matchSelector方法來選出那個事件被調用時，會非常慢
當發生事件的元素在你的DOM樹中很深的時候，會有performance問題
.delegate() 的優點和缺點
優點：
你可以選擇你把這個事件放到那個元素上了
chaining被正確的支持了
jQuery仍然需要迭代查找所有的selector/event data來決定那個子元素來匹配，但是因爲你可以決定放在那個根元素上，所以可以有效的減小你所要查找的元素。
可以用在動態添加的元素上
缺點：
需要查找那個那個元素上發生了那個事件了，儘管比document少很多了，不過，你還是得浪費時間來查找。
注：.delegate() 比 .live() 好
.On()的優點和缺點
優點：
提供了一種統一綁定事件的方法
仍然提供了.delegate()的優點，當然如果需要你也可以直接用.bind()
缺點：
也許會對你產生一些困擾，因爲它隱藏了一前面我們所介紹的三種方法的細節。
結論：
用.bind()的代價是非常大的，它會把相同的一個事件處理程序hook到所有匹配的DOM元素上
不要再用.live()了，它已經不再被推薦了，而且還有許多問題
.delegate()會提供很好的方法來提高效率，同時我們可以添加一事件處理方法到動態添加的元素上。
我們可以用.on()來代替上述的3種方法
如何理解閉包？
1.閉包的概念
各種專業文獻上的“閉包”（closure）定義非常抽象，很難看懂。我的理解是，閉包就是能夠讀取其他函數內部變量的函數。
由於在Javascript語言中，只有函數內部的子函數才能讀取局部變量，因此可以把閉包簡單理解成“定義在一個函數內部的函數”。
所以，在本質上，閉包就是將函數內部和函數外部連接起來的一座橋樑。
2.閉包的用途
閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。
跨域請求資源的方法有哪些？
1.單向跨域 jsonp
2.雙向跨域 document.domain實現跨域
談談垃圾回收機制方式及內存管理
開發過程中遇到的內存泄露情況，如何解決的？
其他
1.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什麼？
（1）查找瀏覽器緩存
（2）DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
（3）進行HTTP協議會話
（4）客戶端發送報頭(請求報頭)
（5）服務器回饋報頭(響應報頭)
（6）html文檔開始下載
（7）文檔樹建立，根據標記請求所需指定MIME類型的文件
（8）文件顯示
2.爲什麼換工作？
3.你常用的開發工具是什麼，爲什麼？
4.對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
5.加班的看法？
加班就像借錢，原則應當是------救急不救窮