前言

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

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

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

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

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

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

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

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

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

• 1：去掉或樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)：html本身是沒(méi)有表現(xiàn)的，我們看到例如

  是粗體，字體大小2em，加粗；是加粗的，不要認(rèn)為這是html的表現(xiàn)，這些其實(shí)html默認(rèn)的css樣式在起作用，所以去掉或樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)不是語(yǔ)義化的HTML結(jié)構(gòu)的優(yōu)點(diǎn)，但是瀏覽器都有有默認(rèn)樣式，默認(rèn)樣式的目的也是為了更好的表達(dá)html的語(yǔ)義，可以說(shuō)瀏覽器的默認(rèn)樣式和語(yǔ)義化的HTML結(jié)構(gòu)是不可分割的。

• 2.屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)記來(lái)“讀”你的網(wǎng)頁(yè)。

• 3.PDA、手機(jī)等設(shè)備可能無(wú)法像普通電腦的瀏覽器一樣來(lái)渲染網(wǎng)頁(yè)（通常是因?yàn)檫@些設(shè)備對(duì)CSS的支持較弱）。

• 4.有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的有效信息：爬蟲(chóng)依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。

• 6.便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，是下一步吧網(wǎng)頁(yè)的重要?jiǎng)酉?，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

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

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

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

• 1.CDN緩存更方便

• 2.突破瀏覽器并發(fā)限制（一般每個(gè)域名建立的鏈接不超過(guò)6個(gè)）

• 3.Cookieless，節(jié)省帶寬，尤其是上行帶寬一般比下行要慢

• 4.對(duì)于UGC的內(nèi)容和主站隔離，防止不必要的安全問(wèn)題(上傳js竊取主站cookie之類(lèi)的)。正是這個(gè)原因要求用戶內(nèi)容的域名必須不是自己主站的子域名，而是一個(gè)完全獨(dú)立的第三方域名。

• 5.數(shù)據(jù)做了劃分，甚至切到了不同的物理集群，通過(guò)子域名來(lái)分流比較省事。這個(gè)可能被用的不多。

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

6.請(qǐng)說(shuō)出三種減少頁(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è)“目錄是什么文件類(lèi)型，或者是目錄。）

• 5.標(biāo)明高度和寬度（如果瀏覽器沒(méi)有找到這兩個(gè)參數(shù)，它需要一邊下載圖片一邊計(jì)算大小，如果圖片很多，瀏覽器需要不斷地調(diào)整頁(yè)面。這不但影響速度，也影響瀏覽體驗(yàn)。當(dāng)瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時(shí)無(wú)法顯示，頁(yè)面上也會(huì)騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容。從而加載時(shí)間快了，瀏覽體驗(yàn)也更好了。）

• 6.減少http請(qǐng)求（合并文件，合并圖片）。

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

• 建議這個(gè)項(xiàng)目使用像EditorConfig(http:///)之類(lèi)的規(guī)范

• 為了保持一致性，接受項(xiàng)目原有的風(fēng)格

• 直接使用VIM的retab命令

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

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

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

Profiler,JSPerf（http:///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存在的意義就是讓瀏覽器兼容性問(wèn)題盡量小，首先是他們對(duì)瀏覽器開(kāi)發(fā)者的約束，然后是對(duì)開(kāi)發(fā)者的約束。

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

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

@import'../fouc.css';而引用CSS文件的@import就是造成這個(gè)問(wèn)題的罪魁禍?zhǔn)?。IE會(huì)先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁(yè)面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁(yè)面上的內(nèi)容是沒(méi)有樣式的，這段時(shí)間的長(zhǎng)短跟網(wǎng)速，電腦速度都有關(guān)系。解決方法簡(jiǎn)單的出奇，只要在之間加入一個(gè)元素就可以了。

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

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

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

XHTML 1.0規(guī)定了三種XML文檔類(lèi)型：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)推出以后，瀏覽器都開(kāi)始采納新標(biāo)準(zhǔn)，但存在一個(gè)問(wèn)題就是如何保證舊的網(wǎng)頁(yè)還能繼續(xù)瀏覽，在標(biāo)準(zhǔn)出來(lái)以前，很多頁(yè)面都是根據(jù)舊的渲染方法編寫(xiě)的，如果用的標(biāo)準(zhǔn)來(lái)渲染，將導(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)簽名必須用小寫(xiě)字母。

• XHTML 文檔必須擁有根元素。

局限：

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

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

下面這些問(wèn)題需要考慮：

• 應(yīng)用字符集的選擇，選擇UTF-8編碼

• 語(yǔ)言書(shū)寫(xiě)習(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ù)查詢(xún)）。

data-* 屬性包括兩部分：

• 屬性名不應(yīng)該包含任何大寫(xiě)字母，并且在前綴 'data-' 之后必須有至少一個(gè)字符

• 屬性值可以是任意字符串

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