前段時間離職了，就花了些時間准備筆試和面試。在網上和博客園里都看到這些筆試題，在這里我來做一個解答（少數題目）。有些是參考網上資料，有些是個人理解，有錯誤或不恰當的地方往指正，謝謝。
一、<!DOCTYPE>標簽的定義與用法。
答：定義：
<!DOCTYPE>聲明位於文檔中的最前面的位置，處於<html>標簽之前。此標簽可告知瀏覽器文檔使用哪種HTML或XHTML規范。
該標簽可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的HTML版本。（假如文檔中的標記不遵循doctype聲明所指定的DTD，這個文檔除了不能通過代碼校驗之外，還有可能無法在瀏覽器中正確顯示。）
用法：
a.如果需要干凈的標記，免於表現層的混亂，用XHTML Strict DTD類型。
b.Transitional DTD 可包含 W3C 所期望移入樣式表的呈現屬性和元素. 如果用戶使用了不支持層疊樣式表（CSS）的瀏覽器以至於你不得不使用 HTML 的呈現特性時，用Transitional DTD 類型。
c.Frameset DTD 被用於帶有框架的文檔。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同於 Transitional DTD。
二、塊級元素和行內元素都有哪些?
答：塊級元素：div,p,h1-h6,ul,ol,dl,form,table,hr
行列元素：a,b,i,span,label,input,select,img,strong,em,font,textarea,u
注：設置寬度width無效。設置高度height無效，可以通過line-height來設置。設置margin 只有左右margin有效，上下無效。設置padding 只有左右padding有效，上下則無效。
三、介紹所知道的CSS hack技巧(如：_， *， +， \9， !important 之類)。
答：_width針對於ie6。*width,+width針對於ie6,7。
color: red\9;/*IE8以及以下版本瀏覽器*/（但是測試可以兼容到ie10。
*+html與*html是IE特有的標簽, firefox暫不支持.而*+html又為IE7特有標簽（但是測試*html兼容ie6-10。*+兼容ie7-10）。
!important 在IE中會被忽視，ie6,7,8不識別，ie9+（包括ie9）是識別的。
四、介紹CSS盒模型。
答：盒子模型具備內容（content）、填充（padding）、邊框（border）、邊界（margin）四個屬性。
盒子模型有兩種：IE盒子模型和標准W3C盒子模型。
標准盒子模型：
W3C 盒子模型的范圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。
IE盒子模型：
從上圖可以看到 IE 盒子模型的范圍也包括 margin、border、padding、content，和標准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。
五、CSS層疊是什么?介紹一下。
答：層疊指的是樣式的優先級，當產生沖突時以優先級高的為准。
a. 開發者樣式>讀者樣式>瀏覽器樣式（除非使用!important標記 ）
b. id選擇符>（偽）類選擇符>元素選擇符
c. 權重相同時取后面定義的樣式
以下是一段經典的html，三個類名分別為模塊、標題和正文。
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
大部分html頁面都可以由這種結構嵌套或者累加而成。
六、都知道哪些CSS瀏覽器兼容性問題。
答：Ie6下浮動時margin翻倍問題，增加一個display:inline樣式。
Ie6下height不能設置為1，添加overflow:hidden樣式。
Ie6下text-indent在display：inline-block時圖片也會跟着一起縮進，改為block即可。
Ie6下面margin失效，只有當container定義width或者zoom：1或者height: 1%的情況下，margin才有作用。
Title下面包括開心、所有關鍵字時，ie6下面不能顯示頁面，為空白的。將
<title></title>放置在<meta http-equiv=”Content-Type”
content=”text/html;charset=utf-8”/>。
z-index失效，給父級帶有position：relative的標簽中添加z-index，並且值要大於想要蓋過的模塊的z-index值即可。
七、有時會被問到些刁鑽點的題，比如position值都有哪些，CSS3都有哪些新內容...
答：position：relative相對定位，absolute絕對定位相對於static定位以外的父級元素進行定位，fixed絕對定位相對於窗口，static沒有定位，inherit繼承父級元素的position值。
css3：box-shadow陰影，border-radius圓角，transform中skew扭曲度，rotate旋轉，scale縮放等，transition中all 0.5s ease 0s過渡時間。before和after。
八、 HTTP協議的狀態消息都有哪些?(如200、302對應的描述)。
答：Web服務器用來告訴客戶端，發生了什么事，也就是一種快速解決問題的方式。
200：OK，服務器成功處理了請求。
301/302：Moved Permanently(重定向)，請求的URL已移走，一個是永久轉移，一個是臨時轉移。Response中應該包含一個Location URL, 說明資源現在所處的位置。
304：Not Modified（未修改），客戶的緩存資源是最新的，要客戶端使用緩存。
404：HTTP/1.1 404 Not Found，服務器無法找到所請求的URL。
501：Internal Server Error，服務器遇到一個錯誤，使其無法對請求提供服務。
503：Service Unavailable（未提供此服務），服務器目前無法為請求服務服務，但過一段時間就可以恢復服務。
1XX信息性狀態碼。
2XX成功狀態碼。
3XX重定向狀態碼。
4XX客戶端錯誤狀態碼。
5XX服務器錯誤狀態碼。
九、AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解決辦法?
答：全稱Asynchronous Javascript + XML，是一種用於創建快速動態網頁的技術。是一種瀏覽器和服務器交互技術，基本思想是允許一個瀏覽器向一個遠程頁面/服務做異步的http調用，並且用收到的數據來更新一個當前web頁面而不必刷新整個頁面。該技術能夠改進客戶端的體驗。
交互流程：
跨域問題：
跨域問題簡單的理解就是因為JS同源策略的限制（安全性限制），a.com域名下的JS無法操作b.com或c.a.com下的對象。Ajax可以采用jsonp來實現跨域。
JSONP的最基本的原理是：
動態添加一個<script>標簽，而script標簽的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協議無關了。當GET請求從被調用頁面返回時，可以返回一段JavaScript代碼，這段代碼會自動調用主頁面中的一個callback函數。
Jsonp優點：
不受同源策略的影響，它的兼容性更好，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支持；並且在請求完畢后可以通過調用callback的方式回傳結果。
Jsonp缺點：
它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題。
十、同步和異步的區別?
答：同步：腳本會停留並等待服務器發送回復然后再繼續。提交請求->等待服務器處理->處理完畢返回，這個期間客戶端瀏覽器不能干任何事。
異步：腳本允許頁面繼續其進程並處理可能的回復。請求通過事件觸發->服務器處理（這是瀏覽器仍然可以作其他事情）->處理完畢
若要在使用ajax請求后處理發送請求返回的結果，最好使用同步請求。
十一、JavaScript繼承有哪兩種形式，進行描述。
答：構造函數借用：在子類構造方法內，通過apply/call將this作為參數傳入。
優點：
可以向父類構造方法傳遞參數，即給apply第二個參數：arguments；
父類中的屬性都被復制到子類實例中，屬性之間無干擾，無論是引用類型還是封裝類型。
缺點：
每一個實例對象都擁有一份父類方法的拷貝，互不干擾，所以無法統一修改；
無法擁有父類原型中定義的方法；
子類的實例對象不能通過 instanceof 操作符判斷是否是父類的實例。
原型鏈：指定子類的prototype為父類的一個實例對象。
優缺點和構造函數借用剛好相反。這里特別說明下屬性之間相互干擾（對應構造函數借用的優點2）。
組合式繼承：上面兩種方式互補一下，即用構造方法借用來繼承父類屬性，用原型鏈來繼承父類方法。
優點：
封裝保護了內部數據的完整性；
封裝使對象的重構更輕松；
弱化模塊間的耦合，提高對象的可重用性；
有助於避免命名空間沖突。
缺點：
私用方法很難測試；
必須與復雜的作用域鏈打交道，使錯誤調度更困難；
容易形成過度封裝；
JavaScript並不原生支持封裝，所以在JavaScript中實現封裝存在復雜性的問題。
十二、簡述下cookie的操作，還有cookie的屬性都知道哪些。
答：cookie是瀏覽器提供的一種機制，它將document 對象的cookie屬性提供給JavaScript。可以由JavaScript對其進行控制，而並不是JavaScript本身的性質。cookie是 存於用戶硬盤的一個文件，這個文件通常對應於一個域名，當瀏覽器再次訪問這個域名時，便使這個cookie可用。因此，cookie可以跨越一個域名下的 多個網頁，但不能跨越多個域名使用。可用在保存用戶登錄狀態。跟蹤用戶行為。定制頁面。創建購物車。
$.cookie(‘cookieName’,'cookieValue’，｛expires：7，path：’/'，domain: ‘chuhoo.com’，secure: false，raw:false｝);
注：expires：有效時間；path：設置能夠讀取cookie的頂級目錄；domain： 創建cookie所在網頁所擁有的域名；secure：默認是false，如果為true，cookie的傳輸協議需為https；raw：默認為 false，讀取和寫入時候自動進行編碼和解碼（使用encodeURIComponent編碼，使用decodeURIComponent解碼），關閉 這個功能，請設置為true。
十三、 IE與FF的JS兼容性都知道哪些。
答：a.監聽事件時：
IE中識別target.attachEvent(type,listener);
FF中識別target.addEventListener(type,listener,useCapture);
target： 文檔節點、document、window 或 XMLHttpRequest。
type： 字符串，事件名稱，FF不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。
useCapture ：是否使用捕捉，一般用 false 。
例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
b.在IE中，可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象；Firefox下只能使用getElementById("idName")來取得id為idName的HTML對象。
c.在 IE 中不能使用 const 關鍵字。
d.IE可以通過id或者name訪問這個frame對應的window對象，而Firefox只可以通過name來訪問這個frame對應的window對象。
十四、DOM操作 - 怎樣添加、移除、移動、復制、創建和查找節點(這個問題真心是基礎題，一般不會問)。
答：添加：append,prepend,after，before等等。
刪除：remove，empty。
替換：replaceWith，replaceAll。
復制：clone。
創建：creatElement,createTextNode。
查找：getElmentById,getElmentsByTagName(通過標簽name值),getElmentByName(通過元素name值)。
十五、都知道哪些不好的jQuery書寫方式。
答：定義變量時，全局變量不添加var，因為這個是刪除不掉的。還有就是像寫流水賬一樣的編程方式，將很多東西都蹂躪在一起，沒有將不同的對象和功能給區分開。定義一個對象最好是以函數表達式的方式定義，盡量不要定義對象字面量，這樣里面的私有屬性或者方法容易被用戶修改，也就是不安全。
十六、都使用和了解過哪些編輯器?都使用和了解過哪些日常工具?
答：我一般采用webStorm（網絡風暴），是jetbrains公司開發的。
我選擇它的主要原因是它能自動縮進和自動閉合，但是添加url和href的方式我不是很喜歡。要自己寫文件名，但是也還能接受，因為只要你輸對一個單詞就能自定彈出對應文件名。
DW添加地址方式很好，但是不能自動縮進和自動閉合，我不喜歡。
十七、都知道有哪些瀏覽器內核?開發過的項目都兼容哪些瀏覽器?
答：IE內核Trident,FF內核Gecko,Safari和Chrome內核Webkit。
兼容IE6+、FF、Chrome、遨游和360瀏覽器。
十八、瀑布流布局或者流式布局是否有了解。
答：瀑布流布局：采用絕對定位來給每張圖片或者模塊定位。
流式布局：采用浮動式給模塊定位。可以做出響應式布局。
十九、HTML5都有哪些新的JS API?
答：document.querySelector("selector");
selector:根據CSS選擇器返回第一個匹配到的元素，如果沒有匹配到，則返回null。
document.querySelectorAll("selector");
selector:根據CSS選擇器返回所有匹配到的元素數組，如果沒有匹配到，則返回空數組;
document.getElementsByClassName("selector");
selector:根據類選擇器返回所有匹配到的元素數組，如果沒有匹配到，則返回空數組。
二十、前端優化知識都知道哪些?
答：a 減少http請求，合並css、js文件，apache的ant。
b 減少請求文件的大小，壓縮css、js文件，在線javascript compress。
c 采用sprite拼接圖片。
d 如果有廣告欄之類的模塊，用iframe。
e 將js文件放到末尾，這個頁面顯示就不必等js文件加載完以后再顯示，也就是頁面不會出現空白狀態。