前端面試題及答案整理(二)

各公司秋招很快就開始了，最近在準備面試的東西，乾脆將發現的各種面試題整理一下共享出來，大部分面試題是沒有標準答案的，我給出的答案也是僅供參考，若是有更好的解答歡迎在評論區留言。

上一篇從常見數據結構算法、JavaScript兩個方面從面試的角度進行了整理，本文將對其他內容進行補充。

Part1 CSS相關

1 內聯元素（inline-element）和塊元素（block element）分別有哪些

常見內聯元素（行內元素）有a、b、span、i 、em、input、select 、img等

常見的塊元素有div、ul、li、h1~h六、talbe、ol、 ul、td、p等

2 浮動相關

浮動佈局指將元素脫離普通流/文檔流，使其能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到塊級元素的佈局而只會影響內聯元素的排列。

正由於浮動元素脫離了文檔流，其父級元素並不知道它的存在，所以會表現爲高度爲0，不管浮動元素如何變化，其父級元素也不會隨它變化將其包裹，這種現象也叫做「高度塌陷」。

下面的例子中，無論#floatDom高度如何變化，#parent高度始終爲0，這將致使父元素邊框不能被撐開，背景不能顯示等問題

<div id="parent">
  <div id="floatDOM" style="float:left;width:300px;height:300px;">
</div>

由於高度塌陷的存在（這每每不是咱們所指望的），必需要清除浮動，下面介紹清除浮動的幾種方式：

• 在浮動元素後添加樣式含有「clear：both」的元素

<div id="parent">
  <div id="floatDOM" style="float:left;width:300px;height:300px;">
  <div style="clear:both">
</div>

也能夠添加br標籤，其自帶clear：both屬性

<div id="parent">
  <div id="floatDOM" style="float:left;width:300px;height:300px;">
  <br/>
</div>

利用這種方式清除浮動的優勢在於通俗易懂，容易掌握，缺點也很明顯，增長了不少無心義的標籤，這個在後期維護中是很痛苦的。

• 爲父元素添加樣式「overflow:hidden"

<div id="parent" style="overflow:hidden">
  <div id="floatDOM" style="float:left;width:300px;height:300px;">
</div>

利用這種方式不存在結構和語義化問題並且代碼量極少，然而在內容增多的時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素。

• 利用：after僞元素

<style type="text/css">
   .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
   .clearfix { *zoom:1; }
</style>

<div id="parent" class="clearfix">
   <div id="floatDOM" style="float:left;width:300px;height:300px;">
</div>

利用這種方式，僅需在目標元素上添加一個類，也是目前使用最多的一種方式。

Reference
iyunlu.com/view/css-xht

3 相對佈局（relative）和絕對佈局的區別（absolute）

相對佈局和絕對佈局最本質的區別在因而否脫離文檔流。

相對佈局未脫離文檔流，即設置元素相對佈局後，文檔流仍然保持其原始的位置，經過設置top、left等屬性可設置其相對於原始位置的偏移量。

絕對佈局是脫離文檔流的，即文檔流中的要素並不知道該絕對佈局要素的存在，絕對佈局的定位是相對於父元素中具備相對佈局或絕對佈局的要素，若都不存在則相對於body佈局。

4 盒模型(Box Model)

盒模型定義了一個元素的顯示形式，包括content（內容）、padding（內邊距）、border（邊界）以及margin（外邊距）幾部分組成，目前有兩種盒模型標準，一種是W3C標準盒子模型，還有一種是IE盒子模型，採用的是Microsoft本身的標準。

這兩種盒模型的區別主要在於元素寬度的計算。標準模式下css中定義的width即爲content（內容）的寬度，整個元素在頁面中佔有的寬度，計算公式爲：

DOM_Width =  width + padding + border + margin

而在IE盒子模型中，css中定義的width爲content + padding + border，所以在IE盒子模型中，整個元素在頁面中佔有的寬度爲(高度同理）

DOM_Width =  width + margin

在CSS3中利用box-sizing保留了兩種盒子模型，當咱們設置box-sizing: content-box（默認），採用的是W3C標準盒模型，當設置box-sizing:border-box時，採用的是IE盒模型。

5 CSS reset（重置）

每一個瀏覽器都有一些自帶的樣式，並且各個瀏覽器這些自帶的樣式每每又存在不一樣，這給咱們佈局上帶來了一些不便。所以在實踐中每每須要對瀏覽器的css樣式進行「清零」，即CSS reset。最簡單的一種reset代碼以下：

*{
    margin:0;
    padding:0;
}

這種方式雖然簡單但太過「暴力」，由於不少要素像div、li等自己默認就沒有margin、padding樣式，這無異於形成大量冗餘，更推薦的方式根據本身須要編寫reset代碼。

Reference:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset

6 CSS hack

因爲不一樣的瀏覽器對CSS的解析和支持是不一樣的，這會致使相同的CSS代碼在不一樣瀏覽器中的顯示方式並非徹底一致的，這就須要經過CSS Hack來解決不一樣瀏覽器的兼容性問題。針對不一樣瀏覽器寫不一樣的樣式的這個過程就稱爲CSS hack。

CSS Hack常見的形式有以下幾種：

• 屬性Hack

好比IE6能識別_width以及*width，而在IE7中能識別*width,可是不能識別_width,在FireFox中兩個都不識別。

• 選擇符Hack

好比IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。

• 條件Hack

IE條件註釋是微軟從IE5開始就提供的一種非標準邏輯語句。好比針對全部IE：

<!–[if IE]>
    <!–Your Code–>
    <![endif]–>

針對IE6及如下版本：

<!–[if lt IE 7]>
<!–Your Code–>
<![endif]–>

這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。

Reference
www.3lian.com/edu/2014/10-10/171039.html

7 優雅降級（graceful degradation)與漸進加強(progressive enhancement)

漸進加強指針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級指一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

二者的區別在於優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

8 說出遇到的瀏覽器兼容問題

• 不一樣瀏覽器中顯示的內邊距、外邊距不一樣，如ul標籤在FireFox中默認是有padding值的，而在IE中只有margin有值

利用CSS Reset(參見第5條）

• IE6的雙倍邊距BUG，在塊級元素浮動後原本外邊距10px,但IE解釋爲20px

將其該塊級元素display設置爲inline

• IE6中不支持min-height

min-height的做用是做用是當容器的內容較少時，能保持一個最小的高度，以避免破壞了佈局或UI設計效果。而當容器內的內容增長的時候，容器可以自動的伸展以適應內容的變化。

經過這種下面的方式能夠解決：

#targetDom{
        background:#ccc;
        min-height:100px;
        height:auto!important;
        height:100px;
        overflow:visible;
   }

• 在標準的事件綁定中綁定事件的方法函數爲addEventListener,而IE使用的是attachEvent

經過條件判斷分別寫兩條綁定語句或者使用jquery這類web框架庫綁定。

• 標準瀏覽器採用事件捕獲的方式，而IE採用的是事件冒泡機制

後來標準認爲冒泡更合理，利用設置addEventListener第三個參數兼容兩種機制，事件冒泡爲默認值。

• 事件處理中的event屬性IE中獲取方式和標準瀏覽器不一樣

標準瀏覽器是做爲參數帶入，而ie是window.event方式得到，得到目標元素ie爲e.srcElement 標準瀏覽器爲e.target

Part2 其它

1 瞭解經常使用http狀態碼

200 OK 一切正常，對GET和POST請求的應答文檔跟在後面。

201 Created服務器已經建立了文檔，Location頭給出了它的URL。

202 Accepted 已經接受請求，但處理還沒有完成。

304 Not Modified 客戶端有緩衝的文檔併發出了一個條件性的請求（通常是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務器告 訴客戶，原來緩衝的文檔還能夠繼續使用。

400 Bad Request 請求出現語法錯誤。

404 Not Found 沒法找到指定位置的資源。這也是一個經常使用的應答。

405 Method Not Allowed 請求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）對指定的資源不適用。（HTTP 1.1新）

500 Internal Server Error 服務器遇到了意料不到的狀況，不能完成客戶的請求。

502 Bad Gateway 服務器做爲網關或者代理時，爲了完成請求訪問下一個服務器，但該服務器返回了非法的應答。

2 手寫ajax請求

//在IE5和IE6中模擬XMLHttpRequest方法
if(window.XMLHttpRequest === undefined){
    window.XMLHttpRequest = function(){
        try{
            return new ActiveXObject("Msxml2.XMLHttp.6.0"); //可用，使用最新ActiveX對象
        }
        catch(e1){
            try{
                return new ActiveXObject("Msxml2.XMLHttp.3.0");//不可用，退後更早的版本
            }
            catch(e2){
                throw new Error("XMLHttpRequest is not supported");
            }
        }
    }
}

//get請求
function xhrGet(url,callback){
    var request = new XMLHttpRequest();
    request.open('GET',url,true);
    request.onreadystatechange = function(){
        if(request.readyState === 4 && request.status == 200){
            callback&&callback(request.responseText);
        }
    };
    request.send(null);
}

//post請求
function xhrPost(url,data,callback){
    var request = new XMLHttpRequest();
    request.open('POST',url,true);
    request.setRequestHeader('Content-Type','application/json');
    request.onreadystatechange = function(){
        if(request.readyState === 4 && request.status == 200){
            callback&&callback(request);
        }
    };
    request.send(JSON.stringfy(data));
}

這是XMLHttpRequest傳統的用法，XMLHttpRequest Level 2提出了不少新的方法，咱們常提到的CORS也是源自該方法。

要了解詳細XHR2推薦 XMLHttpRequest Level 2 使用指南

3 跨域問題

當咱們在頁面中經過ajax請求其它服務器的數據時，因爲瀏覽器對於JavaScript的同源策略，客戶端就會發生跨域問題。所謂同源策略，指的是一段腳本只能請求來自相同來源（相同域名、端口號、協議）的資源。

若是上面XMLHttpRequest請求的服務地址與當前文件不一樣源的話，瀏覽器中會出現以下錯誤：

那麼該如何解決這類跨域問題？

（1）利用CORS跨域

"跨域資源共享"（Cross-origin resource sharing，簡稱CORS）。CORS是是在XHR2中拓展的能力，使用方法很簡單，在服務端設置：

Header set Access-Control-Allow-Origin *

這種設置將接受全部域名的跨域請求，也能夠指定具體網址，也能夠對域名進行限定：

Header set Access-Control-Allow-Origin http://www.test.com

然而，這種方式的侷限性在於要求客戶端支持，而且服務端進行相關設置。在這二者知足的狀況下，經過CORS進行跨域不只支持全部類型的HTTP請求，並且開發者可使用普通的XMLHttpRequest發起請求和得到數據，比起JSONP有更好的錯誤處理。

（2）利用JSONP實現跨越

對於較老的瀏覽器，它們每每不支持CORS，所以使用JSONP進行跨域也是很常見的一種方式。

咱們知道在網頁中經過<script>元素的src指定加載目標腳本時是不受同源策略的影響的，所以可使用它們從其餘服務器請求數據，這種利用<script>元素做爲Ajax傳輸的技術就稱爲JSONP。

JSONP實現的原理以下：

function getJSONP(url, callback){
        var funcName = getUniqueName()；//利用時間戳或指自增計數器得到惟一函數名
        
        url += "?callback=" + funcName; //將函數名做爲參數添加至url中
        
        var script = document.createElement('script');//動態構建script標籤
        
        //回調函數
        getJSONP[funcName] = function(response){
            try{
                callback(response); //處理響應數據
            }
            finally{
                //即便回調函數或響應拋出錯誤，清除動態增長內容
                delete getJSONP[funcName];
                script.parentNode.removeChild(scirpt);
            }
        }
        
        //觸發HTTP請求
        script.src = url;
        document.body.appendChild(script);
    }

JSONP也存在一些弊端，首先JSONP支持GET不支持POST方法，另外使用<script>元素進行Ajax請求，這意味着容許Web頁面能夠執行遠程服務器發送過來的任何JavaScript代碼，所以對於不信任的服務器，不該該採用該技術。

（3）利用window.name進行跨域

window對象有個name屬性，該屬性有個特徵：即在一個窗口(window)的生命週期內,窗口載入的全部的頁面都是共享一個window.name的，每一個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的全部頁面中的，並不會因新頁面的載入而進行重置，所以能夠藉助window.name在不一樣源的頁面中傳遞數據。

如www.a.com/a.html想要得到www.b.com/b.html中的數據,原理以下：

a) 在b.html中將數據存儲在window.name中

b) 在a.html中構建一個隱藏（display：none）的iframe標籤，假設id設爲proxy，src設置爲和a.html同源便可。

c) 經過以下代碼在a.html中獲取到data

var proxy = document.getElementById('proxy');
    proxy.onload = function(){
        var data = proxy.contentWindow.name;//獲取到數據
    }

d) 移除相關元素

（4) 使用window.postMessage進行跨域

這種方式比較簡單，在a頁面中利用windowObj.postMessage(message, targetOrigin)向目標頁面發送信息，而在b頁面中經過監聽message事件獲取信息。這種方式是在HTML5中新增的方法，對於IE六、IE7等老版本瀏覽器沒法使用。

4 如何提升網站性能

請參看博主的另外兩篇文章：

關於提升網站性能的幾點建議

關於提升網站性能的幾點建議2

發現新內容會持續更新...

博文做者：vicfeel
博文出處：http://www.cnblogs.com/vicfeel 本文版權歸做者和博客園共有，歡迎轉載，但須保留此段聲明，並給出原文連接，謝謝合做！ 若是閱讀了本文章，以爲有幫助，您能夠爲個人博文點擊「推薦一下」！