當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

常见前端九十道面试题及答案-韩烨

發(fā)布時(shí)間：2024/1/8 HTML 37 豆豆

生活随笔收集整理的這篇文章主要介紹了常见前端九十道面试题及答案-韩烨小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

本文是在GitHub上看到一個(gè)大牛總結(jié)的前端常見面試題，很多問題問的都很好，很經(jīng)典、很有代表性。上面沒有答案，我就整理了一下，從網(wǎng)上找了一些相關(guān)問題的答案。里面有一部分問題的答案我也沒有進(jìn)行考證，不少答案都來源于網(wǎng)絡(luò)，或許會(huì)有疏漏之處，僅供大家參考哦！(還有一部分問題答案還未整理，大家也可以自己搜索一下答案)

1.你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎?

優(yōu)雅降級(jí)：Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題，針對(duì)不同版本的IE的hack實(shí)踐過優(yōu)雅降級(jí)了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效.

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁(yè)面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來并發(fā)揮作用。

2.線程與進(jìn)程的區(qū)別

一個(gè)程序至少有一個(gè)進(jìn)程，一個(gè)進(jìn)程至少有一個(gè)線程。線程的劃分尺度小于進(jìn)程，使得多線程程序的并發(fā)性高。

另外，進(jìn)程在執(zhí)行過程中擁有獨(dú)立的內(nèi)存單元，而多個(gè)線程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率。

線程在執(zhí)行過程中與進(jìn)程還是有區(qū)別的。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制。

從邏輯角度來看，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用，來實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jìn)程和線程的重要區(qū)別。

3.說說你對(duì)語義化的理解？

1：去掉或樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)：html本身是沒有表現(xiàn)的，我們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認(rèn)為這是html的表現(xiàn)，這些其實(shí)html默認(rèn)的css樣式在起作用，所以去掉或樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)不是語義化的HTML結(jié)構(gòu)的優(yōu)點(diǎn)，但是瀏覽器都有有默認(rèn)樣式，默認(rèn)樣式的目的也是為了更好的表達(dá)html的語義，可以說瀏覽器的默認(rèn)樣式和語義化的HTML結(jié)構(gòu)是不可分割的。
2.屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁(yè)。
3.PDA、手機(jī)等設(shè)備可能無法像普通電腦的瀏覽器一樣來渲染網(wǎng)頁(yè)（通常是因?yàn)檫@些設(shè)備對(duì)CSS的支持較弱）。
4.有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
6.便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁(yè)的重要?jiǎng)酉?#xff0c;遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

4.你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化？

期待的解決方案包括：文件合并文件最小化/文件壓縮使用CDN托管緩存的使用（多個(gè)域名來提供緩存）其他。

5.為什么利用多個(gè)域名來提供網(wǎng)站資源會(huì)更有效？?

1.CDN緩存更方便
2.突破瀏覽器并發(fā)限制（一般每個(gè)域名建立的鏈接不超過6個(gè)）
3.Cookieless，節(jié)省帶寬，尤其是上行帶寬一般比下行要慢
4.對(duì)于UGC的內(nèi)容和主站隔離，防止不必要的安全問題(上傳js竊取主站cookie之類的)。正是這個(gè)原因要求用戶內(nèi)容的域名必須不是自己主站的子域名，而是一個(gè)完全獨(dú)立的第三方域名。
5.數(shù)據(jù)做了劃分，甚至切到了不同的物理集群，通過子域名來分流比較省事。這個(gè)可能被用的不多。

PS:關(guān)于Cookie的問題，帶寬是次要的，安全隔離才是主要的。關(guān)于多域名，也不是越多越好，雖然服務(wù)器端可以做泛解釋，瀏覽器做dns解釋也是耗時(shí)間的，而且太多域名，如果要走h(yuǎn)ttps的話，還有要多買證書和部署的問題。

6.請(qǐng)說出三種減少頁(yè)面加載時(shí)間的方法。（加載時(shí)間指感知的時(shí)間或者實(shí)際加載時(shí)間）

1.優(yōu)化圖片
2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對(duì)顏色要求不高的地方）
3.優(yōu)化CSS（壓縮合并css，如margin-top,margin-left...)
4.網(wǎng)址后加斜杠（如www.campr.com/目錄，會(huì)判斷這個(gè)“目錄是什么文件類型，或者是目錄。）
5.標(biāo)明高度和寬度（如果瀏覽器沒有找到這兩個(gè)參數(shù)，它需要一邊下載圖片一邊計(jì)算大小，如果圖片很多，瀏覽器需要不斷地調(diào)整頁(yè)面。這不但影響速度，也影響瀏覽體驗(yàn)。當(dāng)瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時(shí)無法顯示，頁(yè)面上也會(huì)騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容。從而加載時(shí)間快了，瀏覽體驗(yàn)也更好了。）
6.減少http請(qǐng)求（合并文件，合并圖片）。

7.如果你參與到一個(gè)項(xiàng)目中，發(fā)現(xiàn)他們使用Tab來縮進(jìn)代碼，但是你喜歡空格，你會(huì)怎么做？

建議這個(gè)項(xiàng)目使用像EditorConfig(http://editorconfig.org/)之類的規(guī)范
為了保持一致性，接受項(xiàng)目原有的風(fēng)格
直接使用VIM的retab命令

8.請(qǐng)寫一個(gè)簡(jiǎn)單的幻燈效果頁(yè)面

如果不使用JS來完成，可以加分。（如：純CSS實(shí)現(xiàn)的幻燈片效果）

9.你都使用哪些工具來測(cè)試代碼的性能？

Profiler,JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）,Dromaeo。

10.如果今年你打算熟練掌握一項(xiàng)新技術(shù)，那會(huì)是什么？

nodejs，html5，css3，less等。

11.請(qǐng)談一下你對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。

w3c存在的意義就是讓瀏覽器兼容性問題盡量小，首先是他們對(duì)瀏覽器開發(fā)者的約束，然后是對(duì)開發(fā)者的約束。

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

FOUC(Flash?Of?Unstyled?Content)--文檔樣式閃爍

13.doctype（文檔類型）的作用是什么？你知道多少種文檔類型？

此標(biāo)簽可告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。該標(biāo)簽可聲明三種DTD類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的HTML文檔。

HTML?4.01規(guī)定了三種文檔類型：Strict、Transitional以及Frameset。

XHTML?1.0規(guī)定了三種XML文檔類型：Strict、Transitional以及Frameset。

Standards（標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁(yè)，而Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁(yè)。

14.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？

W3C標(biāo)準(zhǔn)推出以后，瀏覽器都開始采納新標(biāo)準(zhǔn)，但存在一個(gè)問題就是如何保證舊的網(wǎng)頁(yè)還能繼續(xù)瀏覽，在標(biāo)準(zhǔn)出來以前，很多頁(yè)面都是根據(jù)舊的渲染方法編寫的，如果用的標(biāo)準(zhǔn)來渲染，將導(dǎo)致頁(yè)面顯示異常。為保持瀏覽器渲染的兼容性，使以前的頁(yè)面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產(chǎn)生了Quircks?mode和Standars?mode，兩種渲染方法共存在一個(gè)瀏覽器上。IE盒子模型和標(biāo)準(zhǔn)W3C盒子模型：ie的width包括：padding\border。標(biāo)準(zhǔn)的width不包括：padding\border

?在js中如何判斷當(dāng)前瀏覽器正在以何種方式解析？

? ? ? ? ?document對(duì)象有個(gè)屬性compatMode,它有兩個(gè)值：BackCompat對(duì)應(yīng)quirks?mode，CSS1Compat對(duì)應(yīng)strict?mode。

15.使用XHTML的局限有哪些？

XHTML 與HTML的區(qū)別為：

XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。
標(biāo)簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。

局限：

所有的 XHTML 元素都必須被正確地嵌套，XHTML 必須擁有良好的結(jié)構(gòu)，所有的標(biāo)簽必須小寫，并且所有的 XHTML 元素必須被關(guān)閉。所有的 XHTML 文檔必須擁有 DOCTYPE 聲明，并且 html、head、title 和 body 元素必須存在。雖然代碼更加的優(yōu)雅，但缺少容錯(cuò)性，不利于快速開發(fā)。

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

下面這些問題需要考慮：

應(yīng)用字符集的選擇，選擇UTF-8編碼
語言書寫習(xí)慣&導(dǎo)航結(jié)構(gòu)
數(shù)據(jù)庫(kù)驅(qū)動(dòng)型網(wǎng)站

17.data-屬性的作用是什么？

data-* 屬性用于存儲(chǔ)頁(yè)面或應(yīng)用程序的私有自定義數(shù)據(jù)。data-* 屬性賦予我們?cè)谒?HTML 元素上嵌入自定義 data 屬性的能力。存儲(chǔ)的（自定義）數(shù)據(jù)能夠被頁(yè)面的 JavaScript 中利用，以創(chuàng)建更好的用戶體驗(yàn)（不進(jìn)行 Ajax 調(diào)用或服務(wù)器端數(shù)據(jù)庫(kù)查詢）。

data-* 屬性包括兩部分：

屬性名不應(yīng)該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個(gè)字符
屬性值可以是任意字符串

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

<nav>,<header>,<section>,<footer>等。

19.請(qǐng)描述一下cookies，sessionStorage和localStorage的區(qū)別？

sessionStorage和localStorage是HTML5?Web?Storage?API提供的，可以方便的在web請(qǐng)求之間保存數(shù)據(jù)。有了本地?cái)?shù)據(jù)，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。sessionStorage、localStorage、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)，其中sessionStorage的概念很特別，引入了一個(gè)“瀏覽器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)。也就是說只要這個(gè)瀏覽器窗口沒有關(guān)閉，即使刷新頁(yè)面或進(jìn)入同源另一頁(yè)面，數(shù)據(jù)仍然存在。關(guān)閉窗口后，sessionStorage即被銷毀。同時(shí)“獨(dú)立”打開的不同窗口，即使是同一頁(yè)面，sessionStorage對(duì)象也是不同的cookies會(huì)發(fā)送到服務(wù)器端。其余兩個(gè)不會(huì)。Microsoft指出InternetExplorer8增加cookie限制為每個(gè)域名50個(gè)，但I(xiàn)E7似乎也允許每個(gè)域名50個(gè)cookie。

Firefox每個(gè)域名cookie限制為50個(gè)。
Opera每個(gè)域名cookie限制為30個(gè)。
Firefox和Safari允許cookie多達(dá)4097個(gè)字節(jié)，包括名（name）、值（value）和等號(hào)。
Opera允許cookie多達(dá)4096個(gè)字節(jié)，包括：名（name）、值（value）和等號(hào)。
InternetExplorer允許cookie多達(dá)4095個(gè)字節(jié)，包括：名（name）、值（value）和等號(hào)。

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

因?yàn)闉g覽器的品種很多，每個(gè)瀏覽器的默認(rèn)樣式也是不同的，所以定義一個(gè)css?reset可以使各瀏覽器的默認(rèn)樣式統(tǒng)一。

21.解釋下浮動(dòng)和它的工作原理。

關(guān)于浮動(dòng)我們需要了解，浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｒ胧乖馗?dòng)，必須為元素設(shè)置一個(gè)寬度（width）。雖然浮動(dòng)元素不是文檔流之中，但是它浮動(dòng)后所處的位置依然是在浮動(dòng)之前的水平方向上。由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣，下面的元素填補(bǔ)原來的位置。有些元素會(huì)在浮動(dòng)元素的下方，但是這些元素的內(nèi)容并不一定會(huì)被浮動(dòng)的元素所遮蓋，對(duì)內(nèi)聯(lián)元素進(jìn)行定位時(shí)，這些元素會(huì)考慮浮動(dòng)元素的邊界，會(huì)圍繞著浮動(dòng)元素放置。也可以把浮動(dòng)元素想象成是被塊元素忽略的元素，而內(nèi)聯(lián)元素會(huì)關(guān)注浮動(dòng)元素的。 ?

22.列舉不同的清除浮動(dòng)的技巧，并指出它們各自適用的使用場(chǎng)景。

1.使用空標(biāo)簽清除浮動(dòng)。這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽定義css?clear:both.弊端就是增加了無意義標(biāo)簽。
2.使用overflow。給包含浮動(dòng)元素的父標(biāo)簽添加css屬性overflow:auto;zoom:1;zoom:1用于兼容IE6。
3.使用after偽對(duì)象清除浮動(dòng)。該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。一、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置height:0，否則該元素會(huì)比實(shí)際高出若干像素；二、content屬性是必須的，但其值可以為空，content屬性的值設(shè)為”.”，空亦是可以的。
4.浮動(dòng)外部元素

此三種方法各有利弊，使用時(shí)應(yīng)擇優(yōu)選擇，比較之下第二種方法更為可取。

23.解釋下CSS?sprites，以及你要如何在頁(yè)面或網(wǎng)站中使用它。

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

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

1 <h2><span圖片丟這里></span>Hello World</h2>

把span背景設(shè)成文字內(nèi)容，這樣又可以保證seo，也有圖片的效果在上面。一般都是：alt，title，onerror。

25.討論CSS?hacks，條件引用或者其他。

各個(gè)瀏覽器都認(rèn)識(shí)，這里給firefox用；

\9所有的ie瀏覽器可識(shí)別；

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;}}這個(gè)是老是跟ie搶著認(rèn)\0的神奇的opera，必須加個(gè)\0,不然firefox，chrome，safari也都認(rèn)識(shí)。

@media?screen?and(-webkit-min-device-pixel-ratio:0){#test{background-color:gray;}}最后這個(gè)是瀏覽器新貴chrome和safari的。

26.如何為有功能限制的瀏覽器提供網(wǎng)頁(yè)？你會(huì)使用哪些技術(shù)和處理方法？

27.如何視覺隱藏網(wǎng)頁(yè)內(nèi)容，只讓它們?cè)谄聊婚喿x器中可用？

display:none;的缺陷搜索引擎可能認(rèn)為被隱藏的文字屬于垃圾信息而被忽略屏幕閱讀器（是為視覺上有障礙的人設(shè)計(jì)的讀取屏幕內(nèi)容的程序）會(huì)忽略被隱藏的文字。
visibility:hidden;的缺陷這個(gè)大家應(yīng)該比較熟悉就是隱藏的內(nèi)容會(huì)占據(jù)他所應(yīng)該占據(jù)物理空間3.overflow:hidden;一個(gè)比較合理的方法.texthidden{display:block;/*統(tǒng)一轉(zhuǎn)化為塊級(jí)元素*/overflow:hidden;width:0;height:0;}就像上面的一段CSS所展示的方法，將寬度和高度設(shè)定為0，然后超過部分隱藏，就會(huì)彌補(bǔ)上述一、二方法中的缺陷，也達(dá)到了隱藏內(nèi)容的目的。

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

比如：Bootstrap，流式柵格系統(tǒng)，http://960.gs/，柵格系統(tǒng)延續(xù)美學(xué)。

29.你用過媒體查詢，或針對(duì)移動(dòng)端的布局/CSS嗎？

媒體查詢，就是響應(yīng)式布局。通過不同的媒介類型和條件定義樣式表規(guī)則。媒介查詢讓CSS可以更精確作用于不同的媒介類型和同一媒介的不同條件。

語法結(jié)構(gòu)及用法：@media 設(shè)備名 only （選取條件） not （選取條件） and（設(shè)備選取條件），設(shè)備二{sRules}。

示例如下：

1 /* 當(dāng)瀏覽器的可視區(qū)域小于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 /* 當(dāng)瀏覽器的可視區(qū)域小于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 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失
SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體

書寫示例如下：

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.如何優(yōu)化網(wǎng)頁(yè)的打印樣式？

其中media指定的屬性就是設(shè)備，顯示器上就是screen，打印機(jī)則是print，電視是tv，投影儀是projection。打印樣式示例如下：

但打印樣式表也應(yīng)注意以下事項(xiàng)：

打印樣式表中最好不要用背景圖片，因?yàn)榇蛴C(jī)不能打印CSS中的背景。如要顯示圖片，請(qǐng)使用html插入到頁(yè)面中。
最好不要使用像素作為單位，因?yàn)榇蛴邮奖硪蛴〕鰜淼臅?huì)是實(shí)物，所以建議使用pt和cm。
隱藏掉不必要的內(nèi)容。（@print?div{display:none;}）
打印樣式表中最好少用浮動(dòng)屬性，因?yàn)樗鼈儠?huì)消失。如果想要知道打印樣式表的效果如何，直接在瀏覽器上選擇打印預(yù)覽就可以了。

32.在書寫高效CSS時(shí)會(huì)有哪些問題需要考慮？

1.樣式是：從右向左的解析一個(gè)選擇器；
2.ID最快，Universal最慢有四種類型的key?selector，解析速度由快到慢依次是：ID、class、tag和universal ；
3.不要tag-qualify（永遠(yuǎn)不要這樣做ul#main-navigation{}ID已經(jīng)是唯一的，不需要Tag來標(biāo)識(shí)，這樣做會(huì)讓選擇器變慢。）；
4.后代選擇器最糟糕（換句話說，下面這個(gè)選擇器是很低效的：html?body?ul?li?a{}）；
5.想清楚你為什么這樣寫；
6.CSS3的效率問題（CSS3選擇器（比如:nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀。但是這些神奇的選擇器會(huì)浪費(fèi)很多的瀏覽器資源。）；
7.我們知道#ID速度是最快的，那么我們都用ID，是不是很快。但是我們不應(yīng)該為了效率而犧牲可讀性和可維護(hù)性。

33.使用CSS預(yù)處理器的優(yōu)缺點(diǎn)有哪些？

? ? ?LESS&SassLESS是受Sass啟發(fā)而開發(fā)的工具，它列出了如下開發(fā)的理由：

? ? ?“為什么要開發(fā)一個(gè)Sass的替代品呢？原因很簡(jiǎn)單：首先是語法。Sass的一個(gè)關(guān)鍵特性是縮進(jìn)式的語法，這種語法可以產(chǎn)生柱式外觀的代碼。但是你需要花費(fèi)時(shí)間學(xué)習(xí)一門新的語法以及重新構(gòu)建你現(xiàn)在的樣式表。LESS給CSS帶來了很多特性，使得LESS能夠和CSS無縫地緊密結(jié)合在一起。因此，你可以平滑地由CSS遷移到LESS，如果你只是對(duì)使用變量或者操作感興趣的話，你不需要學(xué)習(xí)一整門全新的語言。”

? ? ? StylusStylus相對(duì)前兩者較新，可以看官方文檔介紹的功能。

1.來自NodeJS社區(qū)，所以和NodeJS走得很近，與JavaScript聯(lián)系非常緊密。還有專門JavaScript?API：http://learnboost.github.io/stylus/docs/js.html；
2.支持Ruby之類等等框架；
3.更多更強(qiáng)大的支持和功能總結(jié)：Sass看起來在提供的特性上占有優(yōu)勢(shì)，但是LESS能夠讓開發(fā)者平滑地從現(xiàn)存CSS文件過渡到LESS，而不需要像Sass那樣需要將CSS文件轉(zhuǎn)換成Sass格式。Stylus功能上更為強(qiáng)壯，和js聯(lián)系更加緊密。

34.如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體，你該如何去實(shí)現(xiàn)？

所謂的標(biāo)準(zhǔn)字體是多數(shù)機(jī)器上都會(huì)有的，或者即使沒有也可以由默認(rèn)字體替代的字體。

方法：

用圖片代替
web?fonts在線字庫(kù)，如Google?Webfonts，Typekit等等；http://www.chinaz.com/free/2012/0815/269267.shtml；
@font-face，Webfonts(字體服務(wù)例如：Google?Webfonts，Typekit等等。)

35.解釋下瀏覽器是如何判斷元素是否匹配某個(gè)CSS選擇器？

從后往前判斷。瀏覽器先產(chǎn)生一個(gè)元素集合，這個(gè)集合往往由最后一個(gè)部分的索引產(chǎn)生（如果沒有索引就是所有元素的集合）。然后向上匹配，如果不符合上一個(gè)部分，就把元素從集合中刪除，直到真?zhèn)€選擇器都匹配完，還在集合中的元素就匹配這個(gè)選擇器了。舉個(gè)例子，有選擇器：

1 body.ready#wrapper>.lol233

先把所有class中有l(wèi)ol233的元素拿出來組成一個(gè)集合，然后上一層，對(duì)每一個(gè)集合中的元素，如果元素的parent?id不為#wrapper則把元素從集合中刪去。再向上，從這個(gè)元素的父元素開始向上找，沒有找到一個(gè)tagName為body且class中有ready的元素，就把原來的元素從集合中刪去。至此這個(gè)選擇器匹配結(jié)束，所有還在集合中的元素滿足。大體就是這樣，不過瀏覽器還會(huì)有一些奇怪的優(yōu)化。為什么從后往前匹配因?yàn)樾屎臀臋n流的解析方向。效率不必說，找元素的父親和之前的兄弟比遍歷所喲兒子快而且方便。關(guān)于文檔流的解析方向，是因?yàn)楝F(xiàn)在的CSS，一個(gè)元素只要確定了這個(gè)元素在文檔流之前出現(xiàn)過的所有元素，就能確定他的匹配情況。應(yīng)用在即使html沒有載入完成，瀏覽器也能根據(jù)已經(jīng)載入的這一部分信息完全確定出現(xiàn)過的元素的屬性。為什么是用集合主要也還是效率。基于CSS?Rule數(shù)量遠(yuǎn)遠(yuǎn)小于元素?cái)?shù)量的假設(shè)和索引的運(yùn)用，遍歷每一條CSS?Rule通過集合篩選，比遍歷每一個(gè)元素再遍歷每一條Rule匹配要快得多。

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

關(guān)于盒模型請(qǐng)看文章CSS之布局與定位。

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

說到IE的bug，在IE6以前的版本中，IE對(duì)盒模型的解析出現(xiàn)一些問題，跟其它瀏覽器不同，將border與padding都包含在width之內(nèi)。而另外一些瀏覽器則與它相反，是不包括border和padding的。

在我們開發(fā)的過程中會(huì)發(fā)現(xiàn)，有時(shí)候，如果對(duì)頁(yè)面中的大區(qū)域進(jìn)行設(shè)置時(shí)，將border、padding計(jì)算到width和height之內(nèi)，反而更靈活。但W3C的CSS2.1規(guī)范卻規(guī)定了他們并不能被包含其中。考慮到這個(gè)問題，css3中引入了一個(gè)新的屬性：box-sizing，它具有“content-box”和”border-box“兩個(gè)值。

1 box-sizing:content-box

當(dāng)我們?cè)O(shè)置box-sizing:content-box;時(shí)，瀏覽器對(duì)盒模型的解釋遵從我們之前認(rèn)識(shí)到的W3C標(biāo)準(zhǔn)，當(dāng)它定義width和height時(shí)，它的寬度不包括border和padding。

1 box-sizing:border-box

當(dāng)我們?cè)O(shè)置box-sizing:border-box;時(shí)，瀏覽器對(duì)盒模型的解釋與IE6之前的版本相同，當(dāng)它定義width和height時(shí)，border和padding則是被包含在寬高之內(nèi)的。內(nèi)容的寬和高可以通過定義的“width”和“height”減去相應(yīng)方向的“padding”和“border”的寬度得到。內(nèi)容的寬和高必須保證不能為負(fù)，必要時(shí)將自動(dòng)增大該元素border?box的尺寸以使其內(nèi)容的寬或高最小為0。

37.請(qǐng)羅列出你所知道的display屬性的全部值。

display屬性的值列表如下：

38.請(qǐng)解釋一下relative、fixed、absolute和static元素的區(qū)別？請(qǐng)解釋一下inline和inline-block的區(qū)別？

關(guān)于第一個(gè)問題請(qǐng)看文章CSS之布局與定位?。

inline:此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。

inline-block:行內(nèi)塊元素。

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

如果有，請(qǐng)問是哪一套？如果可以，你如何改善CSS框架？
請(qǐng)問你有使用過CSS?Flexbox或者Grid?specs嗎？如果有，請(qǐng)問在性能和效率的方面你是怎么看的？

40.解釋下事件代理。

JavaScript事件代理則是一種簡(jiǎn)單的技巧，通過它你可以把事件處理器添加到一個(gè)父級(jí)元素上，這樣就避免了把事件處理器添加到多個(gè)子級(jí)元素上。當(dāng)我們需要對(duì)很多元素添加事件的時(shí)候，可以通過將事件添加到它們的父節(jié)點(diǎn)而將事件委托給父節(jié)點(diǎn)來觸發(fā)處理函數(shù)。這主要得益于瀏覽器的事件冒泡機(jī)制。事件代理用到了兩個(gè)在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標(biāo)元素。

1 function getEventTarget(e) { 2 e=e||window.event; 3 return e.target||e.srcElement; 4 }

41.解釋下JavaScript中this是如何工作的。

this永遠(yuǎn)指向函數(shù)運(yùn)行時(shí)所在的對(duì)象，而不是函數(shù)被創(chuàng)建時(shí)所在的對(duì)象。匿名函數(shù)或不處于任何對(duì)象中的函數(shù)指向window 。

1.如果是call，apply,with，指定的this是誰，就是誰。

2.普通的函數(shù)調(diào)用，函數(shù)被誰調(diào)用，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）的關(guān)聯(lián)：

43.你是如何測(cè)試JavaScript代碼的？

結(jié)合自己的項(xiàng)目經(jīng)驗(yàn)進(jìn)行講述。（chrome使用技巧）

44.AMD?vs.CommonJS？

請(qǐng)看文章JavaScript之模塊化編程

45.什么是哈希表？

散列表（也叫哈希表），是根據(jù)關(guān)鍵碼值直接進(jìn)行訪問的數(shù)據(jù)結(jié)構(gòu)。也就是說，它通過把關(guān)鍵碼值映射到表中一個(gè)位置來訪問記錄，以加快查找的速度。這個(gè)映射函數(shù)叫做散列函數(shù)，存放記錄的數(shù)組叫做散列表。

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

要做哪些改動(dòng)使它變成IIFE?

因?yàn)樵诮馕銎鹘馕鋈值膄unction或者function內(nèi)部function關(guān)鍵字的時(shí)候，默認(rèn)是認(rèn)為function聲明，而不是function表達(dá)式，如果你不顯示告訴編譯器，它默認(rèn)會(huì)聲明成一個(gè)缺少名字的function，并且拋出一個(gè)語法錯(cuò)誤信息，因?yàn)閒unction聲明需要一個(gè)名字。

1 var foo = function() { 2 // doSomeThing. 3 }； 4 5 foo();

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

JavaScript的最初版本是這樣區(qū)分的：null是一個(gè)表示"無"的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示"無"的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。

但是，上面這樣的區(qū)分，在實(shí)踐中很快就被證明不可行。目前，null和undefined基本是同義的，只有一些細(xì)微的差別。

null表示"沒有對(duì)象"，即該處不應(yīng)該有值。典型用法是：

用來初始化一個(gè)變量，這個(gè)變量可能被賦值為一個(gè)對(duì)象。
用來和一個(gè)已經(jīng)初始化的變量比較，這個(gè)變量可以是也可以不是一個(gè)對(duì)象。
當(dāng)函數(shù)的參數(shù)期望是對(duì)象時(shí)，被用作參數(shù)傳入。
當(dāng)函數(shù)的返回值期望是對(duì)象時(shí)，被用作返回值傳出。
作為對(duì)象原型鏈的終點(diǎn)。

undefined表示"缺少值"，就是此處應(yīng)該有一個(gè)值，但是還沒有定義。典型用法是：

變量被聲明了，但沒有賦值時(shí)，就等于undefined。
調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
對(duì)象沒有賦值的屬性，該屬性的值為undefined。
函數(shù)沒有返回值時(shí)，默認(rèn)返回undefined。

該如何檢測(cè)它們？

null：表示無值；undefined：表示一個(gè)未聲明的變量，或已聲明但沒有賦值的變量，或一個(gè)并不存在的對(duì)象屬性。

==運(yùn)算符將兩者看作相等。如果要區(qū)分兩者，要使用===或typeof運(yùn)算符。

以下是不正確的用法：

1 var exp = undefined; 2 3 if (exp == undefined) { 4 alert("undefined"); 5 }

exp為null時(shí)，也會(huì)得到與undefined相同的結(jié)果，雖然null和undefined不一樣。注意：要同時(shí)判斷undefined和null時(shí)可使用本法。

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時(shí)，也會(huì)得到與null相同的結(jié)果，雖然null和undefined不一樣。注意：要同時(shí)判斷null和undefined時(shí)可使用本法。

1 var exp=null; 2 3 if(!exp) { 4 alert("is null"); 5 }

如果exp為undefined或者數(shù)字零，也會(huì)得到與null相同的結(jié)果，雖然null和二者不一樣。注意：要同時(shí)判斷null、undefined和數(shù)字零時(shí)可使用本法。

1 var exp = null; 2 3 if(typeof(exp) == "null") { 4 alert("is null"); 5 }

為了向下兼容，exp為null時(shí)，typeof總返回object。這種方式也不太好。

以下是正確的用法：

1 var exp = null; 2 3 if(!exp&&typeof(exp) != "undefined" && exp != 0) { 4 alert("is null"); 5 }

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

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

所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。

使用閉包的注意點(diǎn)：

由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁(yè)的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。
閉包會(huì)在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當(dāng)作對(duì)象（object）使用，把閉包當(dāng)作它的公用方法（Public?Method），把內(nèi)部變量當(dāng)作它的私有屬性（private?value），這時(shí)一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。

（關(guān)于閉包，詳細(xì)了解請(qǐng)看JavaScript之作用域與閉包詳解）

49.請(qǐng)舉出一個(gè)匿名函數(shù)的典型用例？

自執(zhí)行函數(shù)，用閉包模擬私有變量、特權(quán)函數(shù)等。

50.解釋“JavaScript模塊模式”以及你在何時(shí)使用它。

?????如果有提到無污染的命名空間，可以考慮加分。

如果你的模塊沒有自己的命名空間會(huì)怎么樣？

請(qǐng)看文章-JavaScript之模塊化編程?和JavaScript之命名空間模式淺析

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

請(qǐng)看文章-JavaScript之模塊化編程和Javascript之對(duì)象的繼承

52.請(qǐng)指出JavaScript宿主對(duì)象和原生對(duì)象的區(qū)別？

原生對(duì)象

ECMA-262 把本地對(duì)象（native object）定義為“獨(dú)立于宿主環(huán)境的 ECMAScript 實(shí)現(xiàn)提供的對(duì)象”。

“本地對(duì)象”包含哪些內(nèi)容：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

由此可以看出，簡(jiǎn)單來說，本地對(duì)象就是 ECMA-262 定義的類（引用類型）。

內(nèi)置對(duì)象

ECMA-262 把內(nèi)置對(duì)象（built-in object）定義為“由 ECMAScript 實(shí)現(xiàn)提供的、獨(dú)立于宿主環(huán)境的所有對(duì)象，在 ECMAScript 程序開始執(zhí)行時(shí)出現(xiàn)”。這意味著開發(fā)者不必明確實(shí)例化內(nèi)置對(duì)象，它已被實(shí)例化了。

同樣是“獨(dú)立于宿主環(huán)境”。根據(jù)定義我們似乎很難分清“內(nèi)置對(duì)象”與“本地對(duì)象”的區(qū)別。而ECMA-262 只定義了兩個(gè)內(nèi)置對(duì)象，即 Global 和 Math （它們也是本地對(duì)象，根據(jù)定義，每個(gè)內(nèi)置對(duì)象都是本地對(duì)象）。如此就可以理解了。內(nèi)置對(duì)象是本地對(duì)象的一種。

宿主對(duì)象

何為“宿主對(duì)象”？主要在這個(gè)“宿主”的概念上，ECMAScript中的“宿主”當(dāng)然就是我們網(wǎng)頁(yè)的運(yùn)行環(huán)境，即“操作系統(tǒng)”和“瀏覽器”。

所有非本地對(duì)象都是宿主對(duì)象（host object），即由 ECMAScript 實(shí)現(xiàn)的宿主環(huán)境提供的對(duì)象。所有的BOM和DOM都是宿主對(duì)象。因?yàn)槠鋵?duì)于不同的“宿主”環(huán)境所展示的內(nèi)容不同。其實(shí)說白了就是，ECMAScript官方未定義的對(duì)象都屬于宿主對(duì)象，因?yàn)槠湮炊x的對(duì)象大多數(shù)是自己通過ECMAScript程序創(chuàng)建的對(duì)象。

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

call方法: 語法：call(thisObj，Object) 定義：調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。說明：call 方法可以用來代替另一個(gè)對(duì)象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。如果沒有提供 thisObj 參數(shù)，那么 Global 對(duì)象被用作 thisObj。 apply方法：語法：apply(thisObj，[argArray]) 定義：應(yīng)用某一對(duì)象的一個(gè)方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。說明：如果 argArray 不是一個(gè)有效的數(shù)組或者不是 arguments 對(duì)象，那么將導(dǎo)致一個(gè) TypeError。如果沒有提供 argArray 和 thisObj 任何一個(gè)參數(shù)，那么 Global 對(duì)象將被用作 thisObj，并且無法被傳遞任何參數(shù)。

對(duì)于apply和call兩者在作用上是相同的，但兩者在參數(shù)上有以下區(qū)別：對(duì)于第一個(gè)參數(shù)意義都一樣，但對(duì)第二個(gè)參數(shù)：apply傳入的是一個(gè)參數(shù)數(shù)組，也就是將多個(gè)參數(shù)組合成為一個(gè)數(shù)組傳入，而call則作為call的參數(shù)傳入（從第二個(gè)參數(shù)開始）。如 func.call(func1,var1,var2,var3)對(duì)應(yīng)的apply寫法為：func.apply(func1,[var1,var2,var3])同時(shí)使用apply的好處是可以直接將當(dāng)前函數(shù)的arguments對(duì)象作為apply的第二個(gè)參數(shù)傳入。

54.請(qǐng)解釋Function.prototype.bind的作用？

55.你何時(shí)優(yōu)化自己的代碼？

請(qǐng)看文章JavaScript之高效編程?及JavaScript編碼風(fēng)格指南。

56.你能解釋一下JavaScript中的繼承是如何工作的嗎？

原型鏈等。

57.在什么時(shí)候你會(huì)使用document.write()？

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

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

特性檢測(cè)：為特定瀏覽器的特性進(jìn)行測(cè)試，并僅當(dāng)特性存在時(shí)即可應(yīng)用特性。

User-Agent檢測(cè)：最早的瀏覽器嗅探即用戶代理檢測(cè)，服務(wù)端（以及后來的客戶端）根據(jù)UA字符串屏蔽某些特定的瀏覽器查看網(wǎng)站內(nèi)容。

特性推斷：嘗試使用多個(gè)特性但僅驗(yàn)證了其中之一。根據(jù)一個(gè)特性的存在推斷另一個(gè)特性是否存在。問題是，推斷是假設(shè)并非事實(shí)，而且可能導(dǎo)致可維護(hù)性的問題。

59.請(qǐng)盡可能詳盡的解釋AJAX的工作原理。

請(qǐng)參考文章AJAX工作原理。

60.請(qǐng)解釋JSONP的工作原理，以及它為什么不是真正的AJAX。

JSONP (JSON with Padding)是一個(gè)簡(jiǎn)單高效的跨域方式，HTML中的script標(biāo)簽可以加載并執(zhí)行其他域的javascript，于是我們可以通過script標(biāo)記來動(dòng)態(tài)加載其他域的資源。例如我要從域A的頁(yè)面pageA加載域B的數(shù)據(jù)，那么在域B的頁(yè)面pageB中我以JavaScript的形式聲明pageA需要的數(shù)據(jù)，然后在 pageA中用script標(biāo)簽把pageB加載進(jìn)來，那么pageB中的腳本就會(huì)得以執(zhí)行。JSONP在此基礎(chǔ)上加入了回調(diào)函數(shù)，pageB加載完之后會(huì)執(zhí)行pageA中定義的函數(shù)，所需要的數(shù)據(jù)會(huì)以參數(shù)的形式傳遞給該函數(shù)。JSONP易于實(shí)現(xiàn)，但是也會(huì)存在一些安全隱患，如果第三方的腳本隨意地執(zhí)行，那么它就可以篡改頁(yè)面內(nèi)容，截獲敏感數(shù)據(jù)。但是在受信任的雙方傳遞數(shù)據(jù)，JSONP是非常合適的選擇。

AJAX是不跨域的，而JSONP是一個(gè)是跨域的，還有就是二者接收參數(shù)形式不一樣！

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

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

62.請(qǐng)解釋變量聲明提升。

在JS里定義的變量，存在于作用域鏈里，而在函數(shù)執(zhí)行時(shí)會(huì)先把變量的聲明進(jìn)行提升，僅僅是把聲明進(jìn)行了提升，而其值的定義還在原來位置。示例如下：

1 var test = function() { 2 console.log(name); // 輸出：undefined 3 var name = "jeri"; 4 console.log(name); // 輸出：jeri 5 } 6 7 test();

上述代碼與下述代碼等價(jià)。

1 var test = function() { 2 var name; 3 console.log(name); // 輸出：undefined 4 name = "jeri"; 5 console.log(name); // 輸出：jeri 6 } 7 8 test();

由以上代碼可知，在函數(shù)執(zhí)行時(shí)，把變量的聲明提升到了函數(shù)頂部，而其值定義依然在原來位置。

63.請(qǐng)描述下事件冒泡機(jī)制。

冒泡型事件：事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)。

捕獲型事件：事件從最不精確的對(duì)象(document 對(duì)象)開始觸發(fā)，然后到最精確(也可以在窗口級(jí)別捕獲事件，不過必須由開發(fā)人員特別指定)。

支持W3C標(biāo)準(zhǔn)的瀏覽器在添加事件時(shí)用addEventListener(event,fn,useCapture)方法，基中第3個(gè)參數(shù)useCapture是一個(gè)Boolean值，用來設(shè)置事件是在事件捕獲時(shí)執(zhí)行，還是事件冒泡時(shí)執(zhí)行。而不兼容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒有相關(guān)設(shè)置，不過IE的事件模型默認(rèn)是在事件冒泡時(shí)執(zhí)行的，也就是在useCapture等于false的時(shí)候執(zhí)行，所以把在處理事件時(shí)把useCapture設(shè)置為false是比較安全，也實(shí)現(xiàn)兼容瀏覽器的效果。

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

1. 定義

Property：屬性，所有的HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element并添加了一些屬性，添加的這些屬性分別對(duì)應(yīng)于每個(gè)HTML元素都有下面的這5個(gè)標(biāo)準(zhǔn)特性: id,title,lang,dir,className。DOM節(jié)點(diǎn)是一個(gè)對(duì)象，因此，他可以和其他的JavaScript對(duì)象一樣添加自定義的屬性以及方法。property的值可以是任何的數(shù)據(jù)類型，對(duì)大小寫敏感，自定義的property不會(huì)出現(xiàn)在html代碼中，只存在js中。

Attribute：特性，區(qū)別于property，attribute只能是字符串，大小寫不敏感，出現(xiàn)在innerHTML中，通過類數(shù)組attributes可以羅列所有的attribute。

2. 相同之處

標(biāo)準(zhǔn)的 DOM properties 與 attributes 是同步的。公認(rèn)的（非自定義的）特性會(huì)被以屬性的形式添加到DOM對(duì)象中。如，id，align，style等，這時(shí)候操作property或者使用操作特性的DOM方法如getAttribute()都可以操作屬性。不過傳遞給getAttribute()的特性名與實(shí)際的特性名相同。因此對(duì)于class的特性值獲取的時(shí)候要傳入“class”。

3. 不同之處

1).對(duì)于有些標(biāo)準(zhǔn)的特性的操作，getAttribute與點(diǎn)號(hào)(.)獲取的值存在差異性。如href，src，value，style，onclick等事件處理程序。 2).href：getAttribute獲取的是href的實(shí)際值，而點(diǎn)號(hào)獲取的是完整的url，存在瀏覽器差異。

65.為什么擴(kuò)展JavaScript內(nèi)置對(duì)象不是好的做法？

66.為什么擴(kuò)展JavaScript內(nèi)置對(duì)象是好的做法？

67.請(qǐng)指出document.onload和document.ready兩個(gè)事件的區(qū)別。

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

68.==和===有什么不同？

首先，== equality 等同，=== identity 恒等。?==，兩邊值類型不同的時(shí)候，要先進(jìn)行類型轉(zhuǎn)換，再比較。?===，不做類型轉(zhuǎn)換，類型不同的一定不等。

先說 ===，這個(gè)比較簡(jiǎn)單。下面的規(guī)則用來判斷兩個(gè)值是否===相等：?

如果類型不同，就[不相等]?
如果兩個(gè)都是數(shù)值，并且是同一個(gè)值，那么[相等]；(！例外)的是，如果其中至少一個(gè)是NaN，那么[不相等]。（判斷一個(gè)值是否是NaN，只能用isNaN()來判斷）?
如果兩個(gè)都是字符串，每個(gè)位置的字符都一樣，那么[相等]；否則[不相等]。?
如果兩個(gè)值都是true，或者都是false，那么[相等]。?
如果兩個(gè)值都引用同一個(gè)對(duì)象或函數(shù)，那么[相等]；否則[不相等]。?
如果兩個(gè)值都是null，或者都是undefined，那么[相等]。?

再說 ==，根據(jù)以下規(guī)則：?

如果兩個(gè)值類型相同，進(jìn)行 === 比較。?
如果兩個(gè)值類型不同，他們可能相等。根據(jù)下面規(guī)則進(jìn)行類型轉(zhuǎn)換再比較：?

如果一個(gè)是null、一個(gè)是undefined，那么[相等]。?

如果一個(gè)是字符串，一個(gè)是數(shù)值，把字符串轉(zhuǎn)換成數(shù)值再進(jìn)行比較。?

如果任一值是 true，把它轉(zhuǎn)換成 1 再比較；如果任一值是 false，把它轉(zhuǎn)換成 0 再比較。?

如果一個(gè)是對(duì)象，另一個(gè)是數(shù)值或字符串，把對(duì)象轉(zhuǎn)換成基礎(chǔ)類型的值再比較。對(duì)象轉(zhuǎn)換成基礎(chǔ)類型，利用它的toString或者valueOf方法。js核心內(nèi)置類，會(huì)嘗試valueOf先于toString；例外的是Date，Date利用的是toString轉(zhuǎn)換。非js核心的對(duì)象，令說（比較麻煩，我也不大懂）?

任何其他組合，都[不相等]。?

69.你如何從瀏覽器的URL中獲取查詢字符串參數(shù)。

以下函數(shù)把獲取一個(gè)key的參數(shù)。

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.請(qǐng)解釋一下JavaScript的同源策略。

在客戶端編程語言中，如javascript和 ActionScript，同源策略是一個(gè)很重要的安全理念，它在保證數(shù)據(jù)的安全性方面有著重要的意義。同源策略規(guī)定跨域之間的腳本是隔離的，一個(gè)域的腳本不能訪問和操作另外一個(gè)域的絕大部分屬性和方法。那么什么叫相同域，什么叫不同的域呢？當(dāng)兩個(gè)域具有相同的協(xié)議, 相同的端口，相同的host，那么我們就可以認(rèn)為它們是相同的域。同源策略還應(yīng)該對(duì)一些特殊情況做處理，比如限制file協(xié)議下腳本的訪問權(quán)限。本地的HTML文件在瀏覽器中是通過file協(xié)議打開的，如果腳本能通過file協(xié)議訪問到硬盤上其它任意文件，就會(huì)出現(xiàn)安全隱患，目前IE8還有這樣的隱患。

71.請(qǐng)描述一下JavaScript的繼承模式。

關(guān)于繼承請(qǐng)看文章JavaScript之對(duì)象的繼承。

72.如何實(shí)現(xiàn)下列代碼：[1,2,3,4,5].duplicator();//[1,2,3,4,5,1,2,3,4,5]。

73.描述一種JavaScript中實(shí)現(xiàn)memoization(避免重復(fù)運(yùn)算)的策略。

74.什么是三元表達(dá)式？“三元”表示什么意思？

三元表達(dá)式：? :。三元--三個(gè)操作對(duì)象。

在表達(dá)式boolean-exp ? value0 : value1 中，如果“布爾表達(dá)式”的結(jié)果為true，就計(jì)算“value0”，而且這個(gè)計(jì)算結(jié)果也就是操作符最終產(chǎn)生的值。如果“布爾表達(dá)式”的結(jié)果為false，就計(jì)算“value1”，同樣，它的結(jié)果也就成為了操作符最終產(chǎn)生的值。

75.JavaScript里函數(shù)參數(shù)arguments是數(shù)組嗎？?

在函數(shù)代碼中，使用特殊對(duì)象 arguments，開發(fā)者無需明確指出參數(shù)名，通過使用下標(biāo)就可以訪問相應(yīng)的參數(shù)。

arguments雖然有一些數(shù)組的性質(zhì)，但其并非真正的數(shù)組，只是一個(gè)類數(shù)組對(duì)象。其并沒有數(shù)組的很多方法，不能像真正的數(shù)組那樣調(diào)用.jion(),.concat(),.pop()等方法。

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

在代碼中出現(xiàn)表達(dá)式-"use strict"; 意味著代碼按照嚴(yán)格模式解析，這種模式使得Javascript在更嚴(yán)格的條件下運(yùn)行。

好處：

消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;
消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；
提高編譯器效率，增加運(yùn)行速度；
為未來新版本的Javascript做好鋪墊。

壞處：

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

77.解釋"chaining"。

jQuery方法鏈接。直到現(xiàn)在，我們都是一次寫一條jQuery語句（一條接著另一條）。不過，有一種名為鏈接（chaining）的技術(shù)，允許我們?cè)谙嗤脑厣线\(yùn)行多條jQuery命令，一條接著另一條。

提示：這樣的話，瀏覽器就不必多次查找相同的元素。

如需鏈接一個(gè)動(dòng)作，您只需簡(jiǎn)單地把該動(dòng)作追加到之前的動(dòng)作上。

78.解釋"deferreds"。

開發(fā)網(wǎng)站的過程中，我們經(jīng)常遇到某些耗時(shí)很長(zhǎng)的javascript操作。其中，既有異步的操作（比如ajax讀取服務(wù)器數(shù)據(jù)），也有同步的操作（比如遍歷一個(gè)大型數(shù)組），它們都不是立即能得到結(jié)果的。

通常的做法是，為它們指定回調(diào)函數(shù)（callback）。即事先規(guī)定，一旦它們運(yùn)行結(jié)束，應(yīng)該調(diào)用哪些函數(shù)。

但是，在回調(diào)函數(shù)方面，jQuery的功能非常弱。為了改變這一點(diǎn)，jQuery開發(fā)團(tuán)隊(duì)就設(shè)計(jì)了deferred對(duì)象。

簡(jiǎn)單說，deferred對(duì)象就是jQuery的回調(diào)函數(shù)解決方案。在英語中，defer的意思是"延遲"，所以deferred對(duì)象的含義就是"延遲"到未來某個(gè)點(diǎn)再執(zhí)行。

79.你知道哪些針對(duì)jQuery的優(yōu)化方法？

1.總是從ID選擇器開始繼承在jQuery中最快的選擇器是ID選擇器，因?yàn)樗苯觼碜杂贘avaScript的getElementById()方法。

例如有一段HTML代碼：

1 <div id="content"> 2 <form method="post"action="#"> 3 <h2>交通信號(hào)燈</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>

比如需要選擇紅綠單選框，那么可以使用一個(gè)tag?name來限制(修飾)class，如下所示：var?active_light=$(“input.on”);當(dāng)然也可以結(jié)合就近的ID，如下所示：var?active_light=$(“#traffic_light?input.on”);? 如果采用下面的選擇器，那么效率是低效的。var?traffic_button=$(“#content.button”);因?yàn)閎utton已經(jīng)有ID了，我們可以直接使用ID選擇器。如下所示：var?traffic_button=$(“#traffic_button”);當(dāng)然這只是對(duì)于單一的元素來講。如果你需要選擇多個(gè)元素，這必然會(huì)涉及到DOM遍歷和循環(huán)，為了提高性能，建議從最近的ID開始繼承。如下所示：var?traffic_lights=$(“#traffic_light?input”);

2.在class前使用tag(標(biāo)簽名)在jQuery中第二快的選擇器是tag(標(biāo)簽)選擇器(比如：$(“head”))。

跟ID選擇器累時(shí)，因?yàn)樗鼇碜栽膅etElementsByTagName()方法。繼續(xù)看剛才那段HTML代碼：

在使用tag來修飾class的時(shí)候，我們需要注意以下幾點(diǎn)：（1）不要使用tag來修飾ID，如下所示：var?content=$(“div#content”);這樣一來，選擇器會(huì)先遍歷所有的div元素，然后匹配#content。（好像jQuery從1.3.1開始改變了選擇器核心后，不存在這個(gè)問題了。暫時(shí)無法考證。）（2）不要畫蛇添足的使用ID來修飾ID，如下所示：var?traffic_light=$(“#content#traffic_light”);

3.將jQuery對(duì)象緩存起來把jQuery對(duì)象緩存起來就是要告訴我們要養(yǎng)成將jQuery對(duì)象緩存進(jìn)變量的習(xí)慣。

下面是一個(gè)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");

但切記不要這么做。我們應(yīng)該先將對(duì)象緩存進(jìn)一個(gè)變量然后再操作，如下所示：

記住，永遠(yuǎn)不要讓相同的選擇器在你的代碼里出現(xiàn)多次.注：（1）為了區(qū)分普通的JavaScript對(duì)象和jQuery對(duì)象，可以在變量首字母前加上$符號(hào)。（2）上面代碼可以使用jQuery的鏈?zhǔn)讲僮骷右愿纳啤Ｈ缦滤?#xff1a;

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.如果你打算在其他函數(shù)中使用jQuery對(duì)象，那么你必須把它們緩存到全局環(huán)境中。

如下代碼所示：

1 // 在全局范圍定義一個(gè)對(duì)象(例如:window對(duì)象) 2 window.$my = { 3 head:$("head"), 4 trafficLight:$("#trafficLight"), 5 trafficButton:$("#trafficButton") 6 }; 7 8 function doSomething(){ 9 // 現(xiàn)在你可以引用存儲(chǔ)的結(jié)果并操作它們 10 var script=document.createElement("script"); 11 $my.head.append(script); 12 13 // 當(dāng)你在函數(shù)內(nèi)部操作是,可以繼續(xù)將查詢存入全局對(duì)象中去. 14 $my.coolResults=$("#some_ul li"); 15 $my.otherResults=$("#some_table td"); 16 17 // 將全局函數(shù)作為一個(gè)普通的jquery對(duì)象去使用. 18 $my.otherResults.css("border-color","red"); 19 $my.trafficLight.css("border-color","green"); 20 } 21 // 你也可以在其他函數(shù)中使用它.

這里的基本思想是在內(nèi)存中建立你確實(shí)想要的東西，然后更新DOM。這并不是一個(gè)jQuery最佳實(shí)踐，但必須進(jìn)行有效的JavaScript操作。直接的DOM操作速度很慢。例如，你想動(dòng)態(tài)的創(chuàng)建一組列表元素，千萬不要這樣做,如下所示：對(duì)直接的DOM操作進(jìn)行限制。

1 var top_100_list = [];// 假設(shè)這里是100個(gè)獨(dú)一無二的字符串 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 }

我們應(yīng)該將整套元素字符串在插入進(jìn)dom中之前先全部創(chuàng)建好，如下所示：

1 $("#entryform input").bind("focus",function() { 2 $(this).addClass("selected"); 3 }).bind("blur",function(){ 4 $(this).removeClass("selected"); 5 });

5.冒泡除非在特殊情況下,否則每一個(gè)js事件(例如:click,mouseover等.)都會(huì)冒泡到父級(jí)節(jié)點(diǎn)。

當(dāng)我們需要給多個(gè)元素調(diào)用同個(gè)函數(shù)時(shí)這點(diǎn)會(huì)很有用。代替這種效率很差的多元素事件監(jiān)聽的方法就是,你只需向它們的父節(jié)點(diǎn)綁定一次。比如,我們要為一個(gè)擁有很多輸入框的表單綁定這樣的行為:當(dāng)輸入框被選中時(shí)為它添加一個(gè)class傳統(tǒng)的做法是，直接選中input，然后綁定focus等，如下所示：

1 $("#entryform").bind("focus",function(e) { 2 var $cell = $(e.target); // e.target捕捉到觸發(fā)的目標(biāo)元素 3 $cell.addClass("selected"); 4 }).bind("blur",function(e) { 5 var $cell = $(e.target); 6 $cell.removeClass("selected"); 7 });

當(dāng)然上面代碼能幫我們完成相應(yīng)的任務(wù)，但如果你要尋求更高效的方法，請(qǐng)使用如下代碼：

通過在父級(jí)監(jiān)聽獲取焦點(diǎn)和失去焦點(diǎn)的事件，對(duì)目標(biāo)元素進(jìn)行操作。在上面代碼中，父級(jí)元素扮演了一個(gè)調(diào)度員的角色,它可以基于目標(biāo)元素綁定事件。如果你發(fā)現(xiàn)你給很多元素綁定了同一個(gè)事件監(jiān)聽,那么現(xiàn)在的你肯定知道哪里做錯(cuò)了。

6.推遲到$(window).load。

jQuery對(duì)于開發(fā)者來說有一個(gè)很誘人的東西,可以把任何東西掛到$(document).ready下。盡管$(document).rady確實(shí)很有用，它可以在頁(yè)面渲染時(shí)，其它元素還沒下載完成就執(zhí)行。如果你發(fā)現(xiàn)你的頁(yè)面一直是載入中的狀態(tài)，很有可能就是$(document).ready函數(shù)引起的。你可以通過將jQuery函數(shù)綁定到$(window).load事件的方法來減少頁(yè)面載入時(shí)的cpu使用率。它會(huì)在所有的html(包括iframe)被下載完成后執(zhí)行。一些特效的功能，例如拖放,視覺特效和動(dòng)畫,預(yù)載入隱藏圖像等等，都是適合這種技術(shù)的場(chǎng)合。

7.壓縮JavaScript。

在線壓縮地址:http://dean.edwards.name/packer/壓縮之前，請(qǐng)保證你的代碼的規(guī)范性，否則可能失敗，導(dǎo)致Js錯(cuò)誤。

8.盡量使用ID代替Class。

?前面性能優(yōu)化已經(jīng)說過，ID選擇器的速度是最快的。所以在HTML代碼中，能使用ID的盡量使用ID來代替class。看下面的一個(gè)例子：

1 // 創(chuàng)建一個(gè)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 // 選擇每一個(gè)li 13 14 for(var i = 0; i<1000; i++) { 15 var selectedItem = $('.listItem' + i); 16 }

在上段代碼中，選擇每個(gè)li總共只用了61毫秒，相比class的方式，將近快了100倍。? ? ? ?在代碼最后，選擇每個(gè)li的過程中，總共用了5066毫秒，超過5秒了。接著我們做一個(gè)對(duì)比，用ID代替class：

9.給選擇器一個(gè)上下文。

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

10.慎用.live()方法（應(yīng)該說盡量不要使用）。

這是jQuery1.3.1版本之后增加的方法，這個(gè)方法的功能就是為新增的DOM元素動(dòng)態(tài)綁定事件。但對(duì)于效率來說，這個(gè)方法比較占用資源。所以請(qǐng)盡量不要使用它。例如有這么一段代碼:

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>

運(yùn)行后，你會(huì)發(fā)現(xiàn)新增的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 })

但我并不建議大家這么做，我想用另一種方式去解決這個(gè)問題，代碼如下：

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

雖然我把綁定事件重新寫了一次，代碼多了點(diǎn)，但這種方式的效率明顯高于live()方式，特別是在頻繁的DOM操作中，這點(diǎn)非常明顯。

80.請(qǐng)解釋.end()的用途。

在官方的API上是這樣描述end()方法的：“回到最近的一個(gè)"破壞性"操作之前。即，將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。”；看樣子好像是找到最后一次操作的元素的上一元素，在如下的例子中：html代碼：

復(fù)制代碼代碼如下:

1 <div>測(cè)試內(nèi)容1</div><div>測(cè)試內(nèi)容2</div>

jQuery代碼：

復(fù)制代碼代碼如下:

1 $('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1').end().addClass('c2');

復(fù)制代碼代碼如下:

1 <div>測(cè)試內(nèi)容1 2 <p class="c1 c2">新增內(nèi)容</p> 3 </div> 4 <div>測(cè)試內(nèi)容2 5 <p class="c1">新增內(nèi)容</p> 6 </div>

這里我就有一點(diǎn)不太明白了，怎么只有第一個(gè)<p>標(biāo)簽有兩個(gè)樣式，end()方法后返回的是什么,在火狐里添加了監(jiān)控，得到如下結(jié)果：1.$('<p>新增內(nèi)容</p>').appendTo('div')返回的是：[p,p]對(duì)象數(shù)組，即新增后的兩個(gè)p標(biāo)簽；2.$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1')返回的是：[p.c1,p.c1]對(duì)象數(shù)組，即添加了c1類樣式后的p對(duì)象數(shù)組；3.$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1').end()返回的是[p.c1],是第1個(gè)<div>中的<p>,在2操作中，最后“破壞”的是第2個(gè)<div>中的<p>,所以他的前一次操作的對(duì)象是第1個(gè)<div>中的<p>,返回的就是它;4.$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1').end().addClass('c2')返回的仍然是第1個(gè)<div>中的<p>;現(xiàn)在算是有點(diǎn)明白了，關(guān)鍵是要搞清楚最后一次操作的元素的上一元素是什么。

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

任何作為type參數(shù)的字符串都是合法的；如果一個(gè)字符串不是原生的JavaScript事件名，那么這個(gè)事件處理函數(shù)會(huì)綁定到一個(gè)自定義事件上。這些自定義事件絕對(duì)不會(huì)由瀏覽器觸發(fā)，但可以通過使用.trigger()或者.triggerHandler()在其他代碼中手動(dòng)觸發(fā)。如果type參數(shù)的字符串中包含一個(gè)點(diǎn)(.)字符，那么這個(gè)事件就看做是有命名空間的了。這個(gè)點(diǎn)字符就用來分隔事件和他的命名空間。舉例來說，如果執(zhí)行.bind('click.name',handler)，那么字符串中的click是事件類型，而字符串name就是命名空間。命名空間允許我們?nèi)∠壎ɑ蛘哂|發(fā)一些特定類型的事件，而不用觸發(fā)別的事件。參考unbind()來獲取更多信息。

jQuery的bind/unbind方法應(yīng)該說使用很簡(jiǎn)單，而且大多數(shù)時(shí)候可能并不會(huì)用到，取而代之的是直接用click/keydown之類的事件名風(fēng)格的方法來做事件綁定操作。

但假設(shè)如下情況：需要在運(yùn)行時(shí)根據(jù)用戶交互的結(jié)果進(jìn)行不同click事件處理邏輯的綁定，因而理論上會(huì)無數(shù)次對(duì)某一個(gè)事件進(jìn)行bind/unbind操作。但又希望unbind的時(shí)候只把自己綁上去的處理邏輯給釋放掉而不是所有其他地方有可能的額外的同一事件綁定邏輯。這時(shí)候如果直接用.click()/.bind('click')加上.unbind('click')來進(jìn)行重復(fù)綁定的話，被unbind掉的將是所有綁定在元素上的click處理邏輯，潛在會(huì)影響到該元素其他第三方的行為。

當(dāng)然如果在bind的時(shí)候是顯示定義了function變量的話，可以在unbind的時(shí)候提供function作為第二個(gè)參數(shù)來指定只unbind其中一個(gè)處理邏輯，但實(shí)際應(yīng)用中很可能會(huì)碰到各種進(jìn)行匿名函數(shù)綁定的情況。對(duì)于這種問題，jQuery的解決方案是使用事件綁定的命名空間。即在事件名稱后添加.something來區(qū)分自己這部分行為邏輯范圍。

比如用.bind('click.myCustomRoutine',function(){...});同樣是把匿名函數(shù)綁定到click事件（你可以用自己的命名空間多次綁定不同的行為方法上去），當(dāng)unbind的時(shí)候用.unbind('click.myCustomRoutine')即可釋放所有綁定到.myCustomRoutine命名空間的click事件，而不會(huì)解除其他通過.bind('click')或另外的命名空間所綁定的事件行為。同時(shí)，使用命令空間還可以讓你一次性u(píng)nbind所有此命名空間下的自定義事件綁定，通過.unbind('.myCustomRoutine')即可。要注意的是，jQuery的命名空間并不支持多級(jí)空間。

因?yàn)樵趈Query里面，如果用.unbind('click.myCustomRoutine.myCustomSubone')，解除的是命名空間分別為myCustomRoutine和myCustomSubone的兩個(gè)并列命名空間下的所有click事件，而不是"myCustomRoutine下的myCustomSubone子空間"。

82.請(qǐng)說出你可以傳遞給jQuery方法的四種不同值。

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

83.什么是效果隊(duì)列？

jQuery中有個(gè)動(dòng)畫隊(duì)列的機(jī)制。當(dāng)我們對(duì)一個(gè)對(duì)象添加多次動(dòng)畫效果時(shí)后添加的動(dòng)作就會(huì)被放入這個(gè)動(dòng)畫隊(duì)列中，等前面的動(dòng)畫完成后再開始執(zhí)行。可是用戶的操作往往都比動(dòng)畫快，如果用戶對(duì)一個(gè)對(duì)象頻繁操作時(shí)不處理動(dòng)畫隊(duì)列就會(huì)造成隊(duì)列堆積，影響到效果。jQuery中有stop這個(gè)方法可以停止當(dāng)前執(zhí)行的動(dòng)畫，并且它有兩個(gè)布爾參數(shù)，默認(rèn)值都為false。第一個(gè)參數(shù)為true時(shí)會(huì)清空動(dòng)畫隊(duì)列，第二個(gè)參數(shù)為true時(shí)會(huì)瞬間完成掉當(dāng)前動(dòng)畫。所以，我們經(jīng)常使用obj.stop(true,true)來停止動(dòng)畫。但是這還不夠！正如jQuery文檔中的說法，即使第二個(gè)參數(shù)為true，也僅僅是把當(dāng)前在執(zhí)行的動(dòng)畫跳轉(zhuǎn)到完成狀態(tài)。這時(shí)第一個(gè)參數(shù)如果也為true，后面的隊(duì)列就會(huì)被清空。如果一個(gè)效果需要多個(gè)動(dòng)畫同時(shí)處理，我們僅完成其中的一個(gè)而把后面的隊(duì)列丟棄了，這就會(huì)出現(xiàn)意料之外的結(jié)果。

84.請(qǐng)指出.get()，[]，eq()的區(qū)別。

eq:返回是一個(gè)jquery對(duì)象作用是將匹配的元素集合縮減為一個(gè)元素。這個(gè)元素在匹配元素集合中的位置變?yōu)?，而集合長(zhǎng)度變成1。

get:是一個(gè)html對(duì)象數(shù)組作用是取得其中一個(gè)匹配的元素。num表示取得第幾個(gè)匹配的元素。

85.請(qǐng)指出.bind()，.live()和.delegate()的區(qū)別。

在操縱DOM的語境中，document是根節(jié)點(diǎn)。現(xiàn)在我們可以較容易地說明.bind()、.live()和.delegate()的不同之處了。

.bind()

1 $('a').bind('click', function() {alert("That tickles!")});

這是最簡(jiǎn)單的綁定方法了。JQuery掃描文檔找出所有的$(‘a(chǎn)’)元素，并把a(bǔ)lert函數(shù)綁定到每個(gè)元素的click事件上。

.live()

1 $('a').live('click', function() {alert("That tickles!")});

JQuery把a(bǔ)lert函數(shù)綁定到$(document)元素上，并使用’click’和’a’作為參數(shù)。任何時(shí)候只要有事件冒泡到document節(jié)點(diǎn)上，它就查看該事件是否是一個(gè)click事件，以及該事件的目標(biāo)元素與’a’這一CSS選擇器是否匹配，如果都是的話，則執(zhí)行函數(shù)。

live方法還可以被綁定到具體的元素(或context)而不是document上，像這樣：

1 $('a', $('#container')[0]).live(...);

.delegate()

1 $('#container').delegate('a', 'click', function() {alert("That tickles!")});

JQuery掃描文檔查找$(‘#container’)，并使用click事件和’a’這一CSS選擇器作為參數(shù)把a(bǔ)lert函數(shù)綁定到$(‘#container’)上。任何時(shí)候只要有事件冒泡到$(‘#container’)上，它就查看該事件是否是click事件，以及該事件的目標(biāo)元素是否與CCS選擇器相匹配。如果兩種檢查的結(jié)果都為真的話，它就執(zhí)行函數(shù)。

可以注意到，這一過程與.live()類似，但是其把處理程序綁定到具體的元素而非document這一根上。精明的JS’er們可能會(huì)做出這樣的結(jié)論，即$('a').live()==$(document).delegate('a')，是這樣嗎?嗯，不，不完全是。

為什么.delegate()要比.live()好用？

基于幾個(gè)原因，人們通常更愿意選用jQuery的delegate方法而不是live方法。考慮下面的例子：

1 $('a').live('click', function(){blah()}); // 或者 2 $(document).delegate('a', 'click', function(){blah()});

速度

后者實(shí)際上要快過前者，因?yàn)榍罢呤紫纫獟呙枵麄€(gè)的文檔查找所有的$(‘a(chǎn)’)元素，把它們存成jQuery對(duì)象。盡管live函數(shù)僅需要把’a’作為串參數(shù)傳遞以用做之后的判斷，但是$()函數(shù)并未知道被鏈接的方法將會(huì)是.live()。而另一方面，delegate方法僅需要查找并存儲(chǔ)$(document)元素。

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

靈活性和鏈能力

live函數(shù)也挺令人費(fèi)解的。想想看，它被鏈到$(‘a(chǎn)’)對(duì)象集上，但其實(shí)際上是在$(document)對(duì)象上發(fā)生作用。由于這個(gè)原因，它能夠試圖以一種嚇?biāo)廊说姆绞絹戆逊椒ㄦ湹阶陨砩稀?shí)際上，我想說的是，以$.live(‘a(chǎn)’,…)這一形式作為一種全局性的jQuery方法，live方法會(huì)更具意義一些。

僅支持CSS選擇器

最后一點(diǎn)，live方法有一個(gè)非常大的缺點(diǎn)，那就是它僅能針對(duì)直接的CSS選擇器做操作，這使得它變得非常的不靈活。

為什么選擇.live()或.delegate()而不是.bind()？

畢竟，bind看起來似乎更加的明確和直接，難道不是嗎?嗯，有兩個(gè)原因讓我們更愿意選擇delegate或live而不是bind：

為了把處理程序附加到可能還未存在于DOM中的DOM元素之上。因?yàn)閎ind是直接把處理程序綁定到各個(gè)元素上，它不能把處理程序綁定到還未存在于頁(yè)面中的元素之上。

如果你運(yùn)行了$(‘a(chǎn)’).bind(…)，而后新的鏈接經(jīng)由AJAX加入到了頁(yè)面中，則你的bind處理程序?qū)τ谶@些新加入的鏈接來說是無效的。而另一方面live和delegate則是被綁定到另一個(gè)祖先節(jié)點(diǎn)上，因此其對(duì)于任何目前或是將來存在于該祖先元素之內(nèi)的元素都是有效的。

或者為了把處理程序附加到單個(gè)元素上或是一小組元素之上，監(jiān)聽后代元素上的事件而不是循環(huán)遍歷并把同一個(gè)函數(shù)逐個(gè)附加到DOM中的100個(gè)元素上。把處理程序附加到一個(gè)(或是一小組)祖先元素上而不是直接把處理程序附加到頁(yè)面中的所有元素上，這種做法帶來了性能上的好處。

停止傳播

最后一個(gè)我想做的提醒與事件傳播有關(guān)。通常情況下，我們可以通過使用這樣的事件方法來終止處理函數(shù)的執(zhí)行：

1 $('a').bind('click', function(e) { 2 e.preventDefault(); 3 // 或者 e.stopPropagation(); 4 });

不過，當(dāng)我們使用live或是delegate方法的時(shí)候，處理函數(shù)實(shí)際上并沒有在運(yùn)行，需要等到事件冒泡到處理程序?qū)嶋H綁定的元素上時(shí)函數(shù)才會(huì)運(yùn)行。而到此時(shí)為止，我們的其他的來自.bind()的處理函數(shù)早已運(yùn)行了。

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

Jquery為開發(fā)插件提供了兩個(gè)方法，分別是：

1 $.extend(obj); 2 $.fn.extend(obj);

1.那么這兩個(gè)分別是什么意思？

$.extend(obj);是為了擴(kuò)展jquery本身，為類添加新的方法。

$.fn.extend(obj);給JQUERY對(duì)象添加方法。

2.$.fn中的fn是什么意思，其實(shí)是prototype，即$.fn=$.prototype;

具體用法請(qǐng)看下面的例子：

1 $.extend({ 2 3 add:function(a, b) { 4 return a+b; 5 } 6 }) 7 8 $.add(5,8); // return 13

注意沒有，這邊的調(diào)用直接調(diào)用，前面不用任何對(duì)象。直接$.+方法名

$.fn.extend(obj)；對(duì)prototype進(jìn)行擴(kuò)展，為jquery類添加成員函數(shù)，jquery類的實(shí)例可以使用這個(gè)成員函數(shù)。

1 $.fn.extend({ 2 3 clickwhile:function(){ 4 5 $(this).click(function(){ 6 alert($(this).val()) 7 }) 8 } 9 }) 10 11 $('input').clickwhile(); // 當(dāng)點(diǎn)擊輸入框會(huì)彈出該對(duì)象的Value值

注意調(diào)用時(shí)候前面是有對(duì)象的。即$('input')這么個(gè)東西。

87.請(qǐng)寫出一個(gè)函數(shù)實(shí)現(xiàn)N!的計(jì)算。N取很大的值時(shí)，該怎么辦？

使用循環(huán)、遞歸都能寫出函數(shù)。

當(dāng)N取值很大時(shí)，應(yīng)該考慮把數(shù)值轉(zhuǎn)化為字符串再進(jìn)行運(yùn)算。大數(shù)乘法再轉(zhuǎn)化為大數(shù)加法運(yùn)算，其具體算法應(yīng)該有不少C語言實(shí)現(xiàn)，可以參考一下。

88.modulo(12,5) //2 ；問題：實(shí)現(xiàn)滿足上述結(jié)果的modulo函數(shù)。

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為假時(shí)的才是上面答案，否則就是它本身的值。

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

91.問題：上面兩個(gè)alert的結(jié)果是什么？

答案:"Hello?World"和ReferenceError:bar?is?not?defined

92.var?foo=[];foo.push(1);foo.push(2);問題：foo.length的值是什么？

答案：2

有趣的問題：

91.你編寫過的最酷的代碼是什么？其中你最自豪的是什么？

92.在你使用過的開發(fā)工具中，最喜歡哪個(gè)？

93.你有什么業(yè)余項(xiàng)目嗎？是哪種類型的？

94.你最愛的IE特性是什么？

數(shù)據(jù)冰冷的，但我們要讓數(shù)據(jù)溫暖起來，改變我們的生活！

轉(zhuǎn)載于:https://www.cnblogs.com/hanye2458/p/6034831.html

總結(jié)

以上是生活随笔為你收集整理的常见前端九十道面试题及答案-韩烨的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：微商潮牌怎么引流？成功的人不是赢在起跑点
下一篇：前端面试题（持续更新中）

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

HTML

常见前端九十道面试题及答案-韩烨

前言

1.你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎?

2.線程與進(jìn)程的區(qū)別

3.說說你對(duì)語義化的理解？

4.你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化？

5.為什么利用多個(gè)域名來提供網(wǎng)站資源會(huì)更有效？?

6.請(qǐng)說出三種減少頁(yè)面加載時(shí)間的方法。（加載時(shí)間指感知的時(shí)間或者實(shí)際加載時(shí)間）

7.如果你參與到一個(gè)項(xiàng)目中，發(fā)現(xiàn)他們使用Tab來縮進(jìn)代碼，但是你喜歡空格，你會(huì)怎么做？

8.請(qǐng)寫一個(gè)簡(jiǎn)單的幻燈效果頁(yè)面

9.你都使用哪些工具來測(cè)試代碼的性能？

10.如果今年你打算熟練掌握一項(xiàng)新技術(shù)，那會(huì)是什么？

11.請(qǐng)談一下你對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。

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

13.doctype（文檔類型）的作用是什么？你知道多少種文檔類型？

14.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？

15.使用XHTML的局限有哪些？

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

17.data-屬性的作用是什么？

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

19.請(qǐng)描述一下cookies，sessionStorage和localStorage的區(qū)別？

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

21.解釋下浮動(dòng)和它的工作原理。

22.列舉不同的清除浮動(dòng)的技巧，并指出它們各自適用的使用場(chǎng)景。

23.解釋下CSS?sprites，以及你要如何在頁(yè)面或網(wǎng)站中使用它。

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

25.討論CSS?hacks，條件引用或者其他。

26.如何為有功能限制的瀏覽器提供網(wǎng)頁(yè)？你會(huì)使用哪些技術(shù)和處理方法？

27.如何視覺隱藏網(wǎng)頁(yè)內(nèi)容，只讓它們?cè)谄聊婚喿x器中可用？

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

29.你用過媒體查詢，或針對(duì)移動(dòng)端的布局/CSS嗎？

30.你熟悉SVG樣式的書寫嗎？

什么是SVG？

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

32.在書寫高效CSS時(shí)會(huì)有哪些問題需要考慮？

33.使用CSS預(yù)處理器的優(yōu)缺點(diǎn)有哪些？

34.如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體，你該如何去實(shí)現(xiàn)？

35.解釋下瀏覽器是如何判斷元素是否匹配某個(gè)CSS選擇器？

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

37.請(qǐng)羅列出你所知道的display屬性的全部值。

38.請(qǐng)解釋一下relative、fixed、absolute和static元素的區(qū)別？請(qǐng)解釋一下inline和inline-block的區(qū)別？

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

40.解釋下事件代理。

41.解釋下JavaScript中this是如何工作的。

42.解釋下原型繼承的原理。

下圖展示的原（prototype）的關(guān)聯(lián)：

43.你是如何測(cè)試JavaScript代碼的？

44.AMD?vs.CommonJS？

45.什么是哈希表？

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

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

該如何檢測(cè)它們？

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

49.請(qǐng)舉出一個(gè)匿名函數(shù)的典型用例？

50.解釋“JavaScript模塊模式”以及你在何時(shí)使用它。

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

52.請(qǐng)指出JavaScript宿主對(duì)象和原生對(duì)象的區(qū)別？

原生對(duì)象

內(nèi)置對(duì)象

宿主對(duì)象

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

54.請(qǐng)解釋Function.prototype.bind的作用？

55.你何時(shí)優(yōu)化自己的代碼？

56.你能解釋一下JavaScript中的繼承是如何工作的嗎？

57.在什么時(shí)候你會(huì)使用document.write()？

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

59.請(qǐng)盡可能詳盡的解釋AJAX的工作原理。

60.請(qǐng)解釋JSONP的工作原理，以及它為什么不是真正的AJAX。

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

62.請(qǐng)解釋變量聲明提升。

63.請(qǐng)描述下事件冒泡機(jī)制。

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

1. 定義

2. 相同之處

3. 不同之處

65.為什么擴(kuò)展JavaScript內(nèi)置對(duì)象不是好的做法？

66.為什么擴(kuò)展JavaScript內(nèi)置對(duì)象是好的做法？

67.請(qǐng)指出document.onload和document.ready兩個(gè)事件的區(qū)別。