前端面試題彙總

時間 2019-11-20

標籤端面試題彙總简体版

原文原文鏈接

常見問題：

你在昨天/本週學到了什麼？javascript
編寫代碼的哪些方面可以使你興奮或感興趣？css
談談你喜歡的開發環境。(例如操做系統，編輯器，瀏覽器，工具等等。)html
你能描述一下當你製做一個網頁的工做流程嗎？前端
你能描述一下漸進加強和優雅降級之間的不一樣嗎?html5
答案:java

何爲漸進加強、優雅降級jquery

經常使用兩種策略：要麼優雅降級（graceful degradation，一開始就構建站點的完整功能，而後針對瀏覽器測試和修復），要麼漸進加強（progressive enhancement，一開始只構建站點的最少特性，而後不斷針對各瀏覽器追加功能。web

二者間的（微妙）差異

萬一你正撓着後腦勺，試圖找出「優雅降級」和「漸進加強」之間的差異，那麼我能夠告訴你：「它們是看待同種事物的兩種觀點」。「優雅降級」和「漸進加強」都關注於同一網站在不一樣設備裏不一樣瀏覽器下的表現程度。關鍵的區別則在於它們各自關注於何處，以及這種關注如何影響工做的流程。chrome
- 若是提到了特性檢測，能夠加分
請解釋一下什麼是「語義化的 HTML」。數據庫
答案:分離結構與表現的另外一個重要方面是使用語義化的標記來構造文檔內容。一個 XHTML 元素的存在就意味被標記內容的那部分有相應的結構化的意義，沒有理由使用其餘的標記。換句話說，不要讓 CSS 使一個 HTML 元素看起來就像另外一個 HTML 元素，好比用<div>來代替<p>標記標題。

首先是關於語義（Semantics）和默認樣式的區別，默認樣式是瀏覽器設定的一些經常使用tag的表現形式，我的認爲他的主要目的就是讓你們直觀的認識標籤(markup)和屬性(attribute)的用途和做用，很明顯Hx系列看起來很像標題，由於擁有粗體和較大的字號。<strong>,<em>用來區別於其餘文字，起到了強調的做用。至於列表和表格很明顯的告訴你他們是作什麼的。

其次，語義化的網頁的好處，最主要的就是對搜索引擎友好，又了良好的結構和語義你的網頁內容天然容易被搜索引擎抓取，你網站的推廣即可以省下很多的功夫。
你如何對網站的文件和資源進行優化？
- 期待的解決方案包括：
```
    *   文件合
```
  - 文件最小化/文件壓
  - 使用 CDN 託
  - 緩存的使
  - 其
爲何利用多個域名來提供網站資源會更有效？
- 瀏覽器同一時間能夠從一個域名下載多少資源
請說出三種減小頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）
答案：
1. 儘可能減小頁面中重複的HTTP請求數量
比較直接的理解就是要減小調用其餘頁面、文件的數量。咱們在使用css格式控制的時候，常常會採用background載入不少圖形文件，而每一個 background的圖像都會產生1次HTTP請求，通常咱們爲了讓頁面生動活潑會大量使用background來加載背景圖，要改善這個情況，能夠採用css的1個有用的background-position屬性來加載背景圖，咱們將須要頻繁加載的多個圖片合成爲1個單獨的圖片，須要加載時能夠採用：background:url(....) no-repeat x-offset y-offset;的形式加載便可將這部分圖片加載的HTTP請求縮減爲1個。
2. 服務器開啓gzip壓縮
即將須要傳輸的內容壓縮後傳輸到客戶端再解壓，這樣在網絡上傳輸的數據量就會大幅減少。一般在服務器上的Apache、Nginx能夠直接開啓這個設置，也能夠從代碼角度直接設置傳輸文件頭，增長gzip的設置，也能夠從負載均衡設備直接設置。不過須要留意的是，這個設置會略微增長服務器的負擔。建議服務器性能不是很好的網站，要慎重考慮。
3. css樣式的定義放置在文件頭部
4. Javascript腳本放在文件末尾
咱們都知道網頁文件的載人是從上到下的加載的，而有不少Javascript腳本執行效率比較低下，或者在網頁前面都不須要執行的，若是將這些腳本放置到頁面比較靠前的位置，極可能會致使網站內容載入速度降低甚至無**常加載，因此通常將這些腳本放置在網頁文件末尾，必定要放置在前面的腳本要改用所謂的「後載入」方式加載，在主體網頁加載完成後再加載，防止其影響到主體網頁的加載速度。
5. 壓縮Javascript、CSS代碼
通常js、css文件中存在大量的空格、換行、註釋，這些利於閱讀，若是可以壓縮掉，將會頗有利於網絡傳輸。這方面的工具也有不少，能夠在百度裏搜索一下關鍵字「css代碼壓縮」，或者「js代碼壓縮」將會發現有不少網站都提供這樣的功能，固然了你也能夠本身寫程序來作這個工做，若是你會的話。就拿咱們這個網站來講吧。剛開始上傳這個網站的時候，個人不少Css代碼都沒有壓縮，後面發現了這個問題，我就上網找了相關的網站的壓縮代碼的功能，最後就把不少 CSS文件都壓縮了。這個壓縮比率仍是比較高的，通常都有50%左右。因而可知，這個代碼壓縮對於網頁的加載仍是頗有用的。
6. Ajax採用緩存調用
Ajax調用都採用緩存調用方式，通常採用附加特徵參數方式實現，注意其中的<script src=」xxx.js?{VERHASH}」，{VERHASH}就是特徵參數，這個參數不變化就使用緩存文件，若是發生變化則從新下載新文件或更新信息。
7. 儘量減小DCOM元素
這個很好理解，就是儘量減小網頁中各類<>元素數量，例如<table>的冗餘很嚴重，而咱們徹底能夠用<div>取代之。
8. 使用多域名負載網頁內的多個文件、圖片
9. 使用CDN
10. 在服務器端配置control-cache last-modify-date
11.在服務器配置Entity-Tag if-none-match
若是你參與到一個項目中，發現他們使用 Tab 來縮進代碼，可是你喜歡空格，你會怎麼作？
- 建議這個項目使用像 EditorConfig (http://editorconfig.org/) 之類的規
- 爲了保持一致性，接受項目原有的風
- 直接使用 VIM 的 retab 命
請寫一個簡單的幻燈效果頁面
使用打了CSS3
- 若是不使用JS來完成，能夠加分
你都使用哪些工具來測試代碼的性能？
- Profiler, JSPerf, Dromae
若是今年你打算熟練掌握一項新技術，那會是什麼？
請談一下你對網頁標準和標準制定機構重要性的理解。
什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？
答案：

什麼是FOUC(文檔樣式短暫失效)?
若是使用import方法對CSS進行導入,會致使某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled Content),簡稱爲FOUC。

緣由大體爲：
1，使用import方法導入樣式表。
2，將樣式表放在頁面底部
3，有幾個樣式表，放在html結構的不一樣位置。

其實原理很清楚：當樣式表晚於結構性html加載，當加載到此樣式表時，頁面將中止以前的渲染。此樣式表被下載和解析後，將從新渲染頁面，也就出現了短暫的花屏現象。

解決方法：
使用LINK標籤將樣式表放在文檔HEAD中。

HTML相關問題：

doctype（文檔類型）的做用是什麼？你知道多少種文檔類型？
一、doctype（文檔類型）的做用是什麼？

doctype是DocumentType的簡稱即文檔類型，doctype聲明位於文檔中最前面的位置，處於標籤以前，告知瀏覽器使用的是哪一種規範。

二、你知道多少種文檔類型？

   常見的文檔類型有 Strict、Transitional 以及 Frameset 三種。

三、文檔爲何要分類型？

   若是文檔不分類型，各瀏覽器就會造成多種寫法，假如IE用<title>標籤做爲標題、火狐瀏覽器用<caption>標籤做爲標題，而另外一種瀏覽器可能採用<mytitle>，這對於開發者和用戶來講簡直是災難。W3C（萬維網聯盟World Wide Web Consortium）製做了對全部方面都平衡的分歧解決方案，而且各瀏覽器沒有異議，因而用<!doctype>（注意：做爲一個特殊的標籤，它是不須要閉合的）標籤來引入W3C的dtd文件，以達到規範頁面的效果。這爲瀏覽器的文檔標準的統一以及開發人員和用戶帶了了便利。而html5不是基於SGML實現的，所以html不須要引入DTD，因此html5能夠簡單的聲明一下<!doctype html>。

四、若是不聲明doctype？

   不寫doctype，瀏覽器會進入quirks mode （混雜模式）。即，若是不聲明doctype，瀏覽器不引入w3c的標準，那麼早期的瀏覽器會按照本身的解析方式渲染頁面。瀏覽器採用自身方式解析頁面的行爲稱爲"quirks mode（混雜模式也稱怪異模式）"；採用w3c方式解析就是"strict mode（標準模式）"。若是徹底採用strictmode就不會出任何的差錯，但這樣會下降程序的容錯率，加劇開發人員的難度，所以在standards mode 裏面分出來 Almost Standards Mode(接近標準模式）。如圖所示：

5、如何判斷瀏覽使用哪一種方式解析css？

    沒有doctype聲明的採用quirks mode解析，對於有doctype的大多數採用standard mord。特殊狀況：對於那些瀏覽器不能識別的doctype ,瀏覽器採用quirks mode；沒有聲明DTD或者html版本聲明低於4.0採用quirks mode，其餘使用standard mode；ie6中，若是在doctype聲明前有一個xml聲明(好比:<?xml version="1.0" encoding="iso-8859-1"?>)，則採用quirks mode解析。

六、瀏覽器標準模式和怪異模式之間的區別是什麼？
標準模式：瀏覽器根據規範呈現頁面
混雜模式（怪異模式）：頁面以一種比較寬鬆的兼容方式顯示。

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

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

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

七、js如何判斷瀏覽器正在以何種方式解析？

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

例如：
```
function getMode{
    var _cm = docoment.compatMode;
    if(_cm == 'CSS1Compat'){
         return "strict"
    } 
    if(_cm == 'BackCompat' ){
         return  'quirks'
    } 
}
```
```
八、什麼時候使用document.body 什麼時候使用document.documentElement？
```
在quirks 模式下,document.documentElement沒法正確取到clietHeight scrollHeight等值，好比clietHeight=0,此時計算頁面高度的時候須要用document.body來代替document.documentElement.
document.body是 DOM中Document對象裏的body節點， document.documentElement是文檔對象根節點(html)的引用。 document.body.scrollHeight是 body元素的滾動高度，document.documentElement.scrollHeight爲頁面的滾動高度。
瀏覽器標準模式和怪異模式之間的區別是什麼？
標準模式：瀏覽器根據規範呈現頁面
混雜模式（怪異模式）：頁面以一種比較寬鬆的兼容方式顯示。

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

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

　　在quirks mode中：width則是元素的實際寬度，內容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + 　border-right-width)
使用 XHTML 的侷限有哪些？
答案：A:XHTML較爲嚴格，標籤必須閉合，必需要body，head等
若是頁面使用 'application/xhtml+xml' 會有什麼問題嗎
答案:一些老的瀏覽器並不兼容
若是網頁內容須要支持多語言，你會怎麼作？
答案:採用統一編碼UTF-8模式
在設計和開發多語言網站時，有哪些問題你必需要考慮
答案：見本博客中多語言網站設計須要注意的問題這篇文章
data-屬性的做用是什麼？
答案：

【HTML5】'data-'屬性的做用是什麼?

Resig在2008年在其博客中介紹過HTML5的data-屬性，現現在HTML5在如火如荼地推廣，彷佛國內的技術有些延遲，這篇博文能夠在這裏找到。

data-爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的dataset屬性獲取，不支持該屬性的瀏覽器能夠經過 getAttribute方法獲取。ppk提到過使用rel屬性，lightbox庫推廣了rel屬性，HTML5提供了data-作替代，這樣能夠更好地使用自定義的屬性。

<div data-author="david" data-time="2011-06-20"
data-comment-num="10" data-category="javascript">
....
</div>

上面HTML代碼提供了單個文章所擁有的一些屬性。經過JS代碼能夠得到這些自定義的屬性。

var post = document.getElementsByTagName('div')[0];
post.dataset; // DOMStringMap
post.dataset.commentNum; // 10

須要注意的是，data-以後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峯風格。

並非全部的瀏覽器都支持.dataset屬性，測試的瀏覽器中只有Chrome和Opera支持
若是把 HTML5 看做作一個開放平臺，那它的構建模塊有哪些？
答案：<nav>, <header>,<section>, <footer>
請描述一下 cookies，sessionStorage 和 localStorage 的區別？
答案：

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，能夠方便的在web請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。

sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage的概念很特別，引入了一個「瀏覽器窗口」的概念。sessionStorage是在同源的同學口（或tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。關閉窗口後，sessionStorage即被銷燬。同時「獨立」打開的不一樣窗口，即便是同一頁面，sessionStorage對象也是不一樣的。
Web Storage帶來的好處：
1. 減小網絡流量：一旦數據保存在本地後，就能夠避免再向服務器請求數據，所以減小沒必要要的數據請求，減小數據在瀏覽器和服務器間沒必要要地來回傳遞。
2. 快速顯示數據：性能好，從本地讀數據比經過網絡從服務器得到數據快得多，本地數據能夠即時得到。再加上網頁自己也能夠有緩存，所以整個頁面和數據都在本地的話，能夠當即顯示。
3. 臨時存儲：不少時候數據只須要在用戶瀏覽一組頁面期間使用，關閉窗口後數據就能夠丟棄了，這種狀況使用sessionStorage很是方便。
瀏覽器本地存儲與服務器端存儲之間的區別

其實數據既能夠在瀏覽器本地存儲，也能夠在服務器端存儲。

瀏覽器端能夠保存一些數據，須要的時候直接從本地獲取，sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。

服務器端也能夠保存全部用戶的全部數據，但須要的時候瀏覽器要向服務器請求數據。

1.服務器端能夠保存用戶的持久數據，如數據庫和雲存儲將用戶的大量數據保存在服務器端。

2.服務器端也能夠保存用戶的臨時會話數據。服務器端的session機制，如jsp的 session 對象，數據保存在服務器上。實現上，服務器和瀏覽器之間僅需傳遞session id便可，服務器根據session id找到對應用戶的session對象。會話數據僅在一段時間內有效，這個時間就是server端設置的session有效期。

服務器端保存全部的用戶的數據，因此服務器端的開銷較大，而瀏覽器端保存則把不一樣用戶須要的數據分佈保存在用戶各自的瀏覽器中。

瀏覽器端通常只用來存儲小數據，而服務器能夠存儲大數據或小數據。

服務器存儲數據安全一些，瀏覽器只適合存儲通常數據。

sessionStorage 、localStorage 和 cookie 之間的區別

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

區別：
1. cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。
2. 存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
3. 數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。
4. 做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。
5. Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。
6. Web Storage 的 api 接口使用更方便。
sessionStorage 和 localStorage 之間的區別

見上面的區別三、4

sessionStorage與頁面 js 數據對象的區別

頁面中通常的 js 對象或數據的生存期是僅在當前頁面有效，所以刷新頁面或轉到另外一頁面這樣的從新加載頁面的狀況，數據就不存在了。

而sessionStorage 只要同源的同學口（或tab）中，刷新頁面或進入同源的不一樣頁面，數據始終存在。也就是說只要這個瀏覽器窗口沒有關閉，加載新頁面或從新加載，數據仍然存在。

CSS 相關問題：

描述下「reset」 CSS 文件的做用和使用它的好處。
答案：由於瀏覽器的品種不少，每一個瀏覽器的默認樣式也是不一樣的，因此定義一個css reset可使各瀏覽器的默認樣式統一，不少地方都提到過CSS Reset這個概念，並且細心的朋友會發現，許多大網站的CSS文件中也含有CSS Reset內容。

CSS Reset是什麼？

其實簡單的說就是重置瀏覽器的CSS默認屬性。

爲何要重置它？

由於瀏覽器的品種不少，每一個瀏覽器的默認樣式也是不一樣的，好比<button>標籤，在IE瀏覽器、Firefox瀏覽器以及Safari瀏覽器中的樣式都是不一樣的，因此，經過重置button標籤的CSS屬性，而後再將它統必定義，就能夠產生相同的顯示效果。

CSS Reset的內容是什麼？

最簡單的CSS Reset內容寥寥幾行就能完成：

* { padding: 0; margin: 0; border: 0; }

這個方法讓全部的選擇器的padding、margin和border都設置成0。也有內容更多的，好比YUI的CSS Reset內容：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td {}

解釋下浮動和它的工做原理。
答案：見博客中CSS Float浮動原理文章
列舉不一樣的清除浮動的技巧，並指出它們各自適用的使用場景。
答案：1.使用空標籤清除浮動。
   這種方法是在全部浮動標籤後面添加一個空標籤定義css clear:both. 弊端就是增長了無心義標籤。
2.使用overflow。
   給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
3.使用after僞對象清除浮動。
   該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；2、content屬性是必須的，但其值能夠爲空，藍色理想討論該方法的時候content屬性的值設爲」.」，但我發現爲空亦是能夠的。
<style type=」text/css」>
<!–
    *{margin:0;padding:0;}
    body{font:36px bold; color:#F00; text-align:center;}
    #layout{background:#FF9;}
    #layout:after{display:block;clear:both;content:」";visibility:hidden;height:0;}
    #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
    #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=」layout」>
    <div id=」left」>Left</div>
    <div id=」right」>Right</div>
</div>
此三種方法各有利弊，使用時應擇優選擇，比較之下第二種方法更爲可取
解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。
答案：CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。
你最喜歡的圖片替換方法是什麼，你如何選擇使用。
討論CSS hacks，條件引用或者其餘。
答案：在這個瀏覽器百花爭鳴的時代，做爲前端開發的咱們爲了咱們漂亮的設計能適應各個瀏覽器可爲煞費苦心，主要體如今javascript和css上面。javascript我此次就不談了，先說說css。
爲了適應不一樣瀏覽器不一樣的版本（版本主要就ie來講），ie這朵奇葩如今咱們要兼容6-9，它的10也快出來了。。。在ie下咱們能夠寫條件註釋來區分ie和其餘瀏覽器，以及ie的版本，這些請你們自行google。這篇文章主要討論的是css hack。下面廢話補多說了，直接上代碼

<!DOCTYPE html>
<html>
<head>
    <title>Css Hack</title>
    <style>
    #test
    {
        width:300px;
        height:300px;

        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow\0;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/
    }
    :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/
    </style>
</head>
<body>
    <div id="test">test</div>
</body>
</html>

  上面這段代碼你們能夠直接copy出來，保存成html在各瀏覽器試試。下面我來分析下：
background-color:blue; 各個瀏覽器都認識，這裏給firefox用；

background-color:red\9;\9全部的ie瀏覽器可識別；

background-color:yellow\0; \0 是留給ie8的，但筆者測試，發現最新版opera也認識，汗。。。不過且慢，後面自有hack寫了給opera認的，因此，\0咱們就認爲是給ie8留的；

+background-color:pink; + ie7定了；

_background-color:orange; _專門留給神奇的ie6；

:root #test { background-color:purple\9; } :root是給ie9的，網上流傳了個版本是 :root #test { background-color:purple\0;}，呃。。。這個。。。，新版opera也認識，因此經筆者反覆驗證最終ie9特有的爲:root 選擇符 {屬性\9;}

@media all and (min-width:0px){ #test {background-color:black\0;} } 這個是總是跟ie搶着認\0的神奇的opera，必須加個\0,否則firefox，chrome，safari也都認識。。。

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

好了就這麼多了，特別注意以上順序是不能夠改變的。css hack雖然能夠解決個瀏覽器之間css顯示的差別問題，可是畢竟不符合W3C規範，咱們平時寫css最好是按照標準來，這樣對咱們之後維護也是大有好處的，實在不行再用
如何爲有功能限制的瀏覽器提供網頁？
- 你會使用哪些技術和處理方法
如何視覺隱藏網頁內容，只讓它們在屏幕閱讀器中可用？
你用過柵格系統嗎？若是使用過，你最喜歡哪一種？
你用過媒體查詢，或針對移動端的佈局/CSS 嗎？
你熟悉 SVG 樣式的書寫嗎？
如何優化網頁的打印樣式？
在書寫高效 CSS 時會有哪些問題須要考慮？
使用 CSS 預處理器的優缺點有哪些？(SASS，Compass，Stylus，LESS)
- 描述下你曾經使用過的 CSS 預處理的優缺點
若是設計中使用了非標準的字體，你該如何去實現？
- Webfonts (字體服務例如：Google Webfonts，Typekit 等等。
解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？
解釋一下你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。

JS相關問題：

解釋下事件代理。
解釋下 JavaScript 中 this 是如何工做的。
解釋下原型繼承的原理。
AMD vs. CommonJS？
參考答案: AMD是依賴提早加載,CMD是依賴延時加載
什麼是哈希表？
解釋下爲何接下來這段代碼不是 IIFE(當即調用的函數表達式)：function foo(){ }();.
- 要作哪些改動使它變成 IIFE
描述如下變量的區別：null，undefined 或 undeclared？
- 該如何檢測它們
什麼是閉包，如何使用它，爲何要使用它？
請舉出一個匿名函數的典型用例？
解釋「JavaScript 模塊模式」以及你在什麼時候使用它。
- 若是有提到無污染的命名空間，能夠考慮加分
- 若是你的模塊沒有本身的命名空間會怎麼樣
你是如何組織本身的代碼？是使用模塊模式，仍是使用經典繼承的方法？
請指出 JavaScript 宿主對象和原生對象的區別？
指出下列代碼的區別： `javascrip

function Person()

some cod

}var person = Person();var person = new Person();`

.call 和 .apply 的區別是什麼？
undefined 和 null 的區別是什麼？
請解釋 Function.prototype.bind 的做用？
你什麼時候優化本身的代碼？
你能解釋一下 JavaScript 中的繼承是如何工做的嗎？
在何時你會使用 document.write()？
- 大多數生成的廣告代碼依舊使用 document.write()，雖然這種用法會讓人很不爽
請指出瀏覽器特性檢測，特性推斷和瀏覽器 UA 字符串嗅探的區別？
請儘量詳盡的解釋 AJAX 的工做原理。
請解釋 JSONP 的工做原理，以及它爲何不是真正的 AJAX。
你使用過 JavaScript 模板系統嗎？
- 若有使用過，請談談你都使用過哪些庫，好比 Mustache.js，Handlebars 等等
請解釋變量聲明提高。
請描述下事件冒泡機制。
"attribute" 和 "property" 的區別是什麼？
爲何擴展 JavaScript 內置對象不是好的作法？
爲何擴展 JavaScript 內置對象是好的作法？
請指出 document load 和 document ready 兩個事件的區別。
== 和 === 有什麼不一樣？
你如何從瀏覽器的 URL 中獲取查詢字符串參數。
請解釋一下 JavaScript 的同源策略。
請描述一下 JavaScript 的繼承模式。
如何實現下列代碼： `javascrip

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

描述一種 JavaScript 中實現 memoization(避免重複運算)的策略。
什麼是三元表達式？「三元」表示什麼意思？
函數的參數元是什麼？
什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？

jQuery 相關問題：

解釋"chaining"。
函數中的鏈式結構，如$().().()
解釋"deferreds"。延遲執行,減小回調函數的嵌套
你知道哪些針對 jQuery 的優化方法。
參考答案:(1) 用ID選擇器 (2) 緩存jquery對象，方便後面使用。(3)使用data緩存數據.
請解釋 .end() 的用途。.
參考答案：<div id="test">

    <h1>jQuery end()方法</h1>
    <p>講解jQuery中end()方法。</p>
</div>
JS代碼：

$(document).ready(function() {
    $("#test").click(function() {
        $(this).find("p").hide().end().hide();
    });
});
點擊id爲test的div時，首先找到div裏邊的p標籤，將其隱藏。接下來使用end()方法結束了對p標籤的引用，此時返回的是#test(jQuery對象)，從然後邊的hide()方法隱藏了div。這樣相信你們已經理解了jQuery中end()方法。
你如何給一個事件處理函數命名空間，爲何要這樣作？
請說出你能夠傳遞給 jQuery 方法的四種不一樣值。
- 選擇器（字符串），HTML（字符串），回調函數，HTML元素，對象，數組，元素數組，jQuery對象等
什麼是效果隊列？
請指出 .get()，[]，eq() 的區別。

參考答案:<p style="color:yellow">緋雨</p>

使用eq來得到第一個p標籤的color值：

$("p").eq(0).css("color")  //由於eq(num)返回的是個jq對象，因此能夠用jq的方法css

使用get來得到第一個p標籤的color值：

$("p").get(0).style.color  //由於get(num)返回的是個html對象，因此要使用傳統的HTML對象方法，jq對象此時就沒用了。

固然，你也能夠get(num)後把對象轉爲jq的對象再進行操做：

$($("p").get(0)).css("color")

請指出 .bind()，.live() 和 .delegate() 的區別。
請指出 $ 和 $.fn 的區別，或者說出 $.fn 的用途。
請優化下列選擇器： `javascrip

$(".foo div#bar:eq(0)")`

'delegate()' 和 'live()'有什麼區別?

JS代碼示例：

`javascrip

~~3.14`

問題：上面語句的返回值是什麼？ 答案：3

`javascrip

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

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

`javascrip

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

問題：window.foo 的值是什麼？ 答案："bar" 只有 window.foo 爲假時的纔是上面答案，不然就是它自己的值。

`javascrip

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

問題：上面兩個 alert 的結果是什麼 答案: "Hello World" 和 ReferenceError: bar is not defined

`javascrip

var foo = []

foo.push(1)

foo.push(2);`

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

`javascrip

var foo = {}

foo.bar = 'hello';`

問題：foo.length 的值是什麼？ 答案: undefined

可選的有趣問題：

你編寫過的最酷的代碼是什麼？其中你最自豪的是什麼？
在你使用過的開發工具中，最喜歡哪一個？
你有什麼業餘項目嗎？是哪一種類型的？
你最愛的 IE 特性是什麼？
你是否正在或曾經在一艘船上。(不懂這個幽默）

這句話是直譯。在英語裏 ship 有一個很重要的意思是 交付，因此這句話能夠理解爲：你是否正在或曾經交付過產品？（也就是正在一個產品項目的開發過程當中，或是已經交付過開發完成的產品或項

解釋cornify的重要性？(本題徹底摸不到頭腦）

獨角獸是西方文化中很是廣泛的一種吉祥物圖騰，相似於中國的龍鳳麒麟一類。在西方，開發者常使用獨角獸 + 彩虹的設計風格來生成一些裝飾用的圖像/動畫，這些東西能夠用來對網站進行一種美化。然而是否真的算美化那就見仁見智了，能夠僅僅看作是一種人文文化在開發者世界裏的影射

在一張紙上，垂直寫下ABCDE，而後不用任何代碼，將他們到序排列。
- 靜靜的看他們是否將紙反轉
海盜仍是忍者？
- 若是是二者的合體，並有恰當理由，能夠加分。若是是殭屍猴子海盜加忍者加兩分。(注，此題文化差別過大）

海盜與忍者之爭是互聯網文化「動漫化」的標誌性話題。首先，它們都很酷，都深受 Geeks 的喜好，然而他們卻各自表明了一種不一樣的風格。海盜是西式的，崇尚「工具化」，刀劍和槍炮是他們稱霸的依仗；忍者則是東方文化的典型，更注重精神和內在的修行，摒棄「外物依賴」。對於開發者而言，兩者的結合固然是最完美的。至於殭屍猴子，大概是說不拘泥於「外物」和「內在」之爭，更加開放，更加包容的意思。