最新前端面試題整理和答案（全）一直更新

阿新 • • 發佈：2019-01-10

最新前端面試題整理和答案（全）

javascript:

JavaScript中如何檢測一個變數是一個String型別？請寫出函式實現

typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String

比較typeof與instanceof？

相同點：JavaScript 中 typeof 和 instanceof 常用來判斷一個變數是否為空，或者是什麼型別的。

typeof的定義和用法：返回值是一個字串，用來說明變數的資料型別。

細節：

(1)、typeof 一般只能返回如下幾個結果：number,boolean,string,function,object,undefined。

(2)、typeof 來獲取一個變數是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因為如果 a 不存在（未宣告）則會出錯。

(3)、對於 Array,Null 等特殊物件使用 typeof 一律返回 object，這正是 typeof 的侷限性。

Instanceof定義和用法：instanceof 用於判斷一個變數是否屬於某個物件的例項。

例項演示：

a instanceof b?alert("true"):alert("false"); //a是b的例項？真:假

var a = new Array(); 
alert(a instanceof Array);  // true
alert(a instanceof Object)  // true

如上，會返回 true，同時 alert(a instanceof Object) 也會返回 true;這是因為 Array 是 object 的子類。

function test(){};
var a = new test();
alert(a instanceof test)   // true

細節：

(1)、如下，得到的結果為‘N’,這裡的 instanceof 測試的 object 是指 js 語法中的 object，不是指 dom 模型物件。

if (window instanceof Object){ alert('Y')} else {  alert('N');}  // 'N'

請用js去除字串空格？

方法一：使用replace正則匹配的方法

去除所有空格: str = str.replace(/\s*/g,"");

去除兩頭空格: str = str.replace(/^\s*|\s*$/g,"");

去除左空格： str = str.replace( /^\s*/, “”);

去除右空格： str = str.replace(/(\s*$)/g, "");

str為要去除空格的字串，例項如下：

var str = " 23 23 ";
var str2 = str.replace(/\s*/g,"");
console.log(str2); // 2323

方法二：使用str.trim()方法

str.trim()侷限性：無法去除中間的空格，只能去除兩端的空格，例項如下：

var str = "   xiao  ming   ";
var str2 = str.trim();
console.log(str2);   //xiao  ming

同理，str.trimLeft()，str.trimRight()分別用於去除字串左右空格。

方法三：使用jquery,$.trim(str)方法

$.trim(str)侷限性：無法去除中間的空格，例項如下：

var str = "   xiao  ming   ";
var str2 = $.trim(str)
console.log(str2);   //  xiao  ming

你如何獲取瀏覽器URL中查詢字串中的引數？

例項如下：

function showWindowHref(){
    var sHref = "www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23";
    var args = sHref.split('?');
    if(args[0] == sHref){
        return "";
    }
    var arr = args[1].split('&');
    var obj = {};
    for(var i = 0;i< arr.length;i++){
        var arg = arr[i].split('=');
        obj[arg[0]] = arg[1];
    }
    return obj;
}
var href = showWindowHref(); // obj
console.log(href['name']); // xiaoming
console.log(href.age); // 23   兩種方法，讀出age

js 字串操作函式

　　我這裡只是列舉了常用的字串函式，具體使用方法，請參考網址。

concat() – 將兩個或多個字元的文字組合起來，返回一個新的字串。
indexOf() – 返回字串中一個子串第一處出現的索引。如果沒有匹配項，返回 -1 。
charAt() – 返回指定位置的字元。
lastIndexOf() – 返回字串中一個子串最後一處出現的索引，如果沒有匹配項，返回 -1 。
match() – 檢查一個字串是否匹配一個正則表示式。
substr() 函式 -- 返回從string的startPos位置，長度為length的字串
substring() – 返回字串的一個子串。傳入引數是起始位置和結束位置。
slice() – 提取字串的一部分，並返回一個新字串。
replace() – 用來查詢匹配一個正則表示式的字串，然後使用新字串代替匹配的字串。
search() – 執行一個正則表示式匹配查詢。如果查詢成功，返回字串中匹配的索引值。否則返回 -1 。
split() – 通過將字串劃分成子串，將一個字串做成一個字串陣列。
length – 返回字串的長度，所謂字串的長度是指其包含的字元的個數。
toLowerCase() – 將整個字串轉成小寫字母。
toUpperCase() – 將整個字串轉成大寫字母。

怎樣新增、移除、移動、複製、建立和查詢節點？

1）建立新節點

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

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

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

寫出3個使用this的典型應用

（1）、在html元素事件屬性中使用，如：

<input type=”button” onclick=”showInfo(this);” value=”點選一下”/>

（2）、建構函式

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}

（3）、input點選，獲取值

<input type="button" id="text" value="點選一下" />
<script type="text/javascript">
    var btn = document.getElementById("text");
    btn.onclick = function() {
        alert(this.value);    //此處的this是按鈕元素
    }
</script>

(4)、apply()/call()求陣列最值

var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(this, numbers);  
console.log(maxInNumbers);  // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
console.log(maxInNumbers);  // 458

如何理解閉包？

1、定義和用法：當一個函式的返回值是另外一個函式，而返回的那個函式如果呼叫了其父函式內部的其它變數，如果返回的這個函式在外部被執行，就產生了閉包。

2、表現形式：使函式外部能夠呼叫函式內部定義的變數。

3、例項如下：

(1)、根據作用域鏈的規則，底層作用域沒有宣告的變數，會向上一級找，找到就返回，沒找到就一直找，直到window的變數，沒有就返回undefined。這裡明顯count 是函式內部的flag2 的那個count 。

var count=10;   //全域性作用域 標記為flag1
function add(){
    var count=0;    //函式全域性作用域 標記為flag2
    return function(){
        count+=1;   //函式的內部作用域
        alert(count);
    }
}
var s = add()
s();//輸出1
s();//輸出2

4、變數的作用域

要理解閉包，首先必須理解Javascript特殊的變數作用域。

變數的作用域分類：全域性變數和區域性變數。

特點：

1、函式內部可以讀取函式外部的全域性變數；在函式外部無法讀取函式內的區域性變數。

2、函式內部宣告變數的時候，一定要使用var命令。如果不用的話，你實際上聲明瞭一個全域性變數！

5、使用閉包的注意點

1）濫用閉包，會造成記憶體洩漏：由於閉包會使得函式中的變數都被儲存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的效能問題，在IE中可能導致記憶體洩露。解決方法是，在退出函式之前，將不使用的區域性變數全部刪除。

2）會改變父函式內部變數的值。所以，如果你把父函式當作物件（object）使用，把閉包當作它的公用方法（Public Method），把內部變數當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函式內部變數的值。

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

1、什麼是跨域？

由於瀏覽器同源策略，凡是傳送請求url的協議、域名、埠三者之間任意一與當前頁面地址不同即為跨域。存在跨域的情況：

網路協議不同，如http協議訪問https協議。
埠不同，如80埠訪問8080埠。
域名不同，如qianduanblog.com訪問baidu.com。
子域名不同，如abc.qianduanblog.com訪問def.qianduanblog.com。
域名和域名對應ip,如www.a.com訪問20.205.28.90.

2、跨域請求資源的方法：

(1)、porxy代理

定義和用法：proxy代理用於將請求傳送給後臺伺服器，通過伺服器來發送請求，然後將請求的結果傳遞給前端。

實現方法：通過nginx代理；

注意點：1、如果你代理的是https協議的請求，那麼你的proxy首先需要信任該證書（尤其是自定義證書）或者忽略證書檢查，否則你的請求無法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定義和用法：是現代瀏覽器支援跨域資源請求的一種最常用的方式。

使用方法：一般需要後端人員在處理請求資料的時候，新增允許跨域的相關操作。如下：

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

(3)、jsonp

定義和用法：通過動態插入一個script標籤。瀏覽器對script的資源引用沒有同源限制，同時資源載入到頁面後會立即執行（沒有阻塞的情況下）。

特點：通過情況下，通過動態建立script來讀取他域的動態資源，獲取的資料一般為json格式。

例項如下：

<script>
    function testjsonp(data) {
       console.log(data.name); // 獲取返回的結果
    }
</script>
<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
    document.head.appendChild(_script);
</script>

缺點：

　　1、這種方式無法傳送post請求

　　2、另外要確定jsonp的請求是否失敗並不容易，大多數框架的實現都是結合超時時間來判定。

談談垃圾回收機制方式及記憶體管理

回收機制方式

1、定義和用法：垃圾回收機制(GC:Garbage Collection),執行環境負責管理程式碼執行過程中使用的記憶體。

2、原理：垃圾收集器會定期（週期性）找出那些不在繼續使用的變數，然後釋放其記憶體。但是這個過程不是實時的，因為其開銷比較大，所以垃圾回收器會按照固定的時間間隔週期性的執行。

3、例項如下：

function fn1() {
    var obj = {name: 'hanzichi', age: 10};
}
function fn2() {
    var obj = {name:'hanzichi', age: 10};
   return obj;
}
var a = fn1();
var b = fn2();

fn1中定義的obj為區域性變數，而當呼叫結束後，出了fn1的環境，那麼該塊記憶體會被js引擎中的垃圾回收器自動釋放；在fn2被呼叫的過程中，返回的物件被全域性變數b所指向，所以該塊記憶體並不會被釋放。

4、垃圾回收策略：標記清除(較為常用)和引用計數。

標記清除：

　　定義和用法：當變數進入環境時，將變數標記"進入環境"，當變數離開環境時，標記為："離開環境"。某一個時刻，垃圾回收器會過濾掉環境中的變數，以及被環境變數引用的變數，剩下的就是被視為準備回收的變數。

　　到目前為止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或類似的策略，只不過垃圾收集的時間間隔互不相同。

引用計數：

　　定義和用法：引用計數是跟蹤記錄每個值被引用的次數。

　　基本原理：就是變數的引用次數，被引用一次則加1，當這個引用計數為0時，被視為準備回收的物件。

記憶體管理

1、什麼時候觸發垃圾回收？

垃圾回收器週期性執行，如果分配的記憶體非常多，那麼回收工作也會很艱鉅，確定垃圾回收時間間隔就變成了一個值得思考的問題。

IE6的垃圾回收是根據記憶體分配量執行的，當環境中的變數，物件，字串達到一定數量時觸發垃圾回收。垃圾回收器一直處於工作狀態，嚴重影響瀏覽器效能。

IE7中，垃圾回收器會根據記憶體分配量與程式佔用記憶體的比例進行動態調整，開始回收工作。

2、合理的GC方案：(1)、遍歷所有可訪問的物件; (2)、回收已不可訪問的物件。

3、GC缺陷：(1)、停止響應其他操作；

4、GC優化策略：(1)、分代回收（Generation GC）;(2)、增量GC

開發過程中遇到的記憶體洩露情況，如何解決的？

1、定義和用法：

記憶體洩露是指一塊被分配的記憶體既不能使用，又不能回收，直到瀏覽器程序結束。C#和Java等語言採用了自動垃圾回收方法管理記憶體，幾乎不會發生記憶體洩露。我們知道，瀏覽器中也是採用自動垃圾回收方法管理記憶體，但由於瀏覽器垃圾回收方法有bug，會產生記憶體洩露。

2、記憶體洩露的幾種情況:

(1)、當頁面中元素被移除或替換時，若元素繫結的事件仍沒被移除，在IE中不會作出恰當處理，此時要先手工移除事件，不然會存在記憶體洩露。

例項如下:

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

解決方法如下：

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
    btn.onclick = null;
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

(2)、由於是函式內定義函式，並且內部函式--事件回撥的引用外暴了，形成了閉包。閉包可以維持函式內區域性變數，使其得不到釋放。

例項如下：

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
        //Even if it's a empty function
    }
}

解決方法如下：

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
         //Even if it's a empty function
    }
    obj=null;
}

javascript面向物件中繼承實現？

面向物件的基本特徵有：封閉、繼承、多型。

在JavaScript中實現繼承的方法：

1. 原型鏈（prototype chaining）

2. call()/apply()

3. 混合方式(prototype和call()/apply()結合)

4. 物件冒充

繼承的方法如下：

1、prototype原型鏈方式：

function teacher(name){
this.name = name;
}
teacher.prototype.sayName = function(){
console.log("name is "+this.name);
}
var teacher1 = new teacher("xiaoming");
teacher1.sayName();
function student(name){
this.name = name;
}
student.prototype = new teacher()
var student1 = new student("xiaolan");
student1.sayName();
// name is xiaoming
// name is xiaolan

2、call()/apply()方法

function teacher(name,age){

this.name = name;

this.age = age;

this.sayhi = function(){

alert('name:'+name+", age:"+age);

}

function student(){

var args = arguments;

teacher.call(this,args[0],args[1]);

// teacher.apply(this,arguments);

}

var teacher1 = new teacher('xiaoming',23);

teacher1.sayhi();

var student1 = new student('xiaolan',12);

student1.sayhi();

// alert: name:xiaoming, age:23

// alert: name:xiaolan, age:12

3、混合方法【prototype,call/apply】

function teacher(name,age){

this.name = name;

this.age = age;

}

teacher.prototype.sayName = function(){

console.log('name:'+this.name);

}

teacher.prototype.sayAge = function(){

console.log('age:'+this.age);

}

function student(){

var args = arguments;

teacher.call(this,args[0],args[1]);

}

student.prototype = new teacher();

var student1 = new student('xiaolin',23);

student1.sayName();

student1.sayAge();

// name:xiaolin

// age:23

4、物件冒充

function Person(name,age){

this.name = name;

this.age = age;

this.show = function(){

console.log(this.name+", "+this.age);

}

function Student(name,age){

this.student = Person; //將Person類的建構函式賦值給this.student

this.student(name,age); //js中實際上是通過物件冒充來實現繼承的

delete this.student; //移除對Person的引用

}

var s = new Student("小明",17);

s.show();

var p = new Person("小花",18);

p.show();

// 小明, 17

// 小花, 18

說一下你對css重繪和重排（reflow迴流）的理解，兩個有什麼不同？

網頁生成的過程，大致可以分為五步：

html程式碼轉化為dom
css程式碼轉化為cssom
結合dom和cssom，生成一棵渲染樹（包含每個節點的視覺資訊）
生成佈局layout，即將所有的渲染樹的節點進行平面合成
將佈局繪製paint在螢幕上

在這五步裡面，第一步和第三步都非常快耗時的是第四步和第五步
其中生成佈局flow和繪製paint這兩步，合稱為渲染render

重繪和迴流
網頁生成的時候，至少會渲染一次，使用者訪問的過程中，還會不斷的重新渲染
以下三種情況，會導致網頁重新渲染

修改dom
修改樣式表
使用者事件

重新渲染，就需要重新生成佈局和重新繪製，前者叫做重排reflow，後者叫做重繪repaint
需要注意的是，重繪不一定需要重排，比如改變某個網頁元素的顏色，就只會觸發重繪，不會觸發重排，因為佈局沒有改變，但是，重排一定會導致重繪，比如改變一個網頁元素的位置，就會同時觸發重排和重繪，因為佈局改變了

對於效能的影響
重繪和重排會不斷觸發，這是不可避免的，但是，他們是非常耗費資源的，是導致網頁效能低下根本原因
要提高網頁效能，就是要降低重排和重繪的頻率和成本，儘量少觸發重新渲染

一般來說，樣式的寫操作之後，如果有下面這些屬性的讀操作，都會引發瀏覽器立即重新渲染
- offsetTop/offsetLeft/offsetWidth/offsetHeight
- scrollTop/scrollLeft/scrollWidth/scrollHeight
- clientTop/clientLeft/clientWidth/clientHeight
- getComputeStyle()
所以，從效能角度考慮，儘量不要把讀操作和寫操作，放在一個語句裡，一般的規則是
- 樣式表越簡單，重繪和重排就越快
- 重排和重繪的dom層級越高，成本就越高
- table元素的重繪和重排成本，要高於div元素

提高效能的九個技巧

dom的多個讀操作（或者多個寫操作），應該放在一起，不要兩個讀操作之間，加入一個寫操作
如果某個樣式是通過重排得到的，那麼最好快取結果，避免下一次用到的時候，瀏覽器又要重排
不要一條條的改變樣式，而是要通過改變class，或者csstext屬性，一次性的改變樣式
儘量使用離線dom，而不是真正的網頁dom，來改變元素樣式，比如，使用cloneNode()方法，在克隆的節點上進行操作，然後再用克隆的節點替換原始節點
先將原素設為display：none(需要一次重排和重繪)，然後對這個節點進行100次操作，最後再恢復顯示(需要一次重排和重繪)，這樣一來，你就用兩次重新渲染，取代了可能高達100次的重新渲染
position屬性為absolute或fixed的元素，重排的開銷會比較小，因為用考慮他對其他元素的影響
只有必要的時候，才會將元素的display屬性設為課件，因為不可見的元素不影響重排和重繪，另外visibility：hidden的元素只會對重繪有影響，不會影響重排
使用虛擬dom的指令碼庫，如react
使用window.requestAnimationFrame()，window.requestIdleCallback()這兩個方法調節重新渲染

雅虎軍規可以參考

javascript相關程式計算題

1、判斷一個字串中出現次數最多的字元，統計這個次數

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;
    }
}        
console.log('出現次數最多的是:'+iIndex+'出現'+iMax+'次');

結果如下：出現次數最多的是:a出現9次

JavaScript 陣列(Array)物件

1、Array相關的屬性和方法

這裡只是做了相關的列舉，具體的使用方法，請參考網址。

Array 物件屬性

constructor 返回對建立此物件的陣列函式的引用。

length 設定或返回陣列中元素的數目。

prototype 使您有能力向物件新增屬性和方法。

Array 物件方法

concat() 連線兩個或更多的陣列，並返回結果。

join() 把陣列的所有元素放入一個字串。元素通過指定的分隔符進行分隔。

pop() 刪除並返回陣列的最後一個元素。

shift() 刪除並返回陣列的第一個元素

push() 向陣列的末尾新增一個或更多元素，並返回新的長度。

unshift() 向陣列的開頭新增一個或更多元素，並返回新的長度。

reverse() 顛倒陣列中元素的順序。

slice() 從某個已有的陣列返回選定的元素

sort() 對陣列的元素進行排序

splice() 刪除元素，並向陣列新增新元素。

toSource() 返回該物件的原始碼。

toString() 把陣列轉換為字串，並返回結果。

toLocaleString() 把陣列轉換為本地陣列，並返回結果。

valueOf() 返回陣列物件的原始值

2、編寫一個方法去掉一個數組的重複元素

方法一：

var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
   if( !obj[arr[i]] ){
      obj[arr[i]] = 1;
      tmp.push(arr[i]);
   }
}
console.log(tmp);

結果如下： [0, 2, 3, 4]

方法二：

var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);

結果為：[2, 3, 4, 5, 6]

方法三：

var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
return self.indexOf(element) === index;
});
console.log(arr2);

結果為：[2, 3, 4, 5, 6]

回到頂部

jquery相關

1、 jQuery 庫中的 $() 是什麼？

　　$() 函式是 jQuery() 函式的別稱。$() 函式用於將任何物件包裹成 jQuery 物件，接著你就被允許呼叫定義在 jQuery 物件上的多個不同方法。你可以將一個選擇器字串傳入 $() 函式，它會返回一個包含所有匹配的 DOM 元素陣列的 jQuery 物件。

2、如何找到所有 HTML select 標籤的選中項？

$('[name=selectname] :selected')

3、$(this) 和 this 關鍵字在 jQuery 中有何不同？

$(this) 返回一個 jQuery 物件，你可以對它呼叫多個 jQuery 方法，比如用 text() 獲取文字，用val() 獲取值等等。

而 this 代表當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它呼叫 jQuery 方法，直到它被 $() 函式包裹，例如 $(this)。

4、jquery怎麼移除標籤onclick屬性？

獲得a標籤的onclick屬性: $("a").attr("onclick")

刪除onclick屬性：$("a").removeAttr("onclick");

設定onclick屬性：$("a").attr("onclick","test();");

5、jquery中addClass,removeClass,toggleClass的使用。

$(selector).addClass(class)：為每個匹配的元素新增指定的類名

$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類，刪除class中某個值；

$(selector).toggleClass(class)：如果存在（不存在）就刪除（新增）一個類

$(selector).removeAttr(class);刪除class這個屬性；

6、JQuery有幾種選擇器?

(1)、基本選擇器：#id，class,element,*;

(2)、層次選擇器：parent > child，prev + next ，prev ~ siblings

(3)、基本過濾器選擇器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt

(4)、內容過濾器選擇器： :contains ，:empty ，:has ，:parent

(5)、可見性過濾器選擇器：:hidden ，:visible

(6)、屬性過濾器選擇器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]

(7)、子元素過濾器選擇器：:nth-child ，:first-child ，:last-child ，:only-child

(8)、表單選擇器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；

(9)、表單過濾器選擇器：:enabled ，:disabled ，:checked ，:selected

7、jQuery中的Delegate()函式有什麼作用？

delegate()會在以下兩個情況下使用到：

1、如果你有一個父元素，需要給其下的子元素新增事件，這時你可以使用delegate()了，程式碼如下：

$("ul").delegate("li", "click", function(){ $(this).hide(); });

2、當元素在當前頁面中不可用時，可以使用delegate()

8、$(document).ready()方法和window.onload有什麼區別？

(1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯檔案)完全載入到瀏覽器後才執行的。

(2)、$(document).ready() 方法可以在DOM載入就緒時就對其進行操縱，並呼叫執行繫結的函式。

9、如何用jQuery禁用瀏覽器的前進後退按鈕？

實現程式碼如下：

<script type="text/javascript" language="javascript">
　　$(document).ready(function() {
　　　　window.history.forward(1);
  　　　　//OR window.history.forward(-1);
　　});
</script>

10、 jquery中$.get()提交和$.post()提交有區別嗎？

相同點：都是非同步請求的方式來獲取服務端的資料；

異同點：

1、請求方式不同：$.get() 方法使用GET方法來進行非同步請求的。$.post() 方法使用POST方法來進行非同步請求的。

2、引數傳遞方式不同：get請求會將引數跟在URL後進行傳遞，而POST請求則是作為HTTP訊息的實體內容傳送給Web伺服器的，這種傳遞是對使用者不可見的。

3、資料傳輸大小不同：get方式傳輸的資料大小不能超過2KB 而POST要大的多

4、安全問題： GET 方式請求的資料會被瀏覽器快取起來，因此有安全問題。

11、寫出一個簡單的$.ajax()的請求方式？

$.ajax({
    url:'http://www.baidu.com',
    type:'POST',
    data:data,
    cache:true,
    headers:{},
    beforeSend：function(){},
    success:function(){},
    error:function(){},
    complete:function(){}
});

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

(1)、bind 【jQuery 1.3之前】

定義和用法：主要用於給選擇到的元素上繫結特定事件型別的監聽函式；

語法：bind(type,[data],function(eventObject))；

特點：

　　(1)、適用於頁面元素靜態繫結。只能給呼叫它的時候已經存在的元素繫結事件，不能給未來新增的元素繫結事件。

　　(2)、當頁面載入完的時候，你才可以進行bind()，所以可能產生效率問題。

例項如下：$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jQuery 1.3之後】

定義和用法：主要用於給選擇到的元素上繫結特定事件型別的監聽函式；

語法：live(type, [data], fn);

特點：

　　(1)、live方法並沒有將監聽器繫結到自己(this)身上，而是繫結到了this.context上了。

　　(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新新增的元素不必再繫結一次監聽器。

　　(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；

例項如下：$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定義和用法：將監聽事件繫結在就近的父級元素上

語法：delegate(selector,type,[data],fn)

特點：

　　(1)、選擇就近的父級元素，因為事件可以更快的冒泡上去，能夠在第一時間進行處理。

　　(2)、更精確的小範圍使用事件代理，效能優於.live()。可以用在動態新增的元素上。

例項如下：

$("#info_table").delegate("td","click",function(){/*顯示更多資訊*/});

$("table").find("#info").delegate("td","click",function(){/*顯示更多資訊*/});

(4)、on 【1.7版本整合了之前的三種方式的新事件繫結機制】

定義和用法：將監聽事件繫結到指定元素上。

語法：on(type,[selector],[data],fn)

例項如下：$("#info_table").on("click","td",function(){/*顯示更多資訊*/});引數的位置寫法與delegate不一樣。

說明：on方法是當前JQuery推薦使用的事件繫結方法，附加只執行一次就刪除函式的方法是one()。

總結：.bind(), .live(), .delegate(),.on()分別對應的相反事件為：.unbind(),.die(), .undelegate(),.off()

HTML & CSS:

1、什麼是盒子模型？

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

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

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

3、CSS實現垂直水平居中

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

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

CSS：

.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均設定為0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin設定為auto*/
    margin:auto;
    border: 1px solid green;    
}

效果如下：

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

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

src是指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文件內，例如js指令碼，img圖片和frame等元素。

當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。

5、簡述同步和非同步的區別

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

6、px和em的區別

相同點：px和em都是長度單位；

異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字型大小。
瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

7、瀏覽器的核心分別是什麼?

IE: trident核心

Firefox：gecko核心

Safari：webkit核心

Opera：以前是presto核心，Opera現已改用Google Chrome的Blink核心

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

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

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

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

區別：

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

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

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

9、sessionStorage 、localStorage 和 cookie 之間的區別

共同點：用於瀏覽器端儲存的快取資料

不同點：

(1)、儲存內容是否傳送到伺服器端：當設定了Cookie後，資料會發送到伺服器端，造成一定的寬頻浪費；

web storage,會將資料儲存到本地，不會造成寬頻浪費；

(2)、資料儲存大小不同：Cookie資料不能超過4K,適用於會話標識；web storage資料儲存可以達到5M;

(3)、資料儲存的有效期限不同：cookie只在設定了Cookid過期時間之前一直有效，即使關閉視窗或者瀏覽器；

sessionStorage,僅在關閉瀏覽器之前有效；localStorage,資料儲存永久有效；

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；

10、Web Storage與Cookie相比存在的優勢：

(1)、儲存空間更大：IE8下每個獨立的儲存空間為10M，其他瀏覽器實現略有不同，但都比Cookie要大很多。

(2)、儲存內容不會發送到伺服器：當設定了Cookie後，Cookie的內容會隨著請求一併傳送的伺服器，這對於本地儲存的資料是一種頻寬浪費。而Web Storage中的資料則僅僅是存在本地，不會與伺服器發生任何互動。

(3)、更多豐富易用的介面：Web Storage提供了一套更為豐富的介面，如setItem,getItem,removeItem,clear等,使得資料操作更為簡便。cookie需要自己封裝。

(4)、獨立的儲存空間：每個域（包括子域）有獨立的儲存空間，各個儲存空間是完全獨立的，因此不會造成資料混亂。

11、Ajax的優缺點及工作原理？

定義和用法:

AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。Ajax 是一種用於建立快速動態網頁的技術。Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。

優點：

1.減輕伺服器的負擔,按需取資料,最大程度的減少冗餘請求

2.區域性重新整理頁面,減少使用者心理和實際的等待時間,帶來更好的使用者體驗

3.基於xml標準化,並被廣泛支援,不需安裝外掛等,進一步促進頁面和資料的分離

缺點：

1.AJAX大量的使用了javascript和ajax引擎,這些取決於瀏覽器的支援.在編寫的時候考慮對瀏覽器的相容性.

2.AJAX只是區域性重新整理,所以頁面的後退按鈕是沒有用的.

3.對流媒體還有移動裝置的支援不是太好等

AJAX的工作原理：

1.建立ajax物件（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

2.判斷資料傳輸方式(GET/POST)

3.開啟連結 open()

4.傳送 send()

5.當ajax物件完成第四步（onreadystatechange）資料接收完成，判斷http響應狀態（status）200-300之間或者304（快取）執行回撥函式

12、請指出document load和document ready的區別？

共同點：這兩種事件都代表的是頁面文件載入時觸發。

異同點：

ready 事件的觸發，表示文件結構已經載入完成（不包含圖片等非文字媒體檔案）。

onload 事件的觸發，表示頁面包含圖片等檔案在內的所有元素都載入完成。

正則表示式

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

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

2、使用正則表示式驗證郵箱格式

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

開發及效能優化

1、規避javascript多人開發函式重名問題

名稱空間
封閉空間
js模組化mvc（資料層、表現層、控制層）
seajs
變數轉換成物件的屬性
物件化

2、請說出三種減低頁面載入時間的方法

壓縮css、js檔案
合併js、css檔案，減少http請求
外部js、css檔案放在最底下
減少dom操作，儘可能用變數替代不必要的dom操作

3、你所瞭解到的Web攻擊技術

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

4、web前端開發，如何提高頁面效能優化？

內容方面：

1.減少 HTTP 請求 (Make Fewer HTTP Requests)

2.減少 DOM 元素數量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可快取 (Make Ajax Cacheable)

針對CSS：

1.把 CSS 放到內碼表上端 (Put Stylesheets at the Top)

2.從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

3.精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

4.避免 CSS 表示式 (Avoid CSS Expressions)

針對JavaScript ：

1. 指令碼放到 HTML 內碼表底部 (Put Scripts at the Bottom)

2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

4. 移除重複指令碼 (Remove Duplicate Scripts)

面向圖片(Image)：

1.優化圖片

2 不要在 HTML 中使用縮放圖片

3 使用恰當的圖片格式

4 使用 CSS Sprites 技巧對圖片優化

5、前端開發中，如何優化影象？影象格式的區別？

優化影象：

1、不用圖片，儘量用css3代替。比如說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用CSS達成。

2、使用向量圖SVG替代點陣圖。對於絕大多數圖案、圖示等，向量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支援SVG了，所以可放心使用！

3.、使用恰當的圖片格式。我們常見的圖片格式有JPEG、GIF、PNG。

基本上，內容圖片多為照片之類的，適用於JPEG。

而修飾圖片通常更適合用無失真壓縮的PNG。

GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視訊格式，或用SVG動畫取代。

4、按照HTTP協議設定合理的快取。

5、使用字型圖示webfont、CSS Sprites等。

6、用CSS或JavaScript實現預載入。

7、WebP圖片格式能給前端帶來的優化。WebP支援無損、有失真壓縮，動態、靜態圖片，壓縮比率優於GIF、JPEG、JPEG2000、PG等格式，非常適合用於網路等圖片傳輸。

影象格式的區別：

向量圖：圖示字型，如 font-awesome；svg

點陣圖：gif,jpg(jpeg),png

區別：

　　1、gif:是是一種無損，8點陣圖片格式。具有支援動畫，索引透明，壓縮等特性。適用於做色彩簡單(色調少)的圖片，如logo,各種小圖示icons等。

　　2、JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用於允許輕微失真的色彩豐富的照片，不適合做色彩簡單(色調少)的圖片，如logo,各種小圖示icons等。

　　3、png:PNG可以細分為三種格式:PNG8，PNG24，PNG32。後面的數字代表這種PNG格式最多可以索引和儲存的顏色值。

關於透明：PNG8支援索引透明和alpha透明;PNG24不支援透明;而PNG32在24位的PNG基礎上增加了8位（256階）的alpha通道透明;

優缺點：

　　1、能在保證最不失真的情況下儘可能壓縮影象檔案的大小。

　　2、對於需要高保真的較複雜的影象，PNG雖然能無失真壓縮，但圖片檔案較大，不適合應用在Web頁面上。

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

渲染的流程如下：

1.解析HTML檔案，建立DOM樹。

自上而下，遇到任何樣式（link、style）與指令碼（script）都會阻塞（外部樣式不阻塞後續外部指令碼的載入）。

2.解析CSS。優先順序：瀏覽器預設設定<使用者設定<外部樣式<內聯樣式<HTML中的style樣式；

3.將CSS與DOM合併，構建渲染樹（Render Tree）

4.佈局和繪製，重繪（repaint）和重排（reflow）

7、CSS中opacity=0,visibility=hidden,display=none的時候，三者有什麼區別呢

1 opacity=0，該元素隱藏起來了，但不會改變頁面佈局，並且，如果該元素已經繫結一些事件，如click事件，那麼點選該區域，也能觸發點選事件的

2 visibility=hidden，該元素隱藏起來了，但不會改變頁面佈局，但是不會觸發該元素已經繫結的事件

3 display=none，把元素隱藏起來，並且會改變頁面佈局，可以理解成在頁面中把該元素刪除掉一樣

最新前端面試題整理和答案（全）一直更新

javascript:

JavaScript中如何檢測一個變數是一個String型別？請寫出函式實現

比較typeof與instanceof？

請用js去除字串空格？

你如何獲取瀏覽器URL中查詢字串中的引數？

js 字串操作函式

怎樣新增、移除、移動、複製、建立和查詢節點？

寫出3個使用this的典型應用

如何理解閉包？

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

談談垃圾回收機制方式及記憶體管理

開發過程中遇到的記憶體洩露情況，如何解決的？

javascript面向物件中繼承實現？

javascript相關程式計算題

1、判斷一個字串中出現次數最多的字元，統計這個次數

JavaScript 陣列(Array)物件

1、Array相關的屬性和方法

2、編寫一個方法 去掉一個數組的重複元素

jquery相關

1、 jQuery 庫中的 $() 是什麼？

2、如何找到所有 HTML select 標籤的選中項？

3、$(this) 和 this 關鍵字在 jQuery 中有何不同？

4、jquery怎麼移除標籤onclick屬性？

5、jquery中addClass,removeClass,toggleClass的使用。

6、JQuery有幾種選擇器?

7、jQuery中的Delegate()函式有什麼作用？

8、$(document).ready()方法和window.onload有什麼區別？

9、如何用jQuery禁用瀏覽器的前進後退按鈕？

10、 jquery中$.get()提交和$.post()提交有區別嗎？

11、寫出一個簡單的$.ajax()的請求方式？

HTML & CSS:

1、什麼是盒子模型？

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

3、CSS實現垂直水平居中

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

5、簡述同步和非同步的區別

6、px和em的區別

7、瀏覽器的核心分別是什麼?

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

9、sessionStorage 、localStorage 和 cookie 之間的區別

10、Web Storage與Cookie相比存在的優勢：

11、Ajax的優缺點及工作原理？

12、請指出document load和document ready的區別？

正則表示式

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

2、使用正則表示式驗證郵箱格式

開發及效能優化

1、規避javascript多人開發函式重名問題

2、請說出三種減低頁面載入時間的方法

3、你所瞭解到的Web攻擊技術

4、web前端開發，如何提高頁面效能優化？

5、前端開發中，如何優化影象？影象格式的區別？

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

7、CSS中opacity=0,visibility=hidden,display=none的時候，三者有什麼區別呢

相關推薦

2、編寫一個方法去掉一個數組的重複元素

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