Web前端面試題目彙總【轉載】

閱讀目錄

以下是收集一些面試中經常會遇到的經典面試題以及自己面試過程中有一些未解決的問題，通過對知識的整理以及經驗的總結，重新鞏固自身的前端基礎知識，如有錯誤或更好的答案，歡迎指正，水平有限，望各位不吝指教。:）

HTML/CSS部分

1、什麼是盒子模型？

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

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

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

3、CSS實現垂直水平居中

一道經典的問題，實現方法有很多種，以下是其中一種實現：
HTML結構：

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

CSS：

    .wrapper {
      position: relative;
      width: 500px;
      height: 500px;
      background-color: #ddd;
     }
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
        position: absolute;        //父元素需要相對定位
        top: 50%;
        left: 50%;
        margin-top:-100px ;   //二分之一的height，width
        margin-left: -100px;
    }

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

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

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

5、什麼是CSS Hack?

一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。
IE瀏覽器Hack一般又分爲三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文檔：css文檔）。例如：

    // 1、條件Hack
   <!--[if IE]>
      <style>
            .test{color:red;}
      </style>
   <![endif]-->
   // 2、屬性Hack
    .test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
    }
   // 3、選擇符Hack
    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */

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

同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
異步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。

7、px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

8、什麼叫優雅降級和漸進增強？

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

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

區別：

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

b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要

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

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

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

在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僅僅是爲了在本地“存儲”數據而生。

統計字符串中字母個數或統計最多字母數。

var str = "aaaabbbccccddfgh";
var obj  = {};
for(var i=0;i<str.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+'&nbsp;'); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 
}

jQuery的事件委託方法on、live、delegate之間有什麼區別？

如何理解閉包？

跨域請求資源的方法有哪些？

談談垃圾回收機制方式及內存管理

開發過程中遇到的內存泄露情況，如何解決的？

回到頂部

HTTP

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

基本流程：

a. 域名解析

b. 發起TCP的3次握手

c. 建立TCP連接後發起http請求

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

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

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

HTTP的狀態碼有哪些？

HTTPS是如何實現加密？

回到頂部

算法相關

手寫數組快速排序

關於快排算法的詳細說明，可以參考阮一峯老師的文章快速排序
"快速排序"的思想很簡單，整個排序過程只需要三步：
（1）在數據集之中，選擇一個元素作爲"基準"（pivot）。
（2）所有小於"基準"的元素，都移到"基準"的左邊；所有大於"基準"的元素，都移到"基準"的右邊。
（3）對"基準"左邊和右邊的兩個子集，不斷重複第一步和第二步，直到所有子集只剩下一個元素爲止。
參考代碼：

 var quickSort = function(arr) {
　　if (arr.length <= 1) { return arr; }
　　var pivotIndex = Math.floor(arr.length / 2);
　　var pivot = arr.splice(pivotIndex, 1)[0];
　　var left = [];
　　var right = [];
　　for (var i = 0; i < arr.length; i++){
　　　　if (arr[i] < pivot) {
　　　　　　left.push(arr[i]);
　　　　} else {
　　　　　　right.push(arr[i]);
　　　　}
　　}
　　return quickSort(left).concat([pivot], quickSort(right));
};

JavaScript實現二分法查找

二分法查找，也稱折半查找，是一種在有序數組中查找特定元素的搜索算法。查找過程可以分爲以下步驟：
（1）首先，從有序數組的中間的元素開始搜索，如果該元素正好是目標元素（即要查找的元素），則搜索過程結束，否則進行下一步。
（2）如果目標元素大於或者小於中間元素，則在數組大於或小於中間元素的那一半區域查找，然後重複第一步的操作。
（3）如果某一步數組爲空，則表示找不到目標元素。
參考代碼:

     // 非遞歸算法
        function binary_search(arr, key) {
            var low = 0,
                high = arr.length - 1;
            while(low <= high){
                var mid = parseInt((high + low) / 2);
                if(key == arr[mid]){
                    return  mid;
                }else if(key > arr[mid]){
                    low = mid + 1;
                }else if(key < arr[mid]){
                    high = mid -1;
                }else{
                    return -1;
                }
            }
        };
        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
        var result = binary_search(arr,10);
        alert(result); // 9 返回目標元素的索引值


    // 遞歸算法
        function binary_search(arr,low, high, key) {
            if (low > high){
                return -1;
            }
            var mid = parseInt((high + low) / 2);
            if(arr[mid] == key){
                return mid;
            }else if (arr[mid] > key){
                high = mid - 1;
                return binary_search(arr, low, high, key);
            }else if (arr[mid] < key){
                low = mid + 1;
                return binary_search(arr, low, high, key);
            }
        };
        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
        var result = binary_search(arr, 0, 13, 10);
        alert(result); // 9 返回目標元素的索引值

回到頂部

Web安全

你所瞭解到的Web攻擊技術

（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JavaScript進行的一種攻擊。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries，跨站點請求僞造）：指攻擊者通過設置好的陷阱，強制對已完成的認證用戶進行非預期的個人信息或設定信息等某些狀態更新。

回到頂部

前端性能

如何優化圖像、圖像格式的區別？

瀏覽器是如何渲染頁面的？

回到頂部

設計模式

對MVC、MVVM的理解

回到頂部

正則表達式

寫一個function，清除字符串前後的空格。（兼容所有瀏覽器）

function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^\s*)|(\s*)$/g,""); //去除前後空白符
    }
}

使用正則表達式驗證郵箱格式

    var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
    var email = "[email protected]";
    console.log(reg.test(email));  // true

回到頂部

職業規劃

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

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

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

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

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

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

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

作者：GeniusLyzh
出處：http://www.cnblogs.com/GeniusLyzh/
本文鏈接：http://www.cnblogs.com/bigboyLin/p/5272902.html
本文版權歸作者和博客園共有，歡迎轉載，須保留此段聲明，並給出原文鏈接，謝謝！

Web前端面試題目彙總【轉載】

HTML/CSS部分

1、什麼是盒子模型？

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

3、CSS實現垂直水平居中

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

5、什麼是CSS Hack?

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

7、px和em的區別

8、什麼叫優雅降級和漸進增強？

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

JavaScript部分

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

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

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

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

Javascript中callee和caller的作用？

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

統計字符串中字母個數或統計最多字母數。

jQuery的事件委託方法on、live、delegate之間有什麼區別？

如何理解閉包？

跨域請求資源的方法有哪些？

談談垃圾回收機制方式及內存管理

開發過程中遇到的內存泄露情況，如何解決的？

HTTP

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

HTTP的狀態碼有哪些？

HTTPS是如何實現加密？

算法相關

手寫數組快速排序

JavaScript實現二分法查找

Web安全

你所瞭解到的Web攻擊技術

前端性能

如何優化圖像、圖像格式的區別？

瀏覽器是如何渲染頁面的？

設計模式

對MVC、MVVM的理解

正則表達式

寫一個function，清除字符串前後的空格。（兼容所有瀏覽器）

使用正則表達式驗證郵箱格式

職業規劃

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

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