前端面試寶典超全版 純福利

 

 

2、JS基礎

一、javascript的typeof返回哪些數據類型

Object number function boolean underfind

二、例舉3種強制類型轉換和2種隱式類型轉換?

強制（parseInt,parseFloat,number）

隱式（== – ===）

三、split() join() 的區別

前者是切割成數組的形式，後者是將數組轉換成字符串

四、數組方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部刪除

Unshift()頭部添加 shift()頭部刪除

五、事件綁定和普通事件有什麼區別

事件綁定是指把事件註冊到具體的元素之上，普通事件指的是能夠用來註冊的事件

六、IE和DOM事件流的區別

1.執行順序不同、

2.參數不同

3.事件加不加on

4.this指向問題

七、IE和標準下有哪些兼容性的寫法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

八、call和apply的區別

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

九、b繼承a的方法

十、JavaScript this指針、閉包、做用域

十一、事件委託是什麼

讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！

十二、閉包是什麼，有什麼特性，對頁面有什麼影響

閉包就是可以讀取其餘函數內部變量的函數。

1三、如何阻止事件冒泡和默認事件

canceBubble return false

1四、添加 刪除 替換 插入到某個接點的方法

obj.appendChidl()

obj.innersetBefore

obj.replaceChild

obj.removeChild

1五、javascript的本地對象，內置對象和宿主對象

本地對象爲array obj regexp等能夠new實例化

內置對象爲gload Math 等不能夠實例化的

宿主爲瀏覽器自帶的document,window 等

1六、document load 和document ready的區別

Document.onload 是在結構和樣式加載完才執行js

Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

1七、」==」和「===」的不一樣

前者會自動轉換類型

後者不會

1八、javascript的同源策略

一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、議和端口號的組合

1九、編寫一個數組去重的方法

function oSort(arr) {  
var result ={};
var newArr=[];
for(var i=0;i<arr.length;i++){
if(!result[arr]) {
newArr.push(arr)
result[arr]=1
}
}
return newArr
}</arr.length;i++)

20、JavaScript是一門什麼樣的語言，它有哪些特色？

沒有標準答案。

2一、JavaScript的數據類型都有什麼？

基本數據類型：String,boolean,Number,Undefined, Null

引用數據類型：Object(Array,Date,RegExp,Function)

那麼問題來了，如何判斷某變量是否爲數組數據類型？

方法一.判斷其是否具備「數組性質」，如slice()方法。可本身給該變量定義slice方法，故有時會失效

方法二.obj instanceof Array 在某些IE版本中不正確

方法三.方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray(), 保證其兼容性，最好的方法以下：

if(typeof Array.isArray==="undefined"){   Array.isArray = function(arg){         return Object.prototype.toString.call(arg)==="[object Array]"     };  }

2二、已知ID的Input輸入框，但願獲取這個輸入框的輸入值，怎麼作？(不使用第三方框架)

document.getElementById(「ID」).value

2三、但願獲取到頁面中全部的checkbox怎麼作？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’) var checkBoxList = []; var len = domList.length;　　//緩存到局部變量 while (len--) {　　//使用while的效率會比for循環更高 　　if (domList[len].type == ‘checkbox’) {     　　checkBoxList.push(domList[len]); 　　} }

2四、設置一個已知ID的DIV的html內容爲xxxx，字體顏色設置爲黑色(不使用第三方框架)

var dom = document.getElementById(「ID」); dom.innerHTML = 「xxxx」 dom.style.color = 「#000」

2五、當一個DOM節點被點擊時候，咱們但願可以執行一個函數，應該怎麼作？

直接在DOM裏綁定事件：<div onclick=」test()」></div>

在JS裏經過onclick綁定：xxx.onclick = test

經過事件添加進行綁定：addEventListener(xxx, ‘click’, test)

那麼問題來了，Javascript的事件流模型都有什麼？

「事件冒泡」：事件開始由最具體的元素接受，而後逐級向上傳播

「事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的

「DOM事件流」：三個階段：事件捕捉，目標階段，事件冒泡

2六、看下列代碼輸出爲什麼？解釋緣由。

var a; alert(typeof a); // undefined alert(b); // 報錯

解釋：Undefined是一個只有一個值的數據類型，這個值就是「undefined」，在使用var聲明變量但並未對其賦值進行初始化時，這個變量的值就是undefined。而b因爲未聲明將報錯。注意未申明的變量和聲明瞭未賦值的是不同的。

2七、看下列代碼,輸出什麼？解釋緣由。

var a = null; alert(typeof a); //object

解釋：null是一個只有一個值的數據類型，這個值就是null。表示一個空指針對象，因此用typeof檢測會返回」object」。

2八、看下列代碼,輸出什麼？解釋緣由。

var undefined; undefined == null; // true 1 == true;   // true 2 == true;   // false 0 == false;  // true 0 == '';     // true NaN == NaN;  // false [] == false; // true [] == ![];   // true

• undefined與null相等，但不恆等（===）

一個是number一個是string時，會嘗試將string轉換爲number

嘗試將boolean轉換爲number，0或1

嘗試將Object轉換成number或string，取決於另一個對比量的類型

因此，對於0、空字符串的判斷，建議使用 「===」 。「===」會先判斷兩邊的值類型，類型不匹配時爲false。

那麼問題來了，看下面的代碼，輸出什麼，foo的值爲何？

var foo = "11"+2-"1"; console.log(foo); console.log(typeof foo);

執行完後foo的值爲111，foo的類型爲String。

2九、看代碼給答案。

var a = new Object(); a.value = 1; b = a; b.value = 2; alert(a.value);

答案：2（考察引用數據類型細節）

30、已知數組var stringArray = [「This」, 「is」, 「Baidu」, 「Campus」]，Alert出」This is Baidu Campus」。

答案：alert(stringArray.join(「」))

已知有字符串foo=」get-element-by-id」,寫一個function將其轉化成駝峯表示法」getElementById」。

function combo(msg){     var arr=msg.split("-");     for(var i=1;i<arr.length;i++){         arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);     }     msg=arr.join("");     return msg; }

(考察基礎API)

3一、var numberArray = [3,6,2,4,1,5]; （考察基礎API）

1) 實現對該數組的倒排，輸出[5,1,4,2,6,3]

2) 實現對該數組的降序排列，輸出[6,5,4,3,2,1]

function combo(msg){     var arr=msg.split("-");     for(var i=1;i<arr.length;i++){         arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);     }     msg=arr.join("");     return msg; }

3二、輸出今天的日期，以YYYY-MM-DD的方式，好比今天是2014年9月26日，則輸出2014-09-26

var d = new Date(); // 獲取年，getFullYear()返回4位的數字 var year = d.getFullYear(); // 獲取月，月份比較特殊，0是1月，11是12月 var month = d.getMonth() + 1; // 變成兩位 month = month < 10 ? '0' + month : month; // 獲取日 var day = d.getDate(); day = day < 10 ? '0' + day : day; alert(year + '-' + month + '-' + day);

3三、將字符串」<tr><td>{$id}</td><td>{$name}</td></tr>」中的{$id}替換成10，{$name}替換成Tony （使用正則表達式）

答案：」<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>」.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);

3四、爲了保證頁面輸出安全，咱們常常須要對一些特殊的字符進行轉義，請寫一個函數escapeHtml，將<, >, &, 「進行轉義

function escapeHtml(str) { return str.replace(/[<>」&]/g, function(match) {     switch (match) {      case 「<」:          return 「&lt;」;      case 「>」:        return 「&gt;」;      case 「&」:        return 「&amp;」;      case 「\」」:         return 「&quot;」;     }   }); }

3五、foo = foo||bar ，這行代碼是什麼意思？爲何要這樣寫？

答案：if(!foo) foo = bar; //若是foo存在，值不變，不然把bar的值賦給foo。

短路表達式：做爲」&&」和」||」操做符的操做數表達式，這些表達式在進行求值時，只要最終的結果已經能夠肯定是真或假，求值過程便了結止，這稱之爲短路求值。

3六、看下列代碼，將會輸出什麼?(變量聲明提高)

var foo = 1; function(){     console.log(foo);     var foo = 2;     console.log(foo); }

答案：輸出undefined 和 2。上面代碼至關於：

var foo = 1; function(){     var foo;     console.log(foo); //undefined     foo = 2;     console.log(foo); // 2;   }

函數聲明與變量聲明會被JavaScript引擎隱式地提高到當前做用域的頂部，可是隻提高名稱不會提高賦值部分。

3七、用js實現隨機選取10–100之間的10個數字，存入一個數組，並排序。

var iArray = []; funtion getRandom(istart, iend){         var iChoice = iend - istart +1;         return Math.floor(Math.random() * iChoice + istart; } for(var i=0; i<10; i++){         iArray.push(getRandom(10,100)); } iArray.sort();

3八、把兩個數組合並，並刪除第二個元素。

var array1 = ['a','b','c']; var bArray = ['d','e','f']; var cArray = array1.concat(bArray); cArray.splice(1,1);

3九、怎樣添加、移除、移動、複製、建立和查找節點（原生JS，實在基礎，沒細寫每一步）

1）建立新節點

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

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

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

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

appendChild()      //添加

removeChild()      //移除

replaceChild()      //替換

insertBefore()      //插入

3）查找

getElementsByTagName()    //經過標籤名稱

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

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

40、有這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程序提取URL中的各個GET參數(參數名和參數個數不肯定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′, c:」, d:’xxx’, e:undefined}。

答案：

function serilizeUrl(url) {     var result = {};     url = url.split("?")[1];     var map = url.split("&");     for(var i = 0, len = map.length; i < len; i++) {         result<script>jQuery(function($) {$("#google-maps-1").gMap({controls: false,scrollwheel: false,markers: [{address: "",icon: {image: "http://blog.jobbole.com/wp-content/themes/jobboleblogv3/_assets/img/_colors/red/pin.png",iconsize: [32, 32],iconanchor: [16,27],infowindowanchor: [16, 27]}}],address: "",zoom: 15,icon: {image: "http://blog.jobbole.com/wp-content/themes/jobboleblogv3/_assets/img/_colors/red/pin.png",iconsize: [32, 32],iconanchor: [16,27],infowindowanchor: [16, 27]}});});</script><div id="google-maps-1" class="google-maps" style="width: 100%; height: 200px;"></div>.split("=")[0]] = map[i].split("=")[1];     }     return result; }

4一、正則表達式構造函數var reg=new RegExp(「xxx」)與正則表達字面量var reg=//有什麼不一樣？匹配郵箱的正則表達式？

答案：當使用RegExp()構造函數的時候，不只須要轉義引號（即\」表示」），而且還須要雙反斜槓（即\\表示一個\）。使用正則表達字面量的效率更高。 

郵箱的正則匹配：

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

24.看下面代碼，給出輸出結果。

for(var i=1;i<=3;i++){   setTimeout(function(){       console.log(i);      },0);  };

答案：4 4 4。

緣由：Javascript事件處理器在線程空閒以前不會運行。追問，如何讓上述代碼輸出1 2 3？

for(var i=1;i<=3;i++){    setTimeout((function(a){  //改爲當即執行函數        console.log(a);       })(i),0);  }; 1           //輸出 2 3

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

使用自帶接口trim()，考慮兼容性：

if (!String.prototype.trim) {  String.prototype.trim = function() {  return this.replace(/^\s+/, "").replace(/\s+$/,"");  } }  // test the function var str = " \t\n test string ".trim(); alert(str == "test string"); // alerts "true"

4三、Javascript中callee和caller的做用？

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

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

那麼問題來了？若是一對兔子每個月生一對兔子；一對新生兔，從第二個月起就開始生兔子；假定每對兔子都是一雌一雄，試問一對兔子，第n個月能繁殖成多少對兔子？（使用callee完成）

var result=[]; function fn(n){  //典型的斐波那契數列    if(n==1){         return 1;    }else if(n==2){            return 1;    }else{         if(result[n]){                 return result[n];         }else{                 //argument.callee()表示fn()                 result[n]=arguments.callee(n-1)+arguments.callee(n-2);                 return result[n];         }    } }

4四、Javascript中, 如下哪條語句必定會產生運行錯誤？      答案(  B   )

A、   var _變量=NaN;B、var 0bj = [];C、var obj = //;  D、var obj = {};

4五、如下兩個變量a和b，a+b的哪一個結果是NaN？      答案(   C  )

A、var a=undefind; b=NaN

B、var a=‘123’; b=NaN

C、var a =undefined , b =NaN

D、var a=NaN , b='undefined'

4六、var a=10; b=20; c=4;  ++b+c+a++ 如下哪一個結果是正確的？答案(  B  )

A、   34   B、35  C、36  D、37

4七、下面的JavaScript語句中，（ D ）實現檢索當前頁面中的表單元素中的全部文本框，並將它們所有清空

A. for(vari=0;i< form1.elements.length;i++) {

if(form1.elements.type==」text」)

form1.elements.value=」";}

B. for(vari=0;i<document.forms.length;i++) {

if(forms[0].elements.type==」text」)

forms[0].elements.value=」";

}

C. if(document.form.elements.type==」text」)

form.elements.value=」";

D. for(vari=0;i<document.forms.length; i++){

for(var j=0;j<document.forms.elements.length; j++){

if(document.forms.elements[j].type==」text」)

document.forms.elements[j].value=」";

}

}

4八、要將頁面的狀態欄中顯示「已經選中該文本框」，下列JavaScript語句正確的是（ A ）

A. window.status=」已經選中該文本框」

B. document.status=」已經選中該文本框」

C. window.screen=」已經選中該文本框」

D. document.screen=」已經選中該文本框」

4九、如下哪條語句會產生運行錯誤：（A）

A.var obj = ();

B.var obj = [];

C.var obj = {};

D.var obj = //;

50、如下哪一個單詞不屬於javascript保留字：（B）

A.with

B.parent

C.class

D.void

5一、請選擇結果爲真的表達式：（C）

A.null instanceof Object

B.null === undefined

C.null == undefined

D.NaN == NaN

5二、Javascript中, 若是已知HTML頁面中的某標籤對象的id=」username」，用____document.getElementById(‘username’)___ _方法得到該標籤對象。

5三、typeof運算符返回值中有一個跟javascript數據類型不一致，它是________」function」_________。

5四、定義了一個變量，但沒有爲該變量賦值，若是alert該變量，javascript彈出的對話框中顯示___undefined______ 。

5五、分析代碼，得出正確的結果。

var a=10, b=20 , c=30;

++a;

a++;

e=++a+(++b)+(c++)+a++;

alert(e);

彈出提示對話框：77

5六、寫出函數DateDemo的返回結果，系統時間假定爲今天

function DateDemo(){

 var d, s="今天日期是：";

 d = new Date();

s += d.getMonth() + "/";

s += d.getDate() + "/";

s += d.getYear();

return s;}

結果：今天日期是：7/17/2010

5七、寫出程序運行的結果？

for(i=0, j=0; i<10, j<6; i++, j++){

k = i + j;}

結果：10

5八、閱讀如下代碼，請分析出結果：

    var arr = new Array(1 ,3 ,5);

    arr[4]='z';

    arr2 = arr.reverse();

    arr3 = arr.concat(arr2);

    alert(arr3);

彈出提示對話框：z,,5,3,1,z,,5,3,1

5九、補充按鈕事件的函數，確認用戶是否退出當前頁面，確認以後關閉窗口； <html>

<head>

<script type=」text/javascript」 >

function closeWin(){

//在此處添加代碼

if(confirm(「肯定要退出嗎？」)){

window.close();

}

}

</script>

</head>

<body>

<input type=」button」value=」關閉窗口」onclick=」closeWin()」/>

</body>

</html>

60、寫出簡單描述html標籤（不帶屬性的開始標籤和結束標籤）的正則表達式，並將如下字符串中的html標籤去除掉

var str = 「<div>這裏是div<p>裏面的段落</p></div>」;

//

<scripttype=」text/javascript」>

varreg = /<\/?\w+\/?>/gi;

varstr = 「<div>這裏是div<p>裏面的段落</p></div>」;

alert(str.replace(reg,」"));

</script>

6一、完成foo()函數的內容，要求可以彈出對話框提示當前選中的是第幾個單選框。

<html>

<head>

<metahttp-equiv=」Content-Type」 content=」text/html;charset=utf-8″ />

</head>

<body>

<script type=」text/javascript」 >

function foo() {

//在此處添加代碼

var rdo =document.form1.radioGroup;

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

if(rdo.checked){

alert(「您選擇的是第」+(i+1)+」個單選框」);

}

}

}

</script>

<body>

<form name=」form1″ >

<input type=」radio」 name=」radioGroup」/>

<input type=」radio」 name=」radioGroup」/>

<input type=」radio」 name=」radioGroup」/>

<input type=」radio」 name=」radioGroup」/>

<input type=」submit」/>

</form>

</body>

</html>

6二、完成函數showImg()，要求可以動態根據下拉列表的選項變化，更新圖片的顯示

<body>

<script type=」text/javascript」 >

function showImg (oSel) {

//在此處添加代碼

var str = oSel.value;

document.getElementById(「pic」).src= str+」.jpg」;

}

</script>

<img id=」pic」src=」img1.jpg」width=」200″ height=」200″ />

<br />

<select id=」sel」>

<option value=」img1「>城市生活</option>

<option value=」img2「>都市早報</option>

<option value=」img3「>青山綠水</option>

</select></body>

6三、截取字符串abcdefg的efg

alert('abcdefg'.substring(4));

6四、列舉瀏覽器對象模型BOM裏經常使用的至少4個對象，並列舉window對象的經常使用方法至少5個

對象：Window document location screen history navigator

方法：Alert() confirm() prompt() open() close()

6五、簡述列舉文檔對象模型DOM裏document的經常使用的查找訪問節點的方法並作簡單說明

Document.getElementById 根據元素id查找元素

Document.getElementByName 根據元素name查找元素

Document.getElementTagName 根據指定的元素名查找元素

6六、但願獲取到頁面中全部的checkbox怎麼作？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)

var checkBoxList = [];

var len = domList.length;　　//緩存到局部變量

while (len--) {　　//使用while的效率會比for循環更高

　　if (domList[len].type == ‘checkbox’) {

    　　checkBoxList.push(domList[len]);

　　}

}

6七、JavaScript的數據類型都有什麼？

基本數據類型：String,Boolean,Number,Undefined,Null

引用數據類型：Object(Array,Date,RegEx p,Function)

6八、javascript中有哪幾種數據類型，分別寫出中文和英文。

string boolean number null undefined object

字符串 布爾 數值 空值 未定義 對象

6九、javascript中==和===的區別是什麼？舉例說明。

===會自動進行類型轉換，==不會

70、簡述建立函數的幾種方式

第一種（函數聲明）：

function sum1(num1,num2){

   return num1+num2;

}

第二種（函數表達式）：

var sum2 = function(num1,num2){

   return num1+num2;

}

第三種（函數對象方式）：

var sum3 = new Function("num1","num2","return num1+num2");

7一、Javascript如何實現繼承？

原型鏈繼承，借用構造函數繼承，組合繼承，寄生式繼承，寄生組合繼承

7二、Javascript建立對象的幾種方式？

工廠方式，構造函數方式，原型模式，混合構造函數原型模式，動態原型方式

7三、把 Script 標籤 放在頁面的最底部的body封閉以前 和封閉以後有什麼區別？瀏覽器會如何解析它們？

7四、iframe的優缺點？

優勢：

1. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

2. Security sandbox

3. 並行加載腳本

缺點：

1. iframe會阻塞主頁面的Onload事件

2. 即時內容爲空，加載也須要時間

3. 沒有語意

7五、請你談談Cookie的弊端？

缺點：

1.`Cookie`數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。

2.安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。

3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

7六、DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。

1. 建立新節點

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

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

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

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

appendChild()

removeChild()

replaceChild()

insertBefore() // 在已有的子節點前插入一個新的子節點

3. 查找

getElementsByTagName() // 經過標籤名稱

getElementsByName() // 經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)

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

7七、js延遲加載的方式有哪些？

1. defer和async

2. 動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）

3. 按需異步載入js

7八、documen.write和 innerHTML 的區別？

document.write 只能重繪整個頁面

innerHTML 能夠重繪頁面的一部分

7九、哪些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

1. setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

2. 閉包

3. 控制檯日誌

4. 循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

80、javascript的typeof返回哪些數據類型?

答：object、 number、 function 、boolean、 underfind

8一、split() join() 的區別

答：前者是切割成數組的形式，後者是將數組轉換成字符串

8二、數組方法pop() push() unshift() shift()各表示什麼意思？

答：Push()尾部添加、pop()尾部刪除、Unshift()頭部添加、shift()頭部刪除

8三、判斷一個字符串中出現次數最多的字符，統計這個次數

答：var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
        if(!json[str.charAt(i)]){
                json[str.charAt(i)] = 1;
        }else{
                json[str.charAt(i)]++;
        }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
        if(json[i]>iMax){
                iMax = json[i];
                iIndex = i;
        }
}
alert('出現次數最多的是:'+iIndex+'出現'+iMax+'次');

8四、javascript的typeof返回哪些數據類型

Object number function boolean underfind

8五、例舉3種強制類型轉換和2種隱式類型轉換?

強制（parseInt,parseFloat,number）

隱式（== – ===）

8六、split() join() 的區別

前者是切割成數組的形式，後者是將數組轉換成字符串

8七、數組方法pop() push() unshift() shift()

Push()尾部添加 shift() 尾部刪除

Unshift() 頭部添加 shift() 頭部刪除

8八、事件綁定和普通事件有什麼區別

事件綁定和普通事件有什麼區別

8九、IE和DOM事件流的區別

1.執行順序不同、

2.參數不同

3.事件加不加on

4.this指向問題

90、IE和標準下有哪些兼容性的寫法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

9一、call和apply的區別

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

9二、b繼承a的方法

9三、寫一個獲取非行間樣式的函數

function getStyle(obj,attr,value)

{

  if(!value)

  {

      if(obj.currentStyle)

      {

          return obj.currentStyle(attr);

      }

      else{

          obj.getComputedStyle(attr,false);

      }

  }       

  else

  {

      obj.style[attr] = value;

  }

}

9四、事件委託是什麼

讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！

http://www.webasily.com/?p=78 例子可見此連接

事件委託是什麼

9五、閉包是什麼，有什麼特性，對頁面有什麼影響

閉包就是可以讀取其餘函數內部變量的函數。

http://blog.csdn.net/gaoshanwudi/article/details/7355794 此連接可查看（問這個問題的不是一個公司）

9六、解釋jsonp的原理，以及爲何不是真正的ajax

動態建立script標籤，回調函數

Ajax是頁面無刷新請求數據操做

9七、javascript的本地對象，內置對象和宿主對象

本地對象爲array obj regexp等能夠new實例化

內置對象爲gload Math 等不能夠實例化的

宿主爲瀏覽器自帶的document,window 等

9八、document load 和document ready的區別

Document.onload 是在結構和樣式加載完才執行js

Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

9九、字符串反轉，如將 '12345678' 變成 '87654321'

//大牛作法； //思路：先將字符串轉換爲數組 split()，利用數組的反序函數 reverse()顛倒數組，再利用 jion() 轉換爲字符串 var str = '12345678'; str = str.split('').reverse().join('');

100、將數字 12345678 轉化成 RMB形式 如： 12,345,678 

//我的方法； //思路：先將數字轉爲字符， str= str + '' ; //利用反轉函數，每三位字符加一個 ','最後一位不加； re()是自定義的反轉函數，最後再反轉回去！ for(var i = 1; i <= re(str).length; i++){     tmp += re(str)[i - 1];     if(i % 3 == 0 && i != re(str).length){         tmp += ',';     } }

10一、生成5個不一樣的隨機數；

//思路：5個不一樣的數，每生成一次就和前面的全部數字相比較，若是有相同的，則放棄當前生成的數字！ var num1 = []; for(var i = 0; i < 5; i++){     num1[i] = Math.floor(Math.random()*10) + 1; //範圍是 [1, 10]     for(var j = 0; j < i; j++){         if(num1[i] == num1[j]){             i--;         }     } }

10二、去掉數組中重複的數字 方法一；

//思路：每遍歷一次就和以前的全部作比較，不相等則放入新的數組中！ //這裏用的原型 我的作法； Array.prototype.unique = function(){     var len = this.length,         newArr = [],         flag = 1;     for(var i = 0; i < len; i++, flag = 1){         for(var j = 0; j < i; j++){             if(this[i] == this[j]){                 flag = 0;        //找到相同的數字後，不執行添加數據             }         }         flag ? newArr.push(this[i]) : '';     }     return newArr; }

    方法二：

(function(arr){     var len = arr.length,         newArr = [],          flag;     for(var i = 0; i < len; i+=1, flag = 1){         for(var j = 0; j < i; j++){             if(arr[i] == arr[j]){                 flag = 0;             }           }         flag?newArr.push(arr[i]):'';     }     alert(newArr); })([1, 1, 22, 3, 4, 55, 66]);

 

10三、階乘函數；

//原型方法 Number.prototype.N = function(){     var re = 1;     for(var i = 1; i <= this; i++){         re *= i;     }     return re; } var num = 5; alert(num.N());

10四、window.location.search() 返回的是什麼？

    答：查詢(參數)部分。除了給動態語言賦值之外，咱們一樣能夠給靜態頁面,並使用javascript來得到相信應的參數值

        返回值：?ver=1.0&id=timlq 也就是問號後面的！

10五、window.location.hash 返回的是什麼？

    答：錨點 ， 返回值：#love ；

10六、window.location.reload() 做用？

    答：刷新當前頁面。

10七、阻止冒泡函數

function stopPropagation(e) {       e = e || window.event;       if(e.stopPropagation) { //W3C阻止冒泡方法           e.stopPropagation();       } else {           e.cancelBubble = true; //IE阻止冒泡方法       }   }   document.getElementById('need_hide').onclick = function(e) {       stopPropagation(e);   }

10八、什麼是閉包？ 寫一個簡單的閉包？；

    答：個人理解是，閉包就是可以讀取其餘函數內部變量的函數。在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。

function outer(){     var num = 1;     function inner(){         var n = 2;         alert(n + num);     }     return inner; } outer()();

10九、javascript 中的垃圾回收機制？

    答：在Javascript中，若是一個對象再也不被引用，那麼這個對象就會被GC回收。若是兩個對象互相引用，而再也不  被第3者所引用，那麼這兩個互相引用的對象也會被回收。由於函數a被b引用，b又被a外的c引用，這就是爲何  函數a執行後不會被回收的緣由。

1十、看題作答：

function f1(){     var tmp = 1;     this.x = 3;     console.log(tmp);    //A     console.log(this.x)；     //B } var obj = new f1(); //1 console.log(obj.x)     //2 console.log(f1());        //3

    分析：    

        這道題讓我從新認識了對象和函數，首先看代碼（1），這裏實例話化了 f1這個類。至關於執行了 f1函數。因此這個時候 A 會輸出 1， 而 B 這個時候的 this 表明的是 實例化的當前對象 obj B 輸出 3.。 代碼（2）毋庸置疑會輸出 3， 重點 代碼（3）首先這裏將再也不是一個類，它只是一個函數。那麼 A輸出 1， B呢？這裏的this 表明的其實就是window對象，那麼this.x 就是一個全局變量 至關於在外部 的一個全局變量。因此 B 輸出 3。最後代碼因爲f沒有返回值那麼一個函數若是沒返回值的話，將會返回 underfined ，因此答案就是 ： 1， 3， 3， 1， 3， underfined 。

1十一、下面輸出多少？

var o1 = new Object(); var o2 = o1; o2.name = "CSSer"; console.log(o1.name);

  若是不看答案，你回答真確了的話，那麼說明你對javascript的數據類型瞭解的仍是比較清楚了。js中有兩種數據類型，分別是：基本數據類型和引用數據類型（object Array）。對於保存基本類型值的變量，變量是按值訪問的，由於咱們操做的是變量實際保存的值。對於保存引用類型值的變量，變量是按引用訪問的，咱們操做的是變量值所引用（指向）的對象。答案就清楚了：  //CSSer;

1十二、再來一個

function changeObjectProperty (o) {     o.siteUrl = "http://www.csser.com/";     o = new Object();     o.siteUrl = "http://www.popcg.com/"; } var CSSer = new Object(); changeObjectProperty(CSSer); console.log(CSSer.siteUrl); //

    若是CSSer參數是按引用傳遞的，那麼結果應該是"http://www.popcg.com/"，但實際結果卻還是"http://www.csser.com/"。事實是這樣的：在函數內部修改了引用類型值的參數，該參數值的原始引用保持不變。咱們能夠把參數想象成局部變量，當參數被重寫時，這個變量引用的就是一個局部變量，局部變量的生存期僅限於函數執行的過程當中，函數執行完畢，局部變量即被銷燬以釋放內存。    

    （補充：內部環境能夠經過做用域鏈訪問全部的外部環境中的變量對象，但外部環境沒法訪問內部環境。每一個環境均可以向上搜索做用域鏈，以查詢變量和函數名，反之向下則不能。）

11三、輸出多少？

var a = 6; setTimeout(function () {         var a = 666;     alert(a);      // 輸出666， }, 1000); a = 66;

由於var a = 666;定義了局部變量a，而且賦值爲666，根據變量做用域鏈，
全局變量處在做用域末端，優先訪問了局部變量，從而覆蓋了全局變量 。

var a = 6; setTimeout(function () {         alert(a);      // 輸出undefined      var a = 666; }, 1000); a = 66;

由於var a = 666;定義了局部變量a，一樣覆蓋了全局變量，可是在alert(a);以前
a並未賦值，因此輸出undefined。

var a = 6;  setTimeout(function(){     alert(a);     var a = 66;  }, 1000); a = 666;  alert(a);  // 666, undefined;

記住： 異步處理，一切OK 聲明提早

11四、輸出多少？

function setN(obj){     obj.name='屌絲';     obj = new Object();      obj.name = '腐女'; }; var per = new Object(); setN(per); alert(per.name);  //屌絲 內部

11五、JS的繼承性

window.color = 'red'; var o = {color: 'blue'}; function sayColor(){     alert(this.color); } sayColor(); //red sayColor.call(this); //red this-window對象 sayColor.call(window); //red sayColor.call(o); //blue

11六、精度問題: JS 精度不能精確到 0.1 因此  。。。。同時存在於值和差值中

var n = 0.3,m = 0.2, i = 0.2, j = 0.1; alert((n - m) == (i - j)); //false alert((n-m) == 0.1); //false alert((i-j)==0.1); //true

11七、加減運算

alert('5'+3); //53 string alert('5'+'3'); //53 string alert('5'-3); //2 number alert('5'-'3'); //2 number

11八、什麼是同源策略？

    指： 同協議、端口、域名的安全策略，由王景公司提出來的安全協議！

11九、call和applay的區別是什麼？

    參數形式不一樣，call(obj, pra, pra)後面是單個參數。applay(obj, [args])後面是數組。

120、爲何不能定義1px左右的div容器？   

IE6下這個問題是由於默認的行高形成的，解決的方法也有不少，例如：

overflow:hidden | zoom:0.08 | line-height:1px

12一、結果是什麼？

function foo(){     foo.a = function(){alert(1)};      this.a = function(){alert(2)};     a = function(){alert(3)};     var a = function(){alert(4)}; };  foo.prototype.a = function(){alert(5)}; foo.a = function(){alert(6)}; foo.a(); //6 var obj = new foo(); obj.a(); //2 foo.a(); //1

12二、輸出結果

var a = 5;  function test(){     a = 0;      alert(a);      alert(this.a); //沒有定義 a這個屬性     var a;      alert(a) } test(); // 0, 5, 0 new test(); // 0, undefined, 0 //因爲類它自身沒有屬性a， 因此是undefined

12三、計算字符串字節數：

new function(s){       if(!arguments.length||!s) return null;        if(""==s) return 0;           var l=0;      for(var i=0;i<s.length;i++){                  if(s.charCodeAt(i)>255) l+=2; else l+=1;  //charCodeAt()獲得的是unCode碼         }     //漢字的unCode碼大於 255bit 就是兩個字節      alert(l);  }("hello world!");

12四、結果是：

var bool = !!2; alert(bool)；//true;

雙向非操做能夠把字符串和數字轉換爲布爾值。

12五、聲明對象，添加屬性，輸出屬性

var obj = {         name: 'leipeng',         showName: function(){             alert(this.name);         }     } obj.showName();

12六、匹配輸入的字符：第一個必須是字母或下劃線開頭，長度5-20

var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,20}/,             name1 = 'leipeng',             name2 = '0leipeng',             name3 = '你好leipeng',             name4 = 'hi';               alert(reg.test(name1));         alert(reg.test(name2));         alert(reg.test(name3));         alert(reg.test(name4));

12七、檢測變量類型

function checkStr(str){         typeof str == 'string'? alert('true'):alert('false');     }     checkStr('leipeng');

12八、如何在HTML中添加事件，幾種方法？

    一、標籤之中直接添加 onclick="fun()";

    二、JS添加 Eobj.onclick = method;

    三、現代事件  IE： obj.attachEvent('onclick', method)；

                   FF: obj.addEventListener('click', method, false);

12九、BOM對象有哪些，列舉window對象？

    一、window對象 ，是JS的最頂層對象，其餘的BOM對象都是window對象的屬性；

    二、document對象，文檔對象；

    三、location對象，瀏覽器當前URL信息；

    四、navigator對象，瀏覽器自己信息；

    五、screen對象，客戶端屏幕信息；

    六、history對象，瀏覽器訪問歷史信息；

130、請問代碼實現 outerHTML

    //說明：outerHTML其實就是innerHTML再加上自己；

Object.prototype.outerHTML = function(){         var innerCon = this.innerHTML, //得到裏面的內容             outerCon = this.appendChild(innerCon); //添加到裏面         alert(outerCon);      }

    演示代碼：

     

<!doctype html>  <html>   <head>     <meta charset="UTF-8">     <title>Document</title>   </head>   <body>     <div id="outer">        hello     </div>   <script>     Object.prototype.outerHTML = function(){     var innerCon = this.innerHTML, //得到裏面的內容     outerCon = this.appendChild(innerCon); //添加到裏面     alert(outerCon);        }     function $(id){    return document.getElementById(id);    }    alert($('outer').innerHTML);    alert($('outer').outerHTML);   </script>  </body>  </html>

13一、JS中的簡單繼承 call方法！

//頂一個父母類，注意：類名都是首字母大寫的哦！   function Parent(name, money){             this.name = name;             this.money = money;             this.info = function(){                 alert('姓名： '+this.name+' 錢： '+ this.money);             }         }         //定義孩子類         function Children(name){             Parent.call(this, name); //繼承 姓名屬性，不要錢。               this.info = function(){                 alert('姓名： '+this.name);             }         }         //實例化類         var per = new Parent('parent', 800000000000);         var chi = new Children('child');         per.info();         chi.info();

13二、bind(), live(), delegate()的區別

    bind： 綁定事件，對新添加的事件不起做用，方法用於將一個處理程序附加到每一個匹配元素的事件上並返回jQuery對象。

    live： 方法將一個事件處理程序附加到與當前選擇器匹配的全部元素（包含現有的或未來添加的）的指定事件上並返回jQuery對象。

    delegate： 方法基於一組特定的根元素將處理程序附加到匹配選擇器的全部元素（現有的或未來的）的一個或多個事件上。

13三、typeof 的返回類型有哪些？   

alert(typeof [1, 2]); //object     alert(typeof 'leipeng'); //string     var i = true;      alert(typeof i); //boolean     alert(typeof 1); //number     var a;      alert(typeof a); //undefined     function a(){;};     alert(typeof a) //function

13四、簡述link和import的區別？

區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。

區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

區別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。

13五、window.onload 和 document.ready的區別？

load要等到圖片和包含的文件都加在進來以後執行；

ready是不包含圖片和非文字文件的文檔結構準備好就執行；

13六、 解析URL成一個對象？

String.prototype.urlQueryString = function(){                 var url = this.split('?')[1].split('&'),                     len = url.length;                           this.url = {};                 for(var i = 0; i < len; i += 1){                     var cell = url[i].split('='),                             key = cell[0],                         val = cell[1];                     this.url[''+key+''] = val;                 }                  return this.url;             }             var url = '?name=12&age=23';             console.log(url.urlQueryString().age);

13七、看下列代碼輸出什麼？

var foo = "11"+2-"1";

console.log(foo);

console.log(typeof foo);

執行完後foo的值爲111，foo的類型爲Number。

13八、看下列代碼,輸出什麼？

var a = new Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.value);

執行完後輸出結果爲2

13九、已知數組var stringArray = ["This」, "is」, "Baidu」, "Campus」]，Alert出」This is Baidu Campus」。

答案：alert(stringArray.join(""))

140、已知有字符串foo="get-element-by-id",寫一個function將其轉化成駝峯表示法"getElementById"。

答案：function combo(msg){

  var arr = msg.split("-");

  var len = arr.length;  //將arr.length存儲在一個局部變量能夠提升for循環效率

  for(var i=1;i<len;i++){

    arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

  }

  msg=arr.join("");

  return msg;

}

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

　　1）建立新節點

createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點

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

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

14二、原生JS的window.onload與Jquery的$(document).ready(function(){})有什麼不一樣？

　　window.onload()方法是必須等到頁面內包括圖片的全部元素加載完畢後才能執行。

$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。 

 

14三、你如何優化本身的代碼？

代碼重用

避免全局變量（命名空間，封閉空間，模塊化mvc..）

拆分函數避免函數過於臃腫

註釋

14四、請描述出下列代碼運行的結果

function d(){

        console.log(this);

}

d();

14五、須要將變量e的值修改成「a+b+c+d」,請寫出對應的代碼

var e=」abcd」;

設計一段代碼可以遍歷下列整個DOM節點

<div>

        <p>

            <span><a/></span>

            <span><a/></span>

        </p>

        <ul>

            <li></li>

            <li></li>

        </ul>

</div>

14六、怎樣實現兩欄等高？

14七、使用js實現這樣的效果：在文本域裏輸入文字時，當按下enter鍵時不換行，而是替換成「{{enter}}」,(只須要考慮在行尾按下enter鍵的狀況).

14八、如下代碼中end字符串何時輸出

var t=true;

setTimeout(function(){

    console.log(123);

    t=false;

    },1000);

while(t){}

console.log(‘end’);

14九、specify(‘hello,world’)//=>’h,e,l,l,o,w,o,r,l,d’實現specify函數

150、請將一個URL的search部分參數與值轉換成一個json對象

15一、請用原生js實現jquery的get\post功能，以及跨域狀況下

15二、請簡要描述web前端性能須要考慮哪方面，你的優化思路是什麼？

15三、簡述readyonly與disabled的區別

15四、判斷一個字符呂串出現次數最多的字符，統計這個次數並輸出

15五、編寫一個方法，去掉一個數組的復重元素

15六、寫出3個使用this的典型應用

15七、請儘量詳盡的解釋ajax的工做原理

15八、爲何擴展javascript內置對象不是好的作法？

15九、請解釋一下javascript的同源策略

160、什麼是三元表達式？「三元」表示什麼意思？

16一、瀏覽器標準模式和怪異模式之間的區別是什麼？

16二、若是設計中使用了非標準的字體，你該如何去實現？

16三、用css分別實現某個div元素上下居中和左右居中

16四、modulo(12,5)//2  實現知足這個結果的modulo函數

16五、HTTP協議中，GET和POST有什麼區別？分別適用什麼場景 ？

16六、HTTP狀態消息200 302 304 403 404 500分別表示什麼

16七、HTTP協議中，header信息裏面，怎麼控制頁面失效時間（last-modified,cache-control,Expires分別表明什麼）

16八、HTTP雷鋒議目前經常使用的有哪幾個？KEEPALIVE從哪一個版本開始出現的？

16九、業界經常使用的優化WEB頁面加載速度的方法（能夠分別從頁面元素展示，請求鏈接，css,js,服務器等方面介紹）

170、列舉經常使用的web頁面開發，調試以及優化工具

17一、解釋什麼是sql注入，xss漏洞

17二、如何判斷一個js變量是數組類型

17三、請列舉js數組類型中的經常使用方法

17四、FF與IE中如何阻止事件冒泡，如何獲取事件對象，以及如何獲取觸發事件的元素

17五、列舉經常使用的js框架以及分別適用的領域

17六、js中如何實現一個map

17七、js能否實現面向對象編程，若是能夠如何實現js對象的繼承

17八、約瑟夫環—已知n我的（以編號1，2，3…分別表示）圍坐在一張圓桌周圍。從編號爲k的人開始報數，數到m的那我的出列；他的下一我的又從1開始報數，數到m的那我的又出列；依此規律重複下去，直到圓桌周圍的人所有出列。

17九、有1到10w這個10w個數，去除2個並打亂次序，如何找出那兩個數？

180、如何獲取對象a擁有的全部屬性（可枚舉的、不可枚舉的，不包括繼承來的屬性）

18一、有下面這樣一段HTML結構，使用css實現這樣的效果：

左邊容器不管寬度如何變更，右邊容器都能自適應填滿父容器剩餘的寬度。

<div class=」warp」>

<div class=」left」></div>

<div class=」right」></div>

</div>

18二、下面這段代碼想要循環昝輸出結果01234，請問輸出結果是否正確，若是不正確，請說明爲何，並修改循環內的代碼使其輸出正確結果

for(var i=0;i<5;++i){

    setTimeout(function(){

            console.log(i+’’);

        },100*i);

}

18三、解釋下這個css選擇器什麼發生什麼？

[role=nav]>ul a:not([href^-mailto]){}

18四、JavaScript如下哪條語句會產生運行錯誤         

A. var obj = ();    B. var obj = [];    C. var obj = {};    D. var obj = //;

答案：AD

18五、如下哪些是javascript的全局函數：（ABC）

A. escape   函數可對字符串進行編碼，這樣就能夠在全部的計算機上讀取該字符串。ECMAScript v3 反對使用該方法，應用使用 decodeURI() 和 decodeURIComponent() 替代它。

B. parseFloat   parseFloat() 函數可解析一個字符串，並返回一個浮點數。

該函數指定字符串中的首個字符是不是數字。若是是，則對字符串進行解析，直到到達數字的末端爲止，而後以數字返回該數字，而不是做爲字符串。

C. eval 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。

D. setTimeout

E. alert

18六、關於IE的window對象表述正確的有：（ACD）

A. window.opener屬性自己就是指向window對象

B. window.reload()方法能夠用來刷新當前頁面  應該是location.reload或者window.location.reload

C. window.location=」a.html」和window.location.href=」a.html」的做用都是把當前頁面替換成a.html頁面

D. 定義了全局變量g；能夠用window.g的方式來存取該變量

18七、描述錯誤的是

A：Http狀態碼302表示暫時性轉移 對

B:domContentLoaded事件早於onload事件  onload 事件會在頁面或圖像加載完成後當即發生。

C: IE678不支持事件捕獲 

D:localStorage 存儲的數據在電腦重啓後丟失     沒有時間限制

try...catch 語句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)

18八、關於link和@import的區別正確的是  A

A: link屬於XHTML標籤，而@import是CSS提供的；

B：頁面被加載時，link會同時被加載，然後者引用的CSS會等到頁面被加載完再加載

C：import只在IE5以上才能識別 而link是XHTML標籤，無兼容問題

D: link方式的樣式的權重高於@import的權重

18九、下面正確的是  A

A: 跨域問題能經過JsonP方案解決 B：不一樣子域名間僅能經過修改window.name解決跨域   還能夠經過script標籤src  jsonp等h5 Java split等

C：只有在IE中可經過iframe嵌套跨域 D：MediaQuery屬性是進行視頻格式檢測的屬性是作響應式的

18八、錯誤的是

A: Ajax本質是XMLHttpRequest       

B: 塊元素實際佔用的寬度與它的width、border、padding屬性有關，與background無關

C: position屬性absolute、fixed、---relative---會使文檔脫標

D:  float屬性left也會使div脫標

18九、不用任何插件，如何實現一個tab欄切換？

190、基本數據類型的專業術語以及單詞拼寫

19一、變量的命名規範以及命名推薦

19二、三種彈窗的單詞以及三種彈窗的功能

19三、console.log( 8 | 1 ); 輸出值是多少？

答案：9

19四、只容許使用 + - * / 和 Math.* ，求一個函數 y = f(x, a, b);當x > 100 時返回 a 的值，不然返回 b 的值，不能使用 if else 等條件語句，也不能使用|,?:,數組。

答案：

function f(x, a, b) {

    var temp = Math.ceil(Math.min(Math.max(x - 100, 0), 1));

    return a * temp + b * (1 - temp);

}

console.log(f(-10, 1, 2));

19五、JavaScriptalert(0.4*0.2);結果是多少？和你預期的同樣嗎？若是不同該如何處理？

    有偏差，應該比準確結果偏大。 通常我會將小數變爲整數來處理。當前以前遇到這個問題時也上網查詢發現有人用try catch return寫了一個函數，

    固然原理也是一致先轉爲整數再計算。看起來挺麻煩的，我沒用過。

19六、一個div，有幾種方式獲得這個div的jQuery對象？<div class='aabbcc' id='nodesView'></div>想直接獲取這個div的dom對象，如何獲取？dom對象如何轉化爲jQuery對象？

19七、主流瀏覽器內核

IE trident  火狐gecko   谷歌蘋果webkit  Opera：Presto

19八、如何顯示/隱藏一個dom元素？請用原生的JavaScript方法實現

19九、JavaScript有哪幾種數據類型

    Number String Boolean Null Undefined Object

200、jQuery框架中$.ajax()的經常使用參數有哪些？寫一個post請求並帶有發送數據和返回數據的樣例

20一、JavaScript數組元素添加、刪除、排序等方法有哪些？

Array.concat( ) 鏈接數組

Array.join( ) 將數組元素鏈接起來以構建一個字符串

Array.length 數組的大小

Array.pop( ) 刪除並返回數組的最後一個元素

Array.push( ) 給數組添加元素

Array.reverse( ) 顛倒數組中元素的順序

Array.shift( ) 將元素移出數組

Array.slice( ) 返回數組的一部分

Array.sort( ) 對數組元素進行排序

Array.splice( ) 插入、刪除或替換數組的元素

Array.toLocaleString( ) 把數組轉換成局部字符串

Array.toString( ) 將數組轉換成一個字符串

Array.unshift( ) 在數組頭部插入一個元素

20二、如何添加html元素的事件，有幾種方法？請列舉

直接在標籤裏添加；在元素上添加、使用事件註冊函數添加

20三、JavaScript的循環語句有哪些？

while  for  do while  forEach

20四、做用域-編譯期執行期以及全局局部做用域問題

理解js執行主要的兩個階段：預解析和執行期

20五、閉包：下面這個ul，如何點擊每一列的時候alert其index？

<ul id="test">

<li>這是第一條</li>

<li>這是第二條</li>

<li>這是第三條</li>

</ul>

20六、列出3條以上ff和IE的腳本兼容問題

一、在IE下可經過document.frames["id"];獲得該IFRAME對象，

而在火狐下則是經過document.getElementById("content_panel_if").contentWindow;

二、IE的寫法： _tbody=_table.childNodes[0]

在FF中，firefox會在子節點中包含空白則第一個子節點爲空白""， 而ie不會返回空白

能夠經過if("" != node.nodeName)過濾掉空白子對象

三、模擬點擊事件

if(document.all){  //ie下

    document.getElementById("a3").click();  

}

else{  //非IE

    var evt = document.createEvent("MouseEvents"); 

    evt.initEvent("click", true, true); 

    document.getElementById("a3").dispatchEvent(evt); 

} 

四、事件註冊

if (isIE){window.attachEvent("onload", init);}else{window.addEventListener("load", init, false);}

20七、列舉能夠哪些方面對前端開發進行優化

代碼壓縮、合併減小http請求，圖片製做精靈圖、代碼優化

20八、至少列出一種JavaScript繼承的實現方式

20九、如如今有一個效果，有顯示用戶頭像、用戶暱稱、用戶其餘信息；當用戶鼠標移到頭像上時，會彈出用戶的全部信息；若是是你，你會如何實現這個功能，請用代碼實現？

2十、call與apply有什麼做用？又有什麼什麼區別？用callee屬性實現函數遞歸？

apply的參數是數組,call的參數是單個的值，除此以外，二者沒有差異，重點理解this的改變，callee已經不推薦使用

2十一、用正則表達式，寫出由字母開頭，其他由數字、字母、下劃線組成的6~30的字符串？

2十二、列舉瀏覽器對象模型BOM裏經常使用的至少4個對象，並列舉window對象的經常使用方法至少5個 （10分）

對象：Window document location screen history navigator

方法：Alert() confirm() prompt() open() close()

21三、Javascript中callee和caller的做用？

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

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

21四、對於apply和call二者在做用上是相同的，便是調用一個對象的一個方法，以另外一個對象替換當前對象。將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。

但二者在參數上有區別的。對於第一個參數意義都同樣，但對第二個參數：?apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入，而call則做爲call的參數傳入（從第二個參數開始）。?如 func.call(func1,var1,var2,var3)對應的apply寫法爲：func.apply(func1,[var1,var2,var3]) 。

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

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

21六、寫一個函數能夠計算 sum(5,0,-5);輸出0; sum(1,2,3,4);輸出10;

Js基本功

21七、事件代理怎麼實現？

在元素的父節點註冊事件，經過事件冒泡，在父節點捕獲事件

21八、《正則》寫出正確的正則表達式匹配固話號，區號3-4位，第一位爲0，中橫線，7-8位數字，中橫線，3-4位分機號格式的固話號

經常使用正則表達式語法要熟悉

21九、《算法》 一下A,B可任選一題做答，兩題全答加分

A:農場買了一隻羊，第一年是小羊，第二年末生一隻，第三年不生，第四年末再生一隻，第五年死掉。

B:寫出代碼對下列數組去重並從大到小排列{5,2,3,6,8,6,5,4,7,1,9}

220、請寫出一張圖片的HTML代碼，已知道圖片地址爲「images/abc.jpg」,寬100px，高50px

22一、請寫一個正則表達式：要求最短6位數，最長20位，阿拉伯數和英文字母（不區分大小寫）組成

^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,20}$

22二、統計1到400億之間的天然數中含有多少個1？好比1-21中，有一、十、十一、21這四個天然數有5個1

22三、刪除與某個字符相鄰且相同的字符，好比fdaffdaaklfjklja字符串處理以後成爲「fdafdaklfjklja」

22四、請寫出三種以上的Firefox有但InternetExplorer沒有的屬性和函數

一、在IE下可經過document.frames["id"];獲得該IFRAME對象，

而在火狐下則是經過document.getElementById("content_panel_if").contentWindow;

二、IE的寫法： _tbody=_table.childNodes[0]

在FF中，firefox會在子節點中包含空白則第一個子節點爲空白""， 而ie不會返回空白

能夠經過if("" != node.nodeName)過濾掉空白子對象

三、模擬點擊事件

if(document.all){  //ie下

    document.getElementById("a3").click(); 

}

else{  //非IE

    var evt = document.createEvent("MouseEvents"); 

    evt.initEvent("click", true, true); 

    document.getElementById("a3").dispatchEvent(evt); 

} 

四、事件註冊

if (isIE){window.attachEvent("onload", init);}else{window.addEventListener("load", init, false);}

22五、請寫出一個程序，在頁面加載完成後動態建立一個form表單，並在裏面添加一個input對象並給它任意賦值後義post方式提交到：http://127.0.0.1/save.php

 

22六、用JavaScript實現冒泡排序。數據爲2三、4五、1八、3七、9二、1三、24

面試常常遇到的排序，查找算法要熟悉

22七、解釋一下什麼叫閉包，並實現一段閉包代碼

簡單理解就是函數的嵌套造成閉包，閉包包括函數自己及其外部做用域

22八、簡述一下什麼叫事件委託以及其原理

在元素的父節點註冊事件，經過事件冒泡，在父節點捕獲事件

22九、前端代碼優化的方法

var User = { 對象

    count = 1，屬性

    getCount：function（）{ 方法

        return this.count;

    }

}

console.log(User.getCount());

var func = User.getCount;

console.log(func());

1 undefined（window）;

230、下列JavaScript代碼執行後，依次alert的結果是

(function test(){

      var a=b=5;

      alert(typeof a);

      alert(typeof b);

})();

alert(typeof a);

alert(typeof b);

23一、下列JavaScript代碼執行後，iNum的值是

var iNum = 0;

for(var i = 1; i< 10; i++){

     if(i % 5 == 0){

         continue;

    }

    iNum++;

}

23二、輸出結果是多少？

 1）  var a;

var b = a * 0;

if (b == b) {

     console.log(b * 2 + "2" - 0 + 4);

} else {

     console.log(!b * 2 + "2" - 0 + 4);

}

答案：26

2） <script>

     var a = 1;

</script>

<script>

var a;

var b = a * 0;

if (b == b) {

        console.log(b * 2 + "2" - 0 + 4);

} else {

        console.log(!b * 2 + "2" - 0 + 4);

}

</script>

答案：6

3）  var t = 10;

function test(t){

       var t = t++;

}test(t);

console.log(t);

答案：10

4） var t = 10;

function test(test){

      var t = test++;

}test(t);

console.log(t);

答案：10

6） var t = 10;

function test(test){

       t = test++;

}test(t);

console.log(t);

答案：10

7） var t = 10;

function test(test){

      t = t + test;

      console.log(t);

      var t = 3;

}test(t);

console.log(t);

答案：NaN  10

8）var a;

var b = a / 0;

if (b == b) {

        console.log(b * 2 + "2" - 0 + 4);

} else {

        console.log(!b * 2 + "2" - 0 + 4);

}

答案：26

9）<script>

      var a = 1;

</script>

<script>

    var a;

    var b = a / 0;

    if (b == b) {

        console.log(b * 2 + "2" + 4);

    } else {

        console.log(!b * 2 + "2" + 4);

    }

</script>

答案：Infinity24

23三、

<body>

<form id='form1'>

<div id='div1'></div>

<div id='div2'></div>

<div id='div3'></div>

<div id='div4'></div>

<div id='div5'></div>

<div id='div3'>id名重複的元素</div>

</form>

</body>

用程序實現找到html中id名相同的元素？

23四、下列JavaScript代碼執行後，運行的結果是

<button id='btn'>點擊我</button>

var btn = document.getElementById('btn');

var handler = {

    id: '_eventHandler',

    exec: function(){

        alert(this.id);

    }

}

btn.addEventListener('click', handler.exec.false);

23五、下列JavaScript代碼執行後，依次alert的結果是

var obj = {proto: {a:1,b:2}};

function F(){};

F.prototype = obj.proto;

var f = new F();

obj.proto.c = 3;

obj.proto = {a:-1, b:-2};

alert(f.a);

alert(f.c);

delete F.prototype['a'];

alert(f.a);

alert(obj.proto.a);

23六、下列JavaScript代碼執行後的效果是

<ul id='list'>

<li>item</li>

<li>item</li>

<li>item</li>

<li>item</li>

<li>item</li>

</ul>

var items = document.querySelectorAll('#list>li');

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

     setTimeout(function(){

           items[i].style.backgroundColor = '#fee';

    }, 5);

}

23七、下列JavaScript代碼執行後的li元素的數量是

<ul>

<li>Item</li>

<li></li>

<li></li>

<li>Item</li>

<li>Item</li>

</ul>

var items = document.getElementsByTagName('li');

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

    if(items[i].innerHTML == ''){

        items[i].parentNode.removeChild(items[i]);

    }

}

23八、程序中捕獲異常的方法？

window.error

try{}catch(){}finally{}

23九、將字符串」<tr><td>{$id}</td><td>{$name}</td></tr>」中的{$id}替換成10，{$name}替換成Tony （使用正則表達式）

答案：」<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>」.replace(/{\$id}/g,?’10′).replace(/{\$name}/g,?‘Tony’);

240、給String對象添加一個方法，傳入一個string類型的參數，而後將string的每一個字符間價格空格返回，例如：

addSpace(「hello world」) // -> ‘h e l l o ?w o r l d’

         String.prototype.spacify = function(){

return this.split('').join(' ');

};

24一、寫出函數DateDemo的返回結果，系統時間假定爲今天

function DateDemo(){

 var d, s="今天日期是：";

d = new Date();

s += d.getMonth() + "/";

s += d.getDate() + "/";

s += d.getYear();

 return s;

}

結果：今天日期是：7/17/2010

24二、輸出今天的日期，以YYYY-MM-DD的方式，好比今天是2014年9月26日，則輸出2014-09-26

var d = new Date();

// 獲取年，getFullYear()返回4位的數字

var year = d.getFullYear();

// 獲取月，月份比較特殊，0是1月，11是12月

var month = d.getMonth() + 1;

// 變成兩位

month = month < 10 ? '0' + month : month;

// 獲取日

var day = d.getDate();

day = day < 10 ? '0' + day : day;

alert(year + '-' + month + '-' + day);

24三、已知數組var?stringArray?=?[「This」,?「is」,?「Baidu」,?「Campus」]，Alert出」This?is?Baidu?Campus」。

答案：alert(stringArray.join(「」))

24四、已知有字符串foo=」get-element-by-id」,寫一個function將其轉化成駝峯表示法」getElementById」。

function combo(msg){

var arr=msg.split("-");

for(var i=1;i<arr.length;i++){

arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

}

msg=arr.join("");

return msg;

}

24五、.varnumberArray=[3,6,2,4,1,5]; （考察基礎API）

1)實現對該數組的倒排，輸出[5,1,4,2,6,3]

2)實現對該數組的降序排列，輸出[6,5,4,3,2,1]

function combo(msg){

var arr=msg.split("-");

for(var i=1;i<arr.length;i++){

arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

}

msg=arr.join("");

return msg;

}

24六、把兩個數組合並，並刪除第二個元素。

var array1 = ['a','b','c'];

var bArray = ['d','e','f'];

var cArray = array1

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

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];

function deRepeat(){

var newArr=[];

var obj={};

var index=0;

var l=arr.length;

for(var i=0;i<l;i++){

if(obj[arr[i]]==undefined)

{

obj[arr[i]]=1;

newArr[index++]=arr[i];

}

else if(obj[arr[i]]==1)

}

return newArr;

}

var newArr2=deRepeat(arr);

alert(newArr2); //輸出1,2,3,4,5,6,9,25

24八、用js實現隨機選取10–100之間的10個數字，存入一個數組，並排序。

var iArray = [];

funtion getRandom(istart, iend){

var iChoice = istart - iend +1;

return Math.floor(Math.random() * iChoice + istart;

}

for(var i=0; i<10; i++){

iArray.push(getRandom(10,100));

}

iArray.sort();

24九、正則表達式構造函數var reg=new RegExp(「xxx」)與正則表達字面量var reg=//有什麼不一樣？匹配郵箱的正則表達式？

答案：當使用RegExp()構造函數的時候，不只須要轉義引號（即\」表示」），而且還須要雙反斜槓（即\\表示一個\）。使用正則表達字面量的效率更高。?

250、1 var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

正則表達式對象3 – 清除空格

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

使用自帶接口trim()，考慮兼容性：

if (!String.prototype.trim) {

String.prototype.trim = function() {

return this.replace(/^\s+/, "").replace(/\s+$/,"");

} }

// test the function

var str = " \t\n test string ".trim();

alert(str == "test string"); // alerts "true"

25一、數組和字符串

<script lang="JavaScript" type="text/javascript">

    function outPut(s) {

        document.writeln(s);

    }

    var a = "lashou";

    var b = a;

    outPut(b);

    a = "拉手";

    outPut(a);

    outPut(b);

    var a_array = [1, 2, 3];

    var b_array = a_array;

    outPut(b_array);

    a_array[3] = 4;

    outPut(a_array);

    outPut(b_array);

</script>

輸出結果：

答案：lashou 拉手 lashou 1,2,3 1,2,3,4 1,2,3,4

25二、下列控制檯都輸出什麼

第1題：

function setName(){

    name="張三";

}

setName();

console.log(name);

答案："張三"

25三、第2題：

//考點：一、變量聲明提高 二、變量搜索機制

var a=1;

function test(){

    console.log(a);

    var a=1;

}

test();

答案：undefined

25四、第3題：

var b=2;

function test2(){

    window.b=3;

    console.log(b);

}

test2();

答案：3

25五、第4題：

c=5;//聲明一個全局變量c

function test3(){

    window.c=3;

    console.log(c);     //答案：undefined，緣由：因爲此時的c是一個局部變量c，而且沒有被賦值

    var c;

    console.log(window.c);//答案：3，緣由：這裏的c就是一個全局變量c

}

test3();

25六、第5題：

var arr = [];

arr[0]  = 'a';

arr[1]  = 'b';

arr[10] = 'c';

alert(arr.length);  //答案：11

console.log(arr[5]);    //答案：undefined

25七、第6題：

var a=1;

console.log(a++);       //答案：1

console.log(++a);       //答案：3

25八、第7題：

console.log(null==undefined);   //答案：true

console.log("1"==1);        //答案：true，由於會將數字1先轉換爲字符串1

console.log("1"===1);       //答案：false，由於數據類型不一致

25九、第8題：

typeof 1;       "number"

typeof "hello";     "string"

typeof /[0-9]/;     "object"

typeof {};      "object"

typeof null;        "object"

typeof undefined;   "undefined"

typeof [1,2,3];     "object"

typeof function(){};    //"function"

260、第9題：

parseInt(3.14);         //3

parseFloat("3asdf");        //3

parseInt("1.23abc456");

parseInt(true);//"true" NaN

26一、第10題：

//考點：函數聲明提早

function bar() {

    return foo;

    foo = 10;

    function foo() {}

    //var foo = 11;

}

alert(typeof bar());//"function"

26二、第11題：考點：函數聲明提早

var foo = 1;

function bar() {

    foo = 10;

    return;

    function foo() {}

}

bar();

alert(foo);//答案：1

26三、第12題：

console.log(a);//是一個函數

var a = 3;

function a(){}

console.log(a);////3

26四、第13題：

//考點：對arguments的操做

function foo(a) {

    arguments[0] = 2;

    alert(a);//答案：2，由於：a、arguments是對實參的訪問，b、經過arguments[i]能夠修改指定實參的值

}

foo(1);

26五、第14題：

function foo(a) {

    alert(arguments.length);//答案：3，由於arguments是對實參的訪問

}

foo(1, 2, 3);

26六、第15題

bar();//報錯

var foo = function bar(name) {

    console.log("hello"+name);

    console.log(bar);

};

//alert(typeof bar);

foo("world");//"hello"

console.log(bar);//undefined

console.log(foo.toString());

bar();//報錯

26七、第16題

function test(){

    console.log("test函數");

}

setTimeout(function(){

    console.log("定時器回調函數");

}, 0)

test();

function foo(){

    var name="hello";

}

3、Jquery

一、jQuery 的 slideUp動畫 ，若是目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，該如何處理呢?

 

4、HTML5 CSS3

一、CSS3有哪些新特性？

1. CSS3實現圓角（border-radius），陰影（box-shadow），

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4. 增長了更多的CSS選擇器  多背景 rgba

5. 在CSS3中惟一引入的僞元素是 ::selection.

6. 媒體查詢，多欄佈局

7. border-image

二、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

新特性：

1. 拖拽釋放(Drag and drop) API

2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）

3. 音頻、視頻API(audio,video)

4. 畫布(Canvas) API

5. 地理(Geolocation) API

6. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

7. sessionStorage 的數據在瀏覽器關閉後自動刪除

8. 表單控件，calendar、date、time、email、url、search 

9. 新的技術webworker, websocket, Geolocation

移除的元素：

1. 純表現的元素：basefont，big，center，font, s，strike，tt，u；

2. 對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

1. IE8/IE7/IE6支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式（固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

<!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

如何區分：

DOCTYPE聲明新增的結構元素、功能元素

三、本地存儲（Local Storage ）和cookies（儲存在用戶本地終端上的數據）之間的區別是什麼？

Cookies:服務器和客戶端均可以訪問；大小隻有4KB左右；有有效期，過時後將會刪除；

本地存儲：只有本地瀏覽器端可訪問數據，服務器不能訪問本地存儲直到故意經過POST或者GET的通道發送到服務器；每一個域5MB；沒有過時數據，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除

四、如何實現瀏覽器內多個標籤頁之間的通訊?

調用 localstorge、cookies 等本地存儲方式

五、你如何對網站的文件和資源進行優化？

文件合併

文件最小化/文件壓縮

使用CDN託管

緩存的使用

六、什麼是響應式設計？

它是關於網頁製做的過程當中讓不一樣的設備有不一樣的尺寸和不一樣的功能。響應式設計是讓全部的人能在這些設備上讓網站運行正常 

七、新的 HTML5 文檔類型和字符集是？

答：HTML5文檔類型：<!doctype html>

    HTML5使用的編碼<meta charset=」UTF-8」>

八、HTML5 Canvas 元素有什麼用？

答：Canvas 元素用於在網頁上繪製圖形，該元素標籤強大之處在於能夠直接在 HTML 上進行圖形操做。

九、HTML5 存儲類型有什麼區別？

答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

十、用H5+CSS3解決下導航欄最後一項掉下來的問題

十一、CSS3新增僞類有那些？

    p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

    p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

    p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

    p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

    :enabled、:disabled 控制表單控件的禁用狀態。

:checked，單選框或複選框被選中。

十二、請用CSS實現：一個矩形內容，有投影，有圓角，hover狀態慢慢變透明。

css屬性的熟練程度和實踐經驗

1三、描述下CSS3裏實現元素動畫的方法

動畫相關屬性的熟悉程度

1四、html5\CSS3有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，地理定位等功能的增長。

* 繪畫 canvas 元素

  用於媒介回放的 video 和 audio 元素

  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

  sessionStorage 的數據在瀏覽器關閉後自動刪除

  語意化更好的內容元素，好比 article、footer、header、nav、section

  表單控件，calendar、date、time、email、url、search

  CSS3實現圓角，陰影，對文字加特效，增長了更多的CSS選擇器  多背景 rgba

  新的技術webworker, websockt, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

* 是IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

  能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

  瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

1五、你怎麼來實現頁面設計圖，你認爲前端應該如何高質量完成工做? 一個滿屏 品 字佈局 如何設計?

* 首先劃分紅頭部、body、腳部；。。。。。

* 實現效果圖是最基本的工做，精確到2px；

  與設計師，產品經理的溝通和項目的參與

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

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

  針對服務器的優化、擁抱 HTML5。

16、你能描述一下漸進加強和優雅降級之間的不一樣嗎?

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

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

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

　　「優雅降級」觀點

　　「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。

　　在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。

　　「漸進加強」觀點

　　「漸進加強」觀點則認爲應關注於內容自己。

　　內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。

 

　　那麼問題了。如今產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了不少圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？

17、爲何利用多個域名來存儲網站資源會更有效？

CDN緩存更方便 

突破瀏覽器併發限制 

節約cookie帶寬 

節約主域名的鏈接數，優化頁面響應速度 

防止沒必要要的安全問題

1八、請談一下你對網頁標準和標準制定機構重要性的理解。

　　（無標準答案）網頁標準和標準制定機構都是爲了能讓web發展的更‘健康’，開發者遵循統一的標準，下降開發難度，開發成本，SEO也會更好作，也不會由於濫用代碼致使各類BUG、安全問題，最終提升網站易用性。

 

1九、請描述一下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僅僅是爲了在本地「存儲」數據而生。

20、知道css有個content屬性嗎？有什麼做用？有什麼應用？

知道。css的content屬性專門應用在 before/after 僞元素上，用來插入生成內容。最多見的應用是利用僞類清除浮動。

//一種常見利用僞類清除浮動的代碼

.clearfix:after {

    content:"."; //這裏利用到了content屬性

    display:block;

    height:0;

    visibility:hidden;

    clear:both; }

.clearfix {

    *zoom:1;

}

after僞元素經過 content 在元素的後面生成了內容爲一個點的塊級素，再利用clear:both清除浮動。

　　那麼問題繼續還有，知道css計數器（序列數字字符自動遞增）嗎？如何經過css content屬性實現css計數器？

答案：css計數器是經過設置counter-reset 、counter-increment 兩個屬性 、及 counter()/counters()一個方法配合after / before 僞類實現。 

2一、如何在 HTML5 頁面中嵌入音頻?

HTML 5 包含嵌入音頻文件的標準方式，支持的格式包括 MP三、Wav 和 Ogg：

<audio controls> 

  <source src="jamshed.mp3" type="audio/mpeg"> 

   Your browser does'nt support audio embedding feature. 

</audio>

2二、如何在 HTML5 頁面中嵌入視頻？

和音頻同樣，HTML5 定義了嵌入視頻的標準方法，支持的格式包括：MP四、WebM 和 Ogg：

<video width="450" height="340" controls> 

  <source src="jamshed.mp4" type="video/mp4"> 

   Your browser does'nt support video embedding feature. 

</video> 

2三、HTML5 引入什麼新的表單屬性？

Datalist   datetime   output   keygen  date  month  week  time  number   range   emailurl

2四、CSS3新增僞類有那些？

 p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

    p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

    p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

    p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

    :enabled、:disabled 控制表單控件的禁用狀態。

:checked，單選框或複選框被選中。

2五、(寫)描述一段語義的html代碼吧。

（HTML5中新增長的不少標籤（如：<article>、<nav>、<header>和<footer>等）

就是基於語義化設計原則） 

< div id="header">

< h1>標題< /h1>

< h2>專一Web前端技術< /h2>

< /div>

語義 HTML 具備如下特性：

 

文字包裹在元素中，用以反映內容。例如：

段落包含在 <p> 元素中。

順序表包含在<ol>元素中。

從其餘來源引用的大型文字塊包含在<blockquote>元素中。

HTML 元素不能用做語義用途之外的其餘目的。例如：

<h1>包含標題，但並不是用於放大文本。

<blockquote>包含大段引述，但並不是用於文本縮進。

空白段落元素 ( <p></p> ) 並不是用於跳行。

文本並不直接包含任何樣式信息。例如：

不使用 <font> 或 <center> 等格式標記。

類或 ID 中不引用顏色或位置。

26.cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage區別

sessionStorage和localStorage的存儲空間更大；

sessionStorage和localStorage有更多豐富易用的接口；

sessionStorage和localStorage各自獨立的存儲空間；

2七、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

* 繪畫 canvas 

  用於媒介回放的 video 和 audio 元素

  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

  sessionStorage 的數據在瀏覽器關閉後自動刪除

  語意化更好的內容元素，好比 article、footer、header、nav、section

  表單控件，calendar、date、time、email、url、search 

  新的技術webworker, websockt, Geolocation

* 移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

  能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

  瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

2八、如何區分： DOCTYPE聲明\新增的結構元素\功能元素

2九、語義化的理解？

用正確的標籤作正確的事情！

html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；

在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。

搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。

使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

30、HTML5的離線儲存？

localStorage    長期存儲數據，瀏覽器關閉後數據不丟失；

sessionStorage  數據在瀏覽器關閉後自動刪除。

3一、寫出HTML5的文檔聲明方式

<DOCYPE html>

3二、HTML5和CSS3的新標籤     

HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio... CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image,  border-color, transform...;

3三、本身對標籤語義化的理解

    在我看來，語義化就是好比說一個段落， 那麼咱們就應該用 <p>標籤來修飾，標題就應該用 <h?>標籤等。符合文檔語義的標籤。

5、移動web開發

一、移動端經常使用類庫及優缺點

知識面寬度，多多益善

二、Zepto庫和JQ區別

Zepto相對jQuery更加輕量，主要用在移動端，jQuery也有對應的jQuerymobile移動端框架

6、Ajax

一、Ajax 是什麼? 如何建立一個Ajax？

Ajax並不算是一種新的技術，全稱是asychronous javascript and xml，能夠說是已有技術的組合，主要用來實現客戶端與服務器端的異步通訊效果，實現頁面的局部刷新，早期的瀏覽器並不能原生支持ajax，能夠使用隱藏幀（iframe）方式變相實現異步效果，後來的瀏覽器提供了對ajax的原生支持

使用ajax原生方式發送請求主要經過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)對象實現異步通訊效果

基本步驟：

var xhr =null;//建立對象

if(window.XMLHttpRequest){

   xhr = new XMLHttpRequest();

}else{

   xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

     xhr.open(「方式」,」地址」,」標誌位」);//初始化請求

     xhr.setRequestHeader(「」,」」);//設置http頭信息

     xhr.onreadystatechange =function(){}//指定回調函數

     xhr.send();//發送請求

js框架（jQuery/EXTJS等）提供的ajax  API對原生的ajax進行了封裝，熟悉了基礎理論，再學習別的框架就會駕輕就熟，好多都是換湯不換藥的內容

二、同步和異步的區別?

同步：阻塞的

-張三叫李四去吃飯，李四一直忙得不停，張三一直等着，直到李四忙完兩我的一塊去吃飯

=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器一直等着（頁面白屏），直到服務器返回數據，瀏覽器才能顯示頁面

異步：非阻塞的

-張三叫李四去吃飯，李四在忙，張三說了一聲而後本身就去吃飯了，李四忙完後本身去吃

=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器能夠自如的幹原來的事情（顯示頁面），服務器返回數據的時候通知瀏覽器一聲，瀏覽器把返回的數據再渲染到頁面，局部更新

三、如何解決跨域問題?

理解跨域的概念：協議、域名、端口都相同才同域，不然都是跨域

出於安全考慮，服務器不容許ajax跨域獲取數據，可是能夠跨域獲取文件內容，因此基於這一點，能夠動態建立script標籤，使用標籤的src屬性訪問js文件的形式獲取js腳本，而且這個js腳本中的內容是函數調用，該函數調用的參數是服務器返回的數據，爲了獲取這裏的參數數據，須要事先在頁面中定義回調函數，在回調函數中處理服務器返回的數據，這就是解決跨域問題的主流解決方案

四、頁面編碼和被請求的資源編碼若是不一致如何處理？

對於ajax請求傳遞的參數，若是是get請求方式，參數若是傳遞中文，在有些瀏覽器會亂碼，不一樣的瀏覽器對參數編碼的處理方式不一樣，因此對於get請求的參數須要使用 encodeURIComponent函數對參數進行編碼處理，後臺開發語言都有相應的解碼api。對於post請求不須要進行編碼

五、簡述ajax 的過程。

1. 建立XMLHttpRequest對象,也就是建立一個異步調用對象

2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

3. 設置響應HTTP請求狀態變化的函數

4. 發送HTTP請求

5. 獲取異步調用返回的數據

6. 使用JavaScript和DOM實現局部刷新

六、闡述一下異步加載。

1. 異步加載的方案： 動態插入 script 標籤

2. 經過 ajax 去獲取 js 代碼，而後經過 eval 執行

3. script 標籤上添加 defer 或者 async 屬性

4. 建立並插入 iframe，讓它異步執行 js

七、請解釋一下 JavaScript 的同源策略。

同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。所謂同源指的是：協議，域名，端口相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

八、GET和POST的區別，什麼時候使用POST？

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符，有的瀏覽器是8000個字符

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制

在如下狀況中，請使用 POST 請求：

1. 沒法使用緩存文件（更新服務器上的文件或數據庫）

2. 向服務器發送大量數據（POST 沒有數據量限制）

3. 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

九、ajax 是什麼?ajax 的交互模型?同步和異步的區別?如何解決跨域問題?

 1. 經過異步模式，提高了用戶體驗

 2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用

3.  Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。

十、 Ajax的最大的特色是什麼。

    Ajax能夠實現異步通訊效果，實現頁面局部刷新，帶來更好的用戶體驗；按需獲取數據，節約帶寬資源；

十一、ajax的缺點

 一、ajax不支持瀏覽器back按鈕。

 二、安全問題 AJAX暴露了與服務器交互的細節。

 三、對搜索引擎的支持比較弱。

 四、破壞了程序的異常機制。

十二、ajax請求的時候get 和post方式的區別

get通常用來進行查詢操做，url地址有長度限制，請求的參數都暴露在url地址當中，若是傳遞中文參數，須要本身進行編碼操做，安全性較低。

post請求方式主要用來提交數據，沒有數據長度的限制，提交的數據內容存在於http請求體中，數據不會暴漏在url地址中。

1三、解釋jsonp的原理，以及爲何不是真正的ajax

　　Jsonp並非一種數據格式，而json是一種數據格式，jsonp是用來解決跨域獲取數據的一種解決方案，具體是經過動態建立script標籤，而後經過標籤的src屬性獲取js文件中的js腳本，該腳本的內容是一個函數調用，參數就是服務器返回的數據，爲了處理這些返回的數據，須要事先在頁面定義好回調函數，本質上使用的並非ajax技術

1四、什麼是Ajax和JSON，它們的優缺點。

Ajax是全稱是asynchronous JavaScript andXML，即異步JavaScript和xml，用於在Web頁面中實現異步數據交互，實現頁面局部刷新。

優勢：能夠使得頁面不重載所有內容的狀況下加載局部內容，下降數據傳輸量，避免用戶不斷刷新或者跳轉頁面，提升用戶體驗

缺點：對搜索引擎不友好；要實現ajax下的先後退功能成本較大；可能形成請求數的增長跨域問題限制；

JSON是一種輕量級的數據交換格式，ECMA的一個子集

優勢：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支持複合數據類型（數組、對象、字符串、數字）

1五、http常見的狀態碼有那些？分別表明是什麼意思？

200 - 請求成功

301 - 資源（網頁等）被永久轉移到其它URL

404 - 請求的資源（網頁等）不存在

500 - 內部服務器錯誤

1六、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

分爲4個步驟：

1. 當發送一個 URL 請求時，無論這個 URL 是 Web 頁面的 URL 仍是 Web 頁面上每一個資源的 URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程 DNS 服務器上啓動一個 DNS 查詢。這能使瀏覽器得到請求對應的 IP 地址。

2. 瀏覽器與遠程 Web 服務器經過 TCP 三次握手協商來創建一個 TCP/IP 鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。

3. 一旦 TCP/IP 鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送 HTTP 的 GET 請求。遠程服務器找到資源並使用 HTTP 響應返回該資源，值爲 200 的 HTTP 響應狀態表示一個正確的響應。

4. 此時，Web 服務器提供資源服務，客戶端開始下載資源。

1七、ajax請求的時候get 和post方式的區別

get通常用來進行查詢操做，url地址有長度限制，請求的參數都暴露在url地址當中，若是傳遞中文參數，須要本身進行編碼操做，安全性較低。

post請求方式主要用來提交數據，沒有數據長度的限制，提交的數據內容存在於http請求體中，數據不會暴漏在url地址中。

1八、ajax請求時，如何解釋json數據

使用eval()或者JSON.parse() 鑑於安全性考慮，推薦使用JSON.parse()更靠譜，對數據的安全性更好。

1九、.javascript的本地對象，內置對象和宿主對象

本地對象爲獨立於宿主環境的ECMAScript提供的對象，包括ArrayObjectRegExp等能夠new實例化的對象

內置對象爲Gload，Math 等不能夠實例化的(他們也是本地對象，內置對象是本地對象的一個子集)

宿主對象爲全部的非本地對象，全部的BOM和DOM對象都是宿主對象，如瀏覽器自帶的document,window 等對象

20、爲何利用多個域名來存儲網站資源會更有效？

確保用戶在不一樣地區能用最快的速度打開網站，其中某個域名崩潰用戶也能經過其餘鬱悶訪問網站，而且不一樣的資源放到不一樣的服務器上有利於減輕單臺服務器的壓力。

2一、請說出三種減低頁面加載時間的方法

一、壓縮css、js文件
二、合併js、css文件，減小http請求
三、外部js、css文件放在最底下
四、減小dom操做，儘量用變量替代沒必要要的dom操做

2二、HTTP狀態碼都有那些。

200 OK      //客戶端請求成功

400 Bad Request  //客戶端請求有語法錯誤，不能被服務器所理解

403 Forbidden  //服務器收到請求，可是拒絕提供服務

404 Not Found  //請求資源不存在，輸入了錯誤的URL

500 Internal Server Error //服務器發生不可預期的錯誤

503 Server Unavailable  //服務器當前不能處理客戶端的請求，一段時間後可能恢復正常

7、JS高級

一、JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

jQuery能夠給一個對象同時綁定多個事件，低層實現方式是使用addEventListner或attachEvent兼容不一樣的瀏覽器實現事件的綁定，這樣能夠給同一個對象註冊多個事件。

二、知道什麼是webkit麼? 知道怎麼用瀏覽器的各類工具來調試和debug代碼麼?

Webkit是瀏覽器引擎，包括html渲染和js解析功能，手機瀏覽器的主流內核，與之相對應的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也稱MSHTML，IE 使用）。

對於瀏覽器的調試工具要熟練使用，主要是頁面結構分析，後臺請求信息查看，js調試工具使用，熟練使用這些工具能夠快速提升解決問題的效率

三、如何測試前端代碼? 知道BDD, TDD, Unit Test麼? 知道怎麼測試你的前端工程麼(mocha, sinon, jasmin, qUnit..)?

瞭解BDD行爲驅動開發與TDD測試驅動開發已經單元測試相關概念，

四、 前端templating(Mustache, underscore, handlebars)是幹嗎的, 怎麼用?

Web 模板引擎是爲了使用戶界面與業務數據（內容）分離而產生的，

Mustache 是一個 logic-less （輕邏輯）模板解析引擎，它的優點在於能夠應用在 Javascript、PHP、Python、Perl 等多種編程語言中。

Underscore封裝了經常使用的JavaScript對象操做方法，用於提升開發效率。

Handlebars 是 JavaScript 一個語義模板庫，經過對view和data的分離來快速構建Web模板。

五、簡述一下 Handlebars 的基本用法？

沒有用過的話說出它是幹什麼的便可

六、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？

學習技術不只要會用，還有熟悉它的實現機制，這樣在開發中遇到問題時才能更好的解決

七、用js實現千位分隔符?

原生js的熟練度，實踐經驗，實現思路

八、檢測瀏覽器版本版本有哪些方式？

IE與標準瀏覽器判斷，IE不一樣版本的判斷，userAgent  var ie = /*@cc_on !@*/false;

九、咱們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來講下會執行幾回事件，而後會先執行冒泡仍是捕獲

對兩種事件模型的理解

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

• 考察點1：對於基本數據類型和引用數據類型在內存中存放的是值仍是指針這一區別是否清楚
• 考察點2：是否知道如何判斷一個變量是什麼類型的
• 考察點3：遞歸算法的設計

// 方法一： Object.prototype.clone = function(){    var o = this.constructor === Array ? [] : {};    for(var e in this){     o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];    }    return o; } //方法二：   /**      * 克隆一個對象      * @param Obj      * @returns      */     function clone(Obj) {           var buf;           if (Obj instanceof Array) {               buf = [];//建立一個空的數組             var i = Obj.length;               while (i--) {                   buf[i] = clone(Obj[i]);               }               return buf;            }else if (Obj instanceof Object){               buf = {};//建立一個空對象             for (var k in Obj) { //爲這個對象添加新的屬性                 buf[k] = clone(Obj[k]);               }               return buf;           }else{ //普通變量直接賦值             return Obj;           }       }

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

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];         function deRepeat(){             var newArr=[];             var obj={};             var index=0;             var l=arr.length;             for(var i=0;i<l;i++){                 if(obj[arr[i]]==undefined)                   {                     obj[arr[i]]=1;                     newArr[index++]=arr[i];                   }                 else if(obj[arr[i]]==1)                   continue;             }             return newArr;         }         var newArr2=deRepeat(arr);         alert(newArr2); //輸出1,2,3,4,5,6,9,25

十二、小賢是一條可愛的小狗(Dog)，它的叫聲很好聽(wow)，每次看到主人的時候就會乖乖叫一聲(yelp)。從這段描述能夠獲得如下對象：

function Dog() {       this.wow = function() {                alert(’Wow’);       }       this.yelp = function() {               this.wow();       } }

小芒和小賢同樣，原來也是一條可愛的小狗，但是忽然有一天瘋了(MadDog)，一看到人就會每隔半秒叫一聲(wow)地不停叫喚(yelp)。請根據描述，按示例的形式用代碼來實。（繼承，原型，setInterval）

function MadDog() {     this.yelp = function() {           var self = this;                    setInterval(function() {                 self.wow();                }, 500);       } } MadDog.prototype = new Dog();         //for test var dog = new Dog(); dog.yelp(); var madDog = new MadDog(); madDog.yelp();

1三、下面這個ul，如何點擊每一列的時候alert其index?（閉包）

<ul id=」test」> <li>這是第一條</li> <li>這是第二條</li> <li>這是第三條</li> </ul>

// 方法一： var lis=document.getElementById('2223').getElementsByTagName('li'); for(var i=0;i<3;i++) {     lis[i].index=i;     lis[i].onclick=function(){         alert(this.index);     }; } //方法二： var lis=document.getElementById('2223').getElementsByTagName('li'); for(var i=0;i<3;i++){     lis[i].index=i;     lis[i].onclick=(function(a){         return function() {             alert(a);         }     })(i); }

1四、編寫一個JavaScript函數，輸入指定類型的選擇器(僅需支持id，class，tagName三種簡單CSS選擇器，無需兼容組合選擇器)能夠返回匹配的DOM節點，需考慮瀏覽器兼容性和性能。

/*** @param selector {String} 傳入的CSS選擇器。* @return {Array}*/

var query = function(selector) { var reg = /^(#)?(\.)?(\w+)$/img; var regResult = reg.exec(selector); var result = []; //若是是id選擇器 if(regResult[1]) { if(regResult[3]) { if(typeof document.querySelector === "function") { result.push(document.querySelector(regResult[3]));     }else {       result.push(document.getElementById(regResult[3]));     }   }   }   //若是是class選擇器   else if(regResult[2]) {    if(regResult[3]) {       if(typeof document.getElementsByClassName === 'function') {         var doms = document.getElementsByClassName(regResult[3]);         if(doms) {           result = converToArray(doms);         }       }      //若是不支持getElementsByClassName函數      else {       var allDoms = document.getElementsByTagName("*") ;        for(var i = 0, len = allDoms.length; i < len; i++) {          if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {            result.push(allDoms[i]);         }        }     }  } }  //若是是標籤選擇器  else if(regResult[3]) {    var doms = document.getElementsByTagName(regResult[3].toLowerCase());    if(doms) {      result = converToArray(doms);    }  }  return result;  }  function converToArray(nodes){     var array = null;             try{             array = Array.prototype.slice.call(nodes,0);//針對非IE瀏覽器            }catch(ex){     array = new Array();            for( var i = 0 ,len = nodes.length; i < len ; i++ ) {      array.push(nodes[i])            }   }        return array; }

1五、請評價如下代碼並給出改進意見。

if(window.addEventListener){     var addListener = function(el,type,listener,useCapture){         el.addEventListener(type,listener,useCapture);   }; } else if(document.all){     addListener = function(el,type,listener){         el.attachEvent("on"+type,function(){           listener.apply(el);       });    }  }

• 不該該在if和else語句中聲明addListener函數，應該先聲明；
• 不須要使用window.addEventListener或document.all來進行檢測瀏覽器，應該使用能力檢測；
• 因爲attachEvent在IE中有this指向問題，因此調用它時須要處理一下

改進以下：

function addEvent(elem, type, handler){ 　　if(elem.addEventListener){ 　　　　elem.addEventListener(type, handler, false); 　　}else if(elem.attachEvent){ 　　　　elem['temp' + type + handler] = handler; 　　　　elem[type + handler] = function(){ 　　　　elem['temp' + type + handler].apply(elem); 　　}; 　　elem.attachEvent('on' + type, elem[type + handler]);　   }else{ 　　elem['on' + type] = handler; 　　} }

1六、給String對象添加一個方法，傳入一個string類型的參數，而後將string的每一個字符間價格空格返回，例如：

addSpace(「hello world」) // -> ‘h e l l o  w o r l d’

String.prototype.spacify = function(){       return this.split('').join(' ');     };

接着上述問題答案提問，1）直接在對象的原型上添加方法是否安全？尤爲是在Object對象上。(這個我沒能答出？但願知道的說一下。)　2）函數聲明與函數表達式的區別？

答案：在js中，解析器在向執行環境中加載數據時，對函數聲明和函數表達式並不是是一視同仁的，解析器會率先讀取函數聲明，並使其在執行任何代碼以前可用（能夠訪問），至於函數表達式，則必須等到解析器執行到它所在的代碼行，纔會真正被解析執行。

1七、定義一個log方法，讓它能夠代理console.log的方法。

可行的方法一：

function log(msg)　{     console.log(msg); } log("hello world!") // hello world!

若是要傳入多個參數呢？顯然上面的方法不能知足要求，因此更好的方法是：

function log(){     console.log.apply(console, arguments); };

到此，追問apply和call方法的異同。

對於apply和call二者在做用上是相同的，便是調用一個對象的一個方法，以另外一個對象替換當前對象。將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。

但二者在參數上有區別的。對於第一個參數意義都同樣，但對第二個參數： apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入，而call則做爲call的參數傳入（從第二個參數開始）。 如 func.call(func1,var1,var2,var3)對應的apply寫法爲：func.apply(func1,[var1,var2,var3]) 。

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

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

假設接第八題題幹，咱們要給每一個log方法添加一個」(app)」前綴，好比’hello world!’ ->’(app)hello world!’。方法以下：

function log(){       var args = Array.prototype.slice.call(arguments);  //爲了使用unshift數組方法，將argument轉化爲真正的數組       args.unshift('(app)');       console.log.apply(console, args);     };

1九、對做用域上下文和this的理解，看下列代碼：

var User = {   count: 1,   getCount: function() {     return this.count;   } }; console.log(User.getCount());  // what? var func = User.getCount; console.log(func());  // what?

問兩處console輸出什麼？爲何？

答案是1和undefined。

func是在winodw的上下文中被執行的，因此會訪問不到count屬性。

繼續追問，那麼如何確保Uesr老是能訪問到func的上下文，即正確返回1。正確的方法是使用Function.prototype.bind。兼容各個瀏覽器完整代碼以下：

Function.prototype.bind = Function.prototype.bind || function(context){    var self = this;    return function(){       return self.apply(context, arguments);    }; } var func = User.getCount.bind(User); console.log(func());

20、原生JS的window.onload與Jquery的$(document).ready(function(){})有什麼不一樣？如何用原生JS實現Jq的ready方法？

window.onload()方法是必須等到頁面內包括圖片的全部元素加載完畢後才能執行。

$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

/*  * 傳遞函數給whenReady()  * 當文檔解析完畢且爲操做準備就緒時，函數做爲document的方法調用  */ var whenReady = (function() {               //這個函數返回whenReady()函數     var funcs = [];             //當得到事件時，要運行的函數     var ready = false;          //當觸發事件處理程序時,切換爲true     //當文檔就緒時,調用事件處理程序     function handler(e) {         if(ready) return;       //確保事件處理程序只完整運行一次         //若是發生onreadystatechange事件，但其狀態不是complete的話,那麼文檔還沒有準備好         if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {             return;         }         //運行全部註冊函數         //注意每次都要計算funcs.length         //以防這些函數的調用可能會致使註冊更多的函數         for(var i=0; i<funcs.length; i++) {             funcs[i].call(document);         }         //事件處理函數完整執行,切換ready狀態, 並移除全部函數         ready = true;         funcs = null;     }     //爲接收到的任何事件註冊處理程序     if(document.addEventListener) {         document.addEventListener('DOMContentLoaded', handler, false);         document.addEventListener('readystatechange', handler, false);            //IE9+         window.addEventListener('load', handler, false);     }else if(document.attachEvent) {         document.attachEvent('onreadystatechange', handler);         window.attachEvent('onload', handler);     }     //返回whenReady()函數     return function whenReady(fn) {         if(ready) { fn.call(document); }         else { funcs.push(fn); }     } })();

若是上述代碼十分難懂，下面這個簡化版：

function ready(fn){     if(document.addEventListener) {//標準瀏覽器         document.addEventListener('DOMContentLoaded', function() {             //註銷事件, 避免反覆觸發             document.removeEventListener('DOMContentLoaded',arguments.callee, false);             fn();//執行函數         }, false);     }else if(document.attachEvent) {//IE         document.attachEvent('onreadystatechange', function() {             if(document.readyState == 'complete') {                 document.detachEvent('onreadystatechange', arguments.callee);                 fn();//函數執行             }         });     } };

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

回答出概念便可，下面是幾個要點

1. 給須要拖拽的節點綁定mousedown, mousemove, mouseup事件

2. mousedown事件觸發後，開始拖拽

3. mousemove時，須要經過event.clientX和clientY獲取拖拽位置，並實時更新位置

4. mouseup時，拖拽結束

5. 須要注意瀏覽器邊界的狀況

2二、請實現以下功能

 

function setcookie(name,value,days){  //給cookie增長一個時間變量 　　var exp = new Date(); 　　exp.setTime(exp.getTime() + days*24*60*60*1000); //設置過時時間爲days天 　　document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } function getCookie(name){ 　　var result = ""; 　　var myCookie = ""+document.cookie+";"; 　　var searchName = "+name+"="; 　　var startOfCookie = myCookie.indexOf(searchName); 　　var endOfCookie; 　　if(satrtOfCookie != -1){ 　　　　startOfcookie += searchName.length; 　　　　endOfCookie = myCookie.indexOf(";",startOfCookie); 　　　　result = (myCookie.substring(startOfCookie,endOfCookie)); 　　} 　　return result; } (function(){ 　　var oTips = document.getElementById('tips');//假設tips的id爲tips 　　var page = { 　　check: function(){//檢查tips的cookie是否存在而且容許顯示 　　　　var tips = getCookie('tips'); 　　　　if(!tips || tips == 'show') return true;//tips的cookie不存在 　　　　if(tips == "never_show_again") return false; 　　}, 　　hideTip: function(bNever){ 　　　　if(bNever) setcookie('tips', 'never_show_again', 365); 　　　　oTips.style.display = "none";//隱藏 　　}, 　　showTip: function(){ 　　oTips.style.display = "inline";//顯示，假設tips爲行級元素 　　}, 　　init: function(){ 　　　　var _this = this; 　　　　if(this.check()){ 　　　　_this.showTip(); 　　　　setcookie('tips', 'show', 1); 　　} 　　oTips.onclick = function(){ 　　　　_this.hideTip(true); 　　}; 　　} 　　};   page.init(); })();

2三、說出如下函數的做用是？空白區域應該填寫什麼？

//define (function(window){     function fn(str){         this.str=str;     }       fn.prototype.format = function(){         var arg = ______;         return this.str.replace(_____,function(a,b){              return arg[b]||"";       });     }     window.fn = fn; })(window);   //use (function(){     var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');     console.log(t.format('http://www.alibaba.com','Alibaba','Welcome')); })();

答案：訪函數的做用是使用format函數將函數的參數替換掉{0}這樣的內容，返回一個格式化後的結果：

第一個空是：arguments

第二個空是：/\{(\d+)\}/ig

2四、Javascript做用鏈域?

理解變量和函數的訪問範圍和生命週期，全局做用域與局部做用域的區別，JavaScript中沒有塊做用域，函數的嵌套造成不一樣層次的做用域，嵌套的層次造成鏈式形式，經過做用域鏈查找屬性的規則須要深刻理解。

2五、談談This對象的理解。

理解不一樣形式的函數調用方式下的this指向，理解事件函數、定時函數中的this指向，函數的調用形式決定了this的指向。

2六、eval是作什麼的？

它的功能是把對應的字符串解析成JS代碼並運行；應該避免使用eval，不安全，很是耗性能（2個步驟，一次解析成js語句，一次執行）

 

2七、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

[1].在IE中,事件對象是做爲一個全局變量來保存和維護的.全部的瀏覽器事件,無論是用戶觸發的，仍是其餘事件,都會更新window.event對象.因此在代碼中，只要調用window.event就能夠獲取事件對象， 再event.srcElement就能夠取得觸發事件的元素進行進一步處理.

[2].在FireFox中，事件對象卻不是全局對象，通常狀況下，是現場發生，現場使用，FireFox把事件對象自動傳給事件處理程序.

關於事件的兼容性處理要熟練掌握，事件對象具體哪些屬性存在兼容性問題，IE與標準事件模型事件冒泡與事件捕獲的支持要理解

2八、什麼是閉包（closure），爲何要用它？

簡單的理解是函數的嵌套造成閉包，閉包包括函數自己已經它的外部做用域

使用閉包能夠造成獨立的空間，延長變量的生命週期，報存中間狀態值

2九、javascript 代碼中的"use strict";是什麼意思 ? 使用它區別是什麼？

意思是使用嚴格模式，使用嚴格模式，一些不規範的語法將再也不支持

30、如何判斷一個對象是否屬於某個類？

Instanceof   constructor

3一、new操做符具體幹了什麼呢?

一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。

  二、屬性和方法被加入到 this 引用的對象中。

  三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

3二、用原生JavaScript的實現過什麼功能嗎？

主要考察原生js的實踐經驗

3三、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

HasOwnProperty

3四、對JSON的瞭解？

輕量級數據交互格式，能夠造成複雜的嵌套格式，解析很是方便

3五、js延遲加載的方式有哪些？

方案一：<script>標籤的async="async"屬性（詳細參見：script標籤的async屬性）

方案二：<script>標籤的defer="defer"屬性

方案三：動態建立<script>標籤

方案四：AJAX eval（使用AJAX獲得腳本內容，而後經過eval_r(xmlhttp.responseText)來運行腳本）

方案五：iframe方式

3六、模塊化開發怎麼作？

理解模塊化開發模式：瀏覽器端requirejs，seajs；服務器端nodejs；ES6模塊化；fis、webpack等前端總體模塊化解決方案；grunt、gulp等前端工做流的使用

3七、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

理解這兩種規範的差別，主要經過requirejs與seajs的對比，理解模塊的定義與引用方式的差別以及這兩種規範的設計原則

3八、requireJS的核心原理是什麼？（如何動態加載的？如何避免屢次加載的？如何 緩存的？）

核心是js的加載模塊，經過正則匹配模塊以及模塊的依賴關係，保證文件加載的前後順序，根據文件的路徑對加載過的文件作了緩存

3九、讓你本身設計實現一個requireJS，你會怎麼作？

核心是實現js的加載模塊，維護js的依賴關係，控制好文件加載的前後順序

40、談一談你對ECMAScript6的瞭解？

ES6新的語法糖，類，模塊化等新特性

4一、ECMAScript6 怎麼寫class麼，爲何會出現class這種東西?

class Point {

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

  toString() {

     return '('+this.x+', '+this.y+')';

  }

}

4二、異步加載的方式有哪些？

方案一：<script>標籤的async="async"屬性（詳細參見：script標籤的async屬性）

方案二：<script>標籤的defer="defer"屬性

方案三：動態建立<script>標籤

方案四：AJAX eval（使用AJAX獲得腳本內容，而後經過eval_r(xmlhttp.responseText)來運行腳本）

方案五：iframe方式

4三、documen.write和 innerHTML的區別?

document.write是重寫整個document, 寫入內容是字符串的html

innerHTML是HTMLElement的屬性，是一個元素的內部html內容

4四、DOM操做——怎樣添加、移除、移動、複製、建立和查找節點?

（1）建立新節點

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

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

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

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

      appendChild()

      removeChild()

      replaceChild()

      insertBefore()

（3）查找

      getElementsByTagName()    //經過標籤名稱

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

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

4五、call() 和 .apply() 的含義和區別？

apply的參數是數組形式，call的參數是單個的值，除此以外在使用上沒有差異，重點理解這兩個函數調用的this改變

4六、數組和對象有哪些原生方法，列舉一下？

Array.concat( ) 鏈接數組

Array.join( ) 將數組元素鏈接起來以構建一個字符串

Array.length 數組的大小

Array.pop( ) 刪除並返回數組的最後一個元素

Array.push( ) 給數組添加元素

Array.reverse( ) 顛倒數組中元素的順序

Array.shift( ) 將元素移出數組

Array.slice( ) 返回數組的一部分

Array.sort( ) 對數組元素進行排序

Array.splice( ) 插入、刪除或替換數組的元素

Array.toLocaleString( ) 把數組轉換成局部字符串

Array.toString( ) 將數組轉換成一個字符串

Array.unshift( ) 在數組頭部插入一個元素

 

Object.hasOwnProperty( ) 檢查屬性是否被繼承

Object.isPrototypeOf( ) 一個對象是不是另外一個對象的原型

Object.propertyIsEnumerable( ) 是否能夠經過for/in循環看到屬性

Object.toLocaleString( ) 返回對象的本地字符串表示

Object.toString( ) 定義一個對象的字符串表示

Object.valueOf( ) 指定對象的原始值

4七、JS 怎麼實現一個類。怎麼實例化這個類

嚴格來說js中並無類的概念，不過js中的函數能夠做爲構造函數來使用，經過new來實例化，其實函數自己也是一個對象。

4八、JavaScript中的做用域與變量聲明提高？

理解JavaScript的預解析機制，js的運行主要分兩個階段：js的預解析和運行，預解析階段全部的變量聲明和函數定義都會提早，可是變量的賦值不會提早

4九、如何編寫高性能的Javascript？

使用 DocumentFragment 優化屢次 append

經過模板元素 clone ，替代 createElement

使用一次 innerHTML 賦值代替構建 dom 元素

使用 firstChild 和 nextSibling 代替 childNodes 遍歷 dom 元素

使用 Array 作爲 StringBuffer ，代替字符串拼接的操做

將循環控制量保存到局部變量

順序無關的遍歷時，用 while 替代 for

將條件分支，按可能性順序從高到低排列

在同一條件子的多（ >2 ）條件分支時，使用 switch 優於 if

使用三目運算符替代條件分支

須要不斷執行的時候，優先考慮使用 setInterval

50、那些操做會形成內存泄漏？

閉包，循環

5一、javascript對象的幾種建立方式？

1. 工廠模式

2. 構造函數模式

3. 原型模式

4. 混合構造函數和原型模式

5. 動態原型模式

6. 寄生構造函數模式

7. 穩妥構造函數模式

5二、javascript繼承的 6 種方法？

1. 原型鏈繼承

2. 借用構造函數繼承

3. 組合繼承(原型+借用構造)

4. 原型式繼承

5. 寄生式繼承

6. 寄生組合式繼承

5三、eval是作什麼的？

1. 它的功能是把對應的字符串解析成JS代碼並運行

2. 應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）

5四、JavaScript 原型，原型鏈 ? 有什麼特色？

1. 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲 null 的話，咱們就稱之爲原型鏈

2. 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈

5五、事件、IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲

2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件

3. ev.stopPropagation();

注意舊ie的方法：ev.cancelBubble = true;

5六、簡述一下Sass、Less，且說明區別？

他們是動態的樣式語言，是CSS預處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。

變量符不同，less是@，而Sass是$;

Sass支持條件語句，能夠使用if{}else{},for{}循環等等。而Less不支持;

Sass是基於Ruby的，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出Css到瀏覽器

5七、關於javascript中apply()和call()方法的區別？

相同點:兩個方法產生的做用是徹底同樣的

不一樣點:方法傳遞的參數不一樣

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

apply()接收兩個參數，一個是函數運行的做用域(this)，另外一個是參數數組。

call()方法第一個參數與apply()方法相同，但傳遞給函數的參數必須列舉出來。

5八、簡述一下JS中的閉包？

閉包用的多的兩個做用：讀取函數內部的變量值；讓這些變量值始終保存着(在內存中)。

同時須要注意的是：閉包慎用，不濫用，不亂用，因爲函數內部的變量都被保存在內存中，會致使內存消耗大。

5九、說說你對this的理解？

在JavaScript中，this一般指向的是咱們正在執行的函數自己，或者是，指向該函數所屬的對象。

全局的this → 指向的是Window

函數中的this → 指向的是函數所在的對象

對象中的this → 指向其自己

60、分別闡述split(),slice(),splice(),join()？

join()用於把數組中的全部元素拼接起來放入一個字符串。所帶的參數爲分割字符串的分隔符，默認是以逗號分開。歸屬於Array

split()即把字符串分離開，以數組方式存儲。歸屬於Stringstring

slice() 方法可從已有的數組中返回選定的元素。該方法並不會修改數組，而是返回一個子數組。若是想刪除數組中的一段元素，應該使用方法 Array.splice()

splice() 方法向/從數組中添加/刪除項目，而後返回被刪除的項目。返回的是含有被刪除的元素的數組。

6一、事件委託是什麼？

讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！

6二、如何阻止事件冒泡和默認事件？

阻止瀏覽器的默認行爲

window.event?window.event.returnValue=false:e.preventDefault();

中止事件冒泡

window.event?window.event.cancelBubble=true:e.stopPropagation();

原生JavaScript中，return false;只阻止默認行爲，不阻止冒泡，jQuery中的return false;既阻止默認行爲，又阻止冒泡

6三、添加 刪除 替換 插入到某個接點的方法？

obj.appendChidl()

obj.removeChild()

obj.replaceChild()

obj.innersetBefore()

6四、你用過require.js嗎？它有什麼特性？

（1）實現js文件的異步加載，避免網頁失去響應；

（2）管理模塊之間的依賴性，便於代碼的編寫和維護。

6五、談一下JS中的遞歸函數，而且用遞歸簡單實現階乘？

遞歸便是程序在執行過程當中不斷調用自身的編程技巧，固然也必需要有一個明確的結束條件，否則就會陷入死循環。

6六、請用正則表達式寫一個簡單的郵箱驗證。

/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

6七、簡述一下你對web性能優化的方案？

    一、儘可能減小 HTTP 請求

二、使用瀏覽器緩存

三、使用壓縮組件

四、圖片、JS的預載入

五、將腳本放在底部

六、將樣式文件放在頁面頂部

七、使用外部的JS和CSS

八、精簡代碼

6八、在JS中有哪些會被隱式轉換爲false

Undefined、null、關鍵字false、NaN、零、空字符串

6九、定時器setInterval有一個有名函數fn1，setInterval（fn1,500）與setInterval（fn1(),500）有什麼區別？

第一個是重複執行每500毫秒執行一次，後面一個只執行一次。

70、外部JS文件出現中文字符，會出現什麼問題，怎麼解決？

會出現亂碼，加charset=」GB2312」;

7一、談談瀏覽器的內核，而且說一下什麼是內核？

Trident (['traɪd(ə)nt])--IE，Gecko (['gekəʊ])--Firefox, Presto (['prestəʊ])--opera,webkit—谷歌和Safari

瀏覽器內核又能夠分紅兩部分：渲染引擎和 JS 引擎。它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。JS 引擎則是解析 Javascript 語言，執行 javascript 語言來實現網頁的動態效果。

7二、JavaScript原型，原型鏈 ? 有什麼特色？

*  原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲null的話，咱們就稱之爲原型鏈。

*  原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。

* JavaScript的數據對象有那些屬性值？

　　writable：這個屬性的值是否能夠改。

　　configurable：這個屬性的配置是否能夠刪除，修改。

　　enumerable：這個屬性是否能在for…in循環中遍歷出來或在Object.keys中列舉出來。

　　value：屬性值。

* 當咱們須要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 若是沒有的話，就會查找他的Prototype對象是否有這個屬性。

 function clone(proto) {

　　function Dummy() { }

　　Dummy.prototype = proto;

　　Dummy.prototype.constructor = Dummy;

　　return new Dummy(); //等價於Object.create(Person);

 }

        function object(old) {

         function F() {};

         F.prototype = old;

         return new F();

        }

    var newObj = object(oldObject);

7三、寫一個通用的事件偵聽器函數

`// event(事件)工具集，來源：https://github.com/markyun

markyun.Event = {

    // 頁面加載完成後

    readyEvent : function(fn) {

        if (fn==null) {

            fn=document;

        }

        var oldonload = window.onload;

        if (typeof window.onload != 'function') {

            window.onload = fn;

        } else {

            window.onload = function() {

                oldonload();

                fn();

            };

        }

    },

    // 視能力分別使用dom0||dom2||IE方式 來綁定事件

    // 參數： 操做的元素,事件名稱 ,事件處理程序

    addEvent : function(element, type, handler) {

        if (element.addEventListener) {

            //事件類型、須要執行的函數、是否捕捉

            element.addEventListener(type, handler, false);

        } else if (element.attachEvent) {

            element.attachEvent('on' + type, function() {

                handler.call(element);

            });

        } else {

            element['on' + type] = handler;

        }

    },

    // 移除事件

    removeEvent : function(element, type, handler) {

        if (element.removeEnentListener) {

            element.removeEnentListener(type, handler, false);

        } else if (element.datachEvent) {

            element.detachEvent('on' + type, handler);

        } else {

            element['on' + type] = null;

        }

    },

    // 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)

    stopPropagation : function(ev) {

        if (ev.stopPropagation) {

            ev.stopPropagation();

        } else {

            ev.cancelBubble = true;

        }

    },

    // 取消事件的默認行爲

    preventDefault : function(event) {

        if (event.preventDefault) {

            event.preventDefault();

        } else {

            event.returnValue = false;

        }

    },

    // 獲取事件目標

    getTarget : function(event) {

        return event.target || event.srcElement;

    },

    // 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；

    getEvent : function(e) {

        var ev = e || window.event;

        if (!ev) {

            var c = this.getEvent.caller;

            while (c) {

                ev = c.arguments[0];

                if (ev && Event == ev.constructor) {

                    break;

                }

                c = c.caller;

            }

        }

        return ev;

    }

};

7四、事件、IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

 1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。 

 2. 事件處理機制：IE是事件冒泡、火狐是 事件捕獲；

 3.  ev.stopPropagation();

7五、什麼是閉包（closure），爲何要用？

執行say667()後,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在.使得Javascript的垃圾回收機制GC不會收回say667()所佔用的資源，由於say667()的內部函數的執行須要依賴say667()中的變量。這是對閉包做用的很是直白的描述.

  function say667() {

    // Local variable that ends up within closure

    var num = 666;

    var sayAlert = function() { alert(num); }

    num++;

    return sayAlert;

}

 var sayAlert = say667();

 sayAlert()//執行結果應該彈出的667 

7六、如何判斷一個對象是否屬於某個類？

使用instanceof （待完善）

if(a instanceof Person){

    alert('yes');

}

7七、new操做符具體幹了什麼呢?

  一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。

  二、屬性和方法被加入到 this 引用的對象中。

  三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

    var obj  = {};

    obj.__proto__ = Base.prototype;

    Base.call(obj);

7八、JSON 的瞭解

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小

{'age':'12', 'name':'back'}

7九、js延遲加載的方式有哪些

defer和async、動態建立DOM方式（用得最多）、按需異步載入js

80、模塊化怎麼作？

當即執行函數,不暴露私有成員

var module1 = (function(){

　　　　var _count = 0;

　　　　var m1 = function(){

　　　　　　//...

　　　　};

　　　　var m2 = function(){

　　　　　　//...

　　　　};

　　　　return {

　　　　　　m1 : m1,

　　　　　　m2 : m2

　　　　};

　　})();

8一、異步加載的方式

  (1) defer，只支持IE

  (2) async：

  (3) 建立script，插入到DOM中，加載完畢後callBack

      documen.write和 innerHTML的區別

      document.write只能重繪整個頁面

      innerHTML能夠重繪頁面的一部分

8二、告訴我答案是多少？

(function(x){

    delete x;

    alert(x);

})(1+5);

函數參數沒法delete刪除，delete只能刪除經過for in訪問的屬性。

固然，刪除失敗也不會報錯，因此代碼運行會彈出「1」。

8三、JS中的call()和apply()方法的區別？

例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，因此運行結果爲：alert(4);

注意：js 中的函數實際上是對象，函數名是對 Function 對象的引用。

function add(a,b){

    alert(a+b);

}

function sub(a,b){

    alert(a-b);

}

add.call(sub,3,1); 

8四、Jquery與jQuery UI 有啥區別？

*jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。

*jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。

提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等

8五、jquery 中如何將數組轉化爲json字符串，而後再轉化回來？

jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：

    $.fn.stringifyArray = function(array) {

        return JSON.stringify(array)

    }

    $.fn.parseArray = function(array) {

        return JSON.parse(array)

    }

    而後調用：

    $("").stringifyArray(array)

8六、JavaScript中的做用域與變量聲明提高？

其餘部分

（HTTP、正則、優化、重構、響應式、移動端、團隊協做、SEO、UED、職業生涯）

    *基於Class的選擇性的性能相對於Id選擇器開銷很大，由於需遍歷全部DOM元素。

    *頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好。  

     好比：var str=$("a").attr("href");

    *for (var i = size; i < arr.length; i++) {}

     for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可讓循環跑得更快：

     for (var i = size, length = arr.length; i < length; i++) {}

8七、前端開發的優化問題（看雅虎14條性能優化原則）。

  （1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。

  （2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

  （3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。

  （4） 當須要設置的樣式不少時設置className而不是直接操做style。

  （5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。

  （6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

  （7） 圖片預加載，將樣式表放在頂部，將腳本放在底部  加上時間戳。

  （8） 避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。

8八、http狀態碼有那些？分別表明是什麼意思？

    100-199 用於指定客戶端應相應的某些動做。

    200-299 用於表示請求成功。

    300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。

400-499 用於指出客戶端的錯誤。

400  語義有誤，當前請求沒法被服務器理解。

401  當前請求須要用戶驗證

403  服務器已經理解請求，可是拒絕執行它。

500-599 用於支持服務器錯誤。

503 – 服務不可用

8九、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

    要熟悉先後端的通訊流程，最好把動態網站的背後細節也介紹一遍

8、流行框架

一、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？

考察學習知識的態度，是否僅僅是停留在使用層面，要知其然知其因此然

二、jQuery.fn的init方法返回的this指的是什麼對象？爲何要返回this？

this執行init構造函數自身，其實就是jQuery實例對象，返回this是爲了實現jQuery的鏈式操做

三、jquery中如何將數組轉化爲json字符串，而後再轉化回來？

$.parseJSON('{"name":"John"}');

四、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？

遞歸賦值

五、jquery.extend 與 jquery.fn.extend的區別？

Jquery.extend用來擴展jQuery對象自己；jquery.fn.extend用來擴展jQuery實例

六、談一下Jquery中的bind(),live(),delegate(),on()的區別？

七、JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

能夠同時綁定多個事件，低層實現原理是使用addEventListner與attachEvent兼容處理作事件註冊

十、    Jquery與jQuery UI有啥區別？

jQuery是操做dom的框架，jQueryUI是基於jQuery作的一個UI組件庫

十一、    jQuery和Zepto的區別？各自的使用場景？

jQuery主要用於pc端，固然有對應的jQuerymobile用於移動端，zepto比jQuery更加小巧，主要用於移動端

十二、    針對 jQuery 的優化方法？

優先使用ID選擇器

在class前使用tag(標籤名)

給選擇器一個上下文

慎用 .live()方法（應該說盡可能不要使用）

使用data()方法存儲臨時變量

1三、    Zepto的點透問題如何解決？

點透主要是因爲兩個div重合，例如：一個div調用show()，一個div調用hide()；這個時候當點擊上面的div的時候就會影響到下面的那個div；

解決辦法主要有2種：

1.github上有一個叫作fastclick的庫，它也能規避移動設備上click事件的延遲響應，https://github.com/ftlabs/fastclick

將它用script標籤引入頁面（該庫支持AMD，因而你也能夠按照AMD規範，用諸如require.js的模塊加載器引入），而且在dom ready時初始化在body上，

2.根據分析，若是不引入其它類庫，也不想本身按照上述fastclcik的思路再開發一套東西，須要1.一個優先於下面的「divClickUnder」捕獲的事件；2.而且經過這個事件阻止掉默認行爲（下面的「divClickUnder」對click事件的捕獲，在ios的safari，click的捕獲被認爲和滾屏、點擊輸入框彈起鍵盤等同樣，是一種瀏覽器默認行爲，便可以被event.preventDefault()阻止的行爲）。

十二、知道各類JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)麼? 能講出他們各自的優勢和缺點麼?

知識面的寬度，流行框架要多多熟悉

1三、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？

Underscore的熟悉程度

1四、使用過angular嗎？angular中的過濾器是幹什麼用的

在表達式中轉換數據<p>姓名爲 {{ lastName | uppercase }}</p>

currency，是什麼過濾器——格式化數字爲貨幣格式，單位是$符。

 

9、移動APP開發

一、移動端最小觸控區域是多大？

移動端的點擊事件的有延遲，時間是多久，爲何會有？ 怎麼解決這個延時？（click 有 300ms 延遲,爲了實現safari的雙擊事件的設計，瀏覽器要知道你是否是要雙擊操做。）

10、NodeJs

一、對Node的優勢和缺點提出了本身的見解：

*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，

所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。

此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，

所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，

並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

二、需求：實現一個頁面操做不會整頁刷新的網站，而且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？

至少給出本身的思路（url-hash,能夠使用已有的一些框架history.js等）

六、Node.js的適用場景？

1)、實時應用：如在線聊天，實時通知推送等等（如socket.io）

2)、分佈式應用：經過高效的並行I/O使用已有的數據

3)、工具類應用：海量的工具，小到前端壓縮部署（如grunt），大到桌面圖形界面應用程序

4)、遊戲類應用：遊戲領域對實時和併發有很高的要求（如網易的pomelo框架）

5)、利用穩定接口提高Web渲染能力

6)、先後端編程語言環境統一：前端開發人員能夠很是快速地切入到服務器端的開發（如著名的純Javascript全棧式MEAN架構）

四、(若是會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering麼?

Nodejs相關概念的理解程度

七、解釋一下 Backbone 的 MVC 實現方式？

流行的MVC架構模式

八、什麼是「前端路由」?何時適合使用「前端路由」? 「前端路由」有哪些優勢和缺點?

熟悉先後端通訊相關知識

七、對Node的優勢和缺點提出了本身的見解？

優勢：

1. 由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。

2. 與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

缺點：

1. Node是一個相對新的開源項目，因此不太穩定，它老是一直在變。

2. 缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子（第三方庫如今已經很豐富了，因此這個缺點能夠說不存在了）。

 

11、前端歸納性問題

一、常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？

使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤爲是jQuery，超過91%。

輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。（理解這些框架的功能、性能、設計原理）

前端開發工具：Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。

開發過的插件：城市選擇插件，汽車型號選擇插件、幻燈片插件。彈出層。（寫過開源程序，加載器，js引擎更好）

九、對BFC規範的理解？

Formatting Context：指頁面中的一個渲染區域，而且擁有一套渲染規則，他決定了其子元素如何定位，以及與其餘元素的相互關係和做用。

三、99%的網站都須要被重構是那本書上寫的？

網站重構：應用web標準進行設計（第2版）

四、WEB應用從服務器主動推送Data到客戶端有那些方式？

    html5 websoket

    WebSocket經過Flash

    XHR長時間鏈接

    XHR Multipart Streaming

    不可見的Iframe

<script>標籤的長時間鏈接(可跨域)

五、加班的見解

加班就像借錢，原則應當是------救急不救窮

六、平時如何管理你的項目，如何設計突發大規模併發架構？

先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等

編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

頁面進行標註（例如 頁面 模塊 開始和結束）；

CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）

JS 分文件夾存放 命民以該JS 功能爲準英文翻譯；

圖片採用整合的 images.png png8 格式文件使用 儘可能整合在一塊兒使用方便未來的管理

七、那些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

八、你說你熱愛前端，那麼應該WEB行業的發展很關注吧？ 說說最近最流行的一些東西吧？

Node.js、Mongodb、npm、MVVM、MEAN、react、angularjs

九、你有了解咱們公司嗎？說說你的認識？

由於我想去阿里，因此我針對阿里的說

最羨慕就是在雙十一購物節，350.19億元，每分鐘支付79萬筆。海量數據，竟然無一漏單、無一故障。太厲害了。

十、    移動端（好比：Android IOS）怎麼作好用戶體驗?

融入本身的設計理念，注重用戶體驗，選擇合適的技術

十一、    你所知道的頁面性能優化方法有那些？

壓縮、合併，減小請求，代碼層析優化。。。

十二、    除了前端之外還了解什麼其它技術麼？你最最厲害的技能是什麼？

知識面寬度，最好熟悉一些後臺語言，好比php，展示出本身的技術兩點

1三、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

1四、談談你認爲怎樣作能使項目作的更好？

考慮問題的深刻，不只僅停留在完成任務上，要精益求精

1五、你對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

表現出對前端的認同與興趣，關注相關技術前沿

1六、php中下面哪一個函數能夠打開一個文件，以對文件進行讀和寫操做？

A.fget();B.file_open();C.fopen();D.open_file();

1七、php中rmdir能夠直接刪除文件夾嗎？該目錄必須是空的，並且要有相應的權限--來自api

A.任何文件夾均可以刪除           B.空文件夾能夠刪除

C.有權限的任何文件夾均可以刪除   D.有權限的空文件夾能夠刪除

1八、phpinset和empty的區別，舉例說明

一、empty函數

用途：檢測變量是否爲空

判斷：若是 var 是非空或非零的值，則 empty() 返回 FALSE。換句話說，""、0、"0"、NULL、FALSE、array()、var $var; 以及沒有任何屬性的對象都將被認爲是空的，若是 var 爲空，則返回 TRUE。注意：empty() 只檢測變量，檢測任何非變量的東西都將致使解析錯誤。換句話說，後邊的語句將不會起做用;

二、isset函數

用途：檢測變量是否設置

判斷：檢測變量是否設置，而且不是 NULL。若是已經使用 unset() 釋放了一個變量以後，它將再也不是 isset()。若使用 isset() 測試一個被設置成 NULL 的變量，將返回 FALSE。同時要注意的是一個NULL 字節（"\0"）並不等同於 PHP 的 NULL 常數。

1九、php中$_SERVER變量中如何獲得當前執行腳本路勁

 

20、寫一個php函數，要求兩個日期字符串的天數差，如2012-02-05~2012-03-06的日期差數

2一、一個衣櫃中放了許多雜亂的襯衫，若是讓你去整理一下，使得更容易找到你想要的衣服；你會怎麼作？請寫出你的作法和思路？

2二、如何優化網頁加載速度？

   1.減小css，js文件數量及大小(減小重複性代碼，代碼重複利用)，壓縮CSS和Js代碼

   2.圖片的大小

   3.把css樣式表放置頂部，把js放置頁面底部

   4.減小http請求數

   5.使用外部 Js 和 CSS

2三、工做流程，你怎麼來實現頁面設計圖，你認爲前端應該如何高質量完成工做?

熟悉相關設計規範，本身總結的一些經驗

2四、介紹項目經驗、合做開發、獨立開發。

團隊協做，我的能力。實踐經驗

2五、開發過程當中遇到困難，如何解決。

考察解決問題的能力

2六、對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

    前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。

    一、實現界面交互

    二、提高用戶體驗

    三、有了Node.js，前端能夠實現服務端的一些事情

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

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

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

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

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

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

其它相關的加分項：

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

2. 都知道有哪些瀏覽器內核?開發過的項目都兼容哪些瀏覽器?

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

4. HTML5都有哪些新的API?

5. 都用過什麼代碼調試工具?

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

7.你遇到過比較難的技術問題是？你是如何解決的？

 

 

 

 

 

  

1、HTML和CSS

一、你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?

IE: trident內核

Firefox：gecko內核

Safari:webkit內核

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

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

二、每一個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？

<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）

三、Quirks模式是什麼？它和Standards模式有什麼區別

從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規範上的正確處理達到在指定瀏覽器中的程度。

在IE6以前CSS還不夠成熟，因此IE5等以前的瀏覽器對CSS的支持不好， IE6將對CSS提供更好的支持，然而這時的問題就來了，由於有不少頁面是基於舊的佈局方式寫的，而若是IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？

在寫程序時咱們也會常常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤爲是新功能不兼容舊功能時。遇到這種問題時的一個常見作法是增長參數和分支，即當某個參數爲真時，咱們就使用新功能，而若是這個參數 不爲真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是相似這樣作的，它將DTD當成了這個「參數」，由於之前的頁面你們都不會去寫DTD，因此IE6就假定 若是寫了DTD，就意味着這個頁面將採用對CSS支持更好的佈局，而若是沒有，則採用兼容以前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：

整體會有佈局、樣式解析和腳本執行三個方面的區別。

盒模型：在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

 

設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下能夠使元素水平居中，但在quirks模式下卻會失效。

（還有不少，答出什麼不重要，關鍵是看他答出的這些是否是本身經驗遇到的，仍是說都是看文章看的，甚至徹底不知道。）

四、div+css的佈局較table佈局有什麼優勢？

改版的時候更方便 只要改css文件。

頁面加載速度更快、結構化清晰、頁面顯示簡潔。

表現與結構相分離。

易於優化（seo）搜索引擎更友好，排名更容易靠前。

五、 img的alt與title有何異同？ strong與em的異同？

a:alt(alt text):爲不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)

title(tool tip):該屬性爲設置該屬性的元素提供建議性的信息。

strong:粗體強調標籤，強調，表示內容的重要性

em:斜體強調標籤，更強烈強調，表示內容的強調點

六、你能描述一下漸進加強和優雅降級之間的不一樣嗎?

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

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

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

「優雅降級」觀點

「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。

在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。

「漸進加強」觀點

「漸進加強」觀點則認爲應關注於內容自己。

內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。

那麼問題來了。如今產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了不少圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？

七、爲何利用多個域名來存儲網站資源會更有效？

CDN緩存更方便

突破瀏覽器併發限制

節約cookie帶寬

節約主域名的鏈接數，優化頁面響應速度

防止沒必要要的安全問題

八、請談一下你對網頁標準和標準制定機構重要性的理解。

網頁標準和標準制定機構都是爲了能讓web發展的更‘健康’，開發者遵循統一的標準，下降開發難度，開發成本，SEO也會更好作，也不會由於濫用代碼致使各類BUG、安全問題，最終提升網站易用性。

九、請描述一下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僅僅是爲了在本地「存儲」數據而生。

十、簡述一下src與href的區別。

src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。

<script src =」js.js」></script>

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

href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加

<link href=」common.css」 rel=」stylesheet」/>

那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css，而不是使用@import方式。

十一、知道的網頁製做會用到的圖片格式有哪些？

png-8，png-24，jpeg，gif，svg。

可是上面的那些都不是面試官想要的最後答案。面試官但願聽到是Webp。（是否有關注新技術，新鮮事物）

科普一下Webp：WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。

在質量相同的狀況下，WebP格式圖像的體積要比JPEG格式圖像小40%

十二、知道什麼是微格式嗎？談談理解。在前端構建中應該考慮微格式嗎？

微格式（Microformats）是一種讓機器可讀的語義化XHTML詞彙的集合，是結構化數據的開放標準。是爲特殊應用而制定的特殊格式。

優勢：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面能夠顯示額外的提示。（應用範例：豆瓣，有興趣自行google）

1三、在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？

答案：dns緩存，cdn緩存，瀏覽器緩存，服務器緩存。

1四、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。

若是爲幻燈片、相冊等，能夠使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。

若是圖片爲css圖片，能夠使用CSSsprite，SVGsprite，Iconfont、Base64等技術。

若是圖片過大，能夠使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

1五、你如何理解HTML結構的語義化？　

去掉或樣式丟失的時候能讓頁面呈現清晰的結構：

html自己是沒有表現的，咱們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認爲這是html的表現，這些其實html默認的css樣式在起做用，因此去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語義化的HTML結構的優勢，可是瀏覽器都有有默認樣式，默認樣式的目的也是爲了更好的表達html的語義，能夠說瀏覽器的默認樣式和語義化的HTML結構是不可分割的。

屏幕閱讀器（若是訪客有視障）會徹底根據你的標記來「讀」你的網頁.

例如,若是你使用的含語義的標記,屏幕閱讀器就會「逐個拼出」你的單詞,而不是試着去對它完整發音.

PDA、手機等設備可能沒法像普通電腦的瀏覽器同樣來渲染網頁（一般是由於這些設備對CSS的支持較弱）

使用語義標記能夠確保這些設備以一種有意義的方式來渲染網頁.理想狀況下,觀看設備的任務是符合設備自己的條件來渲染網頁.

語義標記爲設備提供了所需的相關信息,就省去了你本身去考慮全部可能的顯示狀況（包括現有的或者未來新的設備）.例如,一部手機能夠選擇使一段標記了標題的文字以粗體顯示.而掌上電腦可能會以比較大的字體來顯示.不管哪一種方式一旦你對文本標記爲標題,您就能夠確信讀取設備將根據其自身的條件來合適地顯示頁面.

搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重

過去你可能尚未考慮搜索引擎的爬蟲也是網站的「訪客」,但如今它們他們其實是極其寶貴的用戶.沒有他們的話,搜索引擎將沒法索引你的網站,而後通常用戶將很難過來訪問.

你的頁面是否對爬蟲容易理解很是重要,由於爬蟲很大程度上會忽略用於表現的標記,而只注重語義標記.

所以,若是頁面文件的標題被標記,而不是,那麼這個頁面在搜索結果的位置可能會比較靠後.除了提高易用性外,語義標記有利於正確使用CSS和JavaScript,由於其自己提供了許多「鉤鉤」來應用頁面的樣式與行爲.

SEO主要仍是靠你網站的內容和外部連接的。

便於團隊開發和維護

W3C給咱們定了一個很好的標準，在團隊中你們都遵循這個標準，能夠減小不少差別化的東西，方便開發和維護，提升開發效率，甚至實現模塊化開發。

1六、談談之前端角度出發作好SEO須要考慮什麼？

瞭解搜索引擎如何抓取網頁和如何索引網頁

你須要知道一些搜索引擎的基本工做原理，各個搜索引擎之間的區別，搜索機器人（SE robot 或叫 web crawler）如何進行工做，搜索引擎如何對搜索結果進行排序等等。

Meta標籤優化

主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字好比Author（做者），Category（目錄），Language（編碼語種）等。

如何選取關鍵詞並在網頁中放置關鍵詞

搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工做之一。首先要給網站肯定主關鍵詞（通常在5個上下），而後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。

瞭解主要的搜索引擎

雖然搜索引擎有不少，可是對網站流量起決定做用的就那麼幾個。好比英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不一樣的搜索引擎對頁面的抓取和索引、排序的規則都不同。還要了解各搜索門戶和搜索引擎之間的關係，好比AOL網頁搜索用的是Google的搜索技術，MSN用的是Bing的技術。

主要的互聯網目錄

Open Directory自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別是網站內容的收集方式不一樣。目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集的，除了主頁外還抓取大量的內容頁面。

按點擊付費的搜索引擎

搜索引擎也須要生存，隨着互聯網商務的愈來愈成熟，收費的搜索引擎也開始大行其道。最典型的有Overture和百度，固然也包括Google的廣告項目Google Adwords。愈來愈多的人經過搜索引擎的點擊廣告來定位商業網站，這裏面也大有優化和排名的學問，你得學會用最少的廣告投入得到最多的點擊。

搜索引擎登陸

網站作完了之後，別躺在那裏等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交（submit）到搜索引擎。若是你的是商業網站，主要的搜索引擎和目錄都會要求你付費來得到收錄（好比Yahoo要299美圓），可是好消息是（至少到目前爲止）最大的搜索引擎Google目前仍是免費，並且它主宰着60％以上的搜索市場。

連接交換和連接普遍度（Link Popularity）

網頁內容都是以超文本（Hypertext）的方式來互相連接的，網站之間也是如此。除了搜索引擎之外，人們也天天經過不一樣網站之間的連接來Surfing（「衝浪」）。其它網站到你的網站的連接越多，你也就會得到更多的訪問量。更重要的是，你的網站的外部連接數越多，會被搜索引擎認爲它的重要性越大，從而給你更高的排名。

合理的標籤使用

1七、有哪項方式能夠對一個DOM設置它的CSS樣式？　

外部樣式表，引入一個外部css文件

內部樣式表，將css代碼放在 <head> 標籤內部

內聯樣式，將css樣式直接定義在 HTML 元素內部

1八、CSS都有哪些選擇器？

派生選擇器（用HTML標籤申明）

id選擇器（用DOM的ID申明）

類選擇器（用一個樣式類名申明）

屬性選擇器（用DOM的屬性申明，屬於CSS2，IE6不支持，不經常使用，不知道就算了）

除了前3種基本選擇器，還有一些擴展選擇器，包括

後代選擇器（利用空格間隔，好比div .a{  }）

羣組選擇器（利用逗號間隔，好比p,div,#a{  }）

那麼問題來了，CSS選擇器的優先級是怎麼樣定義的？

基本原則：

通常而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。

複雜的計算方法：

用1表示派生選擇器的優先級

用10表示類選擇器的優先級

用100標示ID選擇器的優先級

div.test1 .span var 優先級 1+10 +10 +1

span#xxx .songs li 優先級1+100 + 10 + 1

#xxx li 優先級 100 +1

那麼問題來了，看下列代碼，<p>標籤內的文字是什麼顏色的？

<style>

.classA{ color:blue;}

.classB{ color:red;}

</style>

<body>

<p class='classB classA'> 123 </p>

</body>

答案：red。與樣式定義在文件中的前後順序有關，便是後面的覆蓋前面的，與在<p class=’classB classA’>中的前後關係無關。

1九、CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？

最基本的：

設置display屬性爲none，或者設置visibility屬性爲hidden

技巧性：

設置寬高爲0，設置透明度爲0，設置z-index位置在-1000

20、超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？

答案：被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

2一、什麼是Css Hack？ie6,7,8的hack分別是什麼？

答案：針對不一樣的瀏覽器寫不一樣的CSS code的過程，就是CSS hack。

示例以下：

1 2 3 4 5 6 7 8 9 10 11 12

#test       {           width:300px;           height:300px;                 /*firefox*/         background-color:red\9;      /*all ie*/         background-color:yellow;    /*ie8*/         +background-color:pink;        /*ie7*/         _background-color:orange;       /*ie6*/    }          :root #test { background-color:purple\9; }  /*ie9*/     @media all and (min-width:0px){ #test {background-color:black;} }  /*opera*/     @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }       /*chrome and safari*/

2二、請用Css寫一個簡單的幻燈片效果頁面

答案：知道是要用css3。使用animation動畫實現一個簡單的幻燈片效果。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

/**HTML**/         div.ani         /**css**/         .ani{           width:480px;           height:320px;           margin:50px auto;           overflow: hidden;           box-shadow:0 0 5px rgba(0,0,0,1);           background-size: cover;           background-position: center;           -webkit-animation-name: "loops";           -webkit-animation-duration: 20s;           -webkit-animation-iteration-count: infinite;         }         @-webkit-keyframes "loops" {             0% {                 background:url(http://d.h、d3.jpg) no-repeat;                         }             25% {                 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sig、f76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;             }             50% {                 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be、58e七、bb5b912.jpg) no-repeat;             }             75% {                 background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;             }             100% {                 background:url(http://c.hiphotos.baidu.com/image/2b21192138ad1.jpg) no-repeat;             }         }

2四、行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？

塊級元素(block)特性：

老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;

寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

內聯元素(inline)特性：

和相鄰的內聯元素在同一行;

寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變

（也就是padding和margin的left和right是能夠設置的），就是裏面文字或圖片的大小。

那麼問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

2五、什麼是外邊距重疊？重疊的結果是什麼？

外邊距重疊就是margin-collapse。

在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

摺疊結果遵循下列計算規則：

兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。

兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。

兩個外邊距一正一負時，摺疊結果是二者的相加的和。

2六、rgba()和opacity的透明效果有什麼不一樣？

rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，

而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

2七、css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

垂直方向：line-height

水平方向：letter-spacing

那麼問題來了，關於letter-spacing的妙用知道有哪些麼？

答案:能夠用於消除inline-block元素間的換行符空格間隙問題。

2八、如何垂直居中一個浮動元素？

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

// 方法一：已知元素的高寬 #div1{          width:200px;     height:200px;     position: absolute;        //父元素須要相對定位     top: 50%;     left: 50%;     margin-top:-100px ;   //二分之一的height，width     margin-left: -100px;     }   //方法二:未知元素的高寬     #div1{     width: 200px;     height: 200px;     background-color: #6699FF;       margin:auto;     position: absolute;        //父元素須要相對定位     left: 0;     top: 0;     right: 0;     bottom: 0;     }

那麼問題來了，如何垂直居中一個<img>?（用更簡便的方法。）

1 2 3 4 5 6

#container     //<img>的容器設置以下 {     display:table-cell;     text-align:center;     vertical-align:middle; }

2九、px和em的區別。

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

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

30、描述一個」reset」的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？

重置樣式很是多，凡是一個前端開發人員確定有一個經常使用的重置CSS文件並知道如何使用它們。他們是盲目的在作仍是知道爲何這麼作呢？緣由是不一樣的瀏覽器對一些元素有不一樣的默認樣式，若是你不處理，在不一樣的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。

你可能會用Normalize來代替你的重置樣式文件。它沒有重置全部的樣式風格，但僅提供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其餘的東西（如粗體的標題）。

在這一方面，沒法作每個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。

3一、Sass、LESS是什麼？你們爲何要使用他們？

他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。

例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)。

爲何要使用它們？

結構清晰，便於擴展。

能夠方便地屏蔽瀏覽器私有語法差別。這個不用多說，封裝對瀏覽器語法差別的重複處理，減小無心義的機械勞動。

能夠輕鬆實現多重繼承。

徹底兼容 CSS 代碼，能夠方便地應用到老項目中。LESS 只是在 CSS 語法上作了擴展，因此老的 CSS 代碼也能夠與 LESS 代碼一同編譯。

3二、display:none與visibility:hidden的區別是什麼？

display : 隱藏對應的元素但不擠佔該元素原來的空間。

visibility: 隱藏對應的元素而且擠佔該元素原來的空間。

便是，使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。

3四、CSS中link和@import的區別是：

Link屬於html標籤，而@import是CSS中提供的

在頁面加載的時候，link會同時被加載，而@import引用的CSS會在頁面加載完成後纔會加載引用的CSS

@import只有在ie5以上才能夠被識別，而link是html標籤，不存在瀏覽器兼容性問題

Link引入樣式的權重大於@import的引用（@import是將引用的樣式導入到當前的頁面中）

3五、簡介盒子模型：

CSS的盒子模型有兩種：IE盒子模型、標準的W3C盒子模型模型

盒模型：內容、內邊距、外邊距（通常不計入盒子實際寬度）、邊框

 

3六、爲何要初始化樣式？

因爲瀏覽器兼容的問題，不一樣的瀏覽器對標籤的默認樣式值不一樣，若不初始化會形成不一樣瀏覽器之間的顯示差別

可是初始化CSS會對搜索引擎優化形成小影響

3七、BFC是什麼?

BFC（塊級格式化上下文），一個建立了新的BFC的盒子是獨立佈局的，盒子內元素的佈局不會影響盒子外面的元素。在同一個BFC中的兩個相鄰的盒子在垂直方向發生margin重疊的問題

BFC是指瀏覽器中建立了一個獨立的渲染區域，該區域內全部元素的佈局不會影響到區域外元素的佈局，這個渲染區域只對塊級元素起做用

3八、html語義化是什麼？

當頁面樣式加載失敗的時候可以讓頁面呈現出清晰的結構

有利於seo優化，利於被搜索引擎收錄（更便於搜索引擎的爬蟲程序來識別）

便於項目的開發及維護，使html代碼更具備可讀性，便於其餘設備解析。

3九、Doctype的做用？嚴格模式與混雜模式的區別？

<!DOCTYPE>用於告知瀏覽器該以何種模式來渲染文檔

嚴格模式下：頁面排版及JS解析是以該瀏覽器支持的最高標準來執行

混雜模式：不嚴格按照標準執行，主要用來兼容舊的瀏覽器，向後兼容

40、IE的雙邊距BUG：塊級元素float後設置橫向margin，ie6顯示的margin比設置的較大。解決：加入_display：inline

4一、HTML與XHTML——兩者有什麼區別？

1. 全部的標記都必需要有一個相應的結束標記

2. 全部標籤的元素和屬性的名字都必須使用小寫

3. 全部的 XML 標記都必須合理嵌套

4. 全部的屬性必須用引號 "" 括起來

5. 把全部 < 和 & 特殊符號用編碼表示

6. 給全部屬性賦一個值

7. 不要在註釋內容中使用 "--"

8. 圖片必須有說明文字

4二、html常見兼容性問題？

1.雙邊距BUG float引發的  使用display

2.3像素問題 使用float引發的 使用dislpay:inline -3px 

3.超連接hover 點擊後失效  使用正確的書寫順序 link visited hover active

4.Ie z-index問題 給父級添加position:relative

5.Png 透明 使用js代碼 改

6.Min-height 最小高度 ！Important 解決’

7.select 在ie6下遮蓋 使用iframe嵌套

8.爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

9.IE5-8不支持opacity，解決辦法：

.opacity {

    opacity: 0.4

    filter: alpha(opacity=60); /* for IE5-7 */

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/

}

10. IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片

4三、對WEB標準以及W3C的理解與認識

答：標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外 鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性。

4四、行內元素有哪些?塊級元素有哪些?CSS的盒模型?

答：塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding

4五、前端頁面有哪三層構成，分別是什麼?做用是什麼?

答：結構層 Html 表示層 CSS 行爲層 js。

4六、Doctype做用? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

    （1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，用什麼文檔類型 規範來解析這個文檔。

    （2）、嚴格模式的排版和 JS 運做模式是  以該瀏覽器支持的最高標準運行。

    （3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

    （4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

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

（1）CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，好比div默認display屬性值爲「block」，成爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。 

（2）行內元素有：a b span img input select strong（強調的語氣） 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p 

（3）知名的空元素：     

<br><hr><img><input><link><meta>不爲人知的是： <area><base><col><command>

<embed><keygen><param><source><track><wbr>

4八、CSS的盒子模型？

（1）兩種， IE 盒子模型、標準 W3C 盒子模型；IE 的content部分包含了 border 和 pading;

（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

4九、CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

    *   1.id選擇器（ # myid）

        2.類選擇器（.myclassname）

        3.標籤選擇器（div, h1, p）

        4.相鄰選擇器（h1 + p）

        5.子選擇器（ul < li）

        6.後代選擇器（li a）

        7.通配符選擇器（ * ）

        8.屬性選擇器（a[rel = "external"]）

        9.僞類選擇器（a: hover, li: nth - child）

    *   可繼承： font-size font-family color, UL LI DL DD DT;

    *   不可繼承 ：border padding margin width height ;

    *   優先級就近原則，樣式定義最近者爲準;

    *   載入樣式以最後載入的定位爲準;

優先級爲:

       !important >  id > class > tag 

       important 比 內聯優先級高

CSS3新增僞類舉例：

    p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

    p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

    p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

    p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

    :enabled、:disabled 控制表單控件的禁用狀態。

    :checked，單選框或複選框被選中。

50、如何居中div,如何居中一個浮動元素?

給div設置一個寬度，而後添加margin:0 auto屬性

    div{

        width:200px;

        margin:0 auto;

     } 

居中一個浮動元素

      肯定容器的寬高 寬500 高 300 的層

      設置層的外邊距

     .div {

      Width:500px ; height:300px;//高度能夠不設

      Margin: -150px 0 0 -250px;

      position:relative;相對定位

      //方便看效果

      left:50%;

      top:50%;

    }

5一、瀏覽器的內核分別是什麼?常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用hack的技巧 ？

    * IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto；

    * png24爲的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

    * 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

    * IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

      浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

     這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

      漸進識別的方式，從整體中逐漸排除局部。

      首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。

      接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

      css

          .bb{

           background-color:#f1ee18;/*全部識別*/

          .background-color:#00deff\9; /*IE六、七、8識別*/

          +background-color:#a200ff;/*IE六、7識別*/

          _background-color:#1e0bd1;/*IE6識別*/

          }

    *  IE下,能夠使用獲取常規屬性的方法來獲取自定義屬性,

       也能夠使用getAttribute()獲取自定義屬性;

       Firefox下,只能使用getAttribute()獲取自定義屬性.

       解決方法:統一經過getAttribute()獲取自定義屬性.

    *  IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;

      Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

    * （條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

    * Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

    超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:

    L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

5二、列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？

  1. block 象塊類型元素同樣顯示。

  none 缺省值。向行內元素類型同樣顯示。

  inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。

  list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

  2. position的值

  *absolute

        生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。

  *fixed （老IE不支持）

        生成絕對定位的元素，相對於瀏覽器窗口進行定位。

  * relative

        生成相對定位的元素，相對於其正常位置進行定位。

  * static  默認值。沒有定位，元素出如今正常的流中

  *（忽略 top, bottom, left, right z-index 聲明）。

  * inherit 規定從父元素繼承 position 屬性的值。

5三、absolute的containing block計算方式跟正常流有什麼不一樣？

5四、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

5五、對WEB標準以及W3C的理解與認識

標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外 鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性；

5六、css的基本語句構成是?

選擇器{屬性1:值1;屬性2:值2;……}

5七、瀏覽器標準模式和怪異模式之間的區別是什麼?

盒子模型 渲染模式的不一樣

使用 window.top.document.compatMode 可顯示爲何模式

5八、CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？　　

　　最基本的：

　　設置display屬性爲none，或者設置visibility屬性爲hidden

　　技巧性：

　　設置寬高爲0，設置透明度爲0，設置z-index位置在-1000

5九、超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？

　　答案：被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

60、什麼是Css Hack？ie6,7,8的hack分別是什麼？

　　答案：針對不一樣的瀏覽器寫不一樣的CSS code的過程，就是CSS hack。

　　示例以下：

#test       {  

        width:300px;  

        height:300px;  

 

        background-color:blue;      /*firefox*/

        background-color:red\9;      /*all ie*/

        background-color:yellow\0;    /*ie8*/

        +background-color:pink;        /*ie7*/

        _background-color:orange;       /*ie6*/    } 

        :root #test { background-color:purple\9; }  /*ie9*/

    @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/

    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }       /*chrome and safari*/

62、請用Css寫一個簡單的幻燈片效果頁面

　　答案：知道是要用css3。使用animation動畫實現一個簡單的幻燈片效果。

/**HTML**/

        div.ani

        /**css**/

        .ani{

          width:480px;

          height:320px;

          margin:50px auto;

          overflow: hidden;

          box-shadow:0 0 5px rgba(0,0,0,1);

          background-size: cover;

          background-position: center;

          -webkit-animation-name: "loops";

          -webkit-animation-duration: 20s;

          -webkit-animation-iteration-count: infinite;

        }

        @-webkit-keyframes "loops" {

            0% { background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;            

            }

            25% {

                background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;

            }

            50% {

                background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;

            }

            75% {

                background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;

            }

            100% {

                background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;

            }

        }

63、行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？

　　塊級元素(block)特性：

• 老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;
• 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

　　內聯元素(inline)特性：

• 和相鄰的內聯元素在同一行;
• 寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是能夠設置的），就是裏面文字或圖片的大小。

　　那麼問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

　　答案：<input> 、<img> 、<button> 、<textarea> 、<label>

6四、什麼是外邊距重疊？重疊的結果是什麼？

　　答案：

　　外邊距重疊就是margin-collapse。

　　在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

　　摺疊結果遵循下列計算規則：

1. 兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。
2. 兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。
3. 兩個外邊距一正一負時，摺疊結果是二者的相加的和。

　　

65、rgba()和opacity的透明效果有什麼不一樣？

　　rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，

　　而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

66、css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

　　垂直方向：line-height

　　水平方向：letter-spacing

　　那麼問題來了，關於letter-spacing的妙用知道有哪些麼？

　　答案:能夠用於消除inline-block元素間的換行符空格間隙問題。

67、如何垂直居中一個浮動元素？

// 方法一：已知元素的高寬

#div1{

    background-color:#6699FF;

    width:200px;

    height:200px;

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

    top: 50%;

    left: 50%;

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

    margin-left: -100px;

    }

//方法二:未知元素的高寬

  #div1{

    width: 200px;

    height: 200px;

    background-color: #6699FF;

    margin:auto;

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

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    }

那麼問題來了，如何垂直居中一個<img>?（用更簡便的方法。）

#container     //<img>的容器設置以下

{

    display:table-cell;

    text-align:center;

    vertical-align:middle;

}

68、描述一個"reset"的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？　

　　重置樣式很是多，凡是一個前端開發人員確定有一個經常使用的重置CSS文件並知道如何使用它們。他們是盲目的在作仍是知道爲何這麼作呢？緣由是不一樣的瀏覽器對一些元素有不一樣的默認樣式，若是你不處理，在不一樣的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。

　　你可能會用Normalize來代替你的重置樣式文件。它沒有重置全部的樣式風格，但僅提供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其餘的東西（如粗體的標題）。

　　在這一方面，沒法作每個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。

6九、說display屬性有哪些？能夠作什麼？

display:block行內元素轉換爲塊級元素

  display:inline塊級元素轉換爲行內元素

  display:inline-block轉爲內聯元素

70、哪些css屬性能夠繼承？

可繼承： font-size font-family color, ul li dl dd dt;

  不可繼承 ：border padding margin width height ;

7一、css優先級算法如何計算？

!important >  id > class > 標籤

  !important 比 內聯優先級高

  *優先級就近原則，樣式定義最近者爲準;

  *以最後載入的樣式爲準;

7二、b標籤和strong標籤,i標籤和em標籤的區別？

後者有語義，前者則無。

7三、有那些行內元素、有哪些塊級元素、盒模型？

1.內聯元素(inline element)

a – 錨點

abbr – 縮寫

acronym – 首字

b – 粗體(不推薦)

big – 大字體

br – 換行

em – 強調

font – 字體設定(不推薦)

i – 斜體

img – 圖片

input – 輸入框

label – 表格標籤

s – 中劃線(不推薦)

select – 項目選擇

small – 小字體文本

span – 經常使用內聯容器，定義文本內區塊

strike – 中劃線

strong – 粗體強調

sub – 下標

sup – 上標

textarea – 多行文本輸入框

tt – 電傳文本

u – 下劃線

var – 定義變量

二、塊級元素

address – 地址

blockquote – 塊引用

center – 舉中對齊塊

dir – 目錄列表

div – 經常使用塊級容易，也是css layout的主要標籤

dl – 定義列表

fieldset – form控制組

form – 交互表單

h1 – 大標題

h2 – 副標題

h3 – 3級標題

h4 – 4級標題

h5 – 5級標題

h6 – 6級標題

hr – 水平分隔線

isindex – input prompt

menu – 菜單列表

noframes – frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容）

noscript – ）可選腳本內容（對於不支持script的瀏覽器顯示此內容）

ol – 排序表單

p – 段落

pre – 格式化文本

table – 表格

ul – 非排序列表

3.CSS盒子模型包含四個部分組成：

內容、填充（padding）、邊框（border）、外邊界（margin）。

7四、有哪些選擇符，優先級的計算公式是什麼？行內樣式和！important哪一個優先級高？

#ID > .class > 標籤選擇符  !important優先級高

75.我想讓行內元素跟上面的元素距離10px，加margin-top和padding-top能夠嗎？

  margin-top,padding-top無效

76.CSS的盒模型由什麼組成？

  內容，border ,margin，padding

7七、.說說display屬性有哪些？能夠作什麼？

  display:block行內元素轉換爲塊級元素

  display:inline塊級元素轉換爲行內元素

  display:inline-block轉爲內聯元素

7八、哪些css屬性能夠繼承？

  可繼承： font-size font-family color, ul li dl dd dt;

  不可繼承 ：border padding margin width height ;

7九、css優先級算法如何計算？

  !important >  id > class > 標籤

  !important 比 內聯優先級高

  * 優先級就近原則，樣式定義最近者爲準;

  * 以最後載入的樣式爲準;

80、text-align:center和line-height有什麼區別？

  text-align是水平對齊，line-height是行間。

8一、前端頁面由哪三層構成，分別是什麼？做用是什麼？

   結構層 Html 表示層 CSS 行爲層 js

8二、寫一個表格以及對應的CSS,使表格奇數行爲白色背景，偶數行爲灰色，鼠標一上去爲黃色背景。