常见前端九十道面试题及答案-韩烨
前言
本文是在GitHub上看到一個大牛總結的前端常見面試題，很多問題問的都很好，很經典、很有代表性。上面沒有答案，我就整理了一下，從網上找了一些相關問題的答案。里面有一部分問題的答案我也沒有進行考證，不少答案都來源于網絡，或許會有疏漏之處，僅供大家參考哦！(還有一部分問題答案還未整理，大家也可以自己搜索一下答案)
1.你能描述一下漸進增強和優雅降級之間的不同嗎?
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.
漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來并發揮作用。
2.線程與進程的區別
一個程序至少有一個進程，一個進程至少有一個線程。線程的劃分尺度小于進程，使得多線程程序的并發性高。
另外，進程在執行過程中擁有獨立的內存單元，而多個線程共享內存，從而極大地提高了程序的運行效率。
線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。
從邏輯角度來看，多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。但操作系統并沒有將多個線程看做多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。
3.說說你對語義化的理解？
- 1：去掉或樣式丟失的時候能讓頁面呈現清晰的結構：html本身是沒有表現的，我們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認為這是html的表現，這些其實html默認的css樣式在起作用，所以去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語義化的HTML結構的優點，但是瀏覽器都有有默認樣式，默認樣式的目的也是為了更好的表達html的語義，可以說瀏覽器的默認樣式和語義化的HTML結構是不可分割的。
- 2.屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁。
- 3.PDA、手機等設備可能無法像普通電腦的瀏覽器一樣來渲染網頁（通常是因為這些設備對CSS的支持較弱）。
- 4.有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重。
- 6.便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
4.你如何對網站的文件和資源進行優化？
期待的解決方案包括：文件合并文件最小化/文件壓縮使用CDN托管緩存的使用（多個域名來提供緩存）其他。
5.為什么利用多個域名來提供網站資源會更有效？?
- 1.CDN緩存更方便
- 2.突破瀏覽器并發限制（一般每個域名建立的鏈接不超過6個）
- 3.Cookieless，節省帶寬，尤其是上行帶寬一般比下行要慢
- 4.對于UGC的內容和主站隔離，防止不必要的安全問題(上傳js竊取主站cookie之類的)。正是這個原因要求用戶內容的域名必須不是自己主站的子域名，而是一個完全獨立的第三方域名。
- 5.數據做了劃分，甚至切到了不同的物理集群，通過子域名來分流比較省事。這個可能被用的不多。
PS:關于Cookie的問題，帶寬是次要的，安全隔離才是主要的。關于多域名，也不是越多越好，雖然服務器端可以做泛解釋，瀏覽器做dns解釋也是耗時間的，而且太多域名，如果要走https的話，還有要多買證書和部署的問題。
6.請說出三種減少頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）
- 1.優化圖片
- 2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
- 3.優化CSS（壓縮合并css，如margin-top,margin-left...)
- 4.網址后加斜杠（如www.campr.com/目錄，會判斷這個“目錄是什么文件類型，或者是目錄。）
- 5.標明高度和寬度（如果瀏覽器沒有找到這兩個參數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。當瀏覽器知道了高度和寬度參數后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續加載后面的內容。從而加載時間快了，瀏覽體驗也更好了。）
- 6.減少http請求（合并文件，合并圖片）。
7.如果你參與到一個項目中，發現他們使用Tab來縮進代碼，但是你喜歡空格，你會怎么做？
- 建議這個項目使用像EditorConfig(http://editorconfig.org/)之類的規范
- 為了保持一致性，接受項目原有的風格
- 直接使用VIM的retab命令
8.請寫一個簡單的幻燈效果頁面
如果不使用JS來完成，可以加分。（如：純CSS實現的幻燈片效果）
9.你都使用哪些工具來測試代碼的性能？
Profiler,JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）,Dromaeo。
10.如果今年你打算熟練掌握一項新技術，那會是什么？
nodejs，html5，css3，less等。
11.請談一下你對網頁標準和標準制定機構重要性的理解。
w3c存在的意義就是讓瀏覽器兼容性問題盡量小，首先是他們對瀏覽器開發者的約束，然后是對開發者的約束。
12.什么是FOUC（無樣式內容閃爍）？你如何來避免FOUC？
FOUC(Flash?Of?Unstyled?Content)--文檔樣式閃爍
<style?type="text/css"media="all">@import"../fouc.css";</style>而引用CSS文件的@import就是造成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，然后再去導入外部的CSS文件，因此，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關系。解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就可以了。
13.doctype（文檔類型）的作用是什么？你知道多少種文檔類型？
此標簽可告知瀏覽器文檔使用哪種HTML或XHTML規范。該標簽可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基于框架的HTML文檔。
HTML?4.01規定了三種文檔類型：Strict、Transitional以及Frameset。
XHTML?1.0規定了三種XML文檔類型：Strict、Transitional以及Frameset。
Standards（標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，而Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。
14.瀏覽器標準模式和怪異模式之間的區別是什么？
W3C標準推出以后，瀏覽器都開始采納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來以前，很多頁面都是根據舊的渲染方法編寫的，如果用的標準來渲染，將導致頁面顯示異常。為保持瀏覽器渲染的兼容性，使以前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks?mode和Standars?mode，兩種渲染方法共存在一個瀏覽器上。IE盒子模型和標準W3C盒子模型：ie的width包括：padding\border。標準的width不包括：padding\border
- ?在js中如何判斷當前瀏覽器正在以何種方式解析？
? ? ? ? ?document對象有個屬性compatMode,它有兩個值：BackCompat對應quirks?mode，CSS1Compat對應strict?mode。
15.使用XHTML的局限有哪些？
XHTML 與HTML的區別為：
- XHTML 元素必須被正確地嵌套。
- XHTML 元素必須被關閉。
- 標簽名必須用小寫字母。
- XHTML 文檔必須擁有根元素。
局限：
所有的 XHTML 元素都必須被正確地嵌套，XHTML 必須擁有良好的結構，所有的標簽必須小寫，并且所有的 XHTML 元素必須被關閉。所有的 XHTML 文檔必須擁有 DOCTYPE 聲明，并且 html、head、title 和 body 元素必須存在。雖然代碼更加的優雅，但缺少容錯性，不利于快速開發。
16.如果網頁內容需要支持多語言，你會怎么做？
下面這些問題需要考慮：
- 應用字符集的選擇，選擇UTF-8編碼
- 語言書寫習慣&導航結構
- 數據庫驅動型網站
17.data-屬性的作用是什么？
data-* 屬性用于存儲頁面或應用程序的私有自定義數據。data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。存儲的（自定義）數據能夠被頁面的 JavaScript 中利用，以創建更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。
data-* 屬性包括兩部分：
- 屬性名不應該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符
- 屬性值可以是任意字符串
18.如果把HTML5看作做一個開放平臺，那它的構建模塊有哪些？
<nav>,<header>,<section>,<footer>等。
19.請描述一下cookies，sessionStorage和localStorage的區別？
sessionStorage和localStorage是HTML5?Web?Storage?API提供的，可以方便的在web請求之間保存數據。有了本地數據，就可以避免數據在瀏覽器和服務器間不必要地來回傳遞。sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage的概念很特別，引入了一個“瀏覽器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一頁面，數據仍然存在。關閉窗口后，sessionStorage即被銷毀。同時“獨立”打開的不同窗口，即使是同一頁面，sessionStorage對象也是不同的cookies會發送到服務器端。其余兩個不會。Microsoft指出InternetExplorer8增加cookie限制為每個域名50個，但IE7似乎也允許每個域名50個cookie。
- Firefox每個域名cookie限制為50個。
- Opera每個域名cookie限制為30個。
- Firefox和Safari允許cookie多達4097個字節，包括名（name）、值（value）和等號。
- Opera允許cookie多達4096個字節，包括：名（name）、值（value）和等號。
- InternetExplorer允許cookie多達4095個字節，包括：名（name）、值（value）和等號。
20.描述下“reset”CSS文件的作用和使用它的好處。
因為瀏覽器的品種很多，每個瀏覽器的默認樣式也是不同的，所以定義一個css?reset可以使各瀏覽器的默認樣式統一。
21.解釋下浮動和它的工作原理。
關于浮動我們需要了解，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。要想使元素浮動，必須為元素設置一個寬度（width）。雖然浮動元素不是文檔流之中，但是它浮動后所處的位置依然是在浮動之前的水平方向上。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣，下面的元素填補原來的位置。有些元素會在浮動元素的下方，但是這些元素的內容并不一定會被浮動的元素所遮蓋，對內聯元素進行定位時，這些元素會考慮浮動元素的邊界，會圍繞著浮動元素放置。也可以把浮動元素想象成是被塊元素忽略的元素，而內聯元素會關注浮動元素的。 ?
22.列舉不同的清除浮動的技巧，并指出它們各自適用的使用場景。
- 1.使用空標簽清除浮動。這種方法是在所有浮動標簽后面添加一個空標簽定義css?clear:both.弊端就是增加了無意義標簽。
- 2.使用overflow。給包含浮動元素的父標簽添加css屬性overflow:auto;zoom:1;zoom:1用于兼容IE6。
- 3.使用after偽對象清除浮動。該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置height:0，否則該元素會比實際高出若干像素；二、content屬性是必須的，但其值可以為空，content屬性的值設為”.”，空亦是可以的。
- 4.浮動外部元素
此三種方法各有利弊，使用時應擇優選擇，比較之下第二種方法更為可取。
23.解釋下CSS?sprites，以及你要如何在頁面或網站中使用它。
CSS?Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
24.你最喜歡的圖片替換方法是什么，你如何選擇使用。
1 <h2><span圖片丟這里></span>Hello World</h2>把span背景設成文字內容，這樣又可以保證seo，也有圖片的效果在上面。一般都是：alt，title，onerror。
25.討論CSS?hacks，條件引用或者其他。
各個瀏覽器都認識，這里給firefox用；
\9所有的ie瀏覽器可識別；
background-color:yellow\0;\0是留給ie8的+background-color:pink;+ie7定了；
_background-color:orange;_專門留給神奇的ie6；:root#test{background-color:purple\9;}:root是給ie9的，
@media?all?and(min-width:0px){#test{background-color:black\0;}}這個是老是跟ie搶著認\0的神奇的opera，必須加個\0,不然firefox，chrome，safari也都認識。
@media?screen?and(-webkit-min-device-pixel-ratio:0){#test{background-color:gray;}}最后這個是瀏覽器新貴chrome和safari的。
26.如何為有功能限制的瀏覽器提供網頁？你會使用哪些技術和處理方法？
27.如何視覺隱藏網頁內容，只讓它們在屏幕閱讀器中可用？
- display:none;的缺陷搜索引擎可能認為被隱藏的文字屬于垃圾信息而被忽略屏幕閱讀器（是為視覺上有障礙的人設計的讀取屏幕內容的程序）會忽略被隱藏的文字。
- visibility:hidden;的缺陷這個大家應該比較熟悉就是隱藏的內容會占據他所應該占據物理空間3.overflow:hidden;一個比較合理的方法.texthidden{display:block;/*統一轉化為塊級元素*/overflow:hidden;width:0;height:0;}就像上面的一段CSS所展示的方法，將寬度和高度設定為0，然后超過部分隱藏，就會彌補上述一、二方法中的缺陷，也達到了隱藏內容的目的。
28.你用過柵格系統嗎？如果使用過，你最喜歡哪種？
比如：Bootstrap，流式柵格系統，http://960.gs/，柵格系統延續美學。
29.你用過媒體查詢，或針對移動端的布局/CSS嗎？
媒體查詢，就是響應式布局。通過不同的媒介類型和條件定義樣式表規則。媒介查詢讓CSS可以更精確作用于不同的媒介類型和同一媒介的不同條件。
語法結構及用法：@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules}。
示例如下：
1 /* 當瀏覽器的可視區域小于980px */ 2 @media screen and （max-width： 980px） { 3 #wrap {width： 90%; margin:0 auto;} 4 #content {width： 60%;padding： 5%;} 5 #sidebar {width： 30%;} 6 #footer {padding： 8% 5%;margin-bottom： 10px;} 7 } 8 /* 當瀏覽器的可視區域小于650px */ 9 @media screen and （max-width： 650px） { 10 #header {height： auto;} 11 #searchform {position： absolute;top： 5px;right： 0;} 12 #content {width： auto; float： none; margin： 20px 0;} 13 #sidebar {width： 100%; float： none; margin： 0;} 14 }30.你熟悉SVG樣式的書寫嗎？
SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。
什么是SVG？
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用來定義用于網絡的基于矢量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
- SVG 是萬維網聯盟的標準
- SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
書寫示例如下：
1 <?xml version="1.0" standalone="no"?> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3 <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 4 <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 5 </svg>31.如何優化網頁的打印樣式？
<link rel = "stylesheet" type = "text/css" media = "screen" href = "xxx.css"/>其中media指定的屬性就是設備，顯示器上就是screen，打印機則是print，電視是tv，投影儀是projection。打印樣式示例如下：
<link rel = "stylesheet" type = "text/css" media = "print" href = "yyy.css"/>但打印樣式表也應注意以下事項：
- 打印樣式表中最好不要用背景圖片，因為打印機不能打印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。
- 最好不要使用像素作為單位，因為打印樣式表要打印出來的會是實物，所以建議使用pt和cm。
- 隱藏掉不必要的內容。（@print?div{display:none;}）
- 打印樣式表中最好少用浮動屬性，因為它們會消失。如果想要知道打印樣式表的效果如何，直接在瀏覽器上選擇打印預覽就可以了。
32.在書寫高效CSS時會有哪些問題需要考慮？
- 1.樣式是：從右向左的解析一個選擇器；
- 2.ID最快，Universal最慢有四種類型的key?selector，解析速度由快到慢依次是：ID、class、tag和universal ；
- 3.不要tag-qualify（永遠不要這樣做ul#main-navigation{}ID已經是唯一的，不需要Tag來標識，這樣做會讓選擇器變慢。）；
- 4.后代選擇器最糟糕（換句話說，下面這個選擇器是很低效的：html?body?ul?li?a{}）；
- 5.想清楚你為什么這樣寫；
- 6.CSS3的效率問題（CSS3選擇器（比如:nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀。但是這些神奇的選擇器會浪費很多的瀏覽器資源。）；
- 7.我們知道#ID速度是最快的，那么我們都用ID，是不是很快。但是我們不應該為了效率而犧牲可讀性和可維護性。
33.使用CSS預處理器的優缺點有哪些？
? ? ?LESS&SassLESS是受Sass啟發而開發的工具，它列出了如下開發的理由：
? ? ?“為什么要開發一個Sass的替代品呢？原因很簡單：首先是語法。Sass的一個關鍵特性是縮進式的語法，這種語法可以產生柱式外觀的代碼。但是你需要花費時間學習一門新的語法以及重新構建你現在的樣式表。LESS給CSS帶來了很多特性，使得LESS能夠和CSS無縫地緊密結合在一起。因此，你可以平滑地由CSS遷移到LESS，如果你只是對使用變量或者操作感興趣的話，你不需要學習一整門全新的語言。”
? ? ? StylusStylus相對前兩者較新，可以看官方文檔介紹的功能。
- 1.來自NodeJS社區，所以和NodeJS走得很近，與JavaScript聯系非常緊密。還有專門JavaScript?API：http://learnboost.github.io/stylus/docs/js.html；
- 2.支持Ruby之類等等框架；
- 3.更多更強大的支持和功能總結：Sass看起來在提供的特性上占有優勢，但是LESS能夠讓開發者平滑地從現存CSS文件過渡到LESS，而不需要像Sass那樣需要將CSS文件轉換成Sass格式。Stylus功能上更為強壯，和js聯系更加緊密。
34.如果設計中使用了非標準的字體，你該如何去實現？
所謂的標準字體是多數機器上都會有的，或者即使沒有也可以由默認字體替代的字體。
方法：
- 用圖片代替
- web?fonts在線字庫，如Google?Webfonts，Typekit等等；http://www.chinaz.com/free/2012/0815/269267.shtml；
- @font-face，Webfonts(字體服務例如：Google?Webfonts，Typekit等等。)
35.解釋下瀏覽器是如何判斷元素是否匹配某個CSS選擇器？
從后往前判斷。瀏覽器先產生一個元素集合，這個集合往往由最后一個部分的索引產生（如果沒有索引就是所有元素的集合）。然后向上匹配，如果不符合上一個部分，就把元素從集合中刪除，直到真個選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。舉個例子，有選擇器：
1 body.ready#wrapper>.lol233先把所有class中有lol233的元素拿出來組成一個集合，然后上一層，對每一個集合中的元素，如果元素的parent?id不為#wrapper則把元素從集合中刪去。再向上，從這個元素的父元素開始向上找，沒有找到一個tagName為body且class中有ready的元素，就把原來的元素從集合中刪去。至此這個選擇器匹配結束，所有還在集合中的元素滿足。大體就是這樣，不過瀏覽器還會有一些奇怪的優化。為什么從后往前匹配因為效率和文檔流的解析方向。效率不必說，找元素的父親和之前的兄弟比遍歷所喲兒子快而且方便。關于文檔流的解析方向，是因為現在的CSS，一個元素只要確定了這個元素在文檔流之前出現過的所有元素，就能確定他的匹配情況。應用在即使html沒有載入完成，瀏覽器也能根據已經載入的這一部分信息完全確定出現過的元素的屬性。為什么是用集合主要也還是效率。基于CSS?Rule數量遠遠小于元素數量的假設和索引的運用，遍歷每一條CSS?Rule通過集合篩選，比遍歷每一個元素再遍歷每一條Rule匹配要快得多。
36.解釋一下你對盒模型的理解，以及如何在CSS中告訴瀏覽器使用不同的盒模型來渲染你的布局。
關于盒模型請看文章CSS之布局與定位。
- 請解釋一下*{box-sizing:border-box;}的作用,并且說明使用它有什么好處？
說到IE的bug，在IE6以前的版本中，IE對盒模型的解析出現一些問題，跟其它瀏覽器不同，將border與padding都包含在width之內。而另外一些瀏覽器則與它相反，是不包括border和padding的。
在我們開發的過程中會發現，有時候，如果對頁面中的大區域進行設置時，將border、padding計算到width和height之內，反而更靈活。但W3C的CSS2.1規范卻規定了他們并不能被包含其中。考慮到這個問題，css3中引入了一個新的屬性：box-sizing，它具有“content-box”和”border-box“兩個值。
1 box-sizing:content-box當我們設置box-sizing:content-box;時，瀏覽器對盒模型的解釋遵從我們之前認識到的W3C標準，當它定義width和height時，它的寬度不包括border和padding。
1 box-sizing:border-box當我們設置box-sizing:border-box;時，瀏覽器對盒模型的解釋與IE6之前的版本相同，當它定義width和height時，border和padding則是被包含在寬高之內的。內容的寬和高可以通過定義的“width”和“height”減去相應方向的“padding”和“border”的寬度得到。內容的寬和高必須保證不能為負，必要時將自動增大該元素border?box的尺寸以使其內容的寬或高最小為0。
37.請羅列出你所知道的display屬性的全部值。
display屬性的值列表如下：
38.請解釋一下relative、fixed、absolute和static元素的區別？請解釋一下inline和inline-block的區別？
- 關于第一個問題請看文章CSS之布局與定位?。
inline:此元素會被顯示為內聯元素，元素前后沒有換行符。
inline-block:行內塊元素。
39.你目前在使用哪一套CSS框架，或者在產品線上使用過哪一套？(Bootstrap,PureCSS,Foundation等等)
- 如果有，請問是哪一套？如果可以，你如何改善CSS框架？
- 請問你有使用過CSS?Flexbox或者Grid?specs嗎？如果有，請問在性能和效率的方面你是怎么看的？
40.解釋下事件代理。
JavaScript事件代理則是一種簡單的技巧，通過它你可以把事件處理器添加到一個父級元素上，這樣就避免了把事件處理器添加到多個子級元素上。當我們需要對很多元素添加事件的時候，可以通過將事件添加到它們的父節點而將事件委托給父節點來觸發處理函數。這主要得益于瀏覽器的事件冒泡機制。事件代理用到了兩個在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標元素。
1 function getEventTarget(e) { 2 e=e||window.event; 3 return e.target||e.srcElement; 4 }41.解釋下JavaScript中this是如何工作的。
this永遠指向函數運行時所在的對象，而不是函數被創建時所在的對象。匿名函數或不處于任何對象中的函數指向window 。
1.如果是call，apply,with，指定的this是誰，就是誰。
2.普通的函數調用，函數被誰調用，this就是誰。
42.解釋下原型繼承的原理。
以下代碼展示了JS引擎如何查找屬性：
1 function getProperty(obj,prop) { 2 if (obj.hasOwnProperty(prop)) { 3 return obj[prop]; 4 } else if (obj.__proto__!==null) { 5 return getProperty(obj.__proto__,prop); 6 } else { 7 return undefined; 8 } 9 }下圖展示的原（prototype）的關聯：
43.你是如何測試JavaScript代碼的？
結合自己的項目經驗進行講述。（chrome使用技巧）
44.AMD?vs.CommonJS？
請看文章JavaScript之模塊化編程
45.什么是哈希表？
散列表（也叫哈希表），是根據關鍵碼值直接進行訪問的數據結構。也就是說，它通過把關鍵碼值映射到表中一個位置來訪問記錄，以加快查找的速度。這個映射函數叫做散列函數，存放記錄的數組叫做散列表。
46.解釋下為什么接下來這段代碼不是IIFE(立即調用的函數表達式)：function?foo(){}();.
- 要做哪些改動使它變成IIFE?
因為在解析器解析全局的function或者function內部function關鍵字的時候，默認是認為function聲明，而不是function表達式，如果你不顯示告訴編譯器，它默認會聲明成一個缺少名字的function，并且拋出一個語法錯誤信息，因為function聲明需要一個名字。
1 var foo = function() { 2 // doSomeThing. 3 }； 4 5 foo();47.描述以下變量的區別：null，undefined或undeclared？
JavaScript的最初版本是這樣區分的：null是一個表示"無"的對象，轉為數值時為0；undefined是一個表示"無"的原始值，轉為數值時為NaN。
但是，上面這樣的區分，在實踐中很快就被證明不可行。目前，null和undefined基本是同義的，只有一些細微的差別。
null表示"沒有對象"，即該處不應該有值。典型用法是：
- 用來初始化一個變量，這個變量可能被賦值為一個對象。
- 用來和一個已經初始化的變量比較，這個變量可以是也可以不是一個對象。
- 當函數的參數期望是對象時，被用作參數傳入。
- 當函數的返回值期望是對象時，被用作返回值傳出。
- 作為對象原型鏈的終點。
undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：
- 變量被聲明了，但沒有賦值時，就等于undefined。
- 調用函數時，應該提供的參數沒有提供，該參數等于undefined。
- 對象沒有賦值的屬性，該屬性的值為undefined。
- 函數沒有返回值時，默認返回undefined。
該如何檢測它們？
null：表示無值；undefined：表示一個未聲明的變量，或已聲明但沒有賦值的變量，或一個并不存在的對象屬性。
==運算符將兩者看作相等。如果要區分兩者，要使用===或typeof運算符。
以下是不正確的用法：
1 var exp = undefined; 2 3 if (exp == undefined) { 4 alert("undefined"); 5 }exp為null時，也會得到與undefined相同的結果，雖然null和undefined不一樣。注意：要同時判斷undefined和null時可使用本法。
typeof返回的是字符串，有六種可能："number"、"string"、"boolean"、"object"、"function"、"undefined"。
以下是正確的用法：
1 var exp = undefined; 2 3 if(typeof(exp) == undefined) { 4 alert("undefined"); 5 }JS中如何判斷null？
以下是不正確的用法：
1 var exp = null; 2 3 if(exp == null) { 4 alert("is null"); 5 }exp為undefined時，也會得到與null相同的結果，雖然null和undefined不一樣。注意：要同時判斷null和undefined時可使用本法。
1 var exp=null; 2 3 if(!exp) { 4 alert("is null"); 5 }如果exp為undefined或者數字零，也會得到與null相同的結果，雖然null和二者不一樣。注意：要同時判斷null、undefined和數字零時可使用本法。
1 var exp = null; 2 3 if(typeof(exp) == "null") { 4 alert("is null"); 5 }為了向下兼容，exp為null時，typeof總返回object。這種方式也不太好。
以下是正確的用法：
1 var exp = null; 2 3 if(!exp&&typeof(exp) != "undefined" && exp != 0) { 4 alert("is null"); 5 }48.什么是閉包，如何使用它，為什么要使用它？
包就是能夠讀取其他函數內部變量的函數。由于在Javascript語言中，只有函數內部的子函數才能讀取局部變量，因此可以把閉包簡單理解成“定義在一個函數內部的函數”。
所以，在本質上，閉包就是將函數內部和函數外部連接起來的一座橋梁。閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。
使用閉包的注意點：
- 由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。
- 閉包會在父函數外部，改變父函數內部變量的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（Public?Method），把內部變量當作它的私有屬性（private?value），這時一定要小心，不要隨便改變父函數內部變量的值。
（關于閉包，詳細了解請看JavaScript之作用域與閉包詳解）
49.請舉出一個匿名函數的典型用例？
自執行函數，用閉包模擬私有變量、特權函數等。
50.解釋“JavaScript模塊模式”以及你在何時使用它。
?????如果有提到無污染的命名空間，可以考慮加分。
- 如果你的模塊沒有自己的命名空間會怎么樣？
請看文章-JavaScript之模塊化編程?和JavaScript之命名空間模式 淺析
51.你是如何組織自己的代碼？是使用模塊模式，還是使用經典繼承的方法？
請看文章-JavaScript之模塊化編程和Javascript之對象的繼承
52.請指出JavaScript宿主對象和原生對象的區別？
原生對象
ECMA-262 把本地對象（native object）定義為“獨立于宿主環境的 ECMAScript 實現提供的對象”。
“本地對象”包含哪些內容：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。
由此可以看出，簡單來說，本地對象就是 ECMA-262 定義的類（引用類型）。
內置對象
ECMA-262 把內置對象（built-in object）定義為“由 ECMAScript 實現提供的、獨立于宿主環境的所有對象，在 ECMAScript 程序開始執行時出現”。這意味著開發者不必明確實例化內置對象，它已被實例化了。
同樣是“獨立于宿主環境”。根據定義我們似乎很難分清“內置對象”與“本地對象”的區別。而ECMA-262 只定義了兩個內置對象，即 Global 和 Math （它們也是本地對象，根據定義，每個內置對象都是本地對象）。如此就可以理解了。內置對象是本地對象的一種。
宿主對象
何為“宿主對象”？主要在這個“宿主”的概念上，ECMAScript中的“宿主”當然就是我們網頁的運行環境，即“操作系統”和“瀏覽器”。
所有非本地對象都是宿主對象（host object），即由 ECMAScript 實現的宿主環境提供的對象。所有的BOM和DOM都是宿主對象。因為其對于不同的“宿主”環境所展示的內容不同。其實說白了就是，ECMAScript官方未定義的對象都屬于宿主對象，因為其未定義的對象大多數是自己通過ECMAScript程序創建的對象。
53.call和.apply的區別是什么？
call方法: 語法：call(thisObj，Object) 定義：調用一個對象的一個方法，以另一個對象替換當前對象。 說明：call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。 如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj。 apply方法： 語法：apply(thisObj，[argArray]) 定義：應用某一對象的一個方法，用另一個對象替換當前對象。 說明：如果 argArray 不是一個有效的數組或者不是 arguments 對象，那么將導致一個 TypeError。如果沒有提供 argArray 和 thisObj 任何一個參數，那么 Global 對象將被用作 thisObj， 并且無法被傳遞任何參數。
對于apply和call兩者在作用上是相同的，但兩者在參數上有以下區別： 對于第一個參數意義都一樣，但對第二個參數：apply傳入的是一個參數數組，也就是將多個參數組合成為一個數組傳入，而call則作為call的參數傳入（從第二個參數開始）。如 func.call(func1,var1,var2,var3)對應的apply寫法為：func.apply(func1,[var1,var2,var3])同時使用apply的好處是可以直接將當前函數的arguments對象作為apply的第二個參數傳入。
54.請解釋Function.prototype.bind的作用？
55.你何時優化自己的代碼？
請看文章JavaScript之高效編程?及JavaScript編碼風格指南。
56.你能解釋一下JavaScript中的繼承是如何工作的嗎？
原型鏈等。
57.在什么時候你會使用document.write()？
大多數生成的廣告代碼依舊使用document.write()，雖然這種用法會讓人很不爽。
58.請指出瀏覽器特性檢測，特性推斷和瀏覽器UA字符串嗅探的區別？
特性檢測：為特定瀏覽器的特性進行測試，并僅當特性存在時即可應用特性。
User-Agent檢測：最早的瀏覽器嗅探即用戶代理檢測，服務端（以及后來的客戶端）根據UA字符串屏蔽某些特定的瀏覽器查看網站內容。
特性推斷：嘗試使用多個特性但僅驗證了其中之一。根據一個特性的存在推斷另一個特性是否存在。問題是，推斷是假設并非事實，而且可能導致可維護性的問題。
59.請盡可能詳盡的解釋AJAX的工作原理。
請參考文章AJAX工作原理。
60.請解釋JSONP的工作原理，以及它為什么不是真正的AJAX。
JSONP (JSON with Padding)是一個簡單高效的跨域方式，HTML中的script標簽可以加載并執行其他域的javascript，于是我們可以通過script標記來動態加載其他域的資源。例如我要從域A的頁面pageA加載域B的數據，那么在域B的頁面pageB中我以JavaScript的形式聲明pageA需要的數據，然后在 pageA中用script標簽把pageB加載進來，那么pageB中的腳本就會得以執行。JSONP在此基礎上加入了回調函數，pageB加載完之后會執行pageA中定義的函數，所需要的數據會以參數的形式傳遞給該函數。JSONP易于實現，但是也會存在一些安全隱患，如果第三方的腳本隨意地執行，那么它就可以篡改頁面內容，截獲敏感數據。但是在受信任的雙方傳遞數據，JSONP是非常合適的選擇。
AJAX是不跨域的，而JSONP是一個是跨域的，還有就是二者接收參數形式不一樣！
61.你使用過JavaScript模板系統嗎？
如有使用過，請談談你都使用過哪些庫，比如Mustache.js，Handlebars等等。
62.請解釋變量聲明提升。
在JS里定義的變量，存在于作用域鏈里，而在函數執行時會先把變量的聲明進行提升，僅僅是把聲明進行了提升，而其值的定義還在原來位置。示例如下：
1 var test = function() { 2 console.log(name); // 輸出：undefined 3 var name = "jeri"; 4 console.log(name); // 輸出：jeri 5 } 6 7 test();上述代碼與下述代碼等價。
1 var test = function() { 2 var name; 3 console.log(name); // 輸出：undefined 4 name = "jeri"; 5 console.log(name); // 輸出：jeri 6 } 7 8 test();由以上代碼可知，在函數執行時，把變量的聲明提升到了函數頂部，而其值定義依然在原來位置。
63.請描述下事件冒泡機制。
冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。
捕獲型事件：事件從最不精確的對象(document 對象)開始觸發，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發人員特別指定)。
支持W3C標準的瀏覽器在添加事件時用addEventListener(event,fn,useCapture)方法，基中第3個參數useCapture是一個Boolean值，用來設置事件是在事件捕獲時執行，還是事件冒泡時執行。而不兼容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒有相關設置，不過IE的事件模型默認是在事件冒泡時執行的，也就是在useCapture等于false的時候執行，所以把在處理事件時把useCapture設置為false是比較安全，也實現兼容瀏覽器的效果。
64."attribute"和"property"的區別是什么？
1. 定義
Property：屬性，所有的HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element并添加了一些屬性，添加的這些屬性分別對應于每個HTML元素都有下面的這5個標準特性: id,title,lang,dir,className。DOM節點是一個對象，因此，他可以和其他的JavaScript對象一樣添加自定義的屬性以及方法。property的值可以是任何的數據類型，對大小寫敏感，自定義的property不會出現在html代碼中，只存在js中。
Attribute：特性，區別于property，attribute只能是字符串，大小寫不敏感，出現在innerHTML中，通過類數組attributes可以羅列所有的attribute。
2. 相同之處
標準的 DOM properties 與 attributes 是同步的。公認的（非自定義的）特性會被以屬性的形式添加到DOM對象中。如，id，align，style等，這時候操作property或者使用操作特性的DOM方法如getAttribute()都可以操作屬性。不過傳遞給getAttribute()的特性名與實際的特性名相同。因此對于class的特性值獲取的時候要傳入“class”。
3. 不同之處
1).對于有些標準的特性的操作，getAttribute與點號(.)獲取的值存在差異性。如href，src，value，style，onclick等事件處理程序。 2).href：getAttribute獲取的是href的實際值，而點號獲取的是完整的url，存在瀏覽器差異。
65.為什么擴展JavaScript內置對象不是好的做法？
66.為什么擴展JavaScript內置對象是好的做法？
67.請指出document.onload和document.ready兩個事件的區別。
頁面加載完成有兩種事件，一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁面包含圖片等文件在內的所有元素都加載完成。
68.==和===有什么不同？
首先，== equality 等同，=== identity 恒等。?==， 兩邊值類型不同的時候，要先進行類型轉換，再比較。?===，不做類型轉換，類型不同的一定不等。
先說 ===，這個比較簡單。下面的規則用來判斷兩個值是否===相等：?
- 如果類型不同，就[不相等]?
- 如果兩個都是數值，并且是同一個值，那么[相等]；(！例外)的是，如果其中至少一個是NaN，那么[不相等]。（判斷一個值是否是NaN，只能用isNaN()來判斷）?
- 如果兩個都是字符串，每個位置的字符都一樣，那么[相等]；否則[不相等]。?
- 如果兩個值都是true，或者都是false，那么[相等]。?
- 如果兩個值都引用同一個對象或函數，那么[相等]；否則[不相等]。?
- 如果兩個值都是null，或者都是undefined，那么[相等]。?
再說 ==，根據以下規則：?
- 如果兩個值類型相同，進行 === 比較。?
- 如果兩個值類型不同，他們可能相等。根據下面規則進行類型轉換再比較：?
69.你如何從瀏覽器的URL中獲取查詢字符串參數。
以下函數把獲取一個key的參數。
1 function parseQueryString ( name ){ 2 name = name.replace(/[\[]/,"\\\["); 3 var regexS = "[\\?&]"+name+"=([^&#]*)"; 4 var regex = new RegExp( regexS ); 5 var results = regex.exec( window.location.href ); 6 7 if(results == null) { 8 return ""; 9 } else { 10 return results[1]; 11 } 12 }70.請解釋一下JavaScript的同源策略。
在客戶端編程語言中，如javascript和 ActionScript，同源策略是一個很重要的安全理念，它在保證數據的安全性方面有著重要的意義。同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。那么什么叫相同域，什么叫不同的域呢？當兩個域具有相同的協議, 相同的端口，相同的host，那么我們就可以認為它們是相同的域。同源策略還應該對一些特殊情況做處理，比如限制file協議下腳本的訪問權限。本地的HTML文件在瀏覽器中是通過file協議打開的，如果腳本能通過file協議訪問到硬盤上其它任意文件，就會出現安全隱患，目前IE8還有這樣的隱患。
71.請描述一下JavaScript的繼承模式。
關于繼承請看文章JavaScript之對象的繼承。
72.如何實現下列代碼：[1,2,3,4,5].duplicator();//[1,2,3,4,5,1,2,3,4,5]。
73.描述一種JavaScript中實現memoization(避免重復運算)的策略。
74.什么是三元表達式？“三元”表示什么意思？
三元表達式：? :。三元--三個操作對象。
在表達式boolean-exp ? value0 : value1 中，如果“布爾表達式”的結果為true，就計算“value0”，而且這個計算結果也就是操作符最終產生的值。如果“布爾表達式”的結果為false，就計算“value1”，同樣，它的結果也就成為了操作符最終產生的值。
75.JavaScript里函數參數arguments是數組嗎？?
在函數代碼中，使用特殊對象 arguments，開發者無需明確指出參數名，通過使用下標就可以訪問相應的參數。
arguments雖然有一些數組的性質，但其并非真正的數組，只是一個類數組對象。其并沒有數組的很多方法，不能像真正的數組那樣調用.jion(),.concat(),.pop()等方法。
76.什么是"use?strict";?使用它的好處和壞處分別是什么？
在代碼中出現表達式-"use strict"; 意味著代碼按照嚴格模式解析，這種模式使得Javascript在更嚴格的條件下運行。
好處：
- 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
- 消除代碼運行的一些不安全之處，保證代碼運行的安全；
- 提高編譯器效率，增加運行速度；
- 為未來新版本的Javascript做好鋪墊。
壞處：
同樣的代碼，在"嚴格模式"中，可能會有不一樣的運行結果；一些在"正常模式"下可以運行的語句，在"嚴格模式"下將不能運行。
77.解釋"chaining"。
jQuery方法鏈接。直到現在，我們都是一次寫一條jQuery語句（一條接著另一條）。不過，有一種名為鏈接（chaining）的技術，允許我們在相同的元素上運行多條jQuery命令，一條接著另一條。
提示：這樣的話，瀏覽器就不必多次查找相同的元素。
如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。
78.解釋"deferreds"。
開發網站的過程中，我們經常遇到某些耗時很長的javascript操作。其中，既有異步的操作（比如ajax讀取服務器數據），也有同步的操作（比如遍歷一個大型數組），它們都不是立即能得到結果的。
通常的做法是，為它們指定回調函數（callback）。即事先規定，一旦它們運行結束，應該調用哪些函數。
但是，在回調函數方面，jQuery的功能非常弱。為了改變這一點，jQuery開發團隊就設計了deferred對象。
簡單說，deferred對象就是jQuery的回調函數解決方案。在英語中，defer的意思是"延遲"，所以deferred對象的含義就是"延遲"到未來某個點再執行。
79.你知道哪些針對jQuery的優化方法？
-
1.總是從ID選擇器開始繼承在jQuery中最快的選擇器是ID選擇器，因為它直接來自于JavaScript的getElementById()方法。
例如有一段HTML代碼：
1 <div id="content"> 2 <form method="post"action="#"> 3 <h2>交通信號燈</h2> 4 <ul id="traffic_light"> 5 <li> 6 <input type="radio"class="on"name="light"value="red"/>紅色 7 </li> 8 <li> 9 <input type="radio"class="off"name="light"value="yellow"/>黃色 10 </li> 11 <li> 12 <input type="radio"class="off"name="light"value="green"/>綠色 13 </li> 14 </ul> 15 <input class="button"id="traffic_button"type="submit"value="Go"/> 16 </form> 17 </div>比如需要選擇紅綠單選框，那么可以使用一個tag?name來限制(修飾)class，如下所示：var?active_light=$(“input.on”);當然也可以結合就近的ID，如下所示：var?active_light=$(“#traffic_light?input.on”);? 如果采用下面的選擇器，那么效率是低效的。var?traffic_button=$(“#content.button”);因為button已經有ID了，我們可以直接使用ID選擇器。如下所示：var?traffic_button=$(“#traffic_button”);當然這只是對于單一的元素來講。如果你需要選擇多個元素，這必然會涉及到DOM遍歷和循環，為了提高性能，建議從最近的ID開始繼承。如下所示：var?traffic_lights=$(“#traffic_light?input”);
-
2.在class前使用tag(標簽名)在jQuery中第二快的選擇器是tag(標簽)選擇器(比如：$(“head”))。
跟ID選擇器累時，因為它來自原生的getElementsByTagName()方法。繼續看剛才那段HTML代碼：
在使用tag來修飾class的時候，我們需要注意以下幾點：（1）不要使用tag來修飾ID，如下所示：var?content=$(“div#content”);這樣一來，選擇器會先遍歷所有的div元素，然后匹配#content。（好像jQuery從1.3.1開始改變了選擇器核心后，不存在這個問題了。暫時無法考證。）（2）不要畫蛇添足的使用ID來修飾ID，如下所示：var?traffic_light=$(“#content#traffic_light”);
-
3.將jQuery對象緩存起來把jQuery對象緩存起來就是要告訴我們要養成將jQuery對象緩存進變量的習慣。
下面是一個jQuery新手寫的一段代碼：
1 $("#traffic_light input.on").bind("click",function(){}); 2 $("#traffic_light input.on").css("border","1px dashed yellow"); 3 $("#traffic_light input.on").css("background-color","orange"); 4 $("#traffic_light input.on").fadeIn("slow");但切記不要這么做。我們應該先將對象緩存進一個變量然后再操作，如下所示：
記住，永遠不要讓相同的選擇器在你的代碼里出現多次.注：（1）為了區分普通的JavaScript對象和jQuery對象，可以在變量首字母前加上$符號。（2）上面代碼可以使用jQuery的鏈式操作加以改善。如下所示：
1 var $active_light = $("#traffic_light input.on"); 2 3 $active_light.bind("click",function(){}) 4 .css("border","1px dashed yellow") 5 .css("background-color","orange") 6 .fadeIn("slow");-
4.如果你打算在其他函數中使用jQuery對象，那么你必須把它們緩存到全局環境中。
如下代碼所示：
1 // 在全局范圍定義一個對象(例如:window對象) 2 window.$my = { 3 head:$("head"), 4 trafficLight:$("#trafficLight"), 5 trafficButton:$("#trafficButton") 6 }; 7 8 function doSomething(){ 9 // 現在你可以引用存儲的結果并操作它們 10 var script=document.createElement("script"); 11 $my.head.append(script); 12 13 // 當你在函數內部操作是,可以繼續將查詢存入全局對象中去. 14 $my.coolResults=$("#some_ul li"); 15 $my.otherResults=$("#some_table td"); 16 17 // 將全局函數作為一個普通的jquery對象去使用. 18 $my.otherResults.css("border-color","red"); 19 $my.trafficLight.css("border-color","green"); 20 } 21 // 你也可以在其他函數中使用它.這里的基本思想是在內存中建立你確實想要的東西，然后更新DOM。這并不是一個jQuery最佳實踐，但必須進行有效的JavaScript操作。直接的DOM操作速度很慢。例如，你想動態的創建一組列表元素，千萬不要這樣做,如下所示：對直接的DOM操作進行限制。
1 var top_100_list = [];// 假設這里是100個獨一無二的字符串 2 var $mylist = $("#mylist");// jQuery選擇到<ul>元素 3 4 for(var i = 0,l = top_100_list.length;i<l;i++) { 5 $mylist.append("<li>" + top_100_list[i] + "</li>"); 6 }我們應該將整套元素字符串在插入進dom中之前先全部創建好，如下所示：
1 $("#entryform input").bind("focus",function() { 2 $(this).addClass("selected"); 3 }).bind("blur",function(){ 4 $(this).removeClass("selected"); 5 });-
5.冒泡除非在特殊情況下,否則每一個js事件(例如:click,mouseover等.)都會冒泡到父級節點。
當我們需要給多個元素調用同個函數時這點會很有用。代替這種效率很差的多元素事件監聽的方法就是,你只需向它們的父節點綁定一次。比如,我們要為一個擁有很多輸入框的表單綁定這樣的行為:當輸入框被選中時為它添加一個class傳統的做法是，直接選中input，然后綁定focus等，如下所示：
1 $("#entryform").bind("focus",function(e) { 2 var $cell = $(e.target); // e.target捕捉到觸發的目標元素 3 $cell.addClass("selected"); 4 }).bind("blur",function(e) { 5 var $cell = $(e.target); 6 $cell.removeClass("selected"); 7 });當然上面代碼能幫我們完成相應的任務，但如果你要尋求更高效的方法，請使用如下代碼：
通過在父級監聽獲取焦點和失去焦點的事件，對目標元素進行操作。在上面代碼中，父級元素扮演了一個調度員的角色,它可以基于目標元素綁定事件。如果你發現你給很多元素綁定了同一個事件監聽,那么現在的你肯定知道哪里做錯了。
-
6.推遲到$(window).load。
jQuery對于開發者來說有一個很誘人的東西,可以把任何東西掛到$(document).ready下。盡管$(document).rady確實很有用，它可以在頁面渲染時，其它元素還沒下載完成就執行。如果你發現你的頁面一直是載入中的狀態，很有可能就是$(document).ready函數引起的。你可以通過將jQuery函數綁定到$(window).load事件的方法來減少頁面載入時的cpu使用率。它會在所有的html(包括iframe)被下載完成后執行。一些特效的功能，例如拖放,視覺特效和動畫,預載入隱藏圖像等等，都是適合這種技術的場合。
-
7.壓縮JavaScript。
在線壓縮地址:http://dean.edwards.name/packer/壓縮之前，請保證你的代碼的規范性，否則可能失敗，導致Js錯誤。
-
8.盡量使用ID代替Class。
?前面性能優化已經說過，ID選擇器的速度是最快的。所以在HTML代碼中，能使用ID的盡量使用ID來代替class。看下面的一個例子：
1 // 創建一個list 2 var $myList = $('#myList'); 3 var myListItems = '<ul>'; 4 5 for(var i = 0; i < 1000; i ++) { 6 myListItems += '<li class = "listItem'+i+'">This is a list item</li>'; 7 // 這里使用的是class 8 } 9 10 myListItems += '</ul>'; 11 $myList.html(myListItems); 12 // 選擇每一個li 13 14 for(var i = 0; i<1000; i++) { 15 var selectedItem = $('.listItem' + i); 16 }在上段代碼中，選擇每個li總共只用了61毫秒，相比class的方式，將近快了100倍。? ? ? ?在代碼最后，選擇每個li的過程中，總共用了5066毫秒，超過5秒了。接著我們做一個對比，用ID代替class：
-
9.給選擇器一個上下文。
jQuery選擇器中有一個這樣的選擇器，它能指定上下文。jQuery(expression,context);通過它，能縮小選擇器在DOM中搜索的范圍，達到節省時間，提高效率。普通方式：$(‘.myDiv’)改進方式：$(‘.myDiv’,$(“#listItem”))。
-
10.慎用.live()方法（應該說盡量不要使用）。
這是jQuery1.3.1版本之后增加的方法，這個方法的功能就是為新增的DOM元素動態綁定事件。但對于效率來說，這個方法比較占用資源。所以請盡量不要使用它。例如有這么一段代碼:
1 <script type="text/javascript"> 2 $(function(){ 3 4 $("p").click(function(){ 5 alert($(this).text()); 6 }); 7 8 $("button").click(function(){ 9 $("<p>this is second p</p>").appendTo("body"); 10 }); 11 }) 12 </script> 13 <body> 14 <p>this is first p</p> 15 <button>add</button> 16 </body>運行后，你會發現新增的p元素，并沒用被綁定click事件。你可以改成.live(“click”)方式解決此問題，代碼如下：
1 $(function() { 2 $("p").live("click",function() { 3 // 改成live方式 4 alert($(this).text()); 5 }); 6 7 $("button").click(function() { 8 $("<p>this is second p</p>").appendTo("body"); 9 }); 10 })但我并不建議大家這么做，我想用另一種方式去解決這個問題，代碼如下：
1 $(function() { 2 $("p").click(function() { 3 alert($(this).text()); 4 }); 5 6 $("button").click(function() { 7 $("<p>this is second p</p>").click(function() { 8 // 為新增的元素重新綁定一次 9 alert($(this).text()); 10 }).appendTo("body"); 11 }); 12 })雖然我把綁定事件重新寫了一次，代碼多了點，但這種方式的效率明顯高于live()方式，特別是在頻繁的DOM操作中，這點非常明顯。
80.請解釋.end()的用途。
在官方的API上是這樣描述end()方法的：“回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變為前一次的狀態。”；看樣子好像是找到最后一次操作的元素的上一元素，在如下的例子中：html代碼：
復制代碼代碼如下:
1 <div>測試內容1</div><div>測試內容2</div>jQuery代碼：
復制代碼代碼如下:
1 $('<p>新增內容</p>').appendTo('div').addClass('c1').end().addClass('c2');復制代碼代碼如下:
1 <div>測試內容1 2 <p class="c1 c2">新增內容</p> 3 </div> 4 <div>測試內容2 5 <p class="c1">新增內容</p> 6 </div>這里我就有一點不太明白了，怎么只有第一個<p>標簽有兩個樣式，end()方法后返回的是什么,在火狐里添加了監控，得到如下結果：1.$('<p>新增內容</p>').appendTo('div')返回的是：[p,p]對象數組，即新增后的兩個p標簽；2.$('<p>新增內容</p>').appendTo('div').addClass('c1')返回的是：[p.c1,p.c1]對象數組，即添加了c1類樣式后的p對象數組；3.$('<p>新增內容</p>').appendTo('div').addClass('c1').end()返回的是[p.c1],是第1個<div>中的<p>,在2操作中，最后“破壞”的是第2個<div>中的<p>,所以他的前一次操作的對象是第1個<div>中的<p>,返回的就是它;4.$('<p>新增內容</p>').appendTo('div').addClass('c1').end().addClass('c2')返回的仍然是第1個<div>中的<p>;現在算是有點明白了，關鍵是要搞清楚最后一次操作的元素的上一元素是什么。
81.你如何給一個事件處理函數命名空間，為什么要這樣做？
任何作為type參數的字符串都是合法的；如果一個字符串不是原生的JavaScript事件名，那么這個事件處理函數會綁定到一個自定義事件上。這些自定義事件絕對不會由瀏覽器觸發，但可以通過使用.trigger()或者.triggerHandler()在其他代碼中手動觸發。如果type參數的字符串中包含一個點(.)字符，那么這個事件就看做是有命名空間的了。這個點字符就用來分隔事件和他的命名空間。舉例來說，如果執行.bind('click.name',handler)，那么字符串中的click是事件類型，而字符串name就是命名空間。命名空間允許我們取消綁定或者觸發一些特定類型的事件，而不用觸發別的事件。參考unbind()來獲取更多信息。
jQuery的bind/unbind方法應該說使用很簡單，而且大多數時候可能并不會用到，取而代之的是直接用click/keydown之類的事件名風格的方法來做事件綁定操作。
但假設如下情況：需要在運行時根據用戶交互的結果進行不同click事件處理邏輯的綁定，因而理論上會無數次對某一個事件進行bind/unbind操作。但又希望unbind的時候只把自己綁上去的處理邏輯給釋放掉而不是所有其他地方有可能的額外的同一事件綁定邏輯。這時候如果直接用.click()/.bind('click')加上.unbind('click')來進行重復綁定的話，被unbind掉的將是所有綁定在元素上的click處理邏輯，潛在會影響到該元素其他第三方的行為。
當然如果在bind的時候是顯示定義了function變量的話，可以在unbind的時候提供function作為第二個參數來指定只unbind其中一個處理邏輯，但實際應用中很可能會碰到各種進行匿名函數綁定的情況。對于這種問題，jQuery的解決方案是使用事件綁定的命名空間。即在事件名稱后添加.something來區分自己這部分行為邏輯范圍。
比如用.bind('click.myCustomRoutine',function(){...});同樣是把匿名函數綁定到click事件（你可以用自己的命名空間多次綁定不同的行為方法上去），當unbind的時候用.unbind('click.myCustomRoutine')即可釋放所有綁定到.myCustomRoutine命名空間的click事件，而不會解除其他通過.bind('click')或另外的命名空間所綁定的事件行為。同時，使用命令空間還可以讓你一次性unbind所有此命名空間下的自定義事件綁定，通過.unbind('.myCustomRoutine')即可。要注意的是，jQuery的命名空間并不支持多級空間。
因為在jQuery里面，如果用.unbind('click.myCustomRoutine.myCustomSubone')，解除的是命名空間分別為myCustomRoutine和myCustomSubone的兩個并列命名空間下的所有click事件，而不是"myCustomRoutine下的myCustomSubone子空間"。
82.請說出你可以傳遞給jQuery方法的四種不同值。
選擇器（字符串），HTML（字符串），回調函數，HTML元素，對象，數組，元素數組，jQuery對象等。
83.什么是效果隊列？
jQuery中有個動畫隊列的機制。當我們對一個對象添加多次動畫效果時后添加的動作就會被放入這個動畫隊列中，等前面的動畫完成后再開始執行。可是用戶的操作往往都比動畫快，如果用戶對一個對象頻繁操作時不處理動畫隊列就會造成隊列堆積，影響到效果。jQuery中有stop這個方法可以停止當前執行的動畫，并且它有兩個布爾參數，默認值都為false。第一個參數為true時會清空動畫隊列，第二個參數為true時會瞬間完成掉當前動畫。所以，我們經常使用obj.stop(true,true)來停止動畫。但是這還不夠！正如jQuery文檔中的說法，即使第二個參數為true，也僅僅是把當前在執行的動畫跳轉到完成狀態。這時第一個參數如果也為true，后面的隊列就會被清空。如果一個效果需要多個動畫同時處理，我們僅完成其中的一個而把后面的隊列丟棄了，這就會出現意料之外的結果。
84.請指出.get()，[]，eq()的區別。
eq:返回是一個jquery對象作用是將匹配的元素集合縮減為一個元素。這個元素在匹配元素集合中的位置變為0，而集合長度變成1。
get:是一個html對象數組作用是取得其中一個匹配的元素。num表示取得第幾個匹配的元素。
85.請指出.bind()，.live()和.delegate()的區別。
在操縱DOM的語境中，document是根節點。現在我們可以較容易地說明.bind()、.live()和.delegate()的不同之處了。
.bind()
1 $('a').bind('click', function() {alert("That tickles!")});這是最簡單的綁定方法了。JQuery掃描文檔找出所有的$(‘a’)元素，并把alert函數綁定到每個元素的click事件上。
.live()
1 $('a').live('click', function() {alert("That tickles!")});JQuery把alert函數綁定到$(document)元素上，并使用’click’和’a’作為參數。任何時候只要有事件冒泡到document節點上，它就查看該事件是否是一個click事件，以及該事件的目標元素與’a’這一CSS選擇器是否匹配，如果都是的話，則執行函數。
live方法還可以被綁定到具體的元素(或context)而不是document上，像這樣：
1 $('a', $('#container')[0]).live(...);.delegate()
1 $('#container').delegate('a', 'click', function() {alert("That tickles!")});JQuery掃描文檔查找$(‘#container’)，并使用click事件和’a’這一CSS選擇器作為參數把alert函數綁定到$(‘#container’)上。任何時候只要有事件冒泡到$(‘#container’)上，它就查看該事件是否是click事件，以及該事件的目標元素是否與CCS選擇器相匹配。如果兩種檢查的結果都為真的話，它就執行函數。
可以注意到，這一過程與.live()類似，但是其把處理程序綁定到具體的元素而非document這一根上。精明的JS’er們可能會做出這樣的結論，即$('a').live()==$(document).delegate('a')，是這樣嗎?嗯，不，不完全是。
為什么.delegate()要比.live()好用？
基于幾個原因，人們通常更愿意選用jQuery的delegate方法而不是live方法。考慮下面的例子：
1 $('a').live('click', function(){blah()}); // 或者 2 $(document).delegate('a', 'click', function(){blah()});速度
后者實際上要快過前者，因為前者首先要掃描整個的文檔查找所有的$(‘a’)元素，把它們存成jQuery對象。盡管live函數僅需要把’a’作為串參數傳遞以用做之后的判斷，但是$()函數并未知道被鏈接的方法將會是.live()。而另一方面，delegate方法僅需要查找并存儲$(document)元素。
一種尋求避開這一問題的方法是調用在$(document).ready()之外綁定的live，這樣它就會立即執行。在這種方式下，其會在DOM獲得填充之前運行，因此就不會查找元素或是創建jQuery對象了。
靈活性和鏈能力
live函數也挺令人費解的。想想看，它被鏈到$(‘a’)對象集上，但其實際上是在$(document)對象上發生作用。由于這個原因，它能夠試圖以一種嚇死人的方式來把方法鏈到自身上。實際上，我想說的是，以$.live(‘a’,…)這一形式作為一種全局性的jQuery方法，live方法會更具意義一些。
僅支持CSS選擇器
最后一點，live方法有一個非常大的缺點，那就是它僅能針對直接的CSS選擇器做操作，這使得它變得非常的不靈活。
- 為什么選擇.live()或.delegate()而不是.bind()？
畢竟，bind看起來似乎更加的明確和直接，難道不是嗎?嗯，有兩個原因讓我們更愿意選擇delegate或live而不是bind：
為了把處理程序附加到可能還未存在于DOM中的DOM元素之上。因為bind是直接把處理程序綁定到各個元素上，它不能把處理程序綁定到還未存在于頁面中的元素之上。
如果你運行了$(‘a’).bind(…)，而后新的鏈接經由AJAX加入到了頁面中，則你的bind處理程序對于這些新加入的鏈接來說是無效的。而另一方面live和delegate則是被綁定到另一個祖先節點上，因此其對于任何目前或是將來存在于該祖先元素之內的元素都是有效的。
或者為了把處理程序附加到單個元素上或是一小組元素之上，監聽后代元素上的事件而不是循環遍歷并把同一個函數逐個附加到DOM中的100個元素上。把處理程序附加到一個(或是一小組)祖先元素上而不是直接把處理程序附加到頁面中的所有元素上，這種做法帶來了性能上的好處。
停止傳播
最后一個我想做的提醒與事件傳播有關。通常情況下，我們可以通過使用這樣的事件方法來終止處理函數的執行：
1 $('a').bind('click', function(e) { 2 e.preventDefault(); 3 // 或者 e.stopPropagation(); 4 });不過，當我們使用live或是delegate方法的時候，處理函數實際上并沒有在運行，需要等到事件冒泡到處理程序實際綁定的元素上時函數才會運行。而到此時為止，我們的其他的來自.bind()的處理函數早已運行了。
86.請指出$和$.fn的區別，或者說出$.fn的用途。
Jquery為開發插件提供了兩個方法，分別是：
1 $.extend(obj); 2 $.fn.extend(obj);- 1.那么這兩個分別是什么意思？
$.extend(obj);是為了擴展jquery本身，為類添加新的方法。
$.fn.extend(obj);給JQUERY對象添加方法。
- 2.$.fn中的fn是什么意思，其實是prototype，即$.fn=$.prototype;
具體用法請看下面的例子：
1 $.extend({ 2 3 add:function(a, b) { 4 return a+b; 5 } 6 }) 7 8 $.add(5,8); // return 13注意沒有，這邊的調用直接調用，前面不用任何對象。直接$.+方法名
$.fn.extend(obj)；對prototype進行擴展，為jquery類添加成員函數，jquery類的實例可以使用這個成員函數。
1 $.fn.extend({ 2 3 clickwhile:function(){ 4 5 $(this).click(function(){ 6 alert($(this).val()) 7 }) 8 } 9 }) 10 11 $('input').clickwhile(); // 當點擊輸入框會彈出該對象的Value值注意調用時候前面是有對象的。即$('input')這么個東西。
87.請寫出一個函數實現N!的計算。N取很大的值時，該怎么辦？
使用循環、遞歸都能寫出函數。
當N取值很大時，應該考慮把數值轉化為字符串再進行運算。大數乘法再轉化為大數加法運算，其具體算法應該有不少C語言實現，可以參考一下。
88.modulo(12,5) //2 ；問題：實現滿足上述結果的modulo函數。
89."i'm?a?lasagna?hog".split("").reverse().join("");問題：上面的語句的返回值是什么？
答案："goh?angasal?a?m'i";
90.(window.foo||(window.foo="bar"));問題：window.foo的值是什么？
答案："bar"只有window.foo為假時的才是上面答案，否則就是它本身的值。
var?foo="Hello";(function(){var?bar="World";alert(foo+bar);})();alert(foo+bar);
91.問題：上面兩個alert的結果是什么？
答案:"Hello?World"和ReferenceError:bar?is?not?defined
92.var?foo=[];foo.push(1);foo.push(2);問題：foo.length的值是什么？
答案：2
有趣的問題：
91.你編寫過的最酷的代碼是什么？其中你最自豪的是什么？
92.在你使用過的開發工具中，最喜歡哪個？
93.你有什么業余項目嗎？是哪種類型的？
94.你最愛的IE特性是什么？
數據冰冷的，但我們要讓數據溫暖起來，改變我們的生活！轉載于:https://www.cnblogs.com/hanye2458/p/6034831.html
總結
以上是生活随笔為你收集整理的常见前端九十道面试题及答案-韩烨的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微商潮牌怎么引流？成功的人不是赢在起跑点
- 下一篇： 妖精妖怪