轉：前端開發面試知識點大綱：

時間 2019-11-20

原文原文鏈接

http://blog.csdn.net/niuyaotian/article/details/51253615javascript

前端開發面試知識點大綱：

HTML&CSS：  對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML五、CSS三、移動端適應。

JavaScript：   數據類型、面向對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。

其餘：  HTTP、安全、正則、優化、重構、響應式、移動端、團隊協做、可維護、SEO、UED、架構、職業生涯

1.請你談談Cookie的弊端

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

和 會清理近期最少使用的，會隨機清理。IEOperacookieFirefoxcookie

cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。html

IE 提供了一種存儲能夠持久化用戶數據，叫作uerData，從IE5.0就開始支持。每一個數據最多128K，每一個域名下最多1M。這個持久化數據放在緩存中，若是緩存沒有清理，那麼會一直存在。前端

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


缺點：


2.瀏覽器本地存儲

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

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

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

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

3.web storage和cookie的區別

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

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

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

瀏覽器的支持除了IE７及如下不支持外，其餘標準瀏覽器都徹底支持(ie及FF需在web服務器裏運行)，值得一提的是IE老是辦好事，例如IE七、IE6中的UserData其實就是JavaScript本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web storage。

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

CSS 相關問題

display:none和visibility:hidden的區別？


CSS中 link 和@import 的區別是？

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

position的absolute與fixed共同點與不一樣點


介紹一下CSS的盒子模型？

1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

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 ;

    *   優先級就近原則，同權重狀況下樣式定義最近者爲準;

    *   載入樣式以最後載入的定位爲準;

優先級爲:


   !important >  id > class > tag  

   important 比 內聯優先級高,但內聯比 id 要高

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        單選框或複選框被選中。

列出display的值，說明他們的做用。position的值， relative和absolute分別是相對於誰進行定位的？


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 
在CSS3中惟一引入的僞元素是::selection.
媒體查詢，多欄佈局
border-image

爲何要初始化CSS樣式。

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

    固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

    淘寶的樣式初始化： 
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }

對BFC規範的理解？


解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。


html部分

說說你對語義化的理解？


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

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

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

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

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

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


HTML與XHTML——兩者有什麼區別

區別：
1.全部的標記都必需要有一個相應的結束標記
2.全部標籤的元素和屬性的名字都必須使用小寫
3.全部的XML標記都必須合理嵌套
4.全部的屬性必須用引號""括起來
5.把全部<和&特殊符號用編碼表示
6.給全部屬性賦一個值
7.不要在註釋內容中使「--」
8.圖片必須有說明文字

常見兼容性問題？

* 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會識別)

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

  首先，巧妙的使用「\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()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性. 
   解決方法:統一經過getAttribute()獲取自定義屬性.

* IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性; 
  Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

* 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。
* ie6對png圖片格式支持很差(引用一段腳本處理)

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

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

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

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

解決方法：

使用中的;屬性來清除元素的浮動可解決二、3問題，對於問題1，添加以下樣式，給父元素添加樣式：CSSclear:bothclearfix

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

清除浮動的幾種方法：

IE 8如下版本的瀏覽器中的盒模型有什麼不一樣


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


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新標籤：

* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
  能夠利用這一特性讓這些瀏覽器支持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事件；

    *即時內容爲空，加載也須要時間
    *沒有語意

如何實現瀏覽器內多個標籤頁之間的通訊?


webSocket如何兼容低瀏覽器？


線程與進程的區別


你如何對網站的文件和資源進行優化？


請說出三種減小頁面加載時間的方法。


你都使用哪些工具來測試代碼的性能？


什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

null和undefined的區別？

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

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

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

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


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

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

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

JSON 的瞭解？


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


如何解決跨域問題?

具體參見：詳解js跨域問題

documen.write和 innerHTML的區別


.call() 和 .apply() 的區別和做用？

做用：動態改變某個類的某個方法的運行環境。
區別參見：JavaScript學習總結（四）function函數部分

哪些操做會形成內存泄漏？

詳見：詳解js變量、做用域及內存

JavaScript中的做用域與變量聲明提高？

詳見：詳解JavaScript函數模式

如何判斷當前腳本運行在瀏覽器仍是node環境中？


其餘問題？

你遇到過比較難的技術問題是？你是如何解決的？

常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？

列舉IE 與其餘瀏覽器不同的特性？

99%的網站都須要被重構是那本書上寫的？


什麼叫優雅降級和漸進加強？

詳見：css學習概括總結（一）

WEB應用從服務器主動推送Data到客戶端有那些方式？

對Node的優勢和缺點提出了本身的見解？


除了前端之外還了解什麼其它技術麼？你最最厲害的技能是什麼？

你經常使用的開發工具是什麼，爲何？

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


你在如今的團隊處於什麼樣的角色，起到了什麼明顯的做用？

你認爲怎樣纔是全端工程師（Full Stack developer）？

介紹一個你最得意的做品吧？

項目中遇到什麼問題？如何解決？

你的優勢是什麼？缺點是什麼？

如何管理前端團隊?

最近在學什麼？能談談你將來3，5年給本身的規劃嗎？

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

（詳情請看雅虎14條性能優化原則）。


http狀態碼有那些？分別表明是什麼意思？

詳情：http://segmentfault.com/blog/trigkit4/1190000000691919

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

詳情：從輸入 URL 到瀏覽器接收的過程當中發生了什麼事情？

平時如何管理你的項目？


說說最近最流行的一些東西吧？常去哪些網站？


javascript對象的幾種建立方式


javascript繼承的6種方法

詳情：JavaScript繼承方式詳解

ajax過程

詳情：JavaScript學習總結（七）Ajax和Http狀態字

異步加載和延遲加載


前端安全問題？


ie各版本和chrome能夠並行下載多少個資源


javascript裏面的繼承怎麼實現，如何避免原型鏈上面的對象共享


grunt， YUI compressor 和 google clojure用來進行代碼壓縮的用法。

YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具，採用Java開發。

使用方法：

//壓縮JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//壓縮CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css

詳情請見：你須要掌握的前端代碼性能優化工具

Flash、Ajax各自的優缺點，在使用中如何取捨？


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

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

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

爲何要有同源限制？

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

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

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

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

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

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

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

GET和POST的區別，什麼時候使用POST？


哪些地方會出現css阻塞，哪些地方會出現js阻塞？

js的阻塞特性：全部瀏覽器在下載JS的時候，會阻止一切其餘活動，好比其餘資源的下載，內容的呈現等等。直到JS下載、解析、執行完畢後纔開始繼續並行下載其餘資源並呈現內容。爲了提升用戶體驗，新一代瀏覽器都支持並行下載JS，可是JS下載仍然會阻塞其它資源的下載（例如.圖片，css文件等）。

因爲瀏覽器爲了防止出現JS修改DOM樹，須要從新構建DOM樹的狀況，因此就會阻塞其餘的下載和呈現。

嵌入JS會阻塞全部內容的呈現，而外部JS只會阻塞其後內容的顯示，2種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執行。

CSS怎麼會阻塞加載了？CSS原本是能夠並行下載的，在什麼狀況下會出現阻塞加載了(在測試觀察中，IE6下CSS都是阻塞加載）

當CSS後面跟着嵌入的JS的時候，該CSS就會出現阻塞後面資源下載的狀況。而當把嵌入JS放到CSS前面，就不會出現阻塞的狀況了。

根本緣由：由於瀏覽器會維持html中css和js的順序，樣式表必須在嵌入的JS執行前先加載、解析完。而嵌入的JS會阻塞後面的資源加載，因此就會出現上面CSS阻塞下載的狀況。

嵌入JS應該放在什麼位置？


Javascript無阻塞加載具體方式

將腳本放在底部。<link>仍是放在head中，用以保證在js加載前，能加載出正常顯示的頁面。<script>標籤放在</body>前。
成組腳本：因爲每一個<script>標籤下載時阻塞頁面解析過程，因此限制頁面的<script>總數也能夠改善性能。適用於內聯腳本和外部腳本。
非阻塞腳本：等頁面完成加載後，再加載js代碼。也就是，在window.onload事件發出後開始下載代碼。
（1）defer屬性：支持IE4和fierfox3.5更高版本瀏覽器
（2）動態腳本元素：文檔對象模型（DOM）容許你使用js動態建立HTML的幾乎所有文檔內容。代碼以下：

<script>
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>

此技術的重點在於：不管在何處啓動下載，文件額下載和運行都不會阻塞其餘頁面處理過程。即便在head裏（除了用於下載文件的http連接）。

閉包相關問題？

詳情請見：詳解js閉包

js事件處理程序問題？

詳情請見：JavaScript學習總結（九）事件詳解

eval是作什麼的？


寫一個通用的事件偵聽器函數?

// event(事件)工具集，來源：github.com/markyun
    markyun.Event = {
        // 頁面加載完成後
        readyEvent : function(fn) {
            if (fn==null) {
                fn=document;
            }
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = fn;
            } else {
                window.onload = function() {
                    oldonload();
                    fn();
                };
            }
        },
        // 視能力分別使用dom0||dom2||IE方式 來綁定事件
        // 參數： 操做的元素,事件名稱 ,事件處理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件類型、須要執行的函數、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEnentListener) {
                element.removeEnentListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        }, 
        // 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默認行爲
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 獲取事件目標
        getTarget : function(event) {
            return event.target || event.srcElement;
        },
        // 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；
        getEvent : function(e) {
            var ev = e || window.event;
            if (!ev) {
                var c = this.getEvent.caller;
                while (c) {
                    ev = c.arguments[0];
                    if (ev && Event == ev.constructor) {
                        break;
                    }
                    c = c.caller;
                }
            }
            return ev;
        }
    };

Node.js的適用場景？


JavaScript原型，原型鏈 ? 有什麼特色？


頁面重構怎麼操做？


WEB應用從服務器主動推送Data到客戶端有那些方式？

html5 websoket
    WebSocket經過Flash
    XHR長時間鏈接
    XHR Multipart Streaming
    不可見的Iframe
    <script>標籤的長時間鏈接(可跨域)

事件、IE與火狐的事件機制有什麼區別？如何阻止冒泡？

1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。  
 2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。；
 3.  ev.stopPropagation();注意舊ie的方法 ev.cancelBubble = true;

ajax 是什麼?ajax 的交互模型?同步和異步的區別?如何解決跨域問題?

詳情請見：JavaScript學習總結（七）Ajax和Http狀態字


js對象的深度克隆

function clone(Obj) {   
        var buf;   
        if (Obj instanceof Array) {   
            buf = [];  //建立一個空的數組 
            var i = Obj.length;   
            while (i--) {   
                buf[i] = clone(Obj[i]);   
            }   
            return buf;   
        }else if (Obj instanceof Object){   
            buf = {};  //建立一個空對象 
            for (var k in Obj) {  //爲這個對象添加新的屬性 
                buf[k] = clone(Obj[k]);   
            }   
            return buf;   
        }else{   
            return Obj;   
        }   
    }

AMD和CMD 規範的區別？

詳情請見：詳解JavaScript模塊化開發

網站重構的理解？


如何獲取UA？

<script> 
    function whatBrowser() {  
        document.Browser.Name.value=navigator.appName;  
        document.Browser.Version.value=navigator.appVersion;  
        document.Browser.Code.value=navigator.appCodeName;  
        document.Browser.Agent.value=navigator.userAgent;  
    }  
</script>

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]);
    }
    return n;
}

HTTP狀態碼


cache-control

網頁的緩存是由HTTP消息頭中的「Cache-control」來控制的，常見的取值有private、no-cache、max-age、must-revalidate等，默認爲private。

Expires 頭部字段提供一個日期和時間，響應在該日期和時間後被認爲失效。容許客戶端在這個時間以前不去檢查（發請求），等同max-age的效果。可是若是同時存在，則被Cache-Control的max-age覆蓋。

例如

若是把它設置爲，則表示當即過時-1

Expires和max-age均可以用來指定文檔的過時時間，可是兩者有一些細微差異


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;
}

//刪除cookie
function unsetCookie(name) {
    document.cookie = name + "= ; expires=" + new Date(0);
}