近期整理前端面試題，供你們參考

整理了一些關於前端的面試題

HTML&CSS

1.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
有期時間：
localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
1
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最近的父級元素
fixed浮動定位是相對於瀏覽器視窗的

10.IE 8如下版本的瀏覽器中的盒模型有什麼不一樣？
IE8如下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框

JavaScript


1.JS數組去重
如下是展現三種方法：

1. <font size="3">Array.prototype.unique1 = function () {
2.   var n = []; //一個新的臨時數組
3.   for (var i = 0; i < this.length; i++) //遍歷當前數組
4.   {
5.     //若是當前數組的第i已經保存進了臨時數組，那麼跳過，
6.     //不然把當前項push到臨時數組裏面
7.     if (n.indexOf(this[i]) == -1) n.push(this[i]);
8.   }
9.   return n;
10. }
12. Array.prototype.unique2 = function()
13. {
14.     var n = {},r=[]; //n爲hash表，r爲臨時數組
15.     for(var i = 0; i < this.length; i++) //遍歷當前數組
16.     {
17.         if (!n[this[i]]) //若是hash表中沒有當前項
18.         {
19.             n[this[i]] = true; //存入hash表
20.             r.push(this[i]); //把當前數組的當前項push到臨時數組裏面
21.         }
22.     }
23.     return r;
24. }
26. Array.prototype.unique3 = function()
27. {
28.     var n = [this[0]]; //結果數組
29.     for(var i = 1; i < this.length; i++) //從第二項開始遍歷
30.     {
31.         //若是當前數組的第i項在當前數組中第一次出現的位置不是i，
32.         //那麼表示第i項是重複的，忽略掉。不然存入結果數組
33.         if (this.indexOf(this[i]) == i) n.push(this[i]);
34.     }
35.     return n;
36. }</font>

2.js操做獲取和設置cookie

1. <font size="3">//建立cookie
2. function setCookie(name, value, expires, path, domain, secure) {
3.     var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
4.     if (expires instanceof Date) {
5.         cookieText += '; expires=' + expires;
6.     }
7.     if (path) {
8.         cookieText += '; expires=' + expires;
9.     }
10.     if (domain) {
11.         cookieText += '; domain=' + domain;
12.     }
13.     if (secure) {
14.         cookieText += '; secure';
15.     }
16.     document.cookie = cookieText;
17. }
19. //獲取cookie
20. function getCookie(name) {
21.     var cookieName = encodeURIComponent(name) + '=';
22.     var cookieStart = document.cookie.indexOf(cookieName);
23.     var cookieValue = null;
24.     if (cookieStart > -1) {
25.         var cookieEnd = document.cookie.indexOf(';', cookieStart);
26.         if (cookieEnd == -1) {
27.             cookieEnd = document.cookie.length;
28.         }
29.         cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
30.     }
31.     return cookieValue;
32. }
34. //刪除cookie
35. function unsetCookie(name) {
36.     document.cookie = name + "= ; expires=" + new Date(0);
37. }</font>

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實現局部刷新.

其餘

1.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
（1）查找瀏覽器緩存
（2）DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
（3）進行HTTP協議會話
（4）客戶端發送報頭(請求報頭)
（5）服務器回饋報頭(響應報頭)
（6）html文檔開始下載
（7）文檔樹創建，根據標記請求所需指定MIME類型的文件
（8）文件顯示

2.爲何換工做？
本身想

3.你經常使用的開發工具是什麼，爲何？
本身想

4.對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
本身編

5.加班的見解？
加班就像借錢，原則應當是------救急不救窮