1、2016/7/20 qiudeqing/FEinterview: 收集的前端面試題和qiudeqing / FE-interviewWatchStarFork收集的前端面試題和96 commits1 branch0 releases2 contributorsBranch: masterNew pull requestFind fileClone or downloadqiu-deqing fix article originLatest commit 74b913c on 27 May 2015deqing/FEinterview1/38README.md請注明出處:deqing/FEint

2、erview Table of Contents generated with DocTocFEinterview$HTML， HTTP，web綜合問題常見排序算法的時間復雜度,空間復雜度前端需要注意哪些SEOweb開發中會話跟蹤的方法有哪些 的 title 和 alt 有什么區別doctype是什么,舉例常見doctype及特點HTML全局屬性global attribute有哪些什么是web語義化,有什么好處HTTP method從瀏覽器地址欄輸入url到顯示頁面的步驟以HTTP為例 HTTP request報文結構是怎樣的HTTP response報文結構是怎樣的如何進行性能優化什么是漸

3、進增強HTTP狀態碼及其含義$CSS部分CSS選擇器有哪些css sprite是什么,有什么優缺點display: none; 與 visibility: hidden; 的區別css hack原理及常用hackspecified value,computed value,used value計算方法link 與 import 的區別display: block; 和 display: inline; 的區別PNG,GIF,JPG的區別及如何選CSS有哪些繼承屬性IE6瀏覽器有哪些常見的bug,缺陷或者與標準不一致的地方,如何解決 容器包含若干浮動元素時如何包含浮動什么是FOUC?如何避免如何

4、創建塊級格式化上下文block formatting context,BFC有什么用display,float,position的關系imgupdate2 years agoREADME.mdfix article origina year agoCodeIssues 0Pull requests 1PulseGraphs33661158aOpen sourceBus nessExp orePr c ng B og SupportS gn nS gn upThis reposi orySearch2016/7/20 qiudeqing/FEinterview: 收集的前端面試題和外邊距折疊co

5、llapsing margins如何確定一個元素的包含塊containing block stacking context,布局規則如何水平居中一個元素如何豎直居中一個元素$javascript概念部分DOM元素e的e.getAttributepropName和pName有什么區別和offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別XMLHttpRequest通用屬性和方法focus/blur與focusin/focusout的區別與mouseover/mouseout與mouse

6、enter/mouseleave的區別與sessionStorage,localStorage,cookie區別javascript跨域通信javascript有哪幾種數據類型什么閉包,閉包有什么用javascript有哪幾種方法定義函數應用程序和離線web應用客戶端localStorage和sessionStorage cookie及其操作javascript有哪些方法定義對象=運算符=運算符對象到字相等的流程是怎樣的相等的流程是怎樣的的轉換步驟對象到數字的轉換步驟,=的比較規則+運算符工作流程函數內部arguments變量有哪些特性,有哪些屬性,如何將它轉換為數組DOM模型是如何的,編寫一

7、個EventUtil工具類實現管理兼容評價一下三種方法實現繼承的優缺點,并改進$javascript編程部分請用原生js實現一個函數,給頁面制定的任意一個元素添加一個透明遮罩 要求兼容IE8+及各主流瀏覽器,遮罩層效果如下圖所示:可變,默認0.2,使這個區域點擊無效,請用代碼寫出今天是x其中x表示當天是幾,如果當天是一,輸出應該是今天是一下面這段代碼想要循環延時輸出結果0 1 2 3 4,請問輸出結果是否正確,如果不正確,請說明為什么,并修改循環內的代碼使其輸出正確結果現有一個Page類,其原型對象上有許多以post開頭的方法如postMsg;另有一函數chekc,只返回ture或false.

8、請設計一個函數,該函數應批量改造原Page的post方法,在保留其原有功能的同時,為每個post方法增加驗證功能,當chekc返回true時繼續執行原post 完成下面的tooltip編寫javascript深度克隆函數deepClone方法,返回false時不再執行原post方法補充代碼,鼠標單擊Button1后將Button1移動到Button2的后面網頁中實現一個計算當年還剩多少時間的倒數計時程序,要求網頁上實時動態顯示年還剩天時分 秒完成一個函數,接受數組作為參數,數組元素為整數或者數組,數組元素包含整數或數組,函數返回扁平化后的數組如何一個對象是否為數組請評價以下器代碼并給出改進意見

9、如何一個對象是否為函數編寫一個函數接受url中query string為參數,返回urlencoded編碼后的Object,query string使用application/xwwwform一個完整的url,返回Object包含域與window.location相同 完成函數getViewportSize返回指定窗口的視口完成函數getScrollOffset返回窗口滾動條偏移量現有一個字richText,是一段富文本,需要顯示在頁面上.有個要求,需要給其中只包含一個img元素的p一個叫pic的class.請編寫代碼實現.可以使用jQuery或KISSY.增加deqing/FEintervi

10、ew2/382016/7/20 qiudeqing/FEinterview: 收集的前端面試題和請實現一個Event類,繼承自此類的對象都會擁有兩個方法on,off,once和trigger 編寫一個函數將列表子元素順序反轉以下函數的作用是?空白區域應該填寫什么編寫一個函數實現form的序列化即將一個表單中的鍵值序列化為可提交的字使用原生javascript給下面列表中的li節點綁定點擊,點擊時創建一個Object對象,兼容IE和標準瀏覽器有一個大數組,var a = 1, 2, 3, .;a的長度是100,內容填充隨機整數的字法將其內容去重.請先構造此數組a,然后設計一個算FE-interv

11、iew個人收集的前端知識點、面試題和節，參考僅代表個人觀點，方便復習，目錄如下，通過文檔內搜索目錄可快速章$HTML， HTTP，web綜合問題常見排序算法的時間復雜度,空間復雜度前端需要注意哪些SEO1. 合理的title、description、keywords：搜索對著三項的權重逐個減小，title值強調重點即可，重要出現不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內容高度概括，長度合適，不可過分堆砌，不同頁面description有所不同；keywords列舉出重要即可2. 語義化的HTML代碼，符合W3C規范：語義化代碼讓搜索引擎容易理解網頁3

12、. 重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容一定 會被抓取4. 重要內容不要用js輸出：爬蟲執行js獲取內容5. 少用iframe：搜索引擎6. 非裝飾性圖片必須加alt抓取iframe中的內容7. 提高速度：速度是搜索引擎排序的一個重要指標web開發中會話跟蹤的方法有哪些1. cookie2. session3. url重寫4. 隱藏input5. ip地址 的 title 和 alt 有什么區別deqing/FEinterview3/382016/7/20 qiudeqing/FEinterview: 收集的前端面試題和1

13、. title 是global attributes之一，用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。2. alt 是 的特有屬性，是圖片內容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片。可提圖片除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。性，doctype是什么,舉例常見doctype及特點1. 2. 必須處于HTML文檔的頭部，在 之前，HTML5中不區分大小寫不是一個HTML，是一個用于告訴瀏覽器當前HTMl版本的指令3. 現代瀏覽器的html布局引擎通過檢查doctype決定使用兼容模式還是標準模式對文檔進行渲染，

14、一些瀏覽器有一個接近標準模型。4. 在HTML4.01中 染內容指向一個DTD，由于HTML4.01基于SGML，所以DTD指定了標記規則以保證瀏覽器正確渲5. HTML5不基于SGML，所以不用指定DTD常見dotype：1. HTML4.01 strict：不HTML 4.01/EN 2. HTML4.01 Transitional:使用表現性、廢棄元素（如font）以及frameset。： ： !DOCTYPE HTML PUBLIC /W3C/DTD HTML 4.01： 表現性、廢棄元素以及frameset。文檔必須是結構良好的XML文檔。： frameset，文檔必須是結構良好的X

15、Ml文檔。5. XHTML1.0 Transitional:使用表現性、廢棄元素，不：6. XHTML 1.0 Frameset:使用表現性、廢棄元素以及frameset，文檔必須是結構良好的XML文檔。： !DOCTYPE htmlPUBLIC /W3C/DTD XHTML 1.0 Frameset/EN 7. HTML 5: frameset.dtdHTML全局屬性(global attribute)有哪些參考資料：MDN: html global attribute或者W3C HTML globalattributesaccesskey :設置快捷鍵，提供快速元素如aaa在windows

16、下的firefox中按 alt + shift + a 可激活元素class :為元素設置類標識，多個類名用空格contenteditable : 指定元素內容是否可編輯context : 自定義鼠標右鍵彈出菜單內容data* : 為元素增加自定義屬性dir : 設置元素文本方向draggable : 設置元素是否可拖拽，CSS和javascript可通過class屬性獲取元素dropzone : 設置元素拖放類型： copy, move, linkhidden : 表示一個元素是否與文檔。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果id : 元素id，文檔內唯一lang : 元素內

17、容的的語言spellcheck : 是否啟動拼寫和語法檢查style : 行內css樣式tabindex : 設置元素可以獲得焦點，通過tab可以導航title : 元素相關的建議信息translate : 元素和子孫節點內容是否需要本地化什么是web語義化,有什么好處web語義化是指通過HTML標記表示頁面包含的信息，包含了HTML的語義化和css命名的語義化。 HTML的語義化是指：通過使用包含語義的（如h1h6）恰當地表示文檔結構 css命名的語義化是指：為html未表達的語義，如Microformat通過添加符合規則的class描述信息 為什么需要語義化：添加有意義的class，id補

18、充去掉樣式后頁面呈現清晰的結構deqing/FEinterview4/382016/7/20 qiudeqing/FEinterview: 收集的前端面試題和盲人使用讀屏器更好地閱讀搜索引擎更好地理解頁面，有利于收錄便團隊項目的可持續及維護HTTP method1. 一臺服務器要與HTTP1.1兼容，只要為實現GET和HEAD方法即可2. GET是最常用的方法，通常用于請求服務器某個。3. HEAD與GET類似，但服務器在響應中值返回首部，不返回實體的主體部分4. PUT讓服務器用請求的主體部分來創建一個由所請求的URL命名的新文檔，或者，如果那個URL已經存在的話，就用干這 個主體替代它5.

19、 POST起初是用來向服務器輸入數據的。實際上，通常會用它來支持HTML的表單。表單中填好的數據通常會被送給服務器，然后由服務器將其到要去的地方。6. TRACE會在目的服務器端發起一個環回診斷，最后一站的服務器會彈回一個TRACE響應并在響應主體中攜帶它收到的原始請求報文。TRACE方法主要用于診斷，用于驗證請求是否如愿穿過了請求/響應鏈。7. OPTIONS方法請求web服務器告知其支持的各種功能。可以8. DELETE請求服務器刪除請求URL指定的服務器支持哪些方法或者對某些特殊支持哪些方法。從瀏覽器地址欄輸入url到顯示頁面的步驟(以HTTP為例)1. 在瀏覽器地址欄輸入URL2. 瀏

20、覽器查看緩存，如果請求在緩存中并且新鮮，跳轉到轉碼步驟i. 如果未緩存，發起新請求ii. 如果已緩存，檢驗是否足夠新鮮，足夠新鮮直接提供給客戶端，否則與服務器進行驗證。iii. 檢驗新鮮通常有兩個HTTP頭進行Expires 和 CacheControl ：HTTP1.0提供Expires，值為一個絕對時間表示緩存新鮮日期HTTP1.1增加了CacheControl: maxage=,值為以秒為URL獲取協議，主機，端口，path的最大新鮮時間3. 瀏覽器4. 瀏覽器組裝一個HTTP（GET）請求報文5. 瀏覽器獲取主機ip地址，過程如下：i. 瀏覽器緩存ii. 本機緩存iii. hosts文

21、件iv. 路由器緩存v. ISP DNS緩存vi. DNS遞歸（可能存在負載均衡導致每次IP不一樣）6. 打開一個socket與目標IP地址，端口建立TCP，三次握手如下：i. 客戶端一個TCP的SYN=1，Seq=X的包到服務器端口ii. 服務器發回SYN=1， ACK=X+1， Seq=Y的響應包iii. 客戶端ACK=Y+1， Seq=Z7. TCP建立后HTTP請求8. 服務器接受請求并，將請求轉發到服務程序，如虛擬主機使用HTTP Host頭部請求的服務程序9. 服務器檢查HTTP請求頭是否包含緩存驗證信息如果驗證緩存新鮮，返回304等對應狀態碼10. 處理程序完整請求并準備HTTP

22、響應，可能需要數據庫等操作11. 服務器將響應報文通過TCP連接回瀏覽器12. 瀏覽器接收HTTP響應，然后根據情況選擇關閉TCP連接或者保留重用，關閉TCP連接的四次握手如下：i. 主動方Fin=1， Ack=Z， Seq= X報文ACK=X+1， Seq=Z報文Fin=1， ACK=X， Seq=Y報文ACK=Y， Seq=X報文ii.iii.方方iv. 主動方13. 瀏覽器檢查響應狀態嗎：是否為1XX，3XX， 4XX， 5XX，這些情況處理與2XX不同14. 如果可緩存，進行緩存15. 對響應進行（例如gzip壓縮）16. 根據17.為HTML文檔），構造CSSOM樹，執行js類型決定

23、如何處理（假設HTML文檔，構件DOM樹，這些操作沒有嚴格的先后順序，以下分別解釋deqing/FEinterview5/382016/7/20 qiudeqing/FEinterview: 收集的前端面試題和18. 構建DOM樹：i. Tokenizing：根據HTML規范將字符流為標記ii. Lexing：詞法分析將標記轉換為對象并定義屬性和規則iii. DOM construction：根據HTML標記過程中遇到圖片、樣式表、js文件，啟動對象組成DOM樹19.20. 構建CSSOM樹：i. Tokenizing：字符流轉換為標記流ii. Node：根據標記創建節點iii. CSSOM：

24、節點創建CSSOM樹21. 根據DOM樹和CSSOM樹構建渲染樹:i. 從DOM樹的根節點遍歷所有可見節點，不可見節點包括：1） script , meta 這樣本身不可見的點，如 display: noneii. 對每一個可見節點，找到恰當的CSSOM規則并應用iii. 發布可視節點的內容和計算樣式。2被css隱藏的節22. js如下：i. 瀏覽器創建Document對象并loadingHTML，將到的元素和文本節點添加到文檔中，此時document.readystate為ii. HTML器遇到沒有async和defer的script時，將他們添加到文檔中，然后執行行內或外部。這些會同步執經

25、常和執行時器會暫停。這樣就可以用document.write把文本處理程序，他們可以遍歷和操作script和他們之前的文檔內容行，并且在簡單定義函數和到輸入流中。同步iii. 當器遇到設置了async屬性的script時，開始并繼續文檔。會在它完成后盡快執行，但是解使用document.write()，它們可以script和之前的文檔元素析器停下來等它。異步iv. 當文檔完成v. 所有defer，document.readState變成interactive會按照在文檔出現的順序執行，延遲能使用document.write完整文檔樹，vi. 瀏覽器在Document對象上觸發DOMConten

26、tLoadedvii. 此時文檔完全完成，瀏覽器可能還在等待如圖片等內容加載，等這些內容完成載入并且所有異步完成載入和執行，document.readState變為complete,window觸發load23. 顯示頁面（HTML過程中會逐步顯示頁面）HTTP request報文結構是怎樣的rfc2616中進行了定義：1. 首行是Request-Line包括：請求方法，請求URI，協議版本，CRLF2. 首行之后是若干行請求頭，包括general-header，request-header或者entity-header，每個一行以CRLF結束3. 請求頭和消息實體之間有一個CRLF分隔4.

27、根據實際請求需要可能包含一個消息實體 一個請求報文例子如下：GET /Protocols/rfc2616/rfc2616sec5.html HTTP/1.1 Host:Connection: keepalive CacheControl: maxage=0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chro

28、me/35.0.1916.153 Safari/53 Referer:AcceptEncoding: gzip,deflate,sdch AcceptLanguage: zhCN,zh;q=0.8,en;q=0.6 Cookie: authorstyle=yesIfNoneMatch: 2cc83e3073913b100 IfModifiedSince: Wed, 01 Sep 2004 13:24:52 GMTname=qiu&age=25HTTP response報文結構是怎樣的rfc2616中進行了定義：1. 首行是狀態行包括：HTTP版本，狀態碼，狀態描述，后面跟一個CRLF2. 首行

29、之后是若干行響應頭，包括：通用頭部，響應頭部，實體頭部3. 響應頭部和響應實體之間用一個CRLF空行分隔deqing/FEinterview6/382016/7/20 qiudeqing/FEinterview: 收集的前端面試題和4. 最后是一個可能的消息實體 響應報文例子如下：HTTP/1.1 200 OKDate: Tue, 08 Jul 2014 05:28:43 GMTServer: Apache/2LastModified: Wed, 01 Sep 2004 13:24:52 GMT ETag: 40d73e3073913b100AcceptRanges: bytes Conten

30、tLength: 16599 CacheControl: maxage=21600Expires: Tue, 08 Jul 2014 11:28:43 GMT P3P: policyref=ContentType: text/html; charset=iso88591name: qiu, age: 25如何進行性能優化雅虎Best Practices for Speeding Up Your Web Site：content方面i. 減少HTTP請求：合并文件、CSS精靈、inline Imageii. 減少DNS：DNS完成之前瀏覽器不能從這個主機任何任何文件。方法：DNS緩存、將分布到恰

31、當數量的主機名，平衡并行和DNSiii. 避免重定向：多余的中間iv. 使Ajax可緩存v. 非必須組件延遲加載vi. 未來所需組件預加載vii. 減少DOM元素數量viii. 將放到不同的域下：瀏覽器同時從一個域的數目有限，增加域可以提高并行量ix. 減少iframe數量x. 不要404Server方面i. 使用CDNii. 添加Expires或者CacheControl響應頭iii. 對組件使用Gzip壓縮iv. 配置ETagv. Flush Buffer Earlyvi. Ajax使用GET進行請求vii. 避免空src的img Cookie方面i. 減小cookie大小ii. 引入cs

32、s方面的不要包含cookiei. 將樣式表放到頁面頂部ii. 不使用CSS表達式iii. 使用不使用importiv. 不使用IE的Filter Javascript方面i. 將放到頁面底部ii. 將javascript和css從外部引入iii. 壓縮javascript和cssiv. 刪除不需要的v. 減少DOMvi. 合理設計圖片方面i. 優化圖片：根據實際顏色需要選擇色深、壓縮器deqing/FEinterview7/382016/7/20 qiudeqing/FEinterview: 收集的前端面試題和ii. 優化css精靈iii. 不要在HTML中拉伸圖片iv. 保證favicon.

33、ico小并且可緩存移動方面i. 保證組件小于25kii. Pack Components into a Multipart Document什么是漸進增強漸進增強是指在web設計時強調可性、語義化HTML、外部樣式表和原則如下:。保證所有人都能頁面的基本內容和功能同時為高級瀏覽器和高帶寬用戶提供更好的用戶體驗。所有瀏覽器都必須能基本內容所有瀏覽器都必須能使用基本功能所有內容都包含在語義化通過外部CSS提供增強的布局中通過非侵入式、外部javascript提供增強功能enduser web browser preferences are respectedHTTP狀態碼及其含義參考RFC 261

34、61XX：信息狀態碼100 Continue：客戶端應當繼續請求。這個臨時相應是用來通知客戶端它的部分請求已經被服務器接收，且仍未被拒絕。客戶端應當繼續請求的剩余部分，或者如果請求已經完成，忽略這個響應。服務器必須在請求向客戶端一個最終響應101 Switching Protocols：服務器已經理解力客戶端的請求，并將通過Upgrade消息頭通知客戶端采用不同的協議來完成這個請求。在完這個響應最后的空行后，服務器將會切換到Upgrade消息頭中定義的那些協議。2XX：狀態碼200 OK：請求，請求所希望的響應頭或數據體將隨此響應返回201 Created：202 Accepted：203 N

35、on-Authoritative Information：204 No Content：205 Reset Content：206 Partial Content： 3XX：重定向300 Multiple Choices：301 Moved Permanently：302 Found：303 See Other：304 Not Modified：305 Use Proxy：306 （unused）：307 Temporary Redirect： 4XX：客戶端錯誤400 Bad Request:401 Unauthorized:402 Payment Required:403 Forbidde

36、n:404 Not Found:405 Method Not Allowed: 406 Not Acceptable:407 Proxy Authentication Required:408 Request Timeout:409:deqing/FEinterview8/382016/7/20 qiudeqing/FEinterview: 收集的前端面試題和410 Gone:411 Length Required:412 Precondition Failed:413 Request Entity Too Large: 414 Request-URI Too Long: 415 Unsupp

37、orted Media Type:416 Requested Range Not Satisfiable: 417 Expectation Failed:5XX: 服務器錯誤500 Internal Server Error: 501 Not Implemented:502 Bad Gateway:503 Service Unavailable:504 Gateway Timeout:505 HTTP Version Not Supported:$CSS部分CSS選擇器有哪些1. *通用選擇器：選擇所有元素，不參與計算優先級*，兼容性IE6+2. #X id選擇器：選擇id值為X的元素，兼容性

38、：IE6+3. .X 類選擇器： 選擇class包含X的元素，兼容性：IE6+4. X Y后代選擇器： 選擇滿足X選擇器的后代節點中滿足Y選擇器的元素，兼容性：IE6+5. X 元素選擇器： 選擇標所有簽為X的元素，兼容性：IE6+6. :link，：visited，：focus，：hover，：active元素，順序LoVe HAte，兼容性: IE4+狀態： 選擇特定狀態的7. X + Y直接兄弟選擇器：在X之后第一個兄弟節點中選擇滿足Y選擇器的元素，兼容性： IE7+8. X Y子選擇器： 選擇X的子元素中滿足Y選擇器的元素，兼容性： IE7+9. X Y兄弟： 選擇X之后所有兄弟節點中

39、滿足Y選擇器的元素，兼容性： IE7+10. attr：選擇所有設置了attr屬性的元素，兼容性IE7+11. attr=value：選擇屬性值剛好為value的元素12. attr=value：選擇屬性值為空白符分隔，其中一個的值剛好是value的元素13. attr|=value：選擇屬性值剛好為value或者value開頭的元素14. attr=value：選擇屬性值以value開頭的元素15. attr$=value：選擇屬性值以value結尾的元素16. attr*=value：選擇屬性值中包含value的元素17. :checked：選擇單選框，復選框，下拉框中選中狀態下的元素，兼

40、容性：IE9+18. X:after, X:after：after偽元素，選擇元素虛擬子元素（元素的最后一個子元素），CSS3中:表示偽元素。兼容性:after為IE8+，:after為IE9+19. :hover：鼠標移入狀態的元素，兼容性aIE4+， 所有元素IE7+20. :not(selector)：選擇不符合selector的元素。不參與計算優先級，兼容性：IE9+21. :first-letter：偽元素，選擇塊元素第一行的第一個字母，兼容性IE5.5+22. :first-line：偽元素，選擇塊元素的第一行，兼容性IE5.5+23. :nth-child(an + b)：偽類，

41、選擇前面有an + b 1個兄弟節點的元素，其中n = 0， 兼容性IE9+24. :nth-last-child(an + b)：偽類，選擇后面有an + b 1個兄弟節點的元素 其中n = 0，兼容性IE9+25. X:nth-of-type(an+b)：偽類，X為選擇器， IE9+26. X:nth-last-of-type(an+b)：偽類，X為選擇器， 性IE9+，選擇前面有an + b 1個相同兄弟節點的元素。兼容性得到元素得到元素，選擇后面有an+b1個相同兄弟節點的元素。兼容27. X:first-child：偽類，選擇滿足X選擇器的元素，且這個元素是其父節點的第一個子元素。兼

42、容性IE7+28. X:last-child：偽類，選擇滿足X選擇器的元素，且這個元素是其父節點的最后一個子元素。兼容性IE9+29. X:only-child：偽類，選擇滿足X選擇器的元素，且這個元素是其父元素的元素。兼容性IE9+30. X:only-of-type：偽類，選擇X選擇的元素， IE9+得到元素，如果該元素沒有相同類型的兄弟節點時選中它。兼容性deqing/FEinterview9/382016/7/20 qiudeqing/FEinterview: 收集的前端面試題和31. X:first-of-type：偽類，選擇X選擇的元素， 性IE9+得到元素，如果該元素 是此此類型

43、元素的第一個兄弟。選中它。兼容css sprite是什么,有什么優缺點概念：將多個小圖片拼接到一個圖片中。通過backgroundposition和元素調節需要顯示的背景圖案。優點：1. 減少HTTP請求數，極大地提高頁面加載速度2. 增加圖片信息重復度，提高壓縮比，減少圖片大小3. 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現缺點：1. 圖片合并麻煩2. 維護麻煩，修改一個圖片可能需要從新布局整個圖片，樣式display: none; 與 visibility: hidden; 的區別：它們都能讓元素不可見區別：1. display:none;會讓元素完全從渲染樹中消失，渲染的

44、時候不占據任何空間；visibility: hidden;染師元素繼續占據空間，只是內容不可見2. display: none;是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節點消失由于繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式3. 修改常規流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪。讓元素從渲染樹消失，渲4. 讀屏器display: none;元素內容；會visibility: hidden;元素內容css h

45、ack原理及常用hack原理：利用不同瀏覽器對CSS的支持和hack。3）IE條件注釋特定瀏覽器樣式。常見的hack有1）屬性hack。2）選擇器結果不一樣編寫IE條件注釋：適用于IE5, IE9常見格式如下Special instructions for IE 6 here選擇器hack：不同瀏覽器對選擇器的支持不一樣/* Selector Hacks */* IE6 and below */* html #uno color: red /* IE7 */*:firstchild+html #dos color: red /* IE7, FF, Saf, Opera */ htmlbody

46、#tres color: red /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html/*/body #cuatro color: red /* Opera 9.27 and below, safari 2 */ html:firstchild #cinco color: red /* Safari 23 */htmlxmlns*= body:lastchild #seis color: red /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nthoftype(1) #siete co

47、lor: red /* safari 3+, chrome 1+, opera9+, ff 3.5+ */deqing/FEinterview10/382016/7/20 qiudeqing/FEinterview: 收集的前端面試題和body:firstoftype #ocho color: red /* saf3+, chrome1+ */media screen and (webkitmindevicepixelratio:0) #diez color: red /*/ mobile webkit */media screen and (maxdevicewidth: 480px) #v

48、eintiseis color: red /* Safari 2 3.1 */htmlxmlns*=:root #trece color: red /* Safari 2 3.1, Opera 9.25 */*|htmlxmlns*= #catorce color: red /* Everything but IE68 */:root * #quince color: red /* IE7 */*+html #dieciocho color: red /* Firefox only. 1+ */#veinticuatro, x:mozanylink color: red /* Firefox

49、3.0+ */#veinticinco, x:mozanylink, x:default color: red屬性hack：不同瀏覽器bug或方法/* IE6 */#once _color: blue /* IE6, IE7 */#doce *color: blue; /* or #color: blue */ /* Everything but IE6 */ #diecisiete color/*/: blue /* IE6, IE7, IE8 */#diecinueve color: blue9; /* IE7, IE8 */#veinte color/*/: blue9; /* IE6,

50、 IE7 acts as an !important */#veintesiete color: blue !ie; /* string after ! can be anything */specified value,computed value,used value計算方法specified value: 計算方法如下：i. 如果樣式表設置了一個值，使用這個值ii. 如果沒有設置值，這個屬性是繼承屬性，從父元素繼承iii. 如果沒設置，并且不是繼承屬性，使用css規范指定的初始值computed value: 以specified value根據規范定義的行為進行計算，通常將相對值計算為

51、絕對值，例如em根據fontsize進行計算。一些使用百分數并且需要布局來決定最終值的屬性，如width，margin。百分數就直接作為computed value。lineheight的無用于繼承值也直接作為computed value。這些值將在計算used value時得到絕對值。computed value的主要作用是used value：屬性計算后的最終值，對于大多數屬性可以通過window.getComputedStyle獲得，屬性依賴于布局，值為像素。以下backgroundposition bottom, left, right, top height, widthmarginbottom, marginleft, marginright, margintopdeqing/FEinterview11/382016/7/20 qiudeqing/FEinterview: 收集的前端面試題和minheight, minwidthpaddingbottom, paddingleft, paddingright, paddingtop textindentlink 與 import 的區別1. link 是HTML方式， impo