web前端工程師面試題綜合整理

如下是收集的一些web前端工程師面試中常常會遇到的經典面試題以及本身面試過程當中沒法解決的問題，經過對知識的整理以及經驗的總結，從新鞏固自身的前端基礎知識，若有錯誤或更好的答案，歡迎指正。

HTML/CSS部分

一、什麼是盒子模型？

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一塊兒構成了css中元素的盒模型。

二、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote

空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

三、CSS實現垂直水平居中

一道經典的問題，實現方法有不少種，如下是其中一種實現：

HTML結構：

<div class="wrapper">

    <div class="content"></div>

</div>

 

CSS：

.wrapper{position:relative;}

    .content{

        background-color:#6699FF;

        width:200px;

        height:200px;

        position: absolute;        //父元素須要相對定位

        top: 50%;

        left: 50%;

        margin-top:-100px ;   //二分之一的height，width

        margin-left: -100px;

    }

四、簡述一下src與href的區別

href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

五、什麼是CSS Hack?

通常來講是針對不一樣的瀏覽器寫不一樣的CSS,就是 CSS Hack。

IE瀏覽器Hack通常又分爲三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文檔：css文檔）。例如：

// 一、條件Hack

   <!--[if IE]>

      <style>

            .test{color:red;}

      </style>

   <![endif]-->

   // 二、屬性Hack

    .test{

    color:#0909; /* For IE8+ */

    *color:#f00;  /* For IE7 and earlier */

    _color:#ff0;  /* For IE6 and earlier */

    }

   // 三、選擇符Hack

    * html .test{color:#090;}       /* For IE6 and earlier */

    * + html .test{color:#ff0;}     /* For IE7 */

 

六、簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；

異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

七、px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

八、什麼叫優雅降級和漸進加強？

漸進加強 progressive enhancement：

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

優雅降級 graceful degradation：

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

區別：

a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給

b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要

c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶

九、瀏覽器的內核分別是什麼?

IE: trident內核

Firefox：gecko內核

Safari：webkit內核

Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核

Chrome：Blink(基於webkit，Google與Opera Software共同開發)

JavaScript部分

一、怎樣添加、移除、移動、複製、建立和查找節點？

1）建立新節點

createDocumentFragment() //建立一個DOM片斷

createElement() //建立一個具體的元素

createTextNode() //建立一個文本節點

2）添加、移除、替換、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替換

insertBefore() //插入

3）查找

getElementsByTagName() //經過標籤名稱

getElementsByName() //經過元素的Name屬性的值

getElementById() //經過元素Id，惟一性

二、實現一個函數clone，能夠對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值複製。

 

  /**

* 對象克隆

* 支持基本數據類型及對象

* 遞歸方法

*/

function clone(obj) {

    var o;

    switch (typeof obj) {

        case "undefined":

            break;

        case "string":

            o = obj + "";

            break;

        case "number":

            o = obj - 0;

            break;

        case "boolean":

            o = obj;

            break;

        case "object": // object 分爲兩種狀況 對象（Object）或數組（Array）

            if (obj === null) {

                o = null;

            } else {

                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {

                    o = [];

                    for (var i = 0; i  obj.length; i++) {

                        o.push(clone(obj[i]));

                    }

                } else {

                    o = {};

                    for (var k in obj) {

                        o[k] = clone(obj[k]);

                    }

                }

            }

            break;

        default:

            o = obj;

            break;

    }

    return o;

}

三、如何消除一個數組裏面重復的元素？

 

// 方法一：

var arr1 =[1,2,2,2,3,3,3,4,5,6],

    arr2 = [];

for(var i = 0,len = arr1.length; i< len; i++){

    if(arr2.indexOf(arr1[i]) < 0){

        arr2.push(arr1[i]);

    }

}

document.write(arr2); // 1,2,3,4,5,6

四、想實現一個對頁面某個節點的拖曳？如何作？（使用原生JS）。

五、在Javascript中什麼是僞數組？如何將僞數組轉化爲標準數組？

僞數組（類數組）：沒法直接調用數組方法或指望length屬性有什麼特殊的行爲，但仍能夠對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於僞數組。可使用Array.prototype.slice.call(fakeArray)將數組轉化爲真正的Array對象。

function log(){

      var args = Array.prototype.slice.call(arguments);  

//爲了使用unshift數組方法，將argument轉化爲真正的數組

      args.unshift('(app)');

      console.log.apply(console, args);

};

六、Javascript中callee和caller的做用？

caller是返回一個對函數的引用，該函數調用了當前函數；

callee是返回正在被執行的function函數，也就是所指定的function對象的正文。

七、請描述一下cookies，sessionStorage和localStorage的區別

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

web storage和cookie的區別

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

除此，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生。

八、手寫數組快速排序

關於快排算法的詳細說明，能夠參考阮一峯老師的文章快速排序

「快速排序」的思想很簡單，整個排序過程只須要三步：

（1）在數據集之中，選擇一個元素做爲」基準」（pivot）。

（2）全部小於」基準」的元素，都移到」基準」的左邊；全部大於」基準」的元素，都移到」基準」的右邊。

（3）對」基準」左邊和右邊的兩個子集，不斷重複第一步和第二步，直到全部子集只剩下一個元素爲止。

九、統計字符串」aaaabbbccccddfgh」中字母個數或統計最多字母數。

var str = "aaaabbbccccddfgh";

var obj  = {};

for(var i=0;istr.length;i++){

    var v = str.charAt(i);

    if(obj[v] & obj[v].value == v){

        obj[v].count = ++ obj[v].count;

    }else{

        obj[v] = {};

        obj[v].count = 1;

        obj[v].value = v;

    }

}

for(key in obj){

    document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 

}

十、寫一個function，清除字符串先後的空格。（兼容全部瀏覽器）

 

function trim(str) {

    if (str & typeof str === "string") {

        return str.replace(/(^s*)|(s*)$/g,""); //去除先後空白符

    }

}

其餘

一、一次完整的HTTP事務是怎樣的一個過程？

基本流程：

a. 域名解析

b. 發起TCP的3次握手

c. 創建TCP鏈接後發起http請求

d. 服務器端響應http請求，瀏覽器獲得html代碼

e. 瀏覽器解析html代碼，並請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

二、對前端工程師這個職位你是怎麼樣理解的？

a. 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

b. 參與項目，快速高質量完成實現效果圖，精確到1px；

c. 與團隊成員，UI設計，產品經理的溝通；

d. 作好的頁面結構，頁面重構和用戶體驗；

e. 處理hack，兼容、寫出優美的代碼格式；

f. 針對服務器的優化、擁抱最新前端技術。