• • • 使用 CDN 托管

CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其基本思路是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母臁⒏€(wěn)定。其目的是使用戶可就近取得所需內(nèi)容，解決 Internet網(wǎng)絡(luò)擁擠的狀況，提高用戶訪問網(wǎng)站的響應(yīng)速度。

• • • 緩存的使用

Ajax調(diào)用都采用緩存調(diào)用方式，一般采用附加特征參數(shù)方式實現(xiàn)，注意其中的<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征參數(shù)，這個參數(shù)不變化就使用緩存文件，如果發(fā)生變化則重新下載新文件或更新信息。

• • • css文件放置在head，js放置在文檔尾部
    • 在服務(wù)器端配置control-cache? last-modify-date
    • 在服務(wù)器配置Entity-Tag???? if-none-match

?聞東師兄說：

?　　可再結(jié)合H5新特性里的預(yù)加載，圖片優(yōu)化方面，可對圖片進行壓縮，JPG的推薦jpegmin這個軟件，png的推薦?https://tinypng.com/，前面這兩個是壓縮后不會失真的，gif的推薦GIF?Optimizer，但可能會有毛邊。

?

• 為什么利用多個域名來提供網(wǎng)站資源會更有效？
  • 瀏覽器同一時間可以從一個域名下載多少資源？

　　　　　　即瀏覽器并發(fā)請求數(shù)。同一時間針對同一域名下的請求有一定數(shù)量限制。超過限制數(shù)目的請求會被阻止。（借用百度上的一張圖片）

?

• • 有什么例外嗎？
    • 加分項： 指出在手機端可能有負面影響 (http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/)
    • 加分項： HTTP2 / SPDY

?

• 請說出三種減少頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）

　　關(guān)于實際加載時間，可以使用上題”你如何對網(wǎng)站的文件和資源進行優(yōu)化？“方法。

　　關(guān)于感知時間，可以使用上題“編寫代碼的哪些方面能夠使你興奮或感興趣？”答案。

• *如果你參與到一個項目中，發(fā)現(xiàn)他們使用 Tab 來縮進代碼，但是你喜歡空格，你會怎么做？
  • 建議這個項目使用像 EditorConfig (http://editorconfig.org/) 之類的規(guī)范
  • 為了保持一致性，接受項目原有的風格
  • 直接使用 VIM 的 retab 命令

?

• 請寫一個簡單的幻燈效果頁面
  • 如果不使用JS來完成，可以加分。

?

• *你都使用哪些工具來測試代碼的性能？
  • Profiler, JSPerf, Dromaeo

• 如果今年你打算熟練掌握一項新技術(shù)，那會是什么？

　　　　開發(fā)單頁webapp的技術(shù)。

SAP能夠是頁面與頁面之間無縫連接，避免出現(xiàn)白頁，且?guī)в袆討B(tài)效果，提高用戶體驗。同時SAP，有javascript渲染頁面，然后在從服務(wù)器獲取小量的數(shù)據(jù)顯示，如此反復(fù)，請求的數(shù)據(jù)無需要服務(wù)器處理，減少服務(wù)器負荷。

SAP對技術(shù)要求高。要考慮首屏加載事件過長；動畫效果要考慮低端手機；垃圾收集，需要自己釋放資源，避免頁面變卡。

• *Long-Polling, Websockets, SSE(Server-Sent Event) 之間有什么區(qū)別？

?

• 請談一下你對網(wǎng)頁標準和標準制定機構(gòu)重要性的理解。

　　　　關(guān)于W3C標準，要求：

1）書寫閉合，標簽小寫、不亂嵌套。有利于SEO

2）盡量使用外鏈的css和js腳本，結(jié)構(gòu)行為表現(xiàn)分離。有利于頁面加載速度加快。

3）樣式和標簽分離，使用更合理的語義化標簽，內(nèi)容被更多用戶設(shè)備訪問，維護成本也會降低。

　　　　指定標準，能夠規(guī)避不同開發(fā)商開發(fā)出來不同的瀏覽器顯示不一致問題，同時為

• *什么是 FOUC（無樣式內(nèi)容閃爍）？你如何來避免 FOUC？

某些頁面在Windows 下的Internet Explorer出現(xiàn)一些奇怪的現(xiàn)象:以無樣式顯示頁面內(nèi)容的瞬間閃爍,這種現(xiàn)象稱之為文檔樣式短暫失效(Flash of Unstyled Content),簡稱為FOUC.原因大致為：

1，使用import方法導(dǎo)入樣式表。

2，將樣式表放在頁面底部

3，有幾個樣式表，放在html結(jié)構(gòu)的不同位置。其實原理很清楚：當樣式表晚于 結(jié)構(gòu)性html 加載，當加載到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析后，將重新渲染頁面，也就出現(xiàn)了短暫 的 花屏現(xiàn)象。

?

解決方法：使用LINK標簽將樣式表放在文檔HEAD中更多

?

• 請盡可能完整得描述下從輸入URL到整個網(wǎng)頁加載完畢及顯示在屏幕上的整個流程

1）用戶輸入網(wǎng)址

2）瀏覽器通過DNS獲取網(wǎng)站的IP地址

3）瀏覽器嘗試與服務(wù)器建立連接

4）服務(wù)器發(fā)送永久重定向

5）瀏覽器跟蹤從定向地址

7）服務(wù)器處理請求

8）服務(wù)器發(fā)送HTML響應(yīng)

9）瀏覽器開始顯示HTML

10）瀏覽器發(fā)送獲取嵌套在html中的元素

　　　　關(guān)于頁面渲染過程：

1）解析HTML代碼，生成一棵DOM樹

2）解析CSS文件

3）生成渲染樹（受樣式影響，包含不可見元素）

4）渲染樹中的節(jié)點

?HTML相關(guān)問題：

• doctype（文檔類型）的作用是什么？

　　　　位于html標簽最前面，告訴瀏覽器以那種html和xhtml規(guī)范。分為標準模式和怪異模式、基于框架的HTML模式。假如瀏覽器不以doctype標準模式編寫DTD，頁面除了無法通過代碼檢驗之外，還無法在瀏覽器中正確顯示。

a.如果需要干凈的標記，免于表現(xiàn)層的混亂，用XHTML Strict DTD類型。

b.Transitional DTD 可包含 W3C 所期望移入樣式表的呈現(xiàn)屬性和元素。如果用戶使用了不支持層疊樣式表（CSS）的瀏覽器以至于你不得不使用 HTML 的呈現(xiàn)特性時，用Transitional DTD 類型。

c.Frameset DTD 被用于帶有框架的文檔。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD

• 瀏覽器標準模式和怪異模式之間的區(qū)別是什么？

　　　　當瀏覽器廠商開始創(chuàng)建與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現(xiàn)這一目的，他們創(chuàng)建了兩種呈現(xiàn)模式，標準和混雜模式。在標準模式中，瀏覽器會根據(jù)規(guī)范呈現(xiàn)頁面；在混雜模式中。頁面會以一種相對寬松的向后兼容方式顯示。混雜模式常用于模擬老式瀏覽器的行為，以防止老站點無法工作。

　　　　他們最大的不同是對盒模型的解析。

　　如：在strict mode中 ：width是內(nèi)容寬度?，也就是說,元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + ?margin-right;

　　　　在quirks mode中 ：width則是元素的實際寬度?，內(nèi)容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

　　　　使用 document.compatMode來判斷瀏覽器的解析方式。

?

• 使用 XHTML 的局限有哪些？

xhtml要求嚴格：放棄了一些語義不好的標簽，必須有head、body，每個dom必須要閉合。一些老的瀏覽器并不兼容。

• • 如果頁面使用 'application/xhtml+xml' 會有什么問題嗎？

　　　　　　為contentType屬性值，IE不支持application/xhtml+xml類型，支持text/html

• 如果網(wǎng)頁內(nèi)容需要支持多語言，你會怎么做？

　　　　使用統(tǒng)一的UTF-8編碼

• • 在設(shè)計和開發(fā)多語言網(wǎng)站時，有哪些問題你必須要考慮？

1）制圖時，應(yīng)該講圖形的圖像層與文本層分離，這樣在重新繪制改圖形時只需對文本進行翻譯。

2）設(shè)置控件屬性應(yīng)考慮到各種語言版本的文本顯示，盡可能為翻譯預(yù)留足夠的空間。同時也應(yīng)該保持不同語言界面的統(tǒng)一性，避免過多的差異。

3）編碼注意代碼復(fù)用，將多個模塊的共用信息存放在共通的文件中便于全局管理。

　　　　頁面請求的過程可描述如下:
1）用戶在終端選擇自己所偏好的語言,并通過瀏覽器向服務(wù)器發(fā)送頁面請求。
2）模板界面接收到語言選項后,從資源文件中讀取相應(yīng)區(qū)域的資源。
3）在響應(yīng)用戶的頁面請求時,系統(tǒng)將根據(jù)檢索到的語言選項,動態(tài)的加載相關(guān)區(qū)域的JS文件和CSS文件,為不同區(qū)域初始化不同的樣式。
4）數(shù)據(jù)庫接口接收到語言選項后,將其作為一個SQL參數(shù)傳入數(shù)據(jù)庫,檢索相應(yīng)區(qū)域的數(shù)據(jù)。
5）模板界面將接收到的各種信息,組織成Html代碼,再發(fā)送給瀏覽器,顯示給終端用戶。
　　　　　　　　該架構(gòu)的核心是模板界面,它主要負責將接收到的各類信息組織成Html代碼。

?

• data-屬性的作用是什么？

data-是HTML5為前端開發(fā)者提供自定義的屬性，這些屬性集可以通過對象的dataset屬性獲取，不支持該屬性的瀏覽器可以通過 getAttribute方法獲取。

• 如果把 HTML5 看作做一個開放平臺，那它的構(gòu)建模塊有哪些？

1）Web Storage API

2）基于位置服務(wù)LBS

3）無插件播放音頻視頻

4）調(diào)用相機和GPU圖像處理單元等硬件設(shè)備

5）拖拽和Form API

?

• *請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

　　共同點：都是保存在瀏覽器端，且同源的。

　　區(qū)別：

1）cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來回傳遞。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。

?

2）cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。存儲大小限制也不同，cookie數(shù)據(jù)不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會話標識。

3）sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。數(shù)據(jù)有效期不同，sessionStorage：僅在當前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉。

4）作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

?

Web Storage 支持事件通知機制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。Web Storage 的 api 接口使用更方便。

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web請求之間保存數(shù)據(jù)。有了本地數(shù)據(jù)，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。

sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數(shù)據(jù)。

　　　　其中sessionStorage的概念很特別，引入了一個“瀏覽器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)。也就是說只要這個瀏覽器窗口沒有關(guān)閉，即使刷新頁面或進入同源另一頁面，數(shù)據(jù)仍然存在。關(guān)閉窗口后，sessionStorage即被銷毀。同時“獨立”打開的不同窗口，即使是同一頁面，sessionStorage對象也是不同的。

?

Web Storage帶來的好處：

1）減少網(wǎng)絡(luò)流量：一旦數(shù)據(jù)保存在本地后，就可以避免再向服務(wù)器請求數(shù)據(jù)，因此減少不必要的數(shù)據(jù)請求，減少數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。

2）快速顯示數(shù)據(jù)：性能好，從本地讀數(shù)據(jù)比通過網(wǎng)絡(luò)從服務(wù)器獲得數(shù)據(jù)快得多，本地數(shù)據(jù)可以即時獲得。再加上網(wǎng)頁本身也可以有緩存，因此整個頁面和數(shù)據(jù)都在本地的話，可以立即顯示。

3）臨時存儲：很多時候數(shù)據(jù)只需要在用戶瀏覽一組頁面期間使用，關(guān)閉窗口后數(shù)據(jù)就可以丟棄了，這種情況使用sessionStorage非常方便。

?

瀏覽器本地存儲與服務(wù)器端存儲之間的區(qū)別其實數(shù)據(jù)既可以在瀏覽器本地存儲，也可以在服務(wù)器端存儲。

瀏覽器端可以保存一些數(shù)據(jù)，需要的時候直接從本地獲取，sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數(shù)據(jù)。

服務(wù)器端也可以保存所有用戶的所有數(shù)據(jù)，但需要的時候瀏覽器要向服務(wù)器請求數(shù)據(jù)。

1.服務(wù)器端可以保存用戶的持久數(shù)據(jù)，如數(shù)據(jù)庫和云存儲將用戶的大量數(shù)據(jù)保存在服務(wù)器端。

2.服務(wù)器端也可以保存用戶的臨時會話數(shù)據(jù)。服務(wù)器端的session機制，如jsp的 session 對象，數(shù)據(jù)保存在服務(wù)器上。實現(xiàn)上，服務(wù)器和瀏覽器之間僅需傳遞session id即可，服務(wù)器根據(jù)session id找到對應(yīng)用戶的session對象。會話數(shù)據(jù)僅在一段時間內(nèi)有效，這個時間就是server端設(shè)置的session有效期。

服務(wù)器端保存所有的用戶的數(shù)據(jù)，所以服務(wù)器端的開銷較大，而瀏覽器端保存則把不同用戶需要的數(shù)據(jù)分布保存在用戶各自的瀏覽器中。瀏覽器端一般只用來存儲小數(shù)據(jù)，而服務(wù)器可以存儲大數(shù)據(jù)或小數(shù)據(jù)。服務(wù)器存儲數(shù)據(jù)安全一些，瀏覽器只適合存儲一般數(shù)據(jù)。

?

• 請描述一下?GET?和?POST?的區(qū)別?

?

get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)。

get是把參數(shù)數(shù)據(jù)隊列加到提交表單的ACTION屬性所指的URL中，值和表單內(nèi)各個字段一一對應(yīng)，在URL中可以看到。post是通過HTTP post機制，將表單內(nèi)各個字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程

get形式的url對搜索引擎更加友好，可以提高搜索引擎排名。Post使用的url有時候會阻止爬蟲和搜索引擎的訪問。其他網(wǎng)站和用戶可以鏈接到get形式的url，無論用戶的訪問，還是搜索引擎的收錄而相應(yīng)提高了頁面排名，能夠直接或間接提高網(wǎng)站瀏覽。同時，get形式的url這種表示法是可以緩存的，顯著提升了客戶端和服務(wù)端的性能。

　　而不安全操作，如確定訂購、下訂單、達成協(xié)議和刪除頁面等，應(yīng)該通過post執(zhí)行，避免沒有顯式用戶請求和同一的情況下發(fā)生意外的操作。例如搜索引擎刪除整個頁面，只因為抓取了一個鏈接。很多不希望用戶瀏覽器遵循頁面鏈接的各種完整，這些情況下，應(yīng)該要求用戶登錄并且足夠的權(quán)限才能執(zhí)行某些危險操作。

　　若符合下列任一情況，則用POST方法：

* 請求的結(jié)果有持續(xù)性的副作用，例如，數(shù)據(jù)庫內(nèi)添加新的數(shù)據(jù)行。

* 若使用GET方法，則表單上收集的數(shù)據(jù)可能讓URL過長。

* 要傳送的數(shù)據(jù)不是采用7位的ASCII編碼。

　　若符合下列任一情況，則用GET方法：

* 請求是為了查找資源，HTML表單數(shù)據(jù)僅用來幫助搜索。

* 請求結(jié)果無持續(xù)性的副作用。

* 收集的數(shù)據(jù)及HTML表單內(nèi)的輸入字段名稱的總長不超過1024個字符。

　　　　（目測還會問到“同步和異步的區(qū)別?”）

　　　　　　同步：腳本會停留并等待服務(wù)器發(fā)送回復(fù)然后再繼續(xù)。提交請求->等待服務(wù)器處理->處理完畢返回，這個期間客戶端瀏覽器不能干任何事。

　　　　　　異步：腳本允許頁面繼續(xù)其進程并處理可能的回復(fù)。請求通過事件觸發(fā)->服務(wù)器處理（這是瀏覽器仍然可以作其他事情）->處理完畢

　　　　　　　　若要在使用ajax請求后處理發(fā)送請求返回的結(jié)果，最好使用同步請求。

?

CSS?相關(guān)問題：

• CSS 中類(classes)和 ID 的區(qū)別。

?在樣式表定義一個樣式的時候，可以定義id也可以定義class。

1、在CSS文件里書寫時，ID加前綴"#"；CLASS用"."

2、id一個頁面只可以使用一次；class可以多次引用。

3、ID是一個標簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象名字，如果一個屋子有2個人同名，就會出現(xiàn)混淆；class是一個樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上，就象一件衣服；

4、從概念上說就是不一樣的：id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；class是先定義好一種樣式，再套給多個結(jié)構(gòu)/內(nèi)容。

　　　　目前的瀏覽器還都允許用多個相同ID，一般情況下也能正常顯示，不過當你需要用JavaScript通過id來控制div時就會出現(xiàn)錯誤。

?

• 描述下 “reset” CSS 文件的作用和使用它的好處。

? reset.css能夠重置瀏覽器的默認屬性。不同的瀏覽器具有不同的樣式，重置能夠使其統(tǒng)一。比如說ie瀏覽器和FF瀏覽器下button顯示不同，通過reset能夠統(tǒng)一樣式，顯示相同的想過。但是很多reset是沒必要的，多寫了會增加瀏覽器在渲染頁面的負擔。

比如說，

1）我們不應(yīng)該對行內(nèi)元素設(shè)置無效的屬性，對span設(shè)置width和height，margin都不會生效的。

2）對于absolute和fixed定位的固定尺寸（設(shè)置了width和height屬性），如果設(shè)置了top和left屬性，那么bottom和right，margin和float就沒有作用。

3）后面設(shè)置的屬性將會覆蓋前面重復(fù)設(shè)置的屬性。

?

• • 期待能夠指出它的負面影響，或者提到它的一個更好的替換者"normalize"

? normalize.css是一個可以定制的css文件，它讓不同的瀏覽器在渲染元素時形式更統(tǒng)一。

• 解釋下浮動和它的工作原理。

?　　　　問題成因：在一個容器中，有兩個浮動的子元素，會造成顯示結(jié)果意想不到的問題。在CSS規(guī)范中，浮動定位不屬于正常的頁面流，而是獨立定位的。

　　　　關(guān)于css的定位機制：普通流，浮動，絕對定位（position：fixed是position：absolute的一個子類）。浮動的框可以左右移動，直到它的外邊緣遇到包含框或者另一個浮動框的邊緣，所以才說浮動定位不屬于正常的頁面流。文檔中的普通流就會表現(xiàn)得和浮動框不存在一樣，當浮動框高度超出包含框的時候，就會出現(xiàn)包含框不會自動伸縮高度類筆盒浮動元素。所以，只含有浮動元素的父容器在顯示時不需要考慮子元素的位置，就造成顯示父容器像空容器一樣。

　　　　解決浮動：

1）添加額外標簽?
　　　　　　在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>。?

　　　　　　優(yōu)點：通俗易懂，容易掌握?
　　　　　　缺點：可以想象通過此方法，會添加多少無意義的空標簽，有違結(jié)構(gòu)與表現(xiàn)的分離，在后期維護中將是噩夢。?
2）使用 br標簽和其自身的 html屬性 <br clear="all" />?

　　　　　　優(yōu)點：比空標簽方式語義稍強，代碼量較少?
　　　　　　缺點：同樣有違結(jié)構(gòu)與表現(xiàn)的分離，不推薦使用?
3)父元素設(shè)置 overflow：hidden?
　　　　　　通過設(shè)置父元素overflow值設(shè)置為hidden；在IE6中還需要觸發(fā) hasLayout ，例如 zoom：1。<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">?

　　　　　　優(yōu)點：不存在結(jié)構(gòu)和語義化問題，代碼量極少?
　　　　　　缺點：內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素；overflow:hidden會導(dǎo)致中鍵失效。?
4)父元素設(shè)置 overflow：auto 屬性。同樣IE6需要觸發(fā)hasLayout，演示和3差不多?
　　　　　　優(yōu)點：不存在結(jié)構(gòu)和語義化問題，代碼量極少?
　　　　　　缺點：多個嵌套后，firefox某些情況會造成內(nèi)容全選；IE中 mouseover 造成寬度改變時會出現(xiàn)最外層模塊有滾動條等，firefox早期版本會無故產(chǎn)生focus等。
5）使用:after 偽元素?
　　　　需要注意的是 :after是偽元素（Pseudo-Element），不是偽類（某些CSS手冊里面稱之為“偽對象”），很多清除浮動大全之類的文章都稱之為偽類，不過csser要嚴謹一點，這是一種態(tài)度。由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。?

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

　　　　　　優(yōu)點：結(jié)構(gòu)和語義化完全正確,代碼量居中?
　　　　　　缺點：復(fù)用方式不當會造成代碼量增加?

• 描述z-index和疊加上下文是如何形成的。

? z-index就是控制元素在頁面的中的疊加順序，z-index值高的元素顯示在z-index值低的前面。z-index的使用條件：只對有?position?屬性的且值不為static的元素才有效。疊加上下文和“堆棧上下文”有關(guān)，一組具有共同雙親的元素，按照堆棧順序一起向前或向后移動構(gòu)成了所謂的堆棧上下文。

一個元素的堆疊順序，不僅僅取決于它自身的z-index，更要看它所處在的堆棧上下文，如果所處的上下文的層級很低，即使他本身的z-index設(shè)置的很高，也無法實現(xiàn)你的要求。

z-index解析規(guī)則都是基于標準的符合w3c規(guī)范的瀏覽器，但IE系列的瀏覽器總是讓你要多費一番功夫。

IE中z-index跟標準瀏覽器中的解析有一個小小的區(qū)別，那就是上面說的產(chǎn)生堆棧上下文中的三個條件中，對第二個條件的支持的區(qū)別，在標準瀏覽器中元素必須是有z-index值的同時要有position屬性，且值不為static，滿足這兩個條件，才會產(chǎn)生一個新的堆棧上下文，但低版本的IE中就不管這么多了，只要你設(shè)置了position值不為static，他就會生成一個新的堆棧上下文。

?

• 列舉不同的清除浮動的技巧，并指出它們各自適用的使用場景。

?　　　　答案為可參考上題“解釋下浮動和它的工作原理”

• 解釋下 CSS sprites，以及你要如何在頁面或網(wǎng)站中實現(xiàn)它。　

CSS sprites其實就通過將多個圖片融合到一副圖里面，然后通過CSS的技術(shù)布局到頁面上。這樣做的好處是，減少圖片數(shù)量，將會減少http的請求，提升網(wǎng)站性能。

1）在photoshop新建背景透明的畫板，將小圖片依次擺放在畫板中，調(diào)整小圖片為適當大小。

2）通過標尺記錄圖片的橫坐標縱坐標。

3）編寫css代碼background:url(....) no-repeat x-offset y-offset;同時設(shè)定元素固定高度和寬度，overflow:hidden

• 你最喜歡的圖片替換方法是什么，你如何選擇使用。

　　　　不論是對瀏覽者還是對搜索引擎，文字都是最佳的頁面內(nèi)容展示方式，但是，由于字體等原因的限制，純文字的展示漸漸無法滿足愛美的設(shè)計師的要求。

于是，出現(xiàn)了通過CSS來實現(xiàn)用圖片替換文字的方法，這種方式既能實現(xiàn)頁面上各種豐富的效果，又能滿足搜索引擎優(yōu)化的需要。

• Fahrner Image Replacement (FIR)
• Phark 的方法
• Gilder/Levin 的方法 (推薦)

Fahrner Image Replacement (FIR)

這是最早出現(xiàn)的圖文替換技術(shù)，是由 Todd Fahrner 提出的，非常容易理解：

<h2><span>Hello World</span></h2>

?

h2 {

?????background:url(hello_world.gif) no-repeat;

????width: 150px;

????height: 35px;

}

span {

????display: none;

}

?

代碼非常明白：先將圖片應(yīng)用在 H2 的背景中，然后將 SPAN 的標簽隱藏。但是這種方式有個問題，就是當圖片無法顯示時，將導(dǎo)致這個區(qū)域沒有任何內(nèi)容。同時，使用 display:none 的方式隱藏的內(nèi)容，將被許多主流屏幕閱讀器忽略，從而造成可用性問題，因此，應(yīng)該盡量避免使用。

Phark 的方法

?<h2> Hello World </h2>

?h2 {

????text-indent: -5000px;

????background:url(hello_world.gif) no-repeat;

????width: 150px;height:35px;

}

代碼也非常簡單，通過文本縮進，將文字隱藏，但是，當圖片無法顯示時，依然存在 FIR 的問題。

Gilder/Levin 的方法

??<h2><span></span>Hello World </h2>

?

?h2 {

????width: 150px;height: 35px;

????position: relative;

}

h2 span {

????background: url(hello_world.gif) no-repeat;

????position: absolute;

????width: 100%;

????height: 100%;

}

?

首先，將 H2 的 position 設(shè)為 relative ，這樣將使 H2 里面的元素定位以 H2 為參照，然后將 SPAN 元素絕對定位，撐滿整個 H2 區(qū)域，同時將背景圖應(yīng)用在 SPAN 標簽里面；這種方法的原理是將 SPAN 標簽覆蓋在文字內(nèi)容上面，一旦 SPAN 里面的背景圖無法顯示，將顯示下層的文字內(nèi)容，不影響正常使用。但是，此方法也有一個缺陷，就是背景圖不能透明，否則將透出下面的文字。

• 討論CSS hacks，條件引用或者其他。

? hacks

_width針對于ie6。*width,+width針對于ie6,7。

color: red\9;/*IE8以及以下版本瀏覽器*/（但是測試可以兼容到ie10。

*+html與*html是IE特有的標簽, firefox暫不支持.而*+html又為IE7特有標簽（但是測試*html兼容ie6-10。*+兼容ie7-10）。

!important 在IE中會被忽視，ie6,7,8不識別，ie9+（包括ie9）是識別的。

　條件引用

?

<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->

<!--[if IE]> 所有的IE可識別 <![endif]-->

<!--[if IE 6]> 僅IE6可識別 <![endif]-->

<!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->

<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->

<!--[if IE 7]> 僅IE7可識別 <![endif]-->

<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->

<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->

<!--[if IE 8]> 僅IE8可識別 <![endif]-->

<!--[if IE 9]> 僅IE9可識別 <![endif]-->

?

?

• 如何為有功能限制的瀏覽器提供網(wǎng)頁？

? 1）對于那些可以手動開啟的功能，可以在頁面上增設(shè)“用戶使用指導(dǎo)”或“幫助手冊”，提示用戶如何開啟相關(guān)的功能。（如果你不介意，還可以完全禁掉頁面，強制用戶使用固定設(shè)備，升級版本；哈哈，當年我做的BMS就是這樣做）

　　　　　　例如，針對使用IE瀏覽器自帶的功能可以限制對網(wǎng)頁的瀏覽，比如activeX或者腳本，我們檢測到它不可用時，提示用戶啟用的操作方式。

2）盡量避免當js或者css3失效時，頁面不可用的動畫效果。

　　　　　　例如，http://www.rippletec.net/網(wǎng)站為了營造一種當頁面加載完畢，不同模塊滾動到固定位置的絢麗動畫效果。應(yīng)該避免類似的效果，一方面產(chǎn)生繁瑣的重繪過程，會消耗瀏覽器內(nèi)存，對性能一般的設(shè)備可能因為壓力過大，卡機或者無法渲染；另外一方面是網(wǎng)站當網(wǎng)站的js不可用時，模塊滾動到固定位置的事件沒有被觸發(fā)，用戶看到的將會是動畫產(chǎn)生之前，最原始的頁面狀態(tài)，無法經(jīng)行下一步操作。

　　　　（首次接觸“優(yōu)雅降級”這個詞匯是在《jQuery基礎(chǔ)教程（第4版）》，不過那時候已經(jīng)是一年多以前，現(xiàn)在已經(jīng)記不清當時書上舉得例子了，記性差~真心抱歉）

? ? ? ? ?3）應(yīng)該為綁定異步的元素，設(shè)置herf屬性。

　　　　例如，用戶要執(zhí)行查詢某書本詳細信息操作，點擊“查詢”按鈕，通過js觸發(fā)查詢該條目的事件，然后采用jQuery異步執(zhí)行操作，在頁面固定位置加載相關(guān)書本的詳細內(nèi)容。$(".delete").click(function(){$.ajax(//..)})，但是一旦js不可用，或者jQuery無發(fā)加載的時候，用戶將無法順利執(zhí)行操作。因此，可以為該操作設(shè)置herf屬性，當$.ajax()可用時阻止直接跳轉(zhuǎn)，而使用異步；當$.ajax()不可用時，直接跳轉(zhuǎn)到詳細信息的頁面。

4）避免依賴腳本驗證表單。服務(wù)器的表單驗證不可避免。

5）部分瀏覽器不支持html5新標簽，因此，可以用js創(chuàng)建相關(guān)標簽，然后給它們的css賦予相關(guān)屬性。

6）因為iPhone并沒有鼠標指針，所以沒有hover事件。那么CSS :hover偽類就沒用了。但是iPhone有Touch事件，onTouchStart 類似 onMouseOver，onTouchEnd 類似 onMouseOut。所以我們可以用它來模擬hover。使用Javascript：

?

var myLinks = document.getElementsByTagName('a');

for(var i = 0; i < myLinks.length; i++){

myLinks[i].addEventListener(’touchstart’, function() ???{

?

this.className = “hover”;}, false);

myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);

}

?

然后用CSS增加hover效果：

a:hover, a.hover { /* 你的hover效果 */ }

• • 你會使用哪些技術(shù)和處理方法？

• 有哪些的隱藏內(nèi)容的方法（如果同時還要保證屏幕閱讀器可用呢？）

?　　　　需要隱藏內(nèi)容的幾種可能性：??

1）對文本的隱藏

2）隱藏超鏈接（另類黑鏈）

3）對統(tǒng)計代碼隱藏

4）隱藏超出圖片

5）css隱藏滾動條

6）css隱藏div層

　　具體實現(xiàn)：

?1、css隱藏DIV及內(nèi)容，完全隱藏內(nèi)容與布局。display:none或者visibility:hidden

　　　　　　（面試官也許會問到：關(guān)于display:none和visible:hidden區(qū)別）

display:none和visible:hidden都能把網(wǎng)頁上某個元素隱藏起來，但兩者有區(qū)別:

display:none ---不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。

visible:hidden--- 使對象在網(wǎng)頁上不可見，但該對象在網(wǎng)頁上所占的空間沒有改變，通俗來說就是看不見但摸得到。

?

??2、通過對象盒子設(shè)置縮進樣式（text-indent:-9999px）方法可以隱藏超鏈接文本內(nèi)容
　　　　　　同樣道理，可以用來隱藏圖片上方文字。此類問題我們常見于LOGO處使用，我們想讓圖片作為背景，而圖片上方放A鏈接文字內(nèi)容，但html錨文本功能仍然正常也能鼠標點擊使用。圖片作為背景而html代碼內(nèi)看不到圖片，但文字也存在，卻是文字隱藏圖片顯示出，鼠標也能點擊指向。

3、overflow: hidden 隱藏溢出DIV內(nèi)容或圖片

4、css隱藏滾動條

使用overflow-y:hidden;和overflow-x:hidden來隱藏或顯示對應(yīng)橫或豎方向的滾動條。

• 你用過柵格系統(tǒng)嗎？如果使用過，你最喜歡哪種？

? “網(wǎng)格系統(tǒng)”，運用固定的格子設(shè)計版面布局，其風格工整簡潔。

“使用柵格系統(tǒng)的網(wǎng)頁設(shè)計，非常的有條理性；看上去也很舒服。最重要的是，它給整個網(wǎng)站的頁面結(jié)構(gòu)定義了一個標準。對于視覺設(shè)計師來說，他們不用再為設(shè)計一個網(wǎng)站每個頁面都要想一個寬度或高度而煩惱了。對于前端開發(fā)工程師來說，頁面的布局設(shè)計將完全是規(guī)范的和可重用的，這將大大節(jié)約了開發(fā)成本。對于內(nèi) 容編輯或廣告銷售來說，所有的廣告都是規(guī)則的，通用的，他們再也不用做出一套N張不同尺寸的廣告圖了”

Bootstrap內(nèi)置了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設(shè)備或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預(yù)定義classe，還有強大的mixin用于生成更具語義的布局。

• 你用過媒體查詢，或針對移動端的布局/CSS 嗎？

?　　　　針對http://topview123.sinaapp.com/細說

　　　　設(shè)備寬度(device-width)未必是布局寬度(width)，為了讓非適應(yīng)性布局與手機相適應(yīng)，我們跟關(guān)心視圖寬度，因此需要一種方式來設(shè)定寬度，這樣可以使用媒體查詢檢測。

　　　　讓視圖的寬度和設(shè)備寬度一致

<meta element = "viewport"

???????????content = "width=device

????????????????????????????initial-scale = 1" > ???

　　　　每種布局，都應(yīng)該根據(jù)目標設(shè)備指定固定寬度設(shè)計

@media screen and (max-width:320px){} ???

　　　　為移動設(shè)備調(diào)整網(wǎng)頁圖像。在最基本的頁面，一個移動優(yōu)化的網(wǎng)站就是其布局、內(nèi)容、互動都經(jīng)過調(diào)整，以適應(yīng)移動環(huán)境。最常見的做法是使用css媒體查詢的功能為不同大小的屏幕提供不同的風格；為較小的屏幕優(yōu)化布局，可以通過針對移動設(shè)備的模塊服務(wù)。

不同設(shè)備的分離設(shè)計->根據(jù)監(jiān)視屏幕大小進行設(shè)計->（媒體查詢，靈活排版，圖像結(jié)合）

• 如何優(yōu)化網(wǎng)頁的打印樣式？

? http://www.jb51.net/web/70358.html

• 在書寫高效 CSS 時會有哪些問題需要考慮？

? ?1）reset。參照上題“描述下 “reset” CSS 文件的作用和使用它的好處”的答案。

2）規(guī)范命名。尤其對于沒有語義化的html標簽，例如div，所賦予的class值要特別注意。

2）抽取可重用的部件，注意層疊樣式表的“優(yōu)先級”。

• 使用 CSS 預(yù)處理器的優(yōu)缺點有哪些？(SASS，Compass，Stylus，LESS)

?　　　　（這里我會實話實說）過去一直沒有機會接觸“預(yù)處理器”，缺的不是學(xué)習(xí)的熱情和動力，而是一種會使用到這門高深技術(shù)的需求，希望日后參與的項目將會用到這門技術(shù)，能夠?qū)W(xué)習(xí)揉入實際開發(fā)中。關(guān)于CSS 預(yù)處理器，我知道是一種語言用來為 CSS 增加一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你可以在 CSS 中使用變量、簡單的程序邏輯、函數(shù)等等在編程語言中的一些基本技巧，可以讓你的 CSS 更見簡潔，適應(yīng)性更強，代碼更直觀等諸多好處。

• • 描述下你曾經(jīng)使用過的 CSS 預(yù)處理的優(yōu)缺點。

?

• 如果設(shè)計中使用了非標準的字體，你該如何去實現(xiàn)？

? 1）圖片替代

2）好是跟產(chǎn)品溝通，盡量使用默認就有的字體。雖然我們可以用webfonts，但它在頁面加載的時候會將整個字體包都下載下來，這對于手機端網(wǎng)頁來說無疑是致命的。如果產(chǎn)品一定要用非標準字體，可用這個軟件FontCreator，可以從一個字體包中將你這個頁面需要的那幾個字提取出來，打成一個新的字體包，這樣會節(jié)省很多流量

?

• • Webfonts (字體服務(wù)例如：Google Webfonts，Typekit 等等。)

?

• 解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？

?　　　　瀏覽器會根據(jù)css rules 與dom tree 生成render tree。瀏覽器先產(chǎn)生一個元素集合，這個集合往往由最后一個部分的索引產(chǎn)生（如果沒有索引就是所有元素的集合）。然后向上匹配，如果不符合上一個部分，就把元素從集合中刪除，直到真?zhèn)€選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。

舉個例子，有選擇器：

body.ready #wrapper > .lol233

　　　　先把所有 class 中有 lol233 的元素拿出來組成一個集合，然后上一層，對每一個集合中的元素，如果元素的 parent id 不為 #wrapper 則把元素從集合中刪去。 再向上，從這個元素的父元素開始向上找，沒有找到一個 tagName 為 body 且 class 中有 ready 的元素，就把原來的元素從集合中刪去。

　　至此這個選擇器匹配結(jié)束，所有還在集合中的元素滿足。

　　大體就是這樣，不過瀏覽器還會有一些奇怪的優(yōu)化。為什么從后往前匹配因為效率和文檔流的解析方向。

1）效率，找元素的父親和之前的兄弟比遍歷所有兒子快而且方便。

2）關(guān)于文檔流的解析方向，是因為現(xiàn)在的 CSS，一個元素只要確定了這個元素在文檔流之前出現(xiàn)過的所有元素，就能確定他的匹配情況。應(yīng)用在即使 html 沒有載入完成，瀏覽器也能根據(jù)已經(jīng)載入的這一部分信息完全確定出現(xiàn)過的元素的屬性。

　　為什么是用集合主要也還是效率。基于 CSS Rule 數(shù)量遠遠小于元素數(shù)量的假設(shè)和索引的運用，遍歷每一條 CSS Rule 通過集合篩選，比遍歷每一個元素再遍歷每一條 Rule 匹配要快得多。

• 解釋一下你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的布局。

　　　　網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性。???

　　　　每個盒子都有：邊界、邊框、填充、內(nèi)容四個屬性；

　　　　每個屬性都包括四個部分：上、右、下、左；這四部分可同時設(shè)置，也可分別設(shè)置；

• 請解釋一下?* { box-sizing: border-box; }?的作用, 并且說明使用它有什么好處？

　　　　說到 IE 的 bug，在 IE6以前的版本中，IE對盒模型的解析出現(xiàn)一些問題，跟其它瀏覽器不同，將 border 與 padding 都包含在 width 之內(nèi)。而另外一些瀏覽器則與它相反，是不包括border和padding的。對于IE瀏覽器，當我們設(shè)置 box-sizing: content-box; 時，瀏覽器對盒模型的解釋遵從我們之前認識到的 W3C 標準，當它定義width和height時，它的寬度不包括border和padding；對于非IE瀏覽器，當我們設(shè)置box-sizing: border-box; 時，瀏覽器對盒模型的解釋與 IE6之前的版本相同，當它定義width和height時，border和padding則是被包含在寬高之內(nèi)的。內(nèi)容的寬和高可以通過定義的“width”和 “height”減去相應(yīng)方向的“padding”和“border”的寬度得到。內(nèi)容的寬和高必須保證不能為負，必要時將自動增大該元素border box的尺寸以使其內(nèi)容的寬或高最小為0。

　　使用?* { box-sizing: border-box; }能夠統(tǒng)一IE和非IE瀏覽器之間的差異。

• 請羅列出你所知道的 display 屬性的全部值

? display 屬性規(guī)定元素應(yīng)該生成的框的類型。

?

• 請解釋一下 inline 和 inline-block，block 的區(qū)別？

?　　都是display 屬性規(guī)定元素應(yīng)該生成的框的類型。但是block代表塊級元素，元素前后都有換行符；inline是默認的樣式，表示該元素被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符號。也就是說，block元素通常被現(xiàn)實為獨立的一塊，會單獨換一行；inline元素則前后不會產(chǎn)生換行，一系列inline元素都在一行內(nèi)顯示，直到該行排滿。而inline-block代表行內(nèi)塊元素（css2.0新增）。

display:block

1）block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。

2）block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨占一行。

3）block元素可以設(shè)置margin和padding屬性。

display:inline

1）inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。

2）inline元素設(shè)置width,height屬性無效。

3）inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果。

display:inline-block

　　簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

• ?請解釋一下 relative、fixed、absolute 和 static 元素的區(qū)別

?

在用CSS+DIV進行布局的時候，一直對position的四個屬性值relative,absolute,static,fixed分的不是很清楚，以致經(jīng)常會出現(xiàn)讓人很郁悶的結(jié)果。今天研究了一下，總算有所了解。在此總結(jié)一下：

先看下各個屬性值的定義：

1、static：默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

2、relative：生成相對定位的元素，通過top,bottom,left,right的設(shè)置相對于其正常位置進行定位。可通過z-index進行層次分級。

3、absolute：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。可通過z-index進行層次分級。

4、fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。可通過z-index進行層次分級。

static與fixed的定位方式較好理解，在此不做分析。下面對應(yīng)用的較多的relative和absolute進行分析：

1、relative。定位為relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在。

黃色背景的層定位為relative，紅色邊框區(qū)域為其在正常流中的位置。在通過top、left對其定位后，從灰色背景層的位置可以看出其正常位置依然存在。

2、absolute。定位為absolute的層脫離正常文本流，但與relative的區(qū)別是其在正常流中的位置不在存在。在將黃色背景層定位為absolute后，灰色背景層自動補上。

3、relative與absolute的主要區(qū)別：

首先，是上面已經(jīng)提到過的在正常流中的位置存在與否。

其次，relative定位的層總是相對于其最近的父元素，無論其父元素是何種定位方式。紅色背景層為relative定位，其直接父元素綠色背景層為默認的static定位。紅色背景層的位置為相對綠色背景層top、left個20元素。而如果紅色背景層定位為absolute。紅色背景層依然定義top:20px；left:20px；但其相對 的元素變?yōu)槎ㄎ环绞綖閍bsolute或relative的黃色背景層。因此，對于absolute定位的層總是相對于其最近的定義為absolute或 relative的父層，而這個父層并不一定是其直接父層。如果其父層中都未定義absolute或relative，則其將相對body進行定位。

除top、left、right、bottom定位外，margin屬性值的定義也符合上述規(guī)則。

?

static與定位用的比較少，也比較簡單，在此不做分析。
下面對應(yīng)用的較多的relative和absolute與fixed進行分析：
relative定位的層總是相對于其最近的父元素，無論其父元素是何種定位方式。
absolute定位的層總是相對于其最近的定義為absolute或relative的父層，而這個父層并不一定是其直接父層。如果其父層中都未定義absolute或relative，則其將相對body進行定位，
fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。

• 你目前在使用哪一套CSS框架，或者在產(chǎn)品線上使用過哪一套？(Bootstrap, PureCSS, Foundation 等等)

?

Bootstrap是基于HTML5和CSS3開發(fā)的，它在jQuery的基礎(chǔ)上進行了更為個性化和人性化的完善，形成一套自己獨有的網(wǎng)站風格，并兼容大部分jQuery插件。

?

Bootstrap中包含了豐富的Web組件，根據(jù)這些組件，可以快速的搭建一個漂亮、功能完備的網(wǎng)站。

• • 如果有，請問是哪一套？如果可以，你如何改善CSS框架？

?

• 請問你有使用過 CSS Flexbox 或者 Grid specs 嗎？

? ?http://www.w3cplus.com/css3/a-guide-to-flexbox.html

http://zh.learnlayout.com/flexbox.html

• • 如果有，請問在性能和效率的方面你是怎么看的？

?

• 為什么響應(yīng)式設(shè)計（responsive design）和自適應(yīng)設(shè)計（adaptive design）不同？

　　　　自適應(yīng)布局（Adaptive Layout）

　　　　自適應(yīng)布局（Adaptive）的特點是分別為不同的屏幕分辨率定義布局。布局切換時頁面元素發(fā)生改變，但在每個布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。就是說你看到的頁面，里面元素的位置會變化而大小不會變化；

　　　　你可以把自適應(yīng)布局看作是靜態(tài)布局的一個系列。

流式布局（Liquid Layout）

　　　　流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕進行適配調(diào)整，主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設(shè)計而言過小或過大的屏幕上不能正常顯示。

響應(yīng)式布局（Responsive Layout）

分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應(yīng)用流式布局的理念，即頁面元素寬度隨著窗口調(diào)整而自動適配。

可以把響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計理念的融合。

JS相關(guān)問題：

• 解釋下事件代理。

?　　在傳統(tǒng)的事件處理中，你按照需要為每一個元素添加或者是刪除事件處理器。然而，事件處理器將有可能導(dǎo)致內(nèi)存泄露或者是性能下降——你用得越多這種風險就越大。JavaScript事件代理則是一種簡單的技巧，通過它你可以把事件處理器添加到一個父級元素上，這樣就避免了把事件處理器添加到多個子級元素上。

　　事件代理用到了兩個在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標元素。當一個元素上的事件被觸發(fā)的時候，比如說鼠標點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。任何一個事件的目標元素都是最開始的那個元素，在我們的這個例子中也就是按鈕，并且它在我們的元素對象中以屬性的形式出現(xiàn)。使用事件代理，我們可以把事件處理器添加到一個元素上，等待一個事件從它的子級元素里冒泡上來，并且可以得知這個事件是從哪個元素開始的。

?

1 // 獲取父節(jié)點，并為它添加一個click事件

2 document.getElementById("parent-list").addEventListener("click",function(e) {

3 ??// 檢查事件源e.targe是否為Li

4 ??if(e.target && e.target.nodeName.toUpperCase == "LI") {

5 ????// 真正的處理過程在這里

6 ????console.log("List item ",e.target.id.replace("post-")," was clicked!");

7 ??}

8 });

?

　　這樣做的好處：那些需要創(chuàng)建的以及駐留在內(nèi)存中的事件處理器少了，這樣我們就提高了性能，并降低了崩潰的風險。在DOM更新后無須重新綁定事件處理器了。如果你的頁面是動態(tài)生成的，比如說通過Ajax，你不再需要在元素被載入或者卸載的時候來添加或者刪除事件處理器了。?

?

• 解釋下 JavaScript 中?this?是如何工作的。

? this 永遠指向函數(shù)運行時所在的對象，而不是函數(shù)被創(chuàng)建時所在的對象。匿名函數(shù)或不處于任何對象中的函數(shù)指向 window 。函數(shù)中的this的值取決于函數(shù)調(diào)用的模式：

方法調(diào)用模式

當函數(shù)被保存為對象的一個屬性時，成該函數(shù)為該對象的方法。函數(shù)中this的值為該對象。

?

var foo = {

????name: 'fooname',

????getName: function (){

????????return this.name ?

????}

}

foo.getName(); ?// this => foo

?

函數(shù)調(diào)用模式
當函數(shù)并不是對象的屬性。函數(shù)中this的值為全局對象
note：某個方法中的內(nèi)部函數(shù)中的this的值也是全局對象，而非外部函數(shù)的this

function foo(){

????this.name = 'fooname'; ?

}

foo(); ?// this => window

構(gòu)造器調(diào)用模式
即使用new調(diào)用的函數(shù)，則其中this將會被綁定到那個新構(gòu)造的對象。構(gòu)造器調(diào)用將一個全新的對象作為this變量的值，并隱式返回這個新對象作為調(diào)用結(jié)果。

?

function Foo(){

????this.name = 'fooname';

}

var foo = new Foo(); ?// this => foo

?

如果你不是使用new來調(diào)用構(gòu)造器，那其實你就是在使用一個實函數(shù)。因此this就不會是你預(yù)期的值。在Sloppy模式中，this?指向的就是window?而你將會創(chuàng)建全局變量。不過如果使用的是strict模式，那你還是會得到警告（this===undefined）。

?

使用apply或call調(diào)用模式
該模式調(diào)用時，函數(shù)中this被綁定到apply或call方法調(diào)用時接受的第一個參數(shù)。

function getName(name){

????this.name = name;

}

var foo = {};

getName.call(foo, name); ?// this =>foo

在方法中this?的用法更傾向于傳統(tǒng)的面向?qū)ο笳Z言：this?指向的接收方，也就是包含有這個方法的對象。

?

?箭頭函數(shù)就是沒有自己的this?的函數(shù)。在這樣的函數(shù)中你可以隨便使用this，也不用擔心有沒有隱式的存在。下面提供了三種思路來解決這個問題：

1）that=this，將this?賦值到一個變量上，這樣就把this?顯性地表現(xiàn)出來了（除了that，self?也是個很常見的用于存放this的變量名），之后就使用那個變量。

2）bind()。使用bind()來創(chuàng)建一個函數(shù)，這個函數(shù)的this?總是存有你想要傳遞的值（下面這個例子中，方法的this）：

this.friends.forEach(function (friend) {

????????console.log(this.name+' knows '+friend);

????}.bind(this));

3）用forEach的第二個參數(shù)。forEach的第二個參數(shù)會被傳入回調(diào)函數(shù)中，作為回調(diào)函數(shù)的this?來使用。

this.friends.forEach(function (friend) {

????????console.log(this.name+' knows '+friend);

????}, this);

?

• 解釋下原型繼承的原理。

?　　在javascript中，類（定義類是模塊開發(fā)和重用代碼的有效方式之一）的實現(xiàn)是基于其原型繼承機制的。如果兩個實例都從一個原型對象上繼承了屬性，我們說它們是同一個類的實例。如果兩個對象繼承自同一個原型，往往意味著（但不是絕對）它們是由同一個構(gòu)造函數(shù)創(chuàng)建并初始化的。

1）類和對象

在javascript中，類的所有實例對象都從一個類型對象上繼承屬性。因此，原型對象是類的核心。

2）類和構(gòu)造函數(shù)

構(gòu)造函數(shù)是用來初始化和創(chuàng)建對象的。使用new關(guān)鍵字來調(diào)用構(gòu)造函數(shù)，創(chuàng)建一個新對象。調(diào)用構(gòu)造函數(shù)的一個重要特征是，構(gòu)造函數(shù)的prototype屬性被用做新對象的原型（var ?object.prototype = new Object()）。這意味著通過同一個構(gòu)造函數(shù)創(chuàng)建的對象都是繼承自一個相同的對象，因此它們都是一個類的成員。　

javascript中的類牽扯三種不同的對象，三種對象的屬性的行為和下面三種類成員非常相似：

? ??構(gòu)造函數(shù)對象
? ? ? ???Js所有的函數(shù)都有一個prototype屬性，這個屬性引用了一個對象，即原型對象，也簡稱原型。這個函數(shù)包括構(gòu)造函數(shù)和普通函數(shù)，判斷一個函數(shù)F是否是Object對象的實例：F.prototype instanceof Object //->true

? ??原型對象屬性被類的所有實例所繼承，如果原型對象的屬性值是函數(shù)的話，這個函數(shù)就作為類的實例方法來調(diào)用
? ??實例對象，類的每個實例對象都是一個獨立的對象，直接 給這個實例定義的屬性是不會為所有實例對象鎖共享的。定義在實例上的非函數(shù)屬性，實際上是實例的字段。

在javascript中定義類的步奏可以縮減為一個分三步的算法。第一步，先定義一個構(gòu)造函數(shù)，并設(shè)置初始化新對象的實例屬性。第二步，給構(gòu)造函數(shù)的prototype對象定義實例的方法。第三步：給構(gòu)造函數(shù)定義類字段和類屬性。

?　　（面試官可能會問到“javascript繼承和其他語言繼承的區(qū)別”，可以從基于對象和訪問修飾符分析）

javascript中基于原型的繼承機制是動態(tài)的：對象從其原型繼承屬性，如果創(chuàng)建對象之后原型的屬性發(fā)生改變，也會影響到繼承這個原型的所有實例對象。這意味著我們可以通過給原型對象添加新的方法來擴充javascript類。

?

• 你是如何測試 JavaScript 代碼的？

? 1）使用瀏覽器自帶的控制臺調(diào)試，詳細可參照“使用console進行 性能測試 和 計算代碼運行時間”

2）chrome的單步調(diào)試功能

JavaScript?斷點設(shè)置和調(diào)試功能和java編輯工具的調(diào)試方法類似

?

Sources Panel 的左邊是內(nèi)容源，包括頁面中的各種資源；中間主區(qū)域用于展示左邊資源文件的內(nèi)容；右邊是調(diào)試功能區(qū)，最上面的一排按鈕分別是暫停/繼續(xù)、單步執(zhí)行、單步跳入、單步跳出、禁用/啟用所有斷點。鼠標點擊文件的行號就可以設(shè)置和刪除斷點。添加的每個斷點都會出現(xiàn)在右側(cè)調(diào)試區(qū)的 Breakpoints 列表中，點擊列表中斷點就會定位到內(nèi)容區(qū)的斷點上。Call Stack 列表的下方是 Scope Variables 列表，在這里可以查看此時局部變量和全局變量的值。

?

• *AMD vs. CommonJS？

CommonJs?是服務(wù)器端模塊的規(guī)范，Node.js采用了這個規(guī)范。根據(jù)CommonJS規(guī)范，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件并執(zhí)行，最后返回文件內(nèi)部的exports對象。

//require方法默認讀取js文件，所以可以省略js后綴

var test = require('./boobar').foobar;

?//test為boobar文件中的foobar對象的實例

test.bar();

//調(diào)用方法bar()

CommonJS?加載模塊是同步的，所以只有加載完成才能執(zhí)行后面的操作。像Node.js主要用于服務(wù)器的編程，加載的模塊文件一般都已經(jīng)存在本地硬盤，所以加載起來比較快，不用考慮異步加載的方式，所以CommonJS規(guī)范比較適用。?

AMD ?CMD?采用異步模式，方便瀏覽器環(huán)境要從服務(wù)器加載模塊。AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。AMD異步加載模塊。它的模塊支持對象、函數(shù)、構(gòu)造器、字符串、JSON等各種類型的模塊。適用AMD規(guī)范適用define方法定義模塊。

?

//通過數(shù)組引入依賴 ，回調(diào)函數(shù)通過形參傳入依賴

define(['someModule1', ‘someModule2’], function (someModule1, someModule2) {

????function foo () {

????????/// something

????????someModule1.test();

????}

????return {foo: foo}

});

?

本題內(nèi)容整理自：http://my.oschina.net/felumanman/blog/263330?p=1

?

• 什么是哈希表？

?　　類比數(shù)組，數(shù)組是編程上的哈希表，哈希表是一種數(shù)據(jù)結(jié)構(gòu)，關(guān)鍵點就是用一個key值來取對應(yīng)數(shù)據(jù)，就像數(shù)組的下標。

? https://github.com/floraLam/dailyLearn/blob/master/dataStructure/31哈希表.html

?

• 解釋下為什么接下來這段代碼不是 IIFE(立即調(diào)用的函數(shù)表達式)：function foo(){ }();.

?　　而函數(shù)定義（語句以function關(guān)鍵字開始）是不能被立即執(zhí)行的，這無疑會導(dǎo)致語法的錯誤（SyntaxError）。當函數(shù)定義代碼段包裹在括號內(nèi)，使解析器可以將之識別為函數(shù)表達式，然后調(diào)用。IIFE:(function foo(){})()

之前面試，遇到問題，區(qū)分(function(){})();和(function(){}());其實兩者實現(xiàn)效果一樣。

函數(shù)字面量：首先聲明一個函數(shù)對象，然后執(zhí)行它。(function () { alert(1); })();

優(yōu)先表達式：由于Javascript執(zhí)行表達式是從圓括號里面到外面，所以可以用圓括號強制執(zhí)行聲明的函數(shù)。(function () { ?alert(2); }());

?

• 描述以下變量的區(qū)別：null，undefined?或?undeclared？

? ?'undefined'是未定義，在變量沒有賦值的時候的值即為undefined。"缺少值"，就是此處應(yīng)該有一個值，但是還沒有定義。

'underclared'即為被污染的命名，訪問沒有被聲明的變量，會拋出異常，終止執(zhí)行。

'null'是一個空的對象引用。"沒有對象"，即該處不應(yīng)該有值

undefined和null在if語句中，都會被自動轉(zhuǎn)為false，相等運算符甚至直接報告兩者相等。typeof undefined會返回undefined ，而typeof null?總返回?object(typeof有六種可能："number"、"string"、"boolean"、"object"、"function"、"undefined")

false == undefined;//false

false == null;//false

null == undefined;//true

?

• 什么是閉包，如何使用它，為什么要使用它？

當某個函數(shù)調(diào)用時會創(chuàng)建一個執(zhí)行環(huán)境以及作用域鏈，然后根據(jù)arguments和其它命名參數(shù)初始化形成活動對象。在外部函數(shù)調(diào)用結(jié)束后，其執(zhí)行環(huán)境與作用域鏈被銷毀，但是其活動對象保存在了閉包之中，最后在閉包函數(shù)調(diào)用結(jié)束后才銷毀。簡單的說，閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。

由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單理解成“定義在一個函數(shù)內(nèi)部的函數(shù)”。

注意：

1）由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。

2）閉包會在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內(nèi)部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。

　閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個就是讓這些變量的值始終保持在內(nèi)存中。

用法

?

//第1種寫法 ?：這種寫法沒什么特別的，只是給函數(shù)添加一些屬性。

function Circle(r) { ??this.r = r; ?} ?

Circle.PI = 3.14159; ?

Circle.prototype.area = function() { ??return Circle.PI * this.r * this.r; ?} ?

var c = new Circle(1.0); ????

alert(c.area()); ??

?

?

//第2種寫法 ?：這種寫法是聲明一個變量，將一個函數(shù)當作值賦給變量。

var Circle = function() { ?

???var obj = new Object(); ?

???obj.PI = 3.14159; ?

???obj.area = function( r ) { ???return this.PI * r * r; ????} ?

???return obj; ?

} ???

var c = new Circle(); ?

alert( c.area( 1.0 ) ); ?

?

?

//第3種寫法 ?：這種方法最好理解，就是new 一個對象，然后給對象添加屬性和方法。

var Circle = new Object(); ?

Circle.PI = 3.14159; ?

Circle.Area = function( r ) { ?????return this.PI * r * r; ?} ?

alert( Circle.Area( 1.0 ) ); ?

?

?

//第4種寫法 ?：這種方法使用較多，也最為方便。var obj = {}就是聲明一個空的對象。

var Circle={ ?

???"PI":3.14159, ?

?"area":function(r){ ??return this.PI * r * r; ?} ?

}; ?

alert( Circle.area(1.0) ); ?

?

閉包的用途????

事實上，通過使用閉包，我們可以做很多事情。比如模擬面向?qū)ο蟮拇a風格；更優(yōu)雅，更簡潔的表達出代碼；在某些方面提升代碼的執(zhí)行效率。

1）匿名自執(zhí)行函數(shù)

　　全局對象過于龐大，影響訪問速度(因為變量的取值是需要從原型鏈上遍歷的)。

　　除了每次使用變量都是用var關(guān)鍵字外，我們在實際情況下經(jīng)常遇到這樣一種情況，即有的函數(shù)只需要執(zhí)行一次，其內(nèi)部變量無需維護，我們可以使用閉包。

我們創(chuàng)建了一個匿名的函數(shù)，并立即執(zhí)行它，由于外部無法引用它內(nèi)部的變量，因此在函數(shù)執(zhí)行完后會立刻釋放資源，關(guān)鍵是不污染全局對象。

2）結(jié)果緩存

我們開發(fā)中會碰到很多情況，設(shè)想我們有一個處理過程很耗時的函數(shù)對象，每次調(diào)用都會花費很長時間，那么我們就需要將計算出來的值存儲起來，當調(diào)用這個函數(shù)的時候，首先在緩存中查找，如果找不到，則進行計算，然后更新緩存并返回值，如果找到了，直接返回查找到的值即可。閉包正是可以做到這一點，因為它不會釋放外部的引用，從而函數(shù)內(nèi)部的值可以得以保留。

3）封裝

4）實現(xiàn)類和繼承

• 你喜歡的使用閉包的模式是什么？兩種模式用在不同場合。參見jQuery源碼，立即調(diào)用模式，把$的jQuery源碼放在了全局作用域下。返回函數(shù)類型的，制作一個隨時可以使用的函數(shù)。

?

• 請舉出一個匿名函數(shù)的典型用例？

? $.("input").each(function(e){this.val('OK')});

?

• ------------------------------解釋 “JavaScript 模塊模式” 以及你在何時使用它。

?　　我們在做radf庫的時候，把所有的函數(shù)寫在var function = ?radf(){}里，為的是在全局作用域下，只有一個radf對象，所有的屬性和方法全在radf命名空間下面。這樣就是一個無污染的環(huán)境。

• • 如果有提到無污染的命名空間，可以考慮加分。
  • 如果你的模塊沒有自己的命名空間會怎么樣？
  • 與其它庫或內(nèi)容造成沖突。

• 如果有提到無污染的命名空間，可以考慮加分。
• 如果你的模塊沒有自己的命名空間會怎么樣？

?

• 你是如何組織自己的代碼？是使用模塊模式，還是使用經(jīng)典繼承的方法？

?　　在模塊模式中使用繼承。例如我們的庫中有pannel布局型組件和data型組件，其余都依照這兩個基本組件繼承而來。

　　具體可以參考?ExtJS4 便捷三層開發(fā)模式

?

• 請指出 JavaScript 宿主對象和原生對象的區(qū)別？

原生對象，獨立于宿主環(huán)境的 ECMAScript 實現(xiàn)提供的對象。為array obj regexp date function等可以new實例化的對象。

內(nèi)置對象為gload Math 等，開發(fā)者不必明確實例化內(nèi)置對象，它已被實例化了。類似于isNaN()、parseInt()和parseFloat()方法等，看起來都是函數(shù)，而實際上，它們都是Global對象的方法。具體可以參考?JavaScript 全局對象

宿主對象。即由 ECMAScript 實現(xiàn)的宿主環(huán)境（操作系統(tǒng)和瀏覽器）提供的對象。所有的BOM和DOM對象都是宿主對象。因為其對于不同的“宿主”環(huán)境所展示的內(nèi)容不同（這就是兼容性和特性檢測的緣由）。ECMAScript官方未定義的對象都屬于宿主對象。

?

• 指出下列代碼的區(qū)別：

function Person(){}

var person = Person();

var person = new Person();

1、定義一個函數(shù)為Person()　　

2、定義一個匿名函數(shù)指向person　　

3、實例化一個person、原型來自于函數(shù)Person

?

• .call?和?.apply?的區(qū)別是什么？?

call和apply都是調(diào)用一個對象的一個方法，以另一個對象替換當前對象。它們都屬于Function.prototype的一個方法，所以每個function實例都有call和apply屬性。這兩個方法可以用來代替另一個對象調(diào)用一個方法，可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。　　

　　區(qū)別在于，兩者傳遞的參數(shù)不同，雖然函數(shù)第一個參數(shù)都是要傳入給當前對象的對象，但是，apply的第二個參數(shù)是一個參數(shù)數(shù)組，將多個參數(shù)組合成為一個數(shù)組傳入；而call第二個參數(shù)則是直接的參數(shù)列表。

?

• 請解釋?Function.prototype.bind？

?Function.prototype.bind()其實就是函數(shù)綁定。函數(shù)的接收者取決于他是如何被調(diào)用，可以通過調(diào)用.bind()給函數(shù)綁定作用域上下文，即函數(shù)的接收者。

var foo = { x: 3}

var bar = function(){console.log(this.x);}

?

bar(); // undefined

var boundFunc = bar.bind(foo);//隱式看作是在foo作用域里調(diào)用bar方法

boundFunc(); // 3

我們創(chuàng)建了一個新的函數(shù)，當它被執(zhí)行的時候，它的 this 會被設(shè)置成 foo —— 而不是像我們調(diào)用 bar() 時的全局作用域。

對于改變上下文作用域（具體可以查看上題“解釋下 JavaScript 中?this?是如何工作的”），可以將this設(shè)置到一個變量上，這樣改變了上下文之后繼續(xù)引用到它。同時可以選擇 self, _this 或者 context 作為變量名稱(也有人使用 that)。

.bind()創(chuàng)建了一個函數(shù)，當這個函數(shù)在被調(diào)用的時候，它的 this 關(guān)鍵詞會被設(shè)置成被傳入的值（這里指調(diào)用bind()時傳入的參數(shù)）也就是我們傳入想要的上下文。

簡單的用法：

關(guān)于 Function.prototype.bind() 內(nèi)部，這里有個非常簡單的例子：

Function.prototype.bind = function (scope) {

????var fn = this;

????return function () {

????????return fn.apply(scope);//使用call效果一樣

????};

}

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

• 你何時優(yōu)化自己的代碼？

　　優(yōu)化代碼是在不改變程序行為的基礎(chǔ)上進行小的改動，是代碼逐漸改善的過程。移除長期累積下來的爛碼，以得到更清晰和更容易維護，除錯以及添加新功能的代碼，這做法不能單純只出現(xiàn)在編碼的后期，甚至是你意識到你的代碼已經(jīng)無從再下手非重寫不可的時候，而是從開始開發(fā)起，逐漸積累，逐漸修改。以前因為日常編碼的隨意性，導(dǎo)致問題日益積累，逐步擴散，最后只能推倒重來。如果時間經(jīng)受不起推倒重來，你別無選擇，唯一實現(xiàn)的選擇就是重構(gòu)。整體的優(yōu)化設(shè)計雖然惹人注目令人難忘，但沒有平日的積累，何以收獲龐大的成就？你的目標應(yīng)該是讓代碼每天都有新變化。堅持幾個月，我相信我們都能擁有驕傲地，清晰代碼。

?

• 在什么時候你會使用?document.write()？

document.write()方法可以用在兩個方面：頁面載入過程中用實時腳本創(chuàng)建頁面內(nèi)容，以及用延時腳本創(chuàng)建本窗口或新窗口的內(nèi)容。該方法需要一個字符串參數(shù)，它是寫到窗口或框架中的HTML內(nèi)容。
　　記住，在載入頁面后，瀏覽器輸出流自動關(guān)閉。在此之后，任何一個對當前頁面進行操作的document.write()方法將打開—個新的輸出流，它將清除當前頁面內(nèi)容(包括源文檔的任何變量或值)。因此，假如希望用腳本生成的HTML替換當前頁面，就必須把HTML內(nèi)容連接起來賦給一個變量，使用一個document.write()方法完成寫操作。不必清除文檔并打開一個新數(shù)據(jù)流，一個document.write()調(diào)用就可完成所有的操作。
　　關(guān)于document.write()方法還有一點要說明的是它的相關(guān)方法document.close()。腳本向窗口(不管是本窗口或其他窗口)寫完內(nèi)容后，必須關(guān)閉輸出流。在延時腳本的最后一個document.write()方法后面，必須確保含有document.close()方法，不這樣做就不能顯示圖像和表單。并且，任何后面調(diào)用的document.write()方法只會把內(nèi)容追加到頁面后，而不會清除現(xiàn)有內(nèi)容來寫入新值。為了演示document.write()方法，我們提供了同一個應(yīng)用程序的兩個版本。

• 大多數(shù)生成的廣告代碼依舊使用?document.write()，雖然這種用法會讓人很不爽。

?

• 請指出瀏覽器特性檢測，特性推斷和瀏覽器 UA 字符串嗅探的區(qū)別？

檢測瀏覽器的特殊名稱和版本（用戶代理檢測）即瀏覽器UA字符串嗅探。瀏覽器嗅探技術(shù)可以快捷的將代碼進行分支，以便針對不同的瀏覽器應(yīng)用不同的指令；針對特定瀏覽器的特定版本，超出范圍之外都是不可靠的

if (navigator.userAgent.indexOf("MSIE 7") > -1){?
//do something?
}

?

var sUserAgent = navigator.userAgent;

//檢測Opera、KHTML

var isOpera = sUserAgent.indexOf(“Opera”) > -1;

var isKHTML = sUserAgent.indexOf(“KHTML”) > -1 || sUserAgent.indexOf(“Konqueror”) > -1 || sUserAgent.indexOf(“AppleWebKit”) > -1;

//檢測IE、Mozilla

var isIE = sUserAgent.indexOf(“compatible”) > -1 && sUserAgent.indexOf(“MSIE”) > -1 && !isOpera;

var isMoz = sUserAgent.indexOf(“Gecko”) > -1 && !isKHTML;

//檢測操作系統(tǒng)

var isWin = (navigator.platform == “Win32″) || (navigator.platform == “Windows”);

var isMac = (navigator.platform == “Mac68K”) || (navigator.platform == “MacPPC”) || (navigator.platform == “Macintosh”);

var isUnix = (navigator.platform == “X11″) && !isWin && !isMac;

?

檢測瀏覽器的特性（特性檢測）

if(document.all){?
//do something?
}?

另外IE獨有children，parentElement，innerText,outerText,outerHTML，FF沒有；

直接進行特性檢測是個很好的方法，并且大部分情況下能滿足需求。一般只要在檢測前知道這個特性是否被實現(xiàn)即可，而不會去考慮它們之間的關(guān)系。?

另外，針對CSS3中新特性@font-face、border-radius、 border-image、box-shadow、rgba() 等，HTML5的特性——比如audio、video、本地儲存、和新的 <input>標簽的類型和屬性等，必要時要進行優(yōu)雅降級。

?

?

?

• 請盡可能詳盡的解釋 AJAX 的工作原理。

?　　非ajax是把要提交的內(nèi)容放在submit里面，瀏覽器刷新提交數(shù)據(jù)。ajax即異步數(shù)據(jù)刷新，將要提交的數(shù)據(jù)與服務(wù)器接口交換數(shù)據(jù)，將得到的數(shù)據(jù)返回用于重組dom元素，以及改變一些頁面效果。

Ajax的原理簡單來說通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來操作DOM而更新頁面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)。

?XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術(shù)。簡單的說，也就是javascript可以及時向服務(wù)器提出請求和處理響應(yīng)，而不阻塞用戶。達到無刷新的效果。

?? ?簡單地說，我們可以把服務(wù)器端看成一個數(shù)據(jù)接口，它返回的是一個純文本流，當然，這個文本流可以是XML格式，可以是Html，可以是Javascript代碼，也可以只是一個字符串。這時候，XMLHttpRequest向服務(wù)器端請求這個頁面，服務(wù)器端將文本的結(jié)果寫入頁面，這和普通的web開發(fā)流程是一樣的，不同的是，客戶端在異步獲取這個結(jié)果后，不是直接顯示在頁面，而是先由javascript來處理，然后再顯示在頁面。

?

• 請解釋 JSONP 的工作原理，以及它為什么不是真正的 AJAX。

JSONP動態(tài)創(chuàng)建script標簽，回調(diào)函數(shù)。Ajax是頁面無刷新請求數(shù)據(jù)操作

　　動態(tài)添加一個<script>標簽，而script標簽的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協(xié)議無關(guān)了。當GET請求從被調(diào)用頁面返回時，可以返回一段JavaScript代碼，這段代碼會自動調(diào)用主頁面中的一個callback函數(shù)。

Jsonp優(yōu)點不受同源策略的影響，它的兼容性更好，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支持；并且在請求完畢后可以通過調(diào)用callback的方式回傳結(jié)果

Jsonp缺點,它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調(diào)用的問題。

?

• 你使用過 JavaScript 模板系統(tǒng)嗎？

?沒用過，但是知道：在生成各種頁面內(nèi)容結(jié)合javascript模板技術(shù)，能讓邏輯和數(shù)據(jù)之間更加清晰。邏輯是寫在"<%"與"%>"之間，如果是注釋，則用"<%#"與"%>"，后臺傳過來的變量使用@來標記。

• 如有使用過，請談?wù)勀愣际褂眠^哪些庫，比如 Mustache.js，Handlebars 等等。

?

• 請解釋變量聲明提升。

? javascript不支持塊級作用域，即變量定義的作用域并不是離其最近的封閉語句或代碼塊，而是包含它的函數(shù)：

var foo = 1;

function bar() {

????if (!foo) {var foo = 10;}

????alert(foo);//10

}

bar();

?

var a = 1;

function b() {a = 10;return;function a() {}}

b();alert(a);//1

對于被函數(shù)作用域包圍的變量的作用域為函數(shù)，函數(shù)內(nèi)部訪問變量，將會返回函數(shù)體內(nèi)最近的變量值；函數(shù)外部訪問變量將會函數(shù)體外所聲明的變量值。

也但是，對于被if語句包裹的代碼段，不能看作是另外一個獨立的作用域，也就是說，對于被非函數(shù)的{}所包圍的代碼段內(nèi)所定義的變量，變量的聲明將會提升到{}所在的作用域。

function f(){{var x =0;}}等同于function f(){var x ;{x =0;}}

function foo() {bar();var x = 1;}會被解釋為function foo() {var x;bar();x = 1;}

變量賦值并沒有被提升，只是聲明被提升了。但是，函數(shù)的聲明有點不一樣，函數(shù)體也會一同被提升。但是請注意，函數(shù)的聲明有兩種方式：

?

function test() {

????foo(); // TypeError "foo is not a function"

????bar(); // "this will run!"

????var foo = function () { // 變量指向函數(shù)表達式

????????alert("this won't run!");

????}

????function bar() { // 函數(shù)聲明 函數(shù)名為bar

????????alert("this will run!");

????}

}

test();

?

對于var?a=1; ?function?a(){?} ?alert(a);function?a(){ ?}?var?a=1; ?alert(a);都是會打印出1 ?

對于全局作用于范圍的變量，var與不var是有區(qū)別的.?沒有var的寫法，其變量不會被提升。比如下面的程序會報錯：alert(a);a=1;

eval中創(chuàng)建的局部變量是不會被提升var a = 1;function t(){console.info(a);eval('var a = 2');console.info(a);}t();console.info(a);結(jié)果按照順序為1，2，1

?

• 請描述下事件冒泡機制。

?　　從目標元素開始，往頂層元素傳播。途中如果有節(jié)點綁定了相應(yīng)的事件處理函數(shù)，這些函數(shù)都會被一次觸發(fā)。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。

?

• "attribute" 和 "property" 的區(qū)別是什么？

DOM元素的attribute和property兩者是不同的東西。attribute翻譯為“特性”，property翻譯為“屬性”。
attribute是一個特性節(jié)點，每個DOM元素都有一個對應(yīng)的attributes屬性來存放所有的attribute節(jié)點，attributes是一個類數(shù)組的容器，說得準確點就是NameNodeMap，不繼承于Array.prototype，不能直接調(diào)用Array的方法。attributes的每個數(shù)字索引以名值對(name=”value”)的形式存放了一個attribute節(jié)點。<div class="box" id="box" gameid="880">hello</div>

property就是一個屬性，如果把DOM元素看成是一個普通的Object對象，那么property就是一個以名值對(name=”value”)的形式存放在Object中的屬性。要添加和刪除property和普通的對象類似。

很多attribute節(jié)點還有一個相對應(yīng)的property屬性，比如上面的div元素的id和class既是attribute，也有對應(yīng)的property，不管使用哪種方法都可以訪問和修改。

總之，attribute節(jié)點都是在HTML代碼中可見的，而property只是一個普通的名值對屬性。

?

• 為什么擴展 JavaScript 內(nèi)置對象不是好的做法？

因為你不知道哪一天瀏覽器或javascript本身就會實現(xiàn)這個方法，而且和你擴展的實現(xiàn)有不一致的表現(xiàn)。到時候你的javascript代碼可能已經(jīng)在無數(shù)個頁面中執(zhí)行了數(shù)年，而瀏覽器的實現(xiàn)導(dǎo)致所有使用擴展原型的代碼都崩潰了。

　　需要給Array原型添加一個distinct的方法，最好檢查是否存在同名的方法，避免自定義方法覆蓋原生方法：

Arrray.prototype.distinct = Arrray.prototype.distinct || function(){/*.....*/}

?

• 請指出 document load 和 document ready 兩個事件的區(qū)別。

document.ready和onload的區(qū)別——JavaScript文檔加載完成事件。頁面加載完成有兩種事件，一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁面包含圖片等文件在內(nèi)的所有元素都加載完成。

?

jQuery中$(function(){/* do something*/});他的作用或者意義就是:在DOM加載完成后就可以可以對DOM進行操作。一般情況先一個頁面響應(yīng)加載的順序是，域名解析-加載html-加載js和css-加載圖片等其他信息。

?

• ==?和?===?有什么不同？

”==”：判斷值是否相等。應(yīng)用一套難以理解的隱式強制轉(zhuǎn)換規(guī)則。

”===”判斷值及類型是否完全相等。讀者不需要涉及任何的隱式轉(zhuǎn)換。

?

注意：

?

1）如果兩個值的類型不同，它們就不相同。

2）如果兩個值是數(shù)字，而且值相同，那么除非其中一個或兩個都是NaN(這種情況它們不是等同的),否則它們是等同的。值NaN永遠不會與其他任何值等同，包括它自身(奇怪的家伙),要檢測一個值是否是NaN，可以使用全局函數(shù)isNaN()。

3）如果兩個值都是字符串，而且在串中同一位置上的字符完全相同，那么它們就完全等同。如果字符串的長度或內(nèi)容不同，它們就不是等同的。

4）如果兩個值都是布爾型true，或者兩個值都是布爾型false，那么它們等同。

5）如果兩個值引用的是同一個對象、數(shù)組或函數(shù)，那么它們完全等同。如果它們引用的是不同的對象（數(shù)組或函數(shù)），它們就不完全等同，即使這兩個對象具有完全相同的屬性，或兩個數(shù)組具有完全相同的元素。

6）如果兩個值都是null或都是undefined，“==”返回true，“===”返回false。

?

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

?　　同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標準。所謂同源是指，域名，協(xié)議，端口相同。如果我們又想利用XMLHTTP的無刷新異步交互能力，又不愿意公然突破Javascript的安全策略，可以選擇的方案就是給XMLHTTP加上嚴格的同源限制。

　　同源策略阻止從一個源加載的文檔或腳本獲取或設(shè)置另一個源加載的文檔的屬性。

　　處理跨域方法：

? 1)document.domain+iframe的設(shè)置

2)動態(tài)創(chuàng)建script

3)利用iframe和location.hash

4)window.name實現(xiàn)的跨域數(shù)據(jù)傳輸

5)使用HTML5 postMessage

?

• 如何實現(xiàn)下列代碼：

[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

Array.prototype.duplicator = function(){

var l = this.length,i;

for(i=0;i<l;i++){

this.push(this[i])　

???}

}

• 什么是三元表達式？“三元” 表示什么意思？

　　　　三元運算符需要三個操作數(shù)。

　　　　語法是?條件 ? 結(jié)果1 : 結(jié)果2;. 這里你把條件寫在問號(?)的前面后面跟著用冒號(:)分隔的結(jié)果1和結(jié)果2。滿足條件時結(jié)果1否則結(jié)果2。

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

　　在所有的函數(shù) (或者所有最外層函數(shù)) 的開始處加入 "use strict"; 指令啟動嚴格模式。

"嚴格模式"有兩種調(diào)用方法

?

1）將"use strict"放在腳本文件的第一行，則整個腳本都將以"嚴格模式"運行。如果這行語句不在第一行，則無效，整個腳本以"正常模式"運行。如果不同模式的代碼文件合并成一個文件，這一點需要特別注意。

?

2）將整個腳本文件放在一個立即執(zhí)行的匿名函數(shù)之中。

?

? 好處

- 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;

- 消除代碼運行的一些不安全之處，保證代碼運行的安全；

- 提高編譯器效率，增加運行速度；

- 為未來新版本的Javascript做好鋪墊。

壞處

　　　　　　同樣的代碼，在"嚴格模式"中，可能會有不一樣的運行結(jié)果；一些在"正常模式"下可以運行的語句，在"嚴格模式"下將不能運行　

?

?

jQuery?相關(guān)問題：

?

• 解釋"chaining"。

Chaining 允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）。這樣的話，瀏覽器就不必多次查找相同的元素。鏈式調(diào)用，這是因為jQuery內(nèi)部在方法調(diào)用之后，都返回本身（在無狀態(tài)的方法中返回新對象來支持方法鏈，有狀態(tài)的方法中返回this來支持方法鏈）。雖然如此，但是如果直接把全部代碼都寫在一行，可讀性會變差，不利于維護，因此要加上必要的縮進和換行。

$("#p1").css("color","red")

??.slideUp(2000)

??.slideDown(2000);

?

• 解釋"deferreds"。

deferred對象就是jQuery的回調(diào)函數(shù)解決方案。deferred對象的含義就是"延遲"到未來某個點再執(zhí)行。

對于那些某些耗時很長的javascript操作比如異步的操作（比如ajax讀取服務(wù)器數(shù)據(jù)），和同步的操作（比如遍歷一個大型數(shù)組），并不是馬上能夠得到結(jié)果，因此，為它們指定回調(diào)函數(shù)（callback）。

? $.ajax("test.html").done(function(){ alert("成功！"); }).fail(function(){ alert("出錯！"); });同時回調(diào)函數(shù)可以添加任意多個，它們按照添加順序執(zhí)行。

?

• 你知道哪些針對 jQuery 的優(yōu)化方法。

1）總是從ID選擇器開始繼承
　　在jQuery中最快的選擇器是ID選擇器，因為它直接來自于JavaScript的getElementById()方法。當然 這只是對于單一的元素來講。如果你需要選擇多個元素，這必然會涉及到 DOM遍歷和循環(huán)，為了提高性能，建議從最近的ID開始繼承。如下所示：var traffic_lights = $(“#traffic_light input”)

　　可以使用console測試程序性能，比較id選擇器和class選擇器的效率。

2）在class前使用tag(標簽名)
　　在jQuery中第二快的選擇器是tag(標簽)選擇器( 比如：$(“head”) )，因為它來自原生的getElementsByTagName() 方法。

　　在使用tag來修飾class的時候，我們需要注意以下幾點：
　　（1） 不要使用tag來修飾ID，如下所示：var content = $(“div#content”);這樣一來，選擇器會先遍歷所有的div元素，然后匹配#content。
　　（2）不要使用ID來修飾ID，如下所示：var traffic_light = $(“#content #traffic_light”);

3）將jQuery對象緩存起來
　　把jQuery對象緩存起來，不要讓相同的選擇器在你的代碼里出現(xiàn)多次。

　　注意：（1）為了區(qū)分普通的JavaScript對象和jQuery對象，可以在變量首字母前加上 $ 符號。
??（2）代碼可以使用jQuery的鏈式操作加以改善。

4）對直接的DOM操作進行限制

　　這里的基本思想是在內(nèi)存中建立你確實想要的東西，然后更新DOM ，因為直接的DOM操作速度很慢。例如，動態(tài)的創(chuàng)建一組列表元素，盡量不要在循環(huán)中，調(diào)用append：? ??

for?(var?i=0,?l=top_100_list.length;?i<l;?i++){?$mylist.append("<li>"?+?top_100_list[i]?+?"</li>");}

　　而應(yīng)該將整套元素字符串創(chuàng)建完畢后，再在插入進dom中

for?(var?i=0,?l=top_100_list.length;?i<l;?i++){top_100_li?+=?"<li>"?+?top_100_list[i]?+?"</li>";}? ?$mylist.html(top_100_li);

5）冒泡
　　除非在特殊情況下, 否則每一個js事件(例如:click, mouseover等.)都會冒泡到父級節(jié)點。當我們需要給多個元素調(diào)用同個函數(shù)時這點會很有用。代替這種效率很差的多元素事件監(jiān)聽的方法就是, 你只需向它們的父節(jié)點綁定一次。

?

$("#entryform").bind("focus", function(e){//非單獨獲取#entryform中的input

????????var $cell = $(e.target); // e.target 捕捉到觸發(fā)的目標元素

????????$cell.addClass("selected");

????}).bind("blur", function(e){

????????var $cell = $(e.target);

????????$cell.removeClass("selected");

????});

?

6）推遲到 $(window).load

$(document).rady 確實很有用， 它可以在頁面渲染時，其它元素還沒下載完成就執(zhí)行。其實可以通過將jQuery函數(shù)綁定到$(window).load 事件的方法來減少頁面載入時的cpu使用率。它會在所有的html(包括iframe)被下載完成后執(zhí)行。一些特效的功能，例如拖放, 視覺特效和動畫, 預(yù)載入隱藏圖像等等，都是適合這種技術(shù)的場合。

7）壓縮JavaScript

壓縮之前，請保證你的代碼的規(guī)范性（語句執(zhí)行結(jié)束后添加分號），否則可能失敗，導(dǎo)致Js錯誤。

8）給選擇器一個上下文

jQuery選擇器中有一個這樣的選擇器，它能指定上下文。jQuery( expression, context );
通過它，能縮小選擇器在DOM中搜索的范圍，達到節(jié)省時間，提高效率。
普通方式：$(‘.myDiv’)改進方式：$(‘.myDiv’ , $(“#listItem”) )

?

• 請解釋?.end()?的用途。

? end() 方法結(jié)束當前鏈條中的最近的篩選操作，并將匹配元素集還原為之前的狀態(tài)。

　　大多數(shù) jQuery 的遍歷方法會操作一個 jQuery 對象實例，并生成一個匹配不同 DOM 元素集的新對象。當發(fā)生這種情況時，應(yīng)該會把新的元素集推入維持在對象中的堆棧內(nèi)。每次成功的篩選方法調(diào)用都會把新元素推入堆棧中。如果我們需要老的元素集，可以使用 end() 從堆棧中彈出新集合。但由于進行了額外的調(diào)用，會有一點點性能損失。

?

• 你如何給一個事件處理函數(shù)命名空間，為什么要這樣做？

?　　用 .bind('click.myCustomRoutine',function(){...}); 把匿名函數(shù)綁定到 click 事件（使用命名空間多次綁定不同的行為方法）；使用.unbind('click.myCustomRoutine') 即可 釋放所有綁定到 .myCustomRoutine 命名空間的 click 事件，而不會解除其他通過 .bind('click') 或另外的命名 空間所綁定的事件行為。?

　　但是，考慮一種情況就是：需要在運行時根據(jù)用戶交互的結(jié)果進行不同click事件處理邏輯的綁定，因而理論 上會無數(shù)次對某一個事件進行 bind / unbind 操作。但又希望 unbind 的時候只把自己綁上去的處理邏輯給釋放掉而不是所有其他地方有 可能的額外的同一事件綁定邏輯。?

　　這時候如果直接用 .click() / .bind('click') 加 上 .unbind('click') 來進行重復(fù)綁定的話，被unbind 掉的將是所有綁定在元素上的 click 處理邏輯，潛在會影響到該元素 其他第三方的行為。

　　對于這種問題，jQuery的解決方案是使用事件綁定的命名空間。即在事件名稱后添加.something 來區(qū)分自己這部分行為邏輯范圍。??

?

• 請說出你可以傳遞給 jQuery 方法的四種不同值。

　　選擇器（字符串），HTML（字符串），回調(diào)函數(shù)，HTML元素，對象，數(shù)組，元素數(shù)組，jQuery對象等。

?

• 什么是效果隊列？

? jQuery中有個動畫隊列的機制。當對一個對象添加多次動畫效果時后添加的動作就會被放入這個動畫隊列中，等前面的動畫完成后再開始執(zhí)行。可是用戶的操作往往都比動畫快，如果用戶對一個對象頻繁操作時不處理動畫隊列就會造成隊列堆積，影響到效果。
jQuery中有stop這個方法可以停止當前執(zhí)行的動畫，并且它有兩個布爾參數(shù)，默認值都為false。第一個參數(shù)為true時會清空動畫隊列，第二個參數(shù)為true時會瞬間完成掉當前動畫。；第二個參數(shù)為true，把當前在執(zhí)行的動畫跳轉(zhuǎn)到完成狀態(tài)。這時第一個參數(shù)如果也為true，后面的隊列就會被清空。

?

• 請指出?.get()，[]，eq()?的區(qū)別。

eq返回的是一個jquery對象 ??get返回的是一個html 對象數(shù)組。

　　進一步說，返回的是jQuery對象，就可以繼續(xù)調(diào)用其他方法，返回的是html數(shù)組就不能調(diào)用jQuery的其他方法，例如：

$("ul li").eq(1).css("color", "red"); ?//這個是正確的

$("ul li").get(1).css("color", "red"); //這個是錯誤的

?

當$()所獲取的對象不存在，即為[]時，get()返回undefined，而eq()返回m.fn.init[0]，jQuery文檔對象。

?

• 請指出?.bind()，.live()?和?.delegate()?的區(qū)別。

?　　對于bind()：$('a').bind('click',function(){alert('That tickles!');})jQuery掃描文檔找出所有的$(‘a(chǎn)')元素，并把alert函數(shù)綁定到每個元素的click事件上。?

　　對于live()：$('a').live('click',function(){alert('That tickles!')})jQuery把alert函數(shù)綁定到$(document)元素上，并使用'click'和'a'作為參數(shù)。任何時候只要有事件冒泡到document節(jié)點上，它就查看該事件是否是一個click事件，以及該事件的目標元素與'a'這一CSS選擇器是否匹配，如果都是的話，則執(zhí)行函數(shù)。?

　　對于.delegate() ：$('#container').delegate('a','click',function(){alert('That tickles!')})jQuery掃描文檔查找$('#container')，并使用click事件和'a'這一CSS選擇器作為參數(shù)把alert函數(shù)綁定到$('#container')上。任何時候只要有事件冒泡到$('#container')上，它就查看該事件是否是click事件，以及該事件的目標元素是否與CSS選擇器相匹配。如果兩種檢查的結(jié)果都為真的話，它就執(zhí)行函數(shù)。?

bind看上去更加明確直接，但是delegate和live執(zhí)行的效率會更高。

bind首先要掃描整個的文檔查找所有的$(‘a(chǎn)')元素，把它們存成jQuery對象。盡管live函數(shù)僅需要把'a'作為串參數(shù)傳遞以用做之后的判斷，但是$()函數(shù)并未“知道”被鏈接的方法將會是.live()。

delegate方法僅需要查找并存儲$(document)元素。?一種尋求避開這一問題的方法是調(diào)用在$(document).ready()之外綁定的live，這樣它就會立即執(zhí)行。在這種方式下，其會在DOM獲得填充之前運行，因此就不會查找元素或是創(chuàng)建jQuery對象了。?

?

• 請指出?$?和?$.fn?的區(qū)別，或者說出?$.fn?的用途。

jQuery對方法的拓展，從調(diào)用聲明創(chuàng)建方法的方式來看，可以歸結(jié)為兩類：一類直接由$符調(diào)用；另一類由$("")來調(diào)用。$拓展的方法是靜態(tài)方法，可以使用$直接調(diào)用，其拓展的方式一般使用$.extend({});；而$.fn拓展的方法是實例方法，必須由“對象”$("")來調(diào)用，一般使用$.fn.extend({?})。

$.fn是指jquery的命名空間，加上fn上的方法及屬性，會對jquery實例每一個有效。?如擴展$.fn.abc() ；使用：$("#div").abc(); 。

?

• 請優(yōu)化下列選擇器：

$(".foo div#bar:eq(0)")->$(".foo #bar:first-child")

?

代碼相關(guān)的問題：

modulo(12, 5) // 2

問題：實現(xiàn)滿足上述結(jié)果的modulo函數(shù)

?

1 (function module(a,b){

2 ????????var r;

3 ????????if( !isNaN(a) && !isNaN(b)){

4 ????????????(a>b)?(r= a%b):(r= b%a);

5 ????????????return r;

6 ????????}else{

7 ?????????????throw new Error("arguments are not numbers");

8 ????????}

9 })(12,5);

?

實際上就是求模運算。注意：檢查參數(shù)的合理性（數(shù)字且長度為2）否則拋出異常

?

"i'm a lasagna hog".split("").reverse().join("");

問題：上面的語句的返回值是什么？?答案："goh angasal a m'i"

這道題目提醒了一點："i'm a lasagna hog"不繼承于Array.prototype不能直接調(diào)用Array的reverse()方法。因此先要使用split("")將字符串轉(zhuǎn)變?yōu)閿?shù)組，最后使用join("")將已經(jīng)逆序的結(jié)果轉(zhuǎn)換為字符串。

博主想補充一點是：通過dom操作(ducument.getElementByTayName和document.getByClassName)獲取的NodeList和函數(shù)中的arguments對象都是偽數(shù)組，不能不繼承Array.prototype，不能直接調(diào)用Array的方法。可以使用遍歷，將偽數(shù)組中的元素push到新數(shù)組中或使用[].slice.call(arguments)將偽數(shù)組轉(zhuǎn)換為數(shù)組。

?

( window.foo || ( window.foo = "bar" ) );

問題：window.foo 的值是什么？?答案："bar"?只有 window.foo 為假（定義的值類型轉(zhuǎn)換為false或者沒定義，即為undefined）時的才是上面答案，否則就是它本身的值（提前聲明定義的值）。

?

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

問題：上面兩個 alert 的結(jié)果是什么?答案: "Hello World"?和?ReferenceError: bar is not defined

var foo = "Hello";

(function() {

????????var bar = " World";

????????console.info(foo + bar); //代碼段包裹在“立即調(diào)用函數(shù)”中，獲取全局的foo和函數(shù)內(nèi)的bar

})();

console.info(foo + bar);//“立即調(diào)用函數(shù)”執(zhí)行完畢后，外部無法訪問其內(nèi)部的局部變量，因此，在此作用域內(nèi)的bar未定義

?

var foo = [];

foo.push(1);

foo.push(2);

問題：foo.length 的值是什么？?答案：2

個人感覺這道題目考得太簡單了，最后，大家思考一下這道題目：

var array1 = [1,2];

var array2 = array1;

array1[0] = array2[1];

array2.push(3);

console.log(array1);

console.log(array2);

array2 = array1將array2和array1引用同一片存儲區(qū)域，對其中一個變量進行賦值和修改操作都會影響到另外一個變量的值。?

因此答案是：Array1的值為[2,2,3];Array2的值為[2,2,3]

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

前端面試題：?

1.?一個200*200的div在不同分辨率屏幕上下左右居中，用css實現(xiàn)

div

{

position:absolute;

width:200px;

height:200px;

top:50%;

left:50%;

margin-left:-100px;

height:-100px;

z-index:1000;

}

?

?

?

2.?寫一個左中右布局占滿屏幕，其中左右兩塊是固定寬度200 ，中間自適應(yīng)寬，要求先加載中間塊，請寫出結(jié)構(gòu)及樣式：

?<body>??

?

????????<h3>實現(xiàn)三列寬度自適應(yīng)布局</h3>??

?

????????<div?id?=?"left">我是左邊</div>??

?

????????<div?id?=?"right">我是右邊</div>??

?

????????<div?id?=?"center">我是中間</div>??

?

</body>??

?

?

?

html,body{?margin:?0px;width:?100%;?}??

?

h3{height:?100px;margin:20px?0?0;}??

?

#left,#right{width:?200px;height:?200px;?background-color:?#ffe6b8;position:?absolute;top:120px;}??

?

#left{left:0px;}??

?

#right{right:?0px;}??

?

#center{margin:2px?210px?;background-color:?#eee;height:?200px;?}??

?

?

?

3.?闡述清楚浮動的幾種方式（常見問題）

1.父級div定義 height

?

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優(yōu)點：簡單、代碼少、容易掌握

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題

?

2.父級div定義 overflow:hidden

?

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度

優(yōu)點：簡單、代碼少、瀏覽器支持好

?

4.?結(jié)尾處加空div標簽 clear:both

?

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

優(yōu)點：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題

?

缺點：不少初學(xué)者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好

?

5.?解釋css sprites ，如何使用？

CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

?

CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片

?

6.?如何用原生js給一個按鈕綁定兩個onclick事件？

Var ?btn=document.getElementById(‘btn’);

?

//事件監(jiān)聽 綁定多個事件

?

var btn4 = document.getElementById("btn4");

?

btn4.addEventListener("click",hello1);

?

btn4.addEventListener("click",hello2);

?

?

?

function hello1(){

?

?alert("hello 1");

?

}

?

function hello2(){

?

?alert("hello 2");

?

}

?

?

?

7.?拖拽會用到哪些事件

·?dragstart:拖拽開始時在被拖拽元素上觸發(fā)此事件,監(jiān)聽器需要設(shè)置拖拽所需數(shù)據(jù),從操作系統(tǒng)拖拽文件到瀏覽器時不觸發(fā)此事件.

?

·?dragenter:拖拽鼠標進入元素時在該元素上觸發(fā),用于給拖放元素設(shè)置視覺反饋,如高亮

?

·?dragover:拖拽時鼠標在目標元素上移動時觸發(fā).監(jiān)聽器通過阻止瀏覽器默認行為設(shè)置元素為可拖放元素.

?

·?dragleave:拖拽時鼠標移出目標元素時在目標元素上觸發(fā).此時監(jiān)聽器可以取消掉前面設(shè)置的視覺效果.

?

·?drag:拖拽期間在被拖拽元素上連續(xù)觸發(fā)

?

·?drop:鼠標在拖放目標上釋放時,在拖放目標上觸發(fā).此時監(jiān)聽器需要收集數(shù)據(jù)并且執(zhí)行所需操作.如果是從操作系統(tǒng)拖放文件到瀏覽器,需要取消瀏覽器默認行為.

?

·?dragend:鼠標在拖放目標上釋放時,在拖拽元素上觸發(fā).將元素從瀏覽器拖放到操作系統(tǒng)時不會觸發(fā)此事件.

?

8.?請列舉jquery中的選擇器：

?

?

?

?

9.?Javascript中的定時器有哪些？他們的區(qū)別及用法是什么？

setTimeout 只執(zhí)行一次

setInterval 會一直重復(fù)執(zhí)行

?

9.請描述一下 cookies sessionStorage和localstorage區(qū)別

相同點：都存儲在客戶端

不同點：1.存儲大小

?

·?cookie數(shù)據(jù)大小不能超過4k。

?

·?sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

?

2.有效時間

?

·?localStorage ? ?存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；

?

·?sessionStorage ?數(shù)據(jù)在當前瀏覽器窗口關(guān)閉后自動刪除。

?

·?cookie ? ? ? ? ?設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉

?

3. 數(shù)據(jù)與服務(wù)器之間的交互方式

?

·?cookie的數(shù)據(jù)會自動的傳遞到服務(wù)器，服務(wù)器端也可以寫cookie到客戶端

?

·?sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。

?

10.計算一個數(shù)組arr所有元素的和

var arr1=[1,2,3,4,5,6,7,8,9];

?

var sum1=0;

?

for (var i=0;i<=arr1.length;i++) {

?

if (typeof arr1[i]=="number") {

?

sum1+=arr1[i];

?

}

?

}

?

document.write(sum1);

?

//====================================

?

function?sum2(arr){

?

var all=0;

?

for (var i=0;i<arr.length;i++) {

?

if (typeof arr[i]=="number") {

?

all+=arr[i];

?

}

?

}

?

return?all;

?

}

?

document.write(sum2([1,2,3,4]));

?

11.編寫一個方法去掉數(shù)組里面 重復(fù)的內(nèi)容 ?var arr=[1,2,3,4,5,1,2,3]

一個數(shù)組去重的簡單實現(xiàn)

?

?

?

var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];

?

//定義一個新的數(shù)組

?

var s = [];

?

//遍歷數(shù)組

?

for(var i = 0;i<arr.length;i++){

?

????if(s.indexOf(arr[i]) == -1){ ?//判斷在s數(shù)組中是否存在，不存在則push到s數(shù)組中

?

????????s.push(arr[i]);

?

????}

?

}

?

console.log(s);

?

//輸出結(jié)果：["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]

?

方法二：用sort() ?然后相鄰比較也可以實現(xiàn)

?

12.document.write和innerHTML的區(qū)別：

document.write是直接寫入到頁面的內(nèi)容流，如果在寫之前沒有調(diào)用document.open, 瀏覽器會自動調(diào)用open。每次寫完關(guān)閉之后重新調(diào)用該函數(shù)，會導(dǎo)致頁面被重寫。

?

innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內(nèi)容。你可以精確到某一個具體的元素來進行更改。如果想修改document的內(nèi)容，則需要修改document.documentElement.innerElement。

?

innerHTML將內(nèi)容寫入某個DOM節(jié)點，不會導(dǎo)致頁面全部重繪

?

?

?

innerHTML很多情況下都優(yōu)于document.write，其原因在于其允許更精確的控制要刷新頁面的那一個部分。

?

13.ajax的步驟

什么是ajax?

?

ajax(異步j(luò)avascript xml) 能夠刷新局部網(wǎng)頁數(shù)據(jù)而不是重新加載整個網(wǎng)頁。

?

如何使用ajax?

?

第一步，創(chuàng)建xmlhttprequest對象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest對象用來和服務(wù)器交換數(shù)據(jù)。

?

var xhttp;

?

if (window.XMLHttpRequest) {

?

//現(xiàn)代主流瀏覽器

?

xhttp = new XMLHttpRequest();

?

} else {

?

// 針對瀏覽器，比如IE5或IE6

?

xhttp = new ActiveXObject("Microsoft.XMLHTTP");

?

}

?

第二步，使用xmlhttprequest對象的open（）和send（）方法發(fā)送資源請求給服務(wù)器。

?

第三步，使用xmlhttprequest對象的responseText或responseXML屬性獲得服務(wù)器的響應(yīng)。

?

第四步，onreadystatechange函數(shù)，當發(fā)送請求到服務(wù)器，我們想要服務(wù)器響應(yīng)執(zhí)行一些功能就需要使用onreadystatechange函數(shù)，每次xmlhttprequest對象的readyState發(fā)生改變都會觸發(fā)onreadystatechange函數(shù)

?

14.xml和json的區(qū)別，請用四個詞語來形容

·??JSON相對于XML來講，數(shù)據(jù)的體積小，傳遞的速度更快些

?

·??JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互

?

·??XML對數(shù)據(jù)描述性比較好；

?

·??JSON的速度要遠遠快于XML

?

?

?

15.清楚浮動的方法？(多次出現(xiàn)在面試題)

1.父級div定義 height

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優(yōu)點：簡單、代碼少、容易掌握

?

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題

?

2，結(jié)尾處加空div標簽 clear:both

?

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

優(yōu)點：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題

缺點：不少初學(xué)者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好

3，父級div定義 偽類:after 和 zoom

?

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題

優(yōu)點：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）

缺點：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持

4，父級div定義 overflow:hidden

?

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度

優(yōu)點：簡單、代碼少、瀏覽器支持好

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

?

?

?

16.box-sizing常用的屬性有哪些？分別有什么作用？

屬性值

?

·?box-sizing：content-box

?

·?box-sizing：border-box

?

·?box-sizing：inherit

?

?

?

content-box

?

·?這是box-sizing的默認屬性值

?

·?是CSS2.1中規(guī)定的寬度高度的顯示行為

?

·?在CSS中定義的寬度和高度就對應(yīng)到元素的內(nèi)容框

?

·?在CSS中定義的寬度和高度之外繪制元素的內(nèi)邊距和邊框

?

?

?

border-box

?

·?在CSS中微元素設(shè)定的寬度和高度就決定了元素的邊框盒

?

·?即為元素在設(shè)置內(nèi)邊距和邊框是在已經(jīng)設(shè)定好的寬度和高度之內(nèi)進行繪制

?

·?CSS中設(shè)定的寬度和高度減去邊框和內(nèi)間距才能得到元素內(nèi)容所占的實際寬度和高度

?

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認效果)。

border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

?

?

?

17.css選擇器有哪些，選擇器的權(quán)重的優(yōu)先級

選擇器類型

?

1、ID #id

?

2、class .class

?

3、標簽　　p

?

4、通用　　*

?

5、屬性　　[type="text"]

?

6、偽類　　：hover

?

7、偽元素　　::first-line

?

8、子選擇器、相鄰選擇器

?

三、權(quán)重計算規(guī)則

?

1.?第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。

?

2.?第二等：代表ID選擇器，如：#content，權(quán)值為0100。

?

3.?第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為0010。

?

4.?第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為0001。

?

5.?通配符、子選擇器、相鄰選擇器等的。如*、>、+,權(quán)值為0000。

?

6.?繼承的樣式?jīng)]有權(quán)值。

?

18.?塊級元素水平垂直居中的方法有哪些（三個方法）

?

?

讓div等塊級元素水平和垂直都居中，即永遠處于屏幕的正中央，當我們做如登錄塊時非常有用！

?

　實現(xiàn)一、原理：要讓div等塊級元素水平和垂直居中，必需知道該div等塊級元素的寬度和高度，然后設(shè)置位置為絕對位置，距離頁面窗口左邊框和上邊框的距離設(shè)置為50%，這個50%就是指頁面窗口的寬度和高度的50%，最后將該div等塊級元素分別左移和上移，左移和上移的大小就是該div等塊級元素寬度和高度的一半。

?

? ?CSS代碼：

?

.mycss{?

?

???width:300px;??

?

???height:200px;??

?

???position:absolute;??

?

???left:50%;??

?

???top:50%;??

?

???margin:-100px 0 0 -150px }

?

?

?

?實現(xiàn)二原理：利用CSS的margin設(shè)置為auto讓瀏覽器自己幫我們水平和垂直居中。

?

? ?CSS代碼：

?

.mycss{

?

????position:?absolute;

?

????left:?0px;

?

????right:?0;

?

????top:?0;

?

????bottom:?0;

?

????margin:?auto;

?

????height:?200px;

?

????width:?300px;

?

}

?

?

?

jQuery實現(xiàn)水平和垂直居中

?

　原理：jQuery實現(xiàn)水平和垂直居中的原理就是通過jQuery設(shè)置div等塊級元素的CSS，獲取div等塊級元素的左、上的邊距偏移量，邊距偏移量的算法就是用頁面窗口 的寬度減去該div等塊級元素的寬度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等塊級元素的CSS設(shè)置要在resize()方法中完成，就是每次改變窗口大 小時，都要執(zhí)行設(shè)置div等塊級元素的CSS。

?

jquery代碼：

?

$(window).resize(function(){

?

????$(".myblock").css({

?

????????position: "absolute",

?

????????left: ($(window).width() - $(".myblock").outerWidth())/2,

?

????????top: ($(window).height() - $(".myblock").outerHeight())/2 ????}); ???????

?

});

?

此外在頁面載入時，就需要調(diào)用resize()方法

?

$(function(){

?

????$(window).resize();

?

});

?

?

?

19.三個盒子，左右定寬，中間自適應(yīng)有幾種方法

第一種：左右側(cè)采用浮動 中間采用margin-left 和 margin-right 方法。

?

代碼如下：

?

<div style="width:100%; margin:0 auto;">?

?

?

?

???????<div style="width:200px; float:right; background-color:#960">這是右側(cè)的內(nèi)容 固定寬度</div>

?

?

?

???????<div style="width:150px; float:left; background:#6FF">這是左側(cè)的內(nèi)容 固定寬度</div>

?

?

?

???????<div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內(nèi)容，自適應(yīng)寬度</div>

?

?

?

????</div>

?

?

?

?

?

第二種：左右兩側(cè)采用絕對定位?中間同樣采用margin-left margin-right方法：

?

?

?

?

?

第三種負的margin

?

使用這種方法就稍微復(fù)雜了一些了，使用的是負的margin值，而且html標簽也增加了，先來看其代碼吧：

?

<div id="main">

?

?<div id="mainContainer">main content</div></div><div id="left">

?

?<div id="leftContainer"?class="inner">left content</div></div><div id="right">

?

?<div id="rightContainer"?class="inner">right</div></div>

?

#main {

?

?float:?left;

?

?width:?100%;

?

}

?

#mainContainer {

?

?margin:?0 230px;

?

?height:?200px;

?

?background:?green;

?

}

?

#left {

?

?float:?left;

?

?margin-left:?-100%;

?

?width:?230px}?

?

#right {

?

?float:?left;

?

?margin-left:?-230px;

?

?width:?230px;

?

}?

?

#left .inner,

?

#right .inner {

?

?background:?orange;

?

?margin:?0 10px;

?

?height:?200px;

?

}

?

?

?

20.js有幾種數(shù)據(jù)類型，其中基本數(shù)據(jù)類型有哪些

五種基本類型:?Undefined、Null、Boolean、Number和String。

?

1中復(fù)雜的數(shù)據(jù)類型————Object，Object本質(zhì)上是由一組無序的名值對組成的。

?

Object、Array和Function則屬于引用類型

?

?

?

21.undefined 和 null 區(qū)別

?

?

null： Null類型，代表“空值”，代表一個空對象指針，使用typeof運算得到 “object”，所以你可以認為它是一個特殊的對象值。

?

undefined： Undefined類型，當一個聲明了一個變量未初始化時，得到的就是undefined。

?

null是javascript的關(guān)鍵字，可以認為是對象類型，它是一個空對象指針，和其它語言一樣都是代表“空值”，不過 undefined 卻是javascript才有的。undefined是在ECMAScript第三版引入的，為了區(qū)分空指針對象和未初始化的變量，它是一個預(yù)定義的全局變量。沒有返回值的函數(shù)返回為undefined，沒有實參的形參也是undefined。

?

?

?

javaScript權(quán)威指南： null 和 undefined 都表示“值的空缺”，你可以認為undefined是表示系統(tǒng)級的、出乎意料的或類似錯誤的值的空缺，而null是表示程序級的、正常的或在意料之中的值的空缺。

?

22.http 和 https 有何區(qū)別？如何靈活使用？

?

?

http是HTTP協(xié)議運行在TCP之上。所有傳輸?shù)膬?nèi)容都是明文，客戶端和服務(wù)器端都無法驗證對方的身份。

?

https是HTTP運行在SSL/TLS之上，SSL/TLS運行在TCP之上。所有傳輸?shù)膬?nèi)容都經(jīng)過加密，加密采用對稱加密，但對稱加密的密鑰用服務(wù)器方的證書進行了非對稱加密。此外客戶端可以驗證服務(wù)器端的身份，如果配置了客戶端驗證，服務(wù)器方也可以驗證客戶端的身份

?

?

23.常見的HTTP狀態(tài)碼

2開頭 （請求成功）表示成功處理了請求的狀態(tài)代碼。

?

200?? （成功）? 服務(wù)器已成功處理了請求。 通常，這表示服務(wù)器提供了請求的網(wǎng)頁。?

201?? （已創(chuàng)建）? 請求成功并且服務(wù)器創(chuàng)建了新的資源。?

202?? （已接受）? 服務(wù)器已接受請求，但尚未處理。?

203?? （非授權(quán)信息）? 服務(wù)器已成功處理了請求，但返回的信息可能來自另一來源。?

204?? （無內(nèi)容）? 服務(wù)器成功處理了請求，但沒有返回任何內(nèi)容。?

205?? （重置內(nèi)容） 服務(wù)器成功處理了請求，但沒有返回任何內(nèi)容。

206?? （部分內(nèi)容）? 服務(wù)器成功處理了部分 GET 請求。

?

3開頭 （請求被重定向）表示要完成請求，需要進一步操作。 通常，這些狀態(tài)代碼用來重定向。

?

300?? （多種選擇）? 針對請求，服務(wù)器可執(zhí)行多種操作。 服務(wù)器可根據(jù)請求者 (user agent) 選擇一項操作，或提供操作列表供請求者選擇。?

301?? （永久移動）? 請求的網(wǎng)頁已永久移動到新位置。 服務(wù)器返回此響應(yīng)（對 GET 或 HEAD 請求的響應(yīng)）時，會自動將請求者轉(zhuǎn)到新位置。

302?? （臨時移動）? 服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來進行以后的請求。

303?? （查看其他位置） 請求者應(yīng)當對不同的位置使用單獨的 GET 請求來檢索響應(yīng)時，服務(wù)器返回此代碼。

304?? （未修改） 自從上次請求后，請求的網(wǎng)頁未修改過。 服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容。?

305?? （使用代理） 請求者只能使用代理訪問請求的網(wǎng)頁。 如果服務(wù)器返回此響應(yīng)，還表示請求者應(yīng)使用代理。?

307?? （臨時重定向）? 服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來進行以后的請求。

?

4開頭 （請求錯誤）這些狀態(tài)代碼表示請求可能出錯，妨礙了服務(wù)器的處理。

?

400?? （錯誤請求） 服務(wù)器不理解請求的語法。?

401?? （未授權(quán)） 請求要求身份驗證。 對于需要登錄的網(wǎng)頁，服務(wù)器可能返回此響應(yīng)。?

403?? （禁止） 服務(wù)器拒絕請求。

404?? （未找到） 服務(wù)器找不到請求的網(wǎng)頁。

405?? （方法禁用） 禁用請求中指定的方法。?

406?? （不接受） 無法使用請求的內(nèi)容特性響應(yīng)請求的網(wǎng)頁。?

407?? （需要代理授權(quán)） 此狀態(tài)代碼與 401（未授權(quán)）類似，但指定請求者應(yīng)當授權(quán)使用代理。

408?? （請求超時）? 服務(wù)器等候請求時發(fā)生超時。?

409?? （沖突）? 服務(wù)器在完成請求時發(fā)生沖突。 服務(wù)器必須在響應(yīng)中包含有關(guān)沖突的信息。?

410?? （已刪除）? 如果請求的資源已永久刪除，服務(wù)器就會返回此響應(yīng)。?

411?? （需要有效長度） 服務(wù)器不接受不含有效內(nèi)容長度標頭字段的請求。?

412?? （未滿足前提條件） 服務(wù)器未滿足請求者在請求中設(shè)置的其中一個前提條件。?

413?? （請求實體過大） 服務(wù)器無法處理請求，因為請求實體過大，超出服務(wù)器的處理能力。?

414?? （請求的 URI 過長） 請求的 URI（通常為網(wǎng)址）過長，服務(wù)器無法處理。?

415?? （不支持的媒體類型） 請求的格式不受請求頁面的支持。?

416?? （請求范圍不符合要求） 如果頁面無法提供請求的范圍，則服務(wù)器會返回此狀態(tài)代碼。?

417?? （未滿足期望值） 服務(wù)器未滿足"期望"請求標頭字段的要求。

?

5開頭（服務(wù)器錯誤）這些狀態(tài)代碼表示服務(wù)器在嘗試處理請求時發(fā)生內(nèi)部錯誤。 這些錯誤可能是服務(wù)器本身的錯誤，而不是請求出錯。

?

500?? （服務(wù)器內(nèi)部錯誤）? 服務(wù)器遇到錯誤，無法完成請求。?

501?? （尚未實施） 服務(wù)器不具備完成請求的功能。 例如，服務(wù)器無法識別請求方法時可能會返回此代碼。?

502?? （錯誤網(wǎng)關(guān)） 服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到無效響應(yīng)。?

503?? （服務(wù)不可用） 服務(wù)器目前無法使用（由于超載或停機維護）。 通常，這只是暫時狀態(tài)。?

504?? （網(wǎng)關(guān)超時）? 服務(wù)器作為網(wǎng)關(guān)或代理，但是沒有及時從上游服務(wù)器收到請求。?

505?? （HTTP 版本不受支持） 服務(wù)器不支持請求中所用的 HTTP 協(xié)議版本。

?

?

?

?

?

24.?如何進行網(wǎng)站性能優(yōu)化

1. 從用戶角度而言，優(yōu)化能夠讓頁面加載得更快、對用戶的操作響應(yīng)得更及時，能夠給用戶提供更為友好的體驗。

2. 從服務(wù)商角度而言，優(yōu)化能夠減少頁面請求數(shù)、或者減小請求所占帶寬，能夠節(jié)省可觀的資源。

　　總之，恰當?shù)膬?yōu)化不僅能夠改善站點的用戶體驗并且能夠節(jié)省相當?shù)馁Y源利用。

　　前端優(yōu)化的途徑有很多，按粒度大致可以分為兩類，第一類是頁面級別的優(yōu)化，例如 HTTP請求數(shù)、腳本的無阻塞加載、內(nèi)聯(lián)腳本的位置優(yōu)化等 ;第二類則是代碼級別的優(yōu)化，例如 Javascript中的DOM 操作優(yōu)化、CSS選擇符優(yōu)化、圖片優(yōu)化以及 HTML結(jié)構(gòu)優(yōu)化等等。另外，本著提高投入產(chǎn)出比的目的，后文提到的各種優(yōu)化策略大致按照投入產(chǎn)出比從大到小的順序排列。

　　一、頁面級優(yōu)化

1. JavaScript 壓縮和模塊打包

2. 按需加載資源

3. 在使用 DOM 操作庫時用上 array-ids

4. 緩存

5. 啟用 HTTP/2

6. 應(yīng)用性能分析

7. 使用負載均衡方案

8. 為了更快的啟動時間考慮一下同構(gòu)

9. 使用索引加速數(shù)據(jù)庫查詢

10. 使用更快的轉(zhuǎn)譯方案

11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染

12. 用于未來的一個建議：使用 service workers + 流

13. 圖片編碼優(yōu)化

?

25.?react和vue有哪些不同，說說你對這兩個框架的看法

相同點

?

·?都支持服務(wù)器端渲染

?

·?都有Virtual DOM,組件化開發(fā),通過props參數(shù)進行父子組件數(shù)據(jù)的傳遞,都實現(xiàn)webComponent規(guī)范

?

·?數(shù)據(jù)驅(qū)動視圖

?

·?都有支持native的方案,React的React native,Vue的weex

?

不同點

?

·?React嚴格上只針對MVC的view層,Vue則是MVVM模式

?

·?virtual DOM不一樣,vue會跟蹤每一個組件的依賴關(guān)系,不需要重新渲染整個組件樹.而對于React而言,每當應(yīng)用的狀態(tài)被改變時,全部組件都會重新渲染,所以react中會需要shouldComponentUpdate這個生命周期函數(shù)方法來進行控制

?

·?組件寫法不一樣, React推薦的做法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js'; Vue推薦的做法是webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個文件;

?

·?數(shù)據(jù)綁定: vue實現(xiàn)了數(shù)據(jù)的雙向綁定,react數(shù)據(jù)流動是單向的

?

·?state對象在react應(yīng)用中不可變的,需要使用setState方法更新狀態(tài);在vue中,state對象不是必須的,數(shù)據(jù)由data屬性在vue對象中管理

?

26.什么是mvvm mvc是什么區(qū)別 原理

一、MVC（Model-View-Controller）

?

MVC是比較直觀的架構(gòu)模式，用戶操作->View（負責接收用戶的輸入操作）->Controller（業(yè)務(wù)邏輯處理）->Model（數(shù)據(jù)持久化）->View（將結(jié)果反饋給View）。

?

MVC使用非常廣泛，比如JavaEE中的SSH框架

?

?

?

三、MVVM（Model-View-ViewModel）

?

如果說MVP是對MVC的進一步改進，那么MVVM則是思想的完全變革。它是將“數(shù)據(jù)模型數(shù)據(jù)雙向綁定”的思想作為核心，因此在View和Model之間沒有聯(lián)系，通過ViewModel進行交互，而且Model和ViewModel之間的交互是雙向的，因此視圖的數(shù)據(jù)的變化會同時修改數(shù)據(jù)源，而數(shù)據(jù)源數(shù)據(jù)的變化也會立即反應(yīng)view。

?

?

?

27.px和em的區(qū)別

px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位，不會因為其他元素的尺寸變化而變化；

?

·?

?

·?

?

em表示相對于父元素的字體大小。em是相對單位 ，沒有一個固定的度量值，而是由其他元素尺寸來決定的相對值。

?

?

?

28.優(yōu)雅降級和漸進增強

漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構(gòu)建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。

?

優(yōu)雅降級（Graceful Degradation）：一開始就構(gòu)建站點的完整功能，然后針對瀏覽器測試和修復(fù)。比如一開始使用 CSS3 的特性構(gòu)建了一個應(yīng)用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

?

其實漸進增強和優(yōu)雅降級并非什么新概念，只是舊的概念換了一個新的說法。在傳統(tǒng)軟件開發(fā)中，經(jīng)常會提到向上兼容和向下兼容的概念。漸進增強相當于向上兼容，而優(yōu)雅降級相當于向下兼容

?

29.eval()的作用

把字符串參數(shù)解析成JS代碼并運行，并返回執(zhí)行的結(jié)果；

?

eval("2+3");//執(zhí)行加運算，并返回運算值。??

?

eval("varage=10");//聲明一個age變量??

?

eval的作用域

?

functiona(){??

?

1.??eval("var?x=1");?//等效于?var?x=1;??

?

2.??console.log(x);?//輸出1??

?

3.?}??

?

4.?a();??

?

5.?console.log(x);//錯誤?x沒有定

?

?

?

30.?JS哪些操作會造成內(nèi)存泄露

1）意外的全局變量引起的內(nèi)存泄露

?

function?leak(){??

?

??leak="xxx";//leak成為一個全局變量，不會被回收??

?

}

?

2）閉包引起的內(nèi)存泄露

?

3）3）沒有清理的DOM元素引用

?

4）被遺忘的定時器或者回調(diào)?5）子元素存在引起的內(nèi)存泄露

?

31.?瀏覽器緩存有哪些，通常緩存有哪幾種

一、http緩存

?

二、websql

?

cookie

?

localstorage

?

sessionstorage

?

flash緩存

?

?

?

?

?

?

?

?

?

?

?

?

?

32:bootstrap響應(yīng)式實現(xiàn)的原理

百分比布局+媒體查詢

?

33.關(guān)于JS事件冒泡與JS事件代理（事件委托）

?事件作為DOM操作重要的一環(huán)，需要大家好好理解和運用，今天特意看了一下事件冒泡和事件代理的相關(guān)資料，感觸頗深，也深感自己的無知不知道多浪費了多少內(nèi)存，廢話不多說進入正題：

?

1.事件冒泡：

?

????? 通俗易懂的來講，就是當一個子元素的事件被觸發(fā)的時候（如onclick事件），該事件會從事件源（被點擊的子元素）開始逐級向上傳播，觸發(fā)父級元素的點擊事件。

?

2.事件委托

?

??? 事件委托，首先按字面的意思就能看你出來，是將事件交由別人來執(zhí)行，再聯(lián)想到上面講的事件冒泡，是不是想到了？對，就是將子元素的事件通過冒泡的形式交由父元素來執(zhí)行。下面經(jīng)過詳細的例子來說明事件委托：

?

?

?

有可能在開發(fā)的時候會遇到這種情況：如導(dǎo)航每一個欄目都要加一個事件，你可能會通過遍歷來給每個欄目添加事件：

?

?

?

?

?

事件委托是怎

?

?

?

?

?

1.?var?ul?=?document.getElementById('parentUl');??

?

2.?????ul.οnclick=function?(event)?{??

?

3.???????var?e?=?event||window.event,??

?

4.???????????????source?=?e.target?||?e.srcElement;//target表示在事件冒泡中觸發(fā)事件的源元素，在IE中是srcElement??

?

5.?????????if(source.nodeName.toLowerCase()?==?"li"){???//判斷只有l(wèi)i觸發(fā)的才會輸出內(nèi)容??

?

6.?????????????alert(source.innerHTML);??

?

7.?????????}??

?

8.?????????stopPropagation(e);???????????????????????????//阻止繼續(xù)冒泡??

?

9.?????};??

?

10.?????function?addElement()?{??

?

11.?????????var?li?=?document.createElement('li');??

?

12.?????????li.innerHTML="我是新孩子";??

?

13.?????????ul.appendChild(li);??

?

14.?????}??

?

?

?

34.?CSS樣式覆蓋規(guī)則

規(guī)則一：由于繼承而發(fā)生樣式?jīng)_突時，最近祖先獲勝。

?

規(guī)則二：繼承的樣式和直接指定的樣式?jīng)_突時，直接指定的樣式獲勝

?

規(guī)則三：直接指定的樣式發(fā)生沖突時，樣式權(quán)值高者獲勝。

?

樣式的權(quán)值取決于樣式的選擇器，權(quán)值定義如下表。

?

CSS選擇器

?

權(quán)值

?

標簽選擇器

?

1

?

類選擇器

?

10

?

ID選擇器

?

100

?

內(nèi)聯(lián)樣式

?

1000

?

偽元素(:first-child等)

?

1

?

偽類(:link等)

?

10

?

可以看到，內(nèi)聯(lián)樣式的權(quán)值>>ID選擇器>>類選擇器>>標簽選擇器，除此以外，后代選擇器的權(quán)值為每項權(quán)值之和，比如”#nav .current a”的權(quán)值為100 + 10 + 1 = 111。

?

規(guī)則四：樣式權(quán)值相同時，后者獲勝。

?

規(guī)則五：!important的樣式屬性不被覆蓋。

?

!important可以看做是萬不得已的時候，打破上述四個規(guī)則的”金手指”。如果你一定要采用某個樣式屬性，而不讓它被覆蓋的，可以在屬性值后加上!important，以規(guī)則四的例子為例，”.byline a {color:red !important;}”可以強行使鏈接顯示紅色。大多數(shù)情況下都可以通過其他方式來控制樣式的覆蓋，不能濫用!important。

?

35.?介紹一下box-sizing屬性

兼容問題?

首先，box-sizing屬性在FireFox中存在兼容問題，所以需要使用-moz-box-sizing做一下兼容。

?

?

?

屬性值

?

·?box-sizing：content-box

?

·?box-sizing：border-box

?

·?box-sizing：inherit

?

?

?

content-box

?

·?這是box-sizing的默認屬性值

?

·?是CSS2.1中規(guī)定的寬度高度的顯示行為

?

·?在CSS中定義的寬度和高度就對應(yīng)到元素的內(nèi)容框

?

·?在CSS中定義的寬度和高度之外繪制元素的內(nèi)邊距和邊框

?

?

?

border-box

?

·?在CSS中微元素設(shè)定的寬度和高度就決定了元素的邊框盒

?

·?即為元素在設(shè)置內(nèi)邊距和邊框是在已經(jīng)設(shè)定好的寬度和高度之內(nèi)進行繪制

?

·?CSS中設(shè)定的寬度和高度減去邊框和內(nèi)間距才能得到元素內(nèi)容所占的實際寬度和高度

?

36.?css選擇符有哪些？優(yōu)先級算法如何計算？（常見）

37.?請簡要描述margin重合問題，及解決方式

1.同向margin的重疊：

1圖片的margin-top與3圖片的margin-top發(fā)生重疊，2圖片的margin-bottom與3圖片的margin-bottom發(fā)生重疊。這時候重疊之后的margin值由發(fā)生重疊兩片的最大值決定；如果其中一個出現(xiàn)負值，則由最大的正邊距減去絕對值最大的負邊距，如果沒有最大正邊距，則由0減去絕對值最大的負邊距。

解決同向重疊的方法：

（1）在最外層的div中加入overflow:hidden;zoom:1

（2）在最外層加入padding:1px;屬性

（3）在最外層加入：border:1px solid #cacbcc;

2.異向重疊問題：

1圖片的margin-bottom與2圖片的margin-top發(fā)生重疊，這時候重疊之后的margin值由發(fā)生重疊兩圖片的最大值的決定的。

解決異向重疊問題：

float:left（只能解決IE6瀏覽器中的異向重疊問題，可以解決IE8以上、chorme、firefox、opera下的同向重疊問題）

?

?

?

?

?

38：position的值，relative\absolute\fixed分別相對于進行誰定位，有什么區(qū)別，什么時候用？

39.解釋下CSS?sprites，以及你要如何在頁面或網(wǎng)站中使用它。

CSS?Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置

?

?

?

40.什么是閉包，如何使用它，為什么要使用它？

包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單理解成“定義在一個函數(shù)內(nèi)部的函數(shù)”。

?

所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個就是讓這些變量的值始終保持在內(nèi)存中。

?

使用閉包的注意點：

?

·?由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。

?

·?閉包會在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當作對象（object）使用，把閉包當作它的公用方法（Public?Method），把內(nèi)部變量當作它的私有屬性（private?value），這時一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。

?

?

?

41.請解釋JSONP的工作原理，以及它為什么不是真正的AJAX。

JSONP (JSON with Padding)是一個簡單高效的跨域方式，HTML中的script標簽可以加載并執(zhí)行其他域的javascript，于是我們可以通過script標記來動態(tài)加載其他域的資源。例如我要從域A的頁面pageA加載域B的數(shù)據(jù)，那么在域B的頁面pageB中我以JavaScript的形式聲明pageA需要的數(shù)據(jù)，然后在 pageA中用script標簽把pageB加載進來，那么pageB中的腳本就會得以執(zhí)行。JSONP在此基礎(chǔ)上加入了回調(diào)函數(shù)，pageB加載完之后會執(zhí)行pageA中定義的函數(shù)，所需要的數(shù)據(jù)會以參數(shù)的形式傳遞給該函數(shù)。JSONP易于實現(xiàn)，但是也會存在一些安全隱患，如果第三方的腳本隨意地執(zhí)行，那么它就可以篡改頁面內(nèi)容，截獲敏感數(shù)據(jù)。但是在受信任的雙方傳遞數(shù)據(jù)，JSONP是非常合適的選擇。

?

AJAX是不跨域的，而JSONP是一個是跨域的，還有就是二者接收參數(shù)形式不一樣！

?

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

在客戶端編程語言中，如javascript和 ActionScript，同源策略是一個很重要的安全理念，它在保證數(shù)據(jù)的安全性方面有著重要的意義。同源策略規(guī)定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。那么什么叫相同域，什么叫不同的域呢？當兩個域具有相同的協(xié)議, 相同的端口，相同的host，那么我們就可以認為它們是相同的域。同源策略還應(yīng)該對一些特殊情況做處理，比如限制file協(xié)議下腳本的訪問權(quán)限。本地的HTML文件在瀏覽器中是通過file協(xié)議打開的，如果腳本能通過file協(xié)議訪問到硬盤上其它任意文件，就會出現(xiàn)安全隱患，目前IE8還有這樣的隱患。

?

43.怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點？

?1）創(chuàng)建新節(jié)點

?

createDocumentFragment() //創(chuàng)建一個DOM片段

createElement() //創(chuàng)建一個具體的元素

createTextNode() //創(chuàng)建一個文本節(jié)點

?

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

appendChild() //添加

removeChild() //移除

replaceChild() //替換

insertBefore() //插入

?

3）查找

getElementsByTagName() //通過標簽名稱

getElementsByName() //通過元素的Name屬性的值

getElementById() //通過元素Id，唯一性

?

44.談?wù)劺厥諜C制方式及內(nèi)存管理

回收機制方式

?

1、定義和用法：垃圾回收機制(GC:Garbage Collection),執(zhí)行環(huán)境負責管理代碼執(zhí)行過程中使用的內(nèi)存。

?

2、原理：垃圾收集器會定期（周期性）找出那些不在繼續(xù)使用的變量，然后釋放其內(nèi)存。但是這個過程不是實時的，因為其開銷比較大，所以垃圾回收器會按照固定的時間間隔周期性的執(zhí)行。

?

3、實例如下：

?

function fn1() {

?

????var?obj = {name: 'hanzichi', age: 10};

?

}

?

function fn2() {

?

????var?obj = {name:'hanzichi', age: 10};

?

???return?obj;

?

}var?a = fn1();var?b = fn2();

?

fn1中定義的obj為局部變量，而當調(diào)用結(jié)束后，出了fn1的環(huán)境，那么該塊內(nèi)存會被js引擎中的垃圾回收器自動釋放；在fn2被調(diào)用的過程中，返回的對象被全局變量b所指向，所以該塊內(nèi)存并不會被釋放。

?

?4、垃圾回收策略：標記清除(較為常用)和引用計數(shù)。

?

標記清除：

?

　　定義和用法：當變量進入環(huán)境時，將變量標記"進入環(huán)境"，當變量離開環(huán)境時，標記為："離開環(huán)境"。某一個時刻，垃圾回收器會過濾掉環(huán)境中的變量，以及被環(huán)境變量引用的變量，剩下的就是被視為準備回收的變量。

?

　　到目前為止，IE、Firefox、Opera、Chrome、Safari的js實現(xiàn)使用的都是標記清除的垃圾回收策略或類似的策略，只不過垃圾收集的時間間隔互不相同。

?

引用計數(shù)：

?

　　定義和用法：引用計數(shù)是跟蹤記錄每個值被引用的次數(shù)。

?

　　基本原理：就是變量的引用次數(shù)，被引用一次則加1，當這個引用計數(shù)為0時，被視為準備回收的對象。

?

45、jQuery的事件委托方法bind 、live、delegate、on之間有什么區(qū)別？

(1)、bind 【jQuery 1.3之前】

?

定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)；

?

語法：bind(type,[data],function(eventObject))；

?

特點：

?

(1)、適用于頁面元素靜態(tài)綁定。只能給調(diào)用它的時候已經(jīng)存在的元素綁定事件，不能給未來新增的元素綁定事件。

?

(2)、當頁面加載完的時候，你才可以進行bind()，所以可能產(chǎn)生效率問題。

?

實例如下：$( "#members li a" ).bind( "click", function( e ) {} );

?

(2)、live 【jQuery 1.3之后】

?

定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)；

?

語法：live(type, [data], fn);

?

特點：

?

(1)、live方法并沒有將監(jiān)聽器綁定到自己(this)身上，而是綁定到了this.context上了。

?

(2)、live正是利用了事件委托機制來完成事件的監(jiān)聽處理，把節(jié)點的處理委托給了document，新添加的元素不必再綁定一次監(jiān)聽器。

?

(3)、使用live（）方法但卻只能放在直接選擇的元素后面，不能在層級比較深，連綴的DOM遍歷方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；?

?

實例如下：$( document ).on( "click", "#members li a", function( e ) {} );

?

(3)、delegate 【jQuery 1.4.2中引入】

?

定義和用法：將監(jiān)聽事件綁定在就近的父級元素上

?

語法：delegate(selector,type,[data],fn)

?

特點：

?

(1)、選擇就近的父級元素，因為事件可以更快的冒泡上去，能夠在第一時間進行處理。

?

(2)、更精確的小范圍使用事件代理，性能優(yōu)于.live()。可以用在動態(tài)添加的元素上。

?

實例如下：

?

$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});

?

$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});

?

(4)、on 【1.7版本整合了之前的三種方式的新事件綁定機制】

?

定義和用法：將監(jiān)聽事件綁定到指定元素上。

?

語法：on(type,[selector],[data],fn)

?

實例如下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數(shù)的位置寫法與delegate不一樣。

?

說明：on方法是當前JQuery推薦使用的事件綁定方法，附加只運行一次就刪除函數(shù)的方法是one()。

?

?總結(jié)：.bind(), .live(), .delegate(),.on()分別對應(yīng)的相反事件為：.unbind(),.die(), .undelegate(),.off()

?

46、px和em的區(qū)別

相同點：px和em都是長度單位；

?

異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

?

47、瀏覽器的內(nèi)核分別是什么?

IE: trident內(nèi)核

?

Firefox：gecko內(nèi)核

?

Safari：webkit內(nèi)核

?

Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核

?

Chrome：Blink(基于webkit，Google與Opera Software共同開發(fā))

?

48、什么叫優(yōu)雅降級和漸進增強？

漸進增強 progressive enhancement：

針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

?

優(yōu)雅降級 graceful degradation：

一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。

?

區(qū)別：

?

a. 優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給

?

b. 漸進增強則是從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要

?

c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

?

49、sessionStorage 、localStorage 和?cookie 之間的區(qū)別

?共同點：用于瀏覽器端存儲的緩存數(shù)據(jù)

?

不同點：

?

(1)、存儲內(nèi)容是否發(fā)送到服務(wù)器端：當設(shè)置了Cookie后，數(shù)據(jù)會發(fā)送到服務(wù)器端，造成一定的寬帶浪費；

?

? ? ? ? web storage,會將數(shù)據(jù)保存到本地，不會造成寬帶浪費；

?

(2)、數(shù)據(jù)存儲大小不同：Cookie數(shù)據(jù)不能超過4K,適用于會話標識；web storage數(shù)據(jù)存儲可以達到5M;

?

(3)、數(shù)據(jù)存儲的有效期限不同：cookie只在設(shè)置了Cookid過期時間之前一直有效，即使關(guān)閉窗口或者瀏覽器；

?

? ? ? ? sessionStorage,僅在關(guān)閉瀏覽器之前有效；localStorage,數(shù)據(jù)存儲永久有效；

?

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；

?

50、瀏覽器是如何渲染頁面的？

渲染的流程如下：

?

1.解析HTML文件，創(chuàng)建DOM樹。

?

? ?自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）。

?

2.解析CSS。優(yōu)先級：瀏覽器默認設(shè)置<用戶設(shè)置<外部樣式<內(nèi)聯(lián)樣式<HTML中的style樣式；

?

3.將CSS與DOM合并，構(gòu)建渲染樹（Render Tree）

?

4.布局和繪制，重繪（repaint）和重排（reflow）

?

?

?

51:js的基本數(shù)據(jù)類型

?

?

JavaScript中有五種基本數(shù)據(jù)類型，它們分別是：undefined，null，boolean，number，string。

?

還有一種復(fù)雜數(shù)據(jù)類型-object。?

?

52：事件委托

?

?

事件委托就是利用的DOM事件的事件捕獲階段。把具體dom上發(fā)生的事件，委托給更大范圍的dom去處理。好比送信員，如果每次都把信件送給每一戶，非常繁瑣。但是如果交給一個大范圍的管理者，比如小區(qū)的傳達室，那么事情會變得非常簡單。事件委托就類似這種原理，我頁面中有很多按鈕，如果不使用事件委托，我只能在每個按鈕上注冊事件。非常麻煩。但如果我把事件注冊在一個大范圍的div（假設(shè)所有的按鈕都在這個div中），那么我只要注冊一次事件，就可以處理所有按鈕（只要按鈕包含在上述div中）事件的響應(yīng)了

?

53：CSS3新增了很多的屬性，下面一起來分析一下新增的一些屬性：

1.CSS3邊框：

?

·?border-radius：CSS3圓角邊框。在 CSS2 中添加圓角矩形需要技巧，我們必須為每個圓角使用不同的圖片，在 CSS3 中，創(chuàng)建圓角是非常容易的，在 CSS3 中，border-radius 屬性用于創(chuàng)建圓角。border：2px solid;

?

·?box-shadow：CSS3邊框陰影。在 CSS3 中，box-shadow 用于向方框添加陰影。box-shadow:10px 10px 5px #888888;

?

·?border-image：CSS3邊框圖片。通過 CSS3 的 border-image 屬性，您可以使用圖片來創(chuàng)建邊框。border-image：url(border.png) 30 30 round;

?

2.CSS3背景：

?

·?background-size： 屬性規(guī)定背景圖片的尺寸。在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，可以規(guī)定背景圖片的尺寸，這就允許我們在不同的環(huán)境中重復(fù)使用背景圖片。您能夠以像素或百分比規(guī)定尺寸。如果以百分比規(guī)定尺寸，那么尺寸相對于父元素的寬度和高度。

?

·?background-origin ：屬性規(guī)定背景圖片的定位區(qū)域。背景圖片可以放置于 content-box、padding-box 或 border-box 區(qū)域。

?

3.CSS3文字效果：

?

·?text-shadow：在 CSS3 中，text-shadow 可向文本應(yīng)用陰影。text-shadow:5px 5px 5px #FFFFFF;

?

·?word-wrap :單詞太長的話就可能無法超出某個區(qū)域，允許對長單詞進行拆分，并換行到下一行：p{word-wrap:break-word;}

?

4.CSS3 2D轉(zhuǎn)換：

?

transform：通過 CSS3 轉(zhuǎn)換，我們能夠?qū)υ剡M行移動、縮放、轉(zhuǎn)動、拉長或拉伸。

?

·?translate()：元素從其當前位置移動，根據(jù)給定的 left（x 坐標） 和 top（y 坐標） 位置參數(shù)：transform：translate（50px,100px）;值 translate(50px,100px) 把元素從左側(cè)移動 50 像素，從頂端移動 100 像素。

?

·?rotate()：元素順時針旋轉(zhuǎn)給定的角度。允許負值，元素將逆時針旋轉(zhuǎn)。transform:rotate(30deg);值 rotate(30deg) 把元素順時針旋轉(zhuǎn) 30 度。

?

·?scale():元素的尺寸會增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)：transform:scale(2,4);值 scale(2,4) 把寬度轉(zhuǎn)換為原始尺寸的 2 倍，把高度轉(zhuǎn)換為原始高x() 5.CSS3 3D轉(zhuǎn)換：

?

·?rotateX()：元素圍繞其 X 軸以給定的度數(shù)進行旋轉(zhuǎn)。transform：rotateX(120deg);

?

·?rotateY()：元素圍繞其 Y 軸以給定的度數(shù)進行旋轉(zhuǎn)。transform：rotateY(120deg);

?

6.CSS3 過渡：當元素從一種樣式變換為另一種樣式時為元素添加效果。

?

7.CSS3動畫：通過 CSS3，我們能夠創(chuàng)建動畫，這可以在許多網(wǎng)頁中取代動畫圖片、Flash 動畫以及 JavaScript。

?

8.CSS3多列：

?

·?column-count：屬性規(guī)定元素應(yīng)該被分隔的列數(shù)。

?

·?column-gap：屬性規(guī)定列之間的間隔。

?

·?column-rule ：屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則。

?

9.CSS3用戶界面：

?

·?resize：屬性規(guī)定是否可由用戶調(diào)整元素尺寸。

?

·?box-sizing：屬性允許您以確切的方式定義適應(yīng)某個區(qū)域的具體內(nèi)容。

?

·?outline-offset ：屬性對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓。

?

54：從輸入url到顯示頁面，都經(jīng)歷了什么

第一步：客戶機提出域名解析請求,并將該請求發(fā)送給本地的域名服務(wù)器。

?

第二步：當本地的域名服務(wù)器收到請求后,就先查詢本地的緩存,如果有該紀錄項,則本地的域名服務(wù)器就直接把查詢的結(jié)果返回。

?

第三步：如果本地的緩存中沒有該紀錄,則本地域名服務(wù)器就直接把請求發(fā)給根域名服務(wù)器,然后根域名服務(wù)器再返回給本地域名服務(wù)器一個所查詢域(根的子域)的主域名服務(wù)器的地址。

第四步：本地服務(wù)器再向上一步返回的域名服務(wù)器發(fā)送請求,然后接受請求的服務(wù)器查詢自己的緩存,如果沒有該紀錄,則返回相關(guān)的下級的域名服務(wù)器的地址。

第五步：重復(fù)第四步,直到找到正確的紀錄。

?

第2種解釋：

?

一般會經(jīng)歷以下幾個過程：

?

1、首先，在瀏覽器地址欄中輸入url

?

2、瀏覽器先查看瀏覽器緩存-系統(tǒng)緩存-路由器緩存，如果緩存中有，會直接在屏幕中顯示頁面內(nèi)容。若沒有，則跳到第三步操作。

?

3、在發(fā)送http請求前，需要域名解析(DNS解析)(DNS（域名系統(tǒng)，Domain Name System）是互聯(lián)網(wǎng)的一項核心服務(wù)，它作為可以將域名和IP地址相互映射的一個分布式數(shù)據(jù)庫，能夠使人更方便的訪問互聯(lián)網(wǎng)，而不用去記住IP地址。)，解析獲取相應(yīng)的IP地址。

?

4、瀏覽器向服務(wù)器發(fā)起tcp連接，與瀏覽器建立tcp三次握手。（TCP即傳輸控制協(xié)議。TCP連接是互聯(lián)網(wǎng)連接協(xié)議集的一種。）

?

5、握手成功后，瀏覽器向服務(wù)器發(fā)送http請求，請求數(shù)據(jù)包。

?

6、服務(wù)器處理收到的請求，將數(shù)據(jù)返回至瀏覽器

?

7、瀏覽器收到HTTP響應(yīng)

?

8、讀取頁面內(nèi)容，瀏覽器渲染，解析html源碼

?

9、生成Dom樹、解析css樣式、js交互

?

10、客戶端和服務(wù)器交互

?

11、ajax查詢

?

55：對<meta></meta>標簽有什么理解

什么是meta標簽？

?

引自下W3school的定義說明一下。

?

元數(shù)據(jù)（metadata）是關(guān)于數(shù)據(jù)的信息。

?

標簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機器是可讀的。

?

典型的情況是，meta 元素被用于規(guī)定頁面的描述、關(guān)鍵詞、文檔的作者、最后修改時間以及其他元數(shù)據(jù)。

?

標簽始終位于 head 元素中。

?

元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。

?

其實對上面的概念簡單總結(jié)下就是：<meta>?標簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。它不會顯示在頁面上，但是對于機器是可讀的。可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。

?

meta的作用

?

meta里的數(shù)據(jù)是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是可以添加服務(wù)器發(fā)送到瀏覽器的http頭部內(nèi)容

?

56：new操作符到底到了什么

先看代碼

?

[javascript]?view plain?copy

?

1.?var?Func=function(){??

?

2.?};??

?

3.?var?func=new?Func?();??

?

new共經(jīng)過了4幾個階段

?

1、創(chuàng)建一個空對象

?

[javascript]?view plain?copy

?

1.?varobj=new?Object();??

?

2、設(shè)置原型鏈

?

[javascript]?view plain?copy

?

1.?obj.__proto__=?Func.prototype;??

?

3、讓Func中的this指向obj，并執(zhí)行Func的函數(shù)體。

?

[javascript]?view plain?copy

?

1.?var?result?=Func.call(obj);??

?

4、判斷Func的返回值類型：

?

如果是值類型，返回obj。如果是引用類型，就返回這個引用類型的對象。

?

[javascript]?view plain?copy

?

1.?if?(typeof(result)?==?"object"){??

?

2.???func=result;??

?

3.?}??

?

4.?else{??

?

5.?????func=obj;;??

?

6.?}??

?

57：h5新特性

HTML5新特性 —— 新特性

(1)新的語義標簽和屬性

(2)表單新特性

(3)視頻和音頻

(4)Canvas繪圖

(5)SVG繪圖

(6)地理定位

(7)拖放API

58：vue的生命周期

?

?

?

?

?

58：請寫出你對閉包的理解，并列出簡單的理解

使用閉包主要是為了設(shè)計私有的方法和變量。閉包的優(yōu)點是可以避免全局變量的污染，缺點是閉包會常駐內(nèi)存，會增大內(nèi)存使用量，使用不當很容易造成內(nèi)存泄露。

?

閉包有三個特性：

?

1.函數(shù)嵌套函數(shù)?

?

2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量?

?

3.參數(shù)和變量不會被垃圾回收機制回收

?

?

?

59：display none visibility hidden區(qū)別？

1.display:none是徹底消失，不在文檔流中占位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會解析該元素；

?

2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產(chǎn)生回流（當頁面中的一部分元素需要改變規(guī)模尺寸、布局、顯示隱藏等，頁面重新構(gòu)建，此時就是回流。所有頁面第一次加載時需要產(chǎn)生一次回流），而visibility切換是否顯示時則不會引起回流。

?

60：JavaScript中如何檢測一個變量是一個String類型？請寫出函數(shù)實現(xiàn)

typeof(obj) === "string"

?

typeof obj === "string"

?

obj.constructor === String

?

61：如何理解閉包？

1、定義和用法：當一個函數(shù)的返回值是另外一個函數(shù)，而返回的那個函數(shù)如果調(diào)用了其父函數(shù)內(nèi)部的其它變量，如果返回的這個函數(shù)在外部被執(zhí)行，就產(chǎn)生了閉包。

?

2、表現(xiàn)形式：使函數(shù)外部能夠調(diào)用函數(shù)內(nèi)部定義的變量。

?

3、實例如下：

?

(1)、根據(jù)作用域鏈的規(guī)則，底層作用域沒有聲明的變量，會向上一級找，找到就返回，沒找到就一直找，直到window的變量，沒有就返回undefined。這里明顯count 是函數(shù)內(nèi)部的flag2 的那個count 。

?

var?count=10; ??//全局作用域 標記為flag1function add(){

?

????var?count=0; ???//函數(shù)全局作用域 標記為flag2

?

????return?function(){

?

????????count+=1; ??//函數(shù)的內(nèi)部作用域????????alert(count);

?

????}

?

}var?s = add()

?

s();//輸出1

?

s();//輸出2

?

4、變量的作用域

?

要理解閉包，首先必須理解Javascript特殊的變量作用域。

?

變量的作用域分類：全局變量和局部變量。

?

特點：

?

1、函數(shù)內(nèi)部可以讀取函數(shù)外部的全局變量；在函數(shù)外部無法讀取函數(shù)內(nèi)的局部變量。

?

2、函數(shù)內(nèi)部聲明變量的時候，一定要使用var命令。如果不用的話，你實際上聲明了一個全局變量！

?

?5、使用閉包的注意點

?

1）濫用閉包，會造成內(nèi)存泄漏：由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。

?

2）會改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內(nèi)部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。

?

62：談?wù)劺厥諜C制方式及內(nèi)存管理

回收機制方式

?

1、定義和用法：垃圾回收機制(GC:Garbage Collection),執(zhí)行環(huán)境負責管理代碼執(zhí)行過程中使用的內(nèi)存。

?

2、原理：垃圾收集器會定期（周期性）找出那些不在繼續(xù)使用的變量，然后釋放其內(nèi)存。但是這個過程不是實時的，因為其開銷比較大，所以垃圾回收器會按照固定的時間間隔周期性的執(zhí)行。

?

3、實例如下：

?

function fn1() {

?

????var?obj = {name: 'hanzichi', age: 10};

?

}

?

function fn2() {

?

????var?obj = {name:'hanzichi', age: 10};

?

???return?obj;

?

}var?a = fn1();var?b = fn2();

?

fn1中定義的obj為局部變量，而當調(diào)用結(jié)束后，出了fn1的環(huán)境，那么該塊內(nèi)存會被js引擎中的垃圾回收器自動釋放；在fn2被調(diào)用的過程中，返回的對象被全局變量b所指向，所以該塊內(nèi)存并不會被釋放。

?

?4、垃圾回收策略：標記清除(較為常用)和引用計數(shù)。

?

標記清除：

?

　　定義和用法：當變量進入環(huán)境時，將變量標記"進入環(huán)境"，當變量離開環(huán)境時，標記為："離開環(huán)境"。某一個時刻，垃圾回收器會過濾掉環(huán)境中的變量，以及被環(huán)境變量引用的變量，剩下的就是被視為準備回收的變量。

?

　　到目前為止，IE、Firefox、Opera、Chrome、Safari的js實現(xiàn)使用的都是標記清除的垃圾回收策略或類似的策略，只不過垃圾收集的時間間隔互不相同。

?

引用計數(shù)：

?

　　定義和用法：引用計數(shù)是跟蹤記錄每個值被引用的次數(shù)。

?

　　基本原理：就是變量的引用次數(shù)，被引用一次則加1，當這個引用計數(shù)為0時，被視為準備回收的對象。

?

63：判斷一個字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計這個次數(shù)

var?str = 'asdfssaaasasasasaa';

?

var?json = {};

?

for?(var?i = 0; i < str.length; i++) {

?

????if(!json[str.charAt(i)]){

?

???????json[str.charAt(i)] = 1;

?

????}else{

?

???????json[str.charAt(i)]++;

?

????}

?

};var?iMax = 0;var?iIndex = '';for(var?i in?json){

?

????if(json[i]>iMax){

?

?????????iMax = json[i];

?

?????????iIndex = i;

?

????}

?

} ???????console.log('出現(xiàn)次數(shù)最多的是:'+iIndex+'出現(xiàn)'+iMax+'次');

?

64、$(document).ready()方法和window.onload有什么區(qū)別？

?(1)、window.onload方法是在網(wǎng)頁中所有的元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行的。

?

?(2)、$(document).ready()?方法可以在DOM載入就緒時就對其進行操縱，并調(diào)用執(zhí)行綁定的函數(shù)。

?

65、 jquery中$.get()提交和$.post()提交有區(qū)別嗎？

相同點：都是異步請求的方式來獲取服務(wù)端的數(shù)據(jù)；

?

異同點：

?

1、請求方式不同：$.get()?方法使用GET方法來進行異步請求的。$.post()?方法使用POST方法來進行異步請求的。

?

2、參數(shù)傳遞方式不同：get請求會將參數(shù)跟在URL后進行傳遞，而POST請求則是作為HTTP消息的實體內(nèi)容發(fā)送給Web服務(wù)器的，這種傳遞是對用戶不可見的。

?

3、數(shù)據(jù)傳輸大小不同：get方式傳輸?shù)臄?shù)據(jù)大小不能超過2KB?而POST要大的多

?

4、安全問題：?GET?方式請求的數(shù)據(jù)會被瀏覽器緩存起來，因此有安全問題。

?

66、jQuery的事件委托方法bind 、live、delegate、on之間有什么區(qū)別？（常見）

(1)、bind 【jQuery 1.3之前】

?

定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)；

?

語法：bind(type,[data],function(eventObject))；

?

特點：

?

(1)、適用于頁面元素靜態(tài)綁定。只能給調(diào)用它的時候已經(jīng)存在的元素綁定事件，不能給未來新增的元素綁定事件。

?

(2)、當頁面加載完的時候，你才可以進行bind()，所以可能產(chǎn)生效率問題。

?

實例如下：$( "#members li a" ).bind( "click", function( e ) {} );

?

(2)、live 【jQuery 1.3之后】

?

定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)；

?

語法：live(type, [data], fn);

?

特點：

?

(1)、live方法并沒有將監(jiān)聽器綁定到自己(this)身上，而是綁定到了this.context上了。

?

(2)、live正是利用了事件委托機制來完成事件的監(jiān)聽處理，把節(jié)點的處理委托給了document，新添加的元素不必再綁定一次監(jiān)聽器。

?

(3)、使用live（）方法但卻只能放在直接選擇的元素后面，不能在層級比較深，連綴的DOM遍歷方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；?

?

實例如下：$( document ).on( "click", "#members li a", function( e ) {} );

?

(3)、delegate 【jQuery 1.4.2中引入】

?

定義和用法：將監(jiān)聽事件綁定在就近的父級元素上

?

語法：delegate(selector,type,[data],fn)

?

特點：

?

(1)、選擇就近的父級元素，因為事件可以更快的冒泡上去，能夠在第一時間進行處理。

?

(2)、更精確的小范圍使用事件代理，性能優(yōu)于.live()。可以用在動態(tài)添加的元素上。

?

實例如下：

?

$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});

?

$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});

?

(4)、on 【1.7版本整合了之前的三種方式的新事件綁定機制】

?

定義和用法：將監(jiān)聽事件綁定到指定元素上。

?

語法：on(type,[selector],[data],fn)

?

實例如下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數(shù)的位置寫法與delegate不一樣。

?

說明：on方法是當前JQuery推薦使用的事件綁定方法，附加只運行一次就刪除函數(shù)的方法是one()。

?

?總結(jié)：.bind(), .live(), .delegate(),.on()分別對應(yīng)的相反事件為：.unbind(),.die(), .undelegate(),.off()

?

67、px和em的區(qū)別（常見）

?

相同點：px和em都是長度單位；

?

異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

?

68、瀏覽器的內(nèi)核分別是什么?

IE: trident內(nèi)核

?

Firefox：gecko內(nèi)核

?

Safari：webkit內(nèi)核

?

Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核

?

Chrome：Blink(基于webkit，Google與Opera Software共同開發(fā))

?

69、什么叫優(yōu)雅降級和漸進增強？（常見）

漸進增強 progressive enhancement：

針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

?

優(yōu)雅降級 graceful degradation：

一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。

?

區(qū)別：

?

a. 優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給

?

b. 漸進增強則是從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要

?

c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

?

70、sessionStorage 、localStorage 和?cookie 之間的區(qū)別（常見）

?共同點：用于瀏覽器端存儲的緩存數(shù)據(jù)

?

不同點：

?

(1)、存儲內(nèi)容是否發(fā)送到服務(wù)器端：當設(shè)置了Cookie后，數(shù)據(jù)會發(fā)送到服務(wù)器端，造成一定的寬帶浪費；

?

? ? ? ? web storage,會將數(shù)據(jù)保存到本地，不會造成寬帶浪費；

?

(2)、數(shù)據(jù)存儲大小不同：Cookie數(shù)據(jù)不能超過4K,適用于會話標識；web storage數(shù)據(jù)存儲可以達到5M;

?

(3)、數(shù)據(jù)存儲的有效期限不同：cookie只在設(shè)置了Cookid過期時間之前一直有效，即使關(guān)閉窗口或者瀏覽器；

?

? ? ? ? sessionStorage,僅在關(guān)閉瀏覽器之前有效；localStorage,數(shù)據(jù)存儲永久有效；

?

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；

總結(jié)

以上是生活随笔為你收集整理的前端面试常见题目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。