前端筆試題解答

時間 2019-11-17

標籤前端筆試解答欄目快樂工作简体版

原文原文鏈接

　　前段時間離職了，就花了些時間準備筆試和麪試。在網上和博客園裏都看到這些筆試題，在這裏我來作一個解答（少數題目）。有些是參考網上資料，有些是我的理解，有錯誤或不恰當的地方往指正，謝謝。javascript

1、<!DOCTYPE>標籤的定義與用法。css

答：定義：html

<!DOCTYPE>聲明位於文檔中的最前面的位置，處於<html>標籤以前。此標籤可告知瀏覽器文檔使用哪一種HTML或XHTML規範。前端

該標籤可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的HTML版本。（假如文檔中的標記不遵循doctype聲明所指定的DTD，這個文檔除了不能經過代碼校驗以外，還有可能沒法在瀏覽器中正確顯示。）java

用法：css3

a.若是須要乾淨的標記，免於表現層的混亂，用XHTML Strict DTD類型。web

b.Transitional DTD 可包含 W3C 所指望移入樣式表的呈現屬性和元素. 若是用戶使用了不支持層疊樣式表（CSS）的瀏覽器以致於你不得不使用 HTML 的呈現特性時，用Transitional DTD 類型。面試

c.Frameset DTD 被用於帶有框架的文檔。除 frameset 元素取代了 body 元素以外，Frameset DTD 等同於 Transitional DTD。ajax

2、塊級元素和行內元素都有哪些?apache

答：塊級元素：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有效，上下則無效。

3、介紹所知道的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）是識別的。

4、介紹CSS盒模型。

答：盒子模型具有內容（content）、填充（padding）、邊框（border）、邊界（margin）四個屬性。

盒子模型有兩種：IE盒子模型和標準W3C盒子模型。

標準盒子模型：

W3C 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分。

IE盒子模型：

從上圖能夠看到 IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不一樣的是：IE 盒子模型的 content 部分包含了 border 和 padding。

5、CSS層疊是什麼?介紹一下。

答：層疊指的是樣式的優先級，當產生衝突時以優先級高的爲準。

a. 開發者樣式>讀者樣式>瀏覽器樣式（除非使用!important標記）
b. id選擇符>（僞）類選擇符>元素選擇符
c. 權重相同時取後面定義的樣式

如下是一段經典的html，三個類名分別爲模塊、標題和正文。
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
大部分html頁面均可以由這種結構嵌套或者累加而成。

6、都知道哪些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值便可。

7、有時會被問到些刁鑽點的題，好比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。

8、 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服務器錯誤狀態碼。

9、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調用的問題。

10、同步和異步的區別?

答：同步：腳本會停留並等待服務器發送回覆而後再繼續。提交請求->等待服務器處理->處理完畢返回，這個期間客戶端瀏覽器不能幹任何事。

異步：腳本容許頁面繼續其進程並處理可能的回覆。請求經過事件觸發->服務器處理（這是瀏覽器仍然能夠做其餘事情）->處理完畢

若要在使用ajax請求後處理髮送請求返回的結果，最好使用同步請求。

11、JavaScript繼承有哪兩種形式，進行描述。

答：構造函數借用：在子類構造方法內，經過apply/call將this做爲參數傳入。

優勢：

　　能夠向父類構造方法傳遞參數，即給apply第二個參數：arguments；

　　父類中的屬性都被複制到子類實例中，屬性之間無干擾，不管是引用類型仍是封裝類型。

缺點：

　　每個實例對象都擁有一份父類方法的拷貝，互不干擾，因此沒法統一修改；

　　沒法擁有父類原型中定義的方法；

　　子類的實例對象不能經過 instanceof 操做符判斷是不是父類的實例。

原型鏈：指定子類的prototype爲父類的一個實例對象。

優缺點和構造函數借用恰好相反。這裏特別說明下屬性之間相互干擾（對應構造函數借用的優勢2）。

組合式繼承：上面兩種方式互補一下，即用構造方法借用來繼承父類屬性，用原型鏈來繼承父類方法。

優勢：

　　封裝保護了內部數據的完整性；

　　封裝使對象的重構更輕鬆；

　　弱化模塊間的耦合，提升對象的可重用性；

　　有助於避免命名空間衝突。

缺點：

　　私用方法很難測試；

　　必須與複雜的做用域鏈打交道，使錯誤調度更困難；

　　容易造成過分封裝；

　　JavaScript並不原生支持封裝，因此在JavaScript中實現封裝存在複雜性的問題。

12、簡述下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。

十3、 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對象。

十4、DOM操做 - 怎樣添加、移除、移動、複製、建立和查找節點(這個問題真心是基礎題，通常不會問)。

答：添加：append,prepend,after，before等等。

刪除：remove，empty。

替換：replaceWith，replaceAll。

複製：clone。

建立：creatElement,createTextNode。

查找：getElmentById,getElmentsByTagName(經過標籤name值),getElmentByName(經過元素name值)。

十5、都知道哪些很差的jQuery書寫方式。