Web前端年後跳槽必看的各種面試題

幸運且光榮的被老大安排了一個任務 - “去整理些前端面試題”。年前確實不是招人的好時候，所以我們前端團隊經過了超負荷的運轉，終於堅持過了春節。春節以後就開始招人啦，這套題考察的目標就是基礎基礎再基礎，嘿嘿。

事先宣告：

◆ 這些題目的來源：面試曾經被問過;工作被別人問過或者遇見過;網上看見過...

◆ 答案真心不給提供，真的是許多問題都需要個人的理解和沉澱，所以還請各位自己動手...前端可以試試自己差不多能回答多少題，哈哈。

◆ 其實很多題我也沒有好答案，面試的時候如果遇到牛人我也可以順便交流交流，反正我也只是一面，不丟人也不怕丟人。

◆ 如果朋友們有好的面試題歡迎提建議，我會其實補充更新的，先謝謝各位了。

HTML相關

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

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

3. 你真的瞭解HTML嗎? 雅虎面試題　　把前面黃底那段拿去搜尋下就知道了(曾在某浪公司面試的時候被問到過，確實是很好的問題)。

CSS相關

1. 介紹所知道的CSS hack技巧(如：_， *， +， \9， !important 之類)。

2. 介紹CSS盒模型。

3. CSS層疊是什麼?介紹一下。

4. 都知道哪些CSS瀏覽器相容性問題。

5. 有時會被問到些刁鑽點的題，比如position值都有哪些，CSS3都有哪些新內容...

JavaScript基礎相關

1. HTTP協議的狀態訊息都有哪些?(如200、302對應的描述)

2. AJAX是什麼? AJAX的互動模型(流程)? AJAX跨域的解決辦法?

3. 同步和非同步的區別?

4. 簡述JavaScript封裝。

5. JavaScript繼承有哪兩種形式形式，進行描述。

6. 什麼是閉包?以下程式碼點選<p> 會輸出什麼?為什麼?能大概說明白的話繼續問能想出幾種解決辦法。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>閉包演示</title>
<style type="text/css">
p {background:gold;}
</style>
<script type="text/javascript">
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body onload="init();">
<p>產品 0</p>
<p>產品 1</p>
<p>產品 2</p>
<p>產品 3</p>
<p>產品 4</p>
</body>
</html>

7. 在JS中this關鍵字的使用場合和用法(如在建構函式中、setTimeout中等)。

8. 簡述下cookie的操作，還有cookie的屬性都知道哪些。

9. IE與FF的JS相容性都知道哪些。

10. DOM操作 - 怎樣新增、移除、移動、複製、建立和查詢節點(這個問題真心是基礎題，一般不會問)。

jQuery相關

1. jQuery原始碼是否嘗試去讀過?說說基本的架構或者 jQuery.fn.init 中都做了哪些判斷。

2. 都知道哪些不好的jQuery書寫方式。

3. Sizzle是否有讀過?

其它相關的加分項：

1. 都使用和了解過哪些編輯器?都使用和了解過哪些日常工具?

2. 都知道有哪些瀏覽器核心?開發過的專案都相容哪些瀏覽器?

3. 國內外的JS牛人都知道哪些?

4. 瀑布流佈局或者流式佈局是否有了解

4. 正規表示式有系統學習過嗎(看書或網上教程)?有的話就問問簡單點的郵箱驗證、URL驗證，或者問問貪婪匹配與懶惰匹配的理論知識。

5. Node.js是否有過嘗試?到什麼程度?說說個人理解的看法?

6. HTML5都有哪些新的JS API?

7. 前端優化知識都知道哪些?

8. 基礎演算法題(如快速排序，能否一兩句說說重要的核心原理或者陣列消重等)。

9. 是否有接觸過或者瞭解過重構。

1.簡述div元素和span元素的區別。

div是塊元素，預設換行，一般用於排版。

span是行內元素，預設不換行，一般用於區域性文字樣式。

通過display屬性他們之間可以相互轉換，div預設為block,span預設為inline。

2.談談javascript陣列方法sort()的使用，重點介紹sort()引數的使用及其內部機制。

語法：arrayObject.sort(sortby)

引數sortby:可選，規定排序順序。必須是函式。

返回對陣列的引用。注意，陣列在原陣列上進行排序，不生成副本。

如果該方法沒有使用引數，將按照字元編碼的順序進行排序。

如果想要按照其他標準進行排序，就需要提供比較函式，該函式要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。比較函式應該具有兩個引數a和b，其返回值如下：

1）若a小於b，在排序後的陣列中a應該出現在b之前，返回一個小於0的值。

2）若a等於b，返回0。

3）若a大於b，則返回一個小於0的值。

例：按照數值進行排序

<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

3.結合<span id="outer"><span id="inner">text</span></span>這段結構，談談innerHTML outerHTML innerText之間的區別。

innerHTML:物件裡面的HTML內容，這裡是<span id="inner">text</span>

outerHTML:物件裡面包括物件本身的HTML內容，這裡是<span id="outer"><span id="inner">text</span></span>

innerText:物件裡面的文字內容，這裡是text

4.說幾條XHTML規範的內容。

1）標籤名必須用小寫字母。

2）所有標籤都必須被關閉，包括空標籤。

3）屬性值必須加引號。

4）用Id屬性代替name屬性。

5）所有XHTML文件必須進行檔案型別宣告。

5.對Web標準化（或網站重構）知道哪些相關知識，簡述幾條你知道的Web標準？

為什麼要使用web標準？

1）具有更好的相容性。

2）易於程式碼維護和開發。

3）可增加網站的訪問量。

4）標準的web文件更易被轉換為其他格式。

5）更易被搜尋引擎訪問，也更易被準確索引。

6）更易被JavaScript和DOM程式碼訪問。

W3C標準：HTML、XHTML、CSS、XML、XSL、DOM。

6.完成foo()函式的內容，要求能夠彈出對話方塊提示當前選中的是第幾個單選框。

<html>

<head>

function foo() {

//在此處新增程式碼

var radioGroup = document.getElementsByName("radioGroup");

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

if(radioGroup[i].checked) {

alert("你選擇了第" + (i+1)+"單選框");

}

return false;

}

</script>

</head>

<body>

</form>

</body>

</html>

7.填充註釋部分的函式體，使得foo()函式呼叫彈出“成功”的對話方塊。程式碼應儘量簡短。

<html>

<head>

function foo() {

var str = reverse('a,b,c,d,e,f,g');

alert(str);

if (str == 'g,f,e,d,c,b,a') {

alert('成功');

}else {

alert('失敗');

}

function reverse(str)

{

// 在此處加入程式碼，完成字串翻轉功能

return str.split(",").reverse().join(",");

}

</script>

</head>

<body>

</body>

</HTML>

8.下面程式碼：

var x = 1;

var y = 0;

var z = 0;

function add(n) {

n = n +1;

}

y = add(x);

function add(n) {

n = n + 3;

}

z = add(x);

s = y + z;

</script>

求：y、z、s的值。

答案：undefined、undefined、NaN。兩個add函式都沒有返回值，所以是undefined，兩個undefined相加自然是NaN。

9.下面程式碼：

var x = 1;

var y = 0;

var z = 0;

function add(n) {

return n = n +1;

}

y = add(x);

function add(n) {

return n = n + 3;

}

z = add(x);

s = y + z;

</script>

求：y、z、s的值。

答案：4，4，8。直接通過function宣告的函式，後面定義的會影響前面的。

function x() {alert("2");}

x();//輸出3

function x() {alert("3");}

x();//輸出3

</script>

通過var宣告的函式，後面定義的不會影響前面的：

var x = function() {alert("0");}

x();//輸出0

var x = function() {alert("1");}

x();//輸出1

</script>

通過function定義的函式，後面定義的，照舊影響前面的引用，但是不能改變通過var宣告函式後的引用，反而，通過var宣告的函式，改變了後來通過宣告函式之後的引用。

var x = function() {alert("1");}

x();//輸出1

function x() {alert("3");}

x();//輸出1

</script>

function x() {alert("2")};

x();//輸出3

var x = function() {alert("0");}

x();//輸出0

var x = function() {alert("1");}

x();//輸出1

function x() {alert("3");}

x();//輸出1

</script>

10.下面的輸出結果為：

typeof(NaN) //number

typeof(Infinity) //number

typeof(null) //object

typeof(undefined) //undefined

NaN == NaN //false

NaN != NaN //true

NaN >= NaN //false

null == undefined //true

null >= undefined //false

null <=undefined //false

parseInt("123abc") //123

"123abc" - 0 //NaN

Infinity > 10 //true

Infinity == NaN //false

Infinity > "abc" //false

true == 1 //true

new String("abc") == "abc" //true

new String("abc") === "abc" //false

var a = "123abc";

alert(typeof(a++)); //number

alert(a); //NaN

var a = "123abc";

a.valueOf = function(){return parseInt(a);}

a.toString = function(){return parseInt(a);}

alert(++a); //NaN

alert(a-0); //NaN

var a = new Object();

a.toString = function(){return "123abc";}

a.valueOf = function(){return parseInt(a);}

alert(++a); //124

alert(a-0); //124

String.prototype.valueOf = function()

{

return parseFloat(this);

}

alert("123abc" > 122); //false

alert(new String("123abc") > 122); //true

var s = new String("abc");

alert(typeof(s) == typeof("abc")); //false typeof(s) == object 而typeof("abc")==string

alert(s === "abc"); //false

alert(s.toString() == s); //true

Web前端年後跳槽必看的各種面試題

相關文章