一些基礎的前端技術面試問題

一些基礎的前端技術面試問題

說說你對閉包的理解

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

內存泄露：內存空間使用完畢以後未回收；

閉包有三個特性：

1.函數嵌套函數 2.函數內部可使用外部的參數和變量 3.參數和變量不會被垃圾回收機制回收

請你談談Cookie的弊端

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

1.IE6或更低版本最多20個cookie
2.IE7和以後的版本最後能夠有50個cookie。
3.Firefox最多50個cookie
4.chrome和Safari沒有作硬性限制

優勢：極高的擴展性和可用性

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。

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

web storage和cookie的區別

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

除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。

可是cookie也是不能夠或缺的：cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生。

cookie 和session 的區別：

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
 二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙
    考慮到安全應當使用session。
 三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能
     考慮到減輕服務器性能方面，應當使用COOKIE。
 四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。
 五、因此我的建議：
    將登錄信息等重要信息存放爲SESSION
    其餘信息若是須要保留，能夠放在COOKIE中

CSS 相關問題

display:none和visibility:hidden的區別？

display:none  隱藏對應的元素，在文檔佈局中再也不給它分配空間。

visibility:hidden  隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

CSS中 link 和@import 的區別是？

(1) link屬於HTML標籤，而@import是CSS提供的; 
(2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題; 
(4) link方式的樣式的權重 高於@import的權重.

 

CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（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        單選框或複選框被選中。
</p></p></p></p></p></p></p></p>

position的值， relative和absolute分別是相對於誰進行定位的？

absolute 
        生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。

fixed （老IE不支持）
    生成絕對定位的元素，相對於瀏覽器窗口進行定位。 

relative 
    生成相對定位的元素，相對於其在普通流中的位置進行定位。 

static  默認值。沒有定位，元素出如今正常的流中

CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增長了更多的CSS選擇器  多背景 rgba 
媒體查詢，多欄佈局
border-image

XML和JSON的區別？

(1).數據體積方面。
JSON相對於XML來說，數據的體積小，傳遞的速度更快些。
(2).數據交互方面。
JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。
(3).數據描述方面。
JSON對數據的描述性比XML較差。
(4).傳輸速度方面。
JSON的速度要遠遠快於XML。

 

解釋CSS sprites

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。

　　優勢

　　　　1.利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；

　　　　2.CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。

　　　　3.解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。

　　　　4.更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。

　　缺點

　　　　1.在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現沒必要要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂；

　　　　2.CSS Sprites在開發的時候比較麻煩，你要經過 photoshop或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣；

　　　　3.CSS Sprites在維護的時候比較麻煩，若是 頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，若是在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增長了，還要改動css。

html部分

 

Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。 

（2）、嚴格模式的排版和 JS 運做模式是  以該瀏覽器支持的最高標準運行。

（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

　你知道多少種Doctype文檔類型？

該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
 HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
 XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
 Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

常見兼容性問題？

* 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 10px;} 

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

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

  首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。 
  接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

  css
      .bb{
       background-color:#f1ee18;/*全部識別*/
      .background-color:#00deff\9; /*IE六、七、8識別*/
      +background-color:#a200ff;/*IE六、7識別*/
      _background-color:#1e0bd1;/*IE6識別*/ 
      } 

*  IE下,可使用獲取常規屬性的方法來獲取自定義屬性,
   解決方法:統一經過getAttribute()獲取自定義屬性.


* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 
  可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

* 超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

* 怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。如今可使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html="">`

* 上下margin重合問題
  ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。
  解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。

解釋下浮動和它的工做原理？清除浮動的技巧

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空標籤清除浮動。
   這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。
2.使用overflow。
   給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
3.使用after僞對象清除浮動。
   使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

浮動元素引發的問題和解決辦法？

浮動元素引發的問題：

（1）父元素的高度沒法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
（3）若第一個元素浮動，則該元素以後的元素也須要浮動，不然會影響頁面顯示的結構

解決方法： 使用CSS中的clear:both;給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

清除浮動的幾種方法：

1，額外標籤法，<div style="clear:both;"/>（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。）
2，使用after僞類

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
    }

3,設置`overflow`爲`hidden`或者auto

 

DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。

（1）建立新節點

      createDocumentFragment()    //建立一個DOM片斷

      createElement()   //建立一個具體的元素

      createTextNode()   //建立一個文本節點

（2）添加、移除、替換、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore() //在已有的子節點前插入一個新的子節點

（3）查找

      getElementsByTagName()    //經過標籤名稱

      getElementsByName()   
      getElementById()    //經過元素Id，惟一性

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

* 拖拽釋放(Drag and drop) API 
  語義化更好的內容標籤（header,nav,footer,aside,article,section）
  音頻、視頻API(audio,video)
  畫布(Canvas) API
  地理(Geolocation) API
  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
  sessionStorage 的數據在瀏覽器關閉後自動刪除

  表單控件，calendar、date、time、email、url、search  
  新的技術webworker, websocket, Geolocation

* 移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 
如何區分： DOCTYPE聲明\新增的結構元素\功能元素

iframe的優缺點？

1.`<iframe>`優勢：
    解決加載緩慢的第三方內容如圖標和廣告等的加載問題
    Security sandbox
    並行加載腳本
2.`<iframe>`的缺點：
    *iframe會阻塞主頁面的Onload事件；
    *即時內容爲空，加載也須要時間
    *沒有語意 
</iframe></iframe>

 

線程與進程的區別

一個程序至少有一個進程,一個進程至少有一個線程. 
線程的劃分尺度小於進程，使得多線程程序的併發性高。 
另外，進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率。 
線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。 
從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。

 

null和undefined的區別？

null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。

當聲明的變量還未被初始化時，變量的默認值爲undefined。 null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。

undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。典型用法是：

（1）變量被聲明瞭，但沒有賦值時，就等於undefined。

（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。

（3）對象沒有賦值的屬性，該屬性的值爲undefined。

（4）函數沒有返回值時，默認返回undefined。

null表示"沒有對象"，即該處不該該有值。典型用法是：

（1） 做爲函數的參數，表示該函數的參數不是對象。

（2） 做爲對象原型鏈的終點。

new操做符具體幹了什麼呢?

一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
   二、屬性和方法被加入到 this 引用的對象中。
   三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

js延遲加載的方式有哪些？

defer和async、動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）、按需異步載入js

documen.write和 innerHTML的區別

document.write只能重繪整個頁面

innerHTML能夠重繪頁面的一部分

 

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

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。
    一、實現界面交互
    二、提高用戶體驗
    三、有了Node.js，前端能夠實現服務端的一些事情


前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

 參與項目，快速高質量完成實現效果圖，精確到1px；

 與團隊成員，UI設計，產品經理的溝通；

 作好的頁面結構，頁面重構和用戶體驗；

 處理hack，兼容、寫出優美的代碼格式；

 針對服務器的優化、擁抱最新前端技術。

你有哪些性能優化的方法？

（1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。

  （2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

  （3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。

  （4） 當須要設置的樣式不少時設置className而不是直接操做style。

  （5） 少用全局變量、緩存DOM節點查找的結果。

  （6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

  （7） 圖片預加載，將樣式表放在頂部，將腳本放在底部。

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

分爲4個步驟：
    （1）當發送一個URL請求時，無論這個URL是Web頁面的URL仍是Web頁面上每一個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器得到請求對應的IP地址。
    （2）瀏覽器與遠程Web服務器經過TCP三次握手協商來創建一個TCP/IP鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
    （3）一旦TCP/IP鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。
    （4）此時，Web服務器提供資源服務，客戶端開始下載資源。

請求返回後，便進入了咱們關注的前端模塊，簡單來講，瀏覽器會解析HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，而javascript又能夠根據DOM API操做DOM

平時如何管理你的項目？

先期團隊必須肯定好全局樣式（global.css），編碼模式(utf-8) 等；

        編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

        標註樣式編寫，各模塊都及時標註（標註關鍵樣式調用的地方）；

        CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；

        JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。

        圖片採用整合的 images.png格式 儘可能整合在一塊兒使用方便未來的管理

 

javascript對象的幾種建立方式

1，工廠模式
2，構造函數模式
3，原型模式
4，構造函數和原型混合模式
5，動態原型模式
6，寄生構造函數模式
7，穩妥構造函數模式混合

javascript繼承的6種方法

1，原型鏈繼承
2，借用構造函數繼承
3，組合繼承(原型+借用構造)
4，原型式繼承
5，寄生式繼承
6，寄生組合式繼承

ajax過程

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.

(3)設置響應HTTP請求狀態變化的函數.

(4)發送HTTP請求.

(5)獲取異步調用返回的數據.

(6)使用JavaScript和DOM實現局部刷新.

 

異步加載和延遲加載

異步:
　　1.異步加載的方案： 動態插入script標籤
　　2.經過ajax去獲取js代碼，而後經過eval執行
　　3.script標籤上添加defer或者async屬性
　　4.建立並插入iframe，讓它異步執行js
延遲：
　　5.延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的。

前端安全問題？

sql注入原理

就是經過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器，執行惡意的SQL命令。

總的來講有如下幾點：

1.永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙"-"進行轉換等。
2.永遠不要使用動態拼裝SQL，可使用參數化的SQL或者直接使用存儲過程進行數據查詢存取。
3.永遠不要使用管理員權限的數據庫鏈接，爲每一個應用使用單獨的權限有限的數據庫鏈接。
4.不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息。

XSS原理及防範

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裏插入惡意html標籤或者javascript代碼。好比：攻擊者在論壇中放一個 看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單， 當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點。

XSS防範方法

1.代碼裏對用戶輸入的地方和變量都須要仔細檢查長度和對」<」,」>」,」;」,」’」</」,」>等字符作過濾；其次任何內容寫到頁面以前都必須加以encode，避免不當心把html tag 弄出來。這一個層面作好，至少能夠堵住超過一半的XSS 攻擊。
2.避免直接在cookie 中泄露用戶隱私，例如email、密碼等等。

3.經過使cookie 和系統ip 綁定來下降cookie 泄露後的危險。這樣攻擊者獲得的cookie 沒有實際價值，不可能拿來重放。
4.儘可能採用POST 而非GET 提交表單

XSS與CSRF有什麼區別嗎？

XSS是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包。CSRF是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。

要完成一次CSRF攻擊，受害者必須依次完成兩個步驟：

　　1.登陸受信任網站A，並在本地生成Cookie。 　　2.在不登出A的狀況下，訪問危險網站B。

CSRF的防護

1.服務端的CSRF方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數。 2.使用驗證碼

請解釋一下 JavaScript 的同源策略。

概念:同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。

這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。 指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

爲何要有同源限制？

咱們舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。

什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？

ECMAscript 5添加了第二種運行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下運行。

設立"嚴格模式"的目的，主要有如下幾個：

- 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;
- 消除代碼運行的一些不安全之處，保證代碼運行的安全；
- 提升編譯器效率，增長運行速度；
- 爲將來新版本的Javascript作好鋪墊。

注：通過測試IE6,7,8,9均不支持嚴格模式。

缺點： 如今網站的JS 都會進行壓縮，一些文件用了嚴格模式，而另外一些沒有。這時這些原本是嚴格模式的文件，被 merge 後，這個串就到了文件的中間，不只沒有指示嚴格模式，反而在壓縮後浪費了字節。