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)的，我們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認(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：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(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之類的)。正是這個(gè)原因要求用戶內(nèi)容的域名必須不是自己主站的子域名，而是一個(gè)完全獨(dú)立的第三方域名。
5.數(shù)據(jù)做了劃分，甚至切到了不同的物理集群，通過(guò)子域名來(lái)分流比較省事。這個(gè)可能被用的不多。
PS:關(guān)于Cookie的問(wèn)題，帶寬是次要的，安全隔離才是主要的。關(guān)于多域名，也不是越多越好，雖然服務(wù)器端可以做泛解釋，瀏覽器做dns解釋也是耗時(shí)間的，而且太多域名，如果要走h(yuǎn)ttps的話，還有要多買證書和部署的問(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è)“目錄是什么文件類型，或者是目錄。）
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://editorconfig.org/)之類的規(guī)范
為了保持一致性，接受項(xiàng)目原有的風(fēng)格
直接使用VIM的retab命令
8.請(qǐng)寫一個(gè)簡(jiǎn)單的幻燈效果頁(yè)面
如果不使用JS來(lái)完成，可以加分。（如：純CSS實(shí)現(xiàn)的幻燈片效果）
9.你都使用哪些工具來(lái)測(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存在的意義就是讓瀏覽器兼容性問(wèn)題盡量小，首先是他們對(duì)瀏覽器開(kāi)發(fā)者的約束，然后是對(duì)開(kāi)發(fā)者的約束。
12.什么是FOUC（無(wú)樣式內(nèi)容閃爍）？你如何來(lái)避免FOUC？
FOUC(Flash Of Unstyled Content)--文檔樣式閃爍
<style type="text/css"media="all">@import"../fouc.css";</style>而引用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)單的出奇，只要在<head>之間加入一個(gè)<link>或者<script>元素就可以了。
13.doctype（文檔類型）的作用是什么？你知道多少種文檔類型？
此標(biāo)簽可告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。該標(biāo)簽可聲明三種DTD類型，分別表示嚴(yán)格版本、過(guò)渡版本以及基于框架的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)推出以后，瀏覽器都開(kāi)始采納新標(biāo)準(zhǔn)，但存在一個(gè)問(wèn)題就是如何保證舊的網(wǎng)頁(yè)還能繼續(xù)瀏覽，在標(biāo)準(zhǔn)出來(lái)以前，很多頁(yè)面都是根據(jù)舊的渲染方法編寫的，如果用的標(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)簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
局限：
所有的 XHTML 元素都必須被正確地嵌套，XHTML 必須擁有良好的結(jié)構(gòu)，所有的標(biāo)簽必須小寫，并且所有的 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ǔ)言書寫習(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è)開(kāi)放平臺(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ù)器間不必要地來(lái)回傳遞。sessionStorage、localStorage、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)，其中sessionStorage的概念很特別，引入了一個(gè)“瀏覽器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)。也就是說(shuō)只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉，即使刷新頁(yè)面或進(jìn)入同源另一頁(yè)面，數(shù)據(jù)仍然存在。關(guān)閉窗口后，sessionStorage即被銷毀。同時(shí)“獨(dú)立”打開(kāi)的不同窗口，即使是同一頁(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ǔ)原來(lái)的位置。有些元素會(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.弊端就是增加了無(wú)意義標(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用；
background-color:red\9;\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的。
27.如何視覺(jué)隱藏網(wǎng)頁(yè)內(nèi)容，只讓它們?cè)谄聊婚喿x器中可用？
display:none;的缺陷搜索引擎可能認(rèn)為被隱藏的文字屬于垃圾信息而被忽略屏幕閱讀器（是為視覺(jué)上有障礙的人設(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，然后超過(guò)部分隱藏，就會(huì)彌補(bǔ)上述一、二方法中的缺陷，也達(dá)到了隱藏內(nèi)容的目的。
28.你用過(guò)柵格系統(tǒng)嗎？如果使用過(guò)，你最喜歡哪種？
比如：Bootstrap，流式柵格系統(tǒng)，http://960.gs/，柵格系統(tǒng)延續(xù)美學(xué)。
29.你用過(guò)媒體查詢，或針對(duì)移動(dòng)端的布局/CSS嗎？
媒體查詢，就是響應(yīng)式布局。通過(guò)不同的媒介類型和條件定義樣式表規(guī)則。媒介查詢讓CSS可以更精確作用于不同的媒介類型和同一媒介的不同條件。
語(yǔ)法結(jié)構(gòu)及用法：@media 設(shè)備名 only （選取條件） not （選取條件） and（設(shè)備選取條件），設(shè)備二{sRules}。
示例如下：
/* 當(dāng)瀏覽器的可視區(qū)域小于980px */
@media screen and （max-width： 980px） {
wrap {width： 90%; margin:0 auto;}
content {width： 60%;padding： 5%;}
sidebar {width： 30%;}
footer {padding： 8% 5%;margin-bottom： 10px;}
}
/* 當(dāng)瀏覽器的可視區(qū)域小于650px */
@media screen and （max-width： 650px） {
header {height： auto;}
searchform {position： absolute;top： 5px;right： 0;}
content {width： auto; float： none; margin： 20px 0;}
sidebar {width： 100%; float： none; margin： 0;}
}
30.你熟悉SVG樣式的書寫嗎？
SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。
什么是SVG？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來(lái)定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失
SVG 是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體
書寫示例如下：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
31.如何優(yōu)化網(wǎng)頁(yè)的打印樣式？
<link rel = "stylesheet" type = "text/css" media = "screen" href = "xxx.css"/>
其中media指定的屬性就是設(shè)備，顯示器上就是screen，打印機(jī)則是print，電視是tv，投影儀是projection。打印樣式示例如下：
<link rel = "stylesheet" type = "text/css" media = "print" href = "yyy.css"/>
但打印樣式表也應(yīng)注意以下事項(xiàng)：
打印樣式表中最好不要用背景圖片，因?yàn)榇蛴C(jī)不能打印CSS中的背景。如要顯示圖片，請(qǐng)使用html插入到頁(yè)面中。
最好不要使用像素作為單位，因?yàn)榇蛴邮奖硪蛴〕鰜?lái)的會(huì)是實(shí)物，所以建議使用pt和cm。
隱藏掉不必要的內(nèi)容。（@print div{display:none;}）
打印樣式表中最好少用浮動(dòng)屬性，因?yàn)樗鼈儠?huì)消失。如果想要知道打印樣式表的效果如何，直接在瀏覽器上選擇打印預(yù)覽就可以了。
32.在書寫高效CSS時(shí)會(huì)有哪些問(wèn)題需要考慮？
1.樣式是：從右向左的解析一個(gè)選擇器；
2.ID最快，Universal最慢有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal ；
3.不要tag-qualify（永遠(yuǎn)不要這樣做ul#main-navigation{}ID已經(jīng)是唯一的，不需要Tag來(lái)標(biāo)識(shí)，這樣做會(huì)讓選擇器變慢。）；
4.后代選擇器最糟糕（換句話說(shuō)，下面這個(gè)選擇器是很低效的：html body ul li a{}）；
5.想清楚你為什么這樣寫；
6.CSS3的效率問(wèn)題（CSS3選擇器（比如:nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀。但是這些神奇的選擇器會(huì)浪費(fèi)很多的瀏覽器資源。）；
7.我們知道#ID速度是最快的，那么我們都用ID，是不是很快。但是我們不應(yīng)該為了效率而犧牲可讀性和可維護(hù)性。
33.使用CSS預(yù)處理器的優(yōu)缺點(diǎn)有哪些？
LESS&SassLESS是受Sass啟發(fā)而開(kāi)發(fā)的工具，它列出了如下開(kāi)發(fā)的理由：
“為什么要開(kāi)發(fā)一個(gè)Sass的替代品呢？原因很簡(jiǎn)單：首先是語(yǔ)法。Sass的一個(gè)關(guān)鍵特性是縮進(jìn)式的語(yǔ)法，這種語(yǔ)法可以產(chǎn)生柱式外觀的代碼。但是你需要花費(fèi)時(shí)間學(xué)習(xí)一門新的語(yǔ)法以及重新構(gòu)建你現(xiàn)在的樣式表。LESS給CSS帶來(lái)了很多特性，使得LESS能夠和CSS無(wú)縫地緊密結(jié)合在一起。因此，你可以平滑地由CSS遷移到LESS，如果你只是對(duì)使用變量或者操作感興趣的話，你不需要學(xué)習(xí)一整門全新的語(yǔ)言。”
StylusStylus相對(duì)前兩者較新，可以看官方文檔介紹的功能。
1.來(lái)自NodeJS社區(qū)，所以和NodeJS走得很近，與JavaScript聯(lián)系非常緊密。還有專門JavaScript API：http://learnboost.github.io/stylus/docs/js.html；
2.支持Ruby之類等等框架；
3.更多更強(qiáng)大的支持和功能總結(jié)：Sass看起來(lái)在提供的特性上占有優(yōu)勢(shì)，但是LESS能夠讓開(kāi)發(fā)者平滑地從現(xiàn)存CSS文件過(guò)渡到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ì)有的，或者即使沒(méi)有也可以由默認(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)生（如果沒(méi)有索引就是所有元素的集合）。然后向上匹配，如果不符合上一個(gè)部分，就把元素從集合中刪除，直到真?zhèn)€選擇器都匹配完，還在集合中的元素就匹配這個(gè)選擇器了。舉個(gè)例子，有選擇器：
body.ready#wrapper>.lol233
先把所有class中有l(wèi)ol233的元素拿出來(lái)組成一個(gè)集合，然后上一層，對(duì)每一個(gè)集合中的元素，如果元素的parent id不為#wrapper則把元素從集合中刪去。再向上，從這個(gè)元素的父元素開(kāi)始向上找，沒(méi)有找到一個(gè)tagName為body且class中有ready的元素，就把原來(lái)的元素從集合中刪去。至此這個(gè)選擇器匹配結(jié)束，所有還在集合中的元素滿足。大體就是這樣，不過(guò)瀏覽器還會(huì)有一些奇怪的優(yōu)化。為什么從后往前匹配因?yàn)樾屎臀臋n流的解析方向。效率不必說(shuō)，找元素的父親和之前的兄弟比遍歷所喲兒子快而且方便。關(guān)于文檔流的解析方向，是因?yàn)楝F(xiàn)在的CSS，一個(gè)元素只要確定了這個(gè)元素在文檔流之前出現(xiàn)過(guò)的所有元素，就能確定他的匹配情況。應(yīng)用在即使html沒(méi)有載入完成，瀏覽器也能根據(jù)已經(jīng)載入的這一部分信息完全確定出現(xiàn)過(guò)的元素的屬性。為什么是用集合主要也還是效率?；贑SS Rule數(shù)量遠(yuǎn)遠(yuǎn)小于元素?cái)?shù)量的假設(shè)和索引的運(yùn)用，遍歷每一條CSS Rule通過(guò)集合篩選，比遍歷每一個(gè)元素再遍歷每一條Rule匹配要快得多。
