2016年Web前端面試題

2016年Web前端面試題目匯總

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

閱讀目錄

• HTML/CSS部分
• JavaScript部分
• 其他

回到頂部

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;} .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、怎樣添加、移除、移動、復制、創建和查找節點？

1）創建新節點
createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點

2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入

3）查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性

2、實現一個函數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; }

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

// 方法一：
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

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

5、在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); };

6、Javascript中callee和caller的作用？

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

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

7、請描述一下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僅僅是為了在本地“存儲”數據而生。

8、手寫數組快速排序

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

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

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 } 

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

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

回到頂部

其他

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

基本流程：

a. 域名解析

b. 發起TCP的3次握手

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

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

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

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

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

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

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

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

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

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

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