Web前端開(kāi)發(fā)常見(jiàn)的一些面試題及解決方法

這篇文章給大家分享的是有關(guān)Web前端開(kāi)發(fā)常見(jiàn)的一些面試題及解決方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

1、JavaScript 中如何檢測(cè)一個(gè)變量是一個(gè) String 類(lèi)型？請(qǐng)寫(xiě)出函數(shù)實(shí)現(xiàn)
typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String

2、請(qǐng)用 js 去除字符串空格？

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

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

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

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

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

str 為要去除空格的字符串，實(shí)例如下：

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

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

str.trim () 局限性：無(wú)法去除中間的空格，實(shí)例如下：

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

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

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

$.trim (str) 局限性：無(wú)法去除中間的空格，實(shí)例如下：

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

3、你如何獲取瀏覽器 URL 中查詢字符串中的參數(shù)？

測(cè)試地址為：http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23

實(shí)例如下：

function showWindowHref(){
var sHref = window.location.href;
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(); // objconsole.log(href['name']); // xiaoming

4、js 字符串操作函數(shù)
我這里只是列舉了常用的字符串函數(shù)，具體使用方法，請(qǐng)參考網(wǎng)址。

concat () – 將兩個(gè)或多個(gè)字符的文本組合起來(lái)，返回一個(gè)新的字符串。

indexOf () – 返回字符串中一個(gè)子串第一處出現(xiàn)的索引。如果沒(méi)有匹配項(xiàng)，返回 -1 。

charAt () – 返回指定位置的字符。

lastIndexOf () – 返回字符串中一個(gè)子串最后一處出現(xiàn)的索引，如果沒(méi)有匹配項(xiàng)，返回 -1 。

match () – 檢查一個(gè)字符串是否匹配一個(gè)正則表達(dá)式。

substr () 函數(shù) -- 返回從 string 的 startPos 位置，長(zhǎng)度為 length 的字符串

substring () – 返回字符串的一個(gè)子串。傳入?yún)?shù)是起始位置和結(jié)束位置。

slice () – 提取字符串的一部分，并返回一個(gè)新字符串。

replace () – 用來(lái)查找匹配一個(gè)正則表達(dá)式的字符串，然后使用新字符串代替匹配的字符串。

search () – 執(zhí)行一個(gè)正則表達(dá)式匹配查找。如果查找成功，返回字符串中匹配的索引值。否則返回 -1 。

split () – 通過(guò)將字符串劃分成子串，將一個(gè)字符串做成一個(gè)字符串?dāng)?shù)組。

length – 返回字符串的長(zhǎng)度，所謂字符串的長(zhǎng)度是指其包含的字符的個(gè)數(shù)。

toLowerCase () – 將整個(gè)字符串轉(zhuǎn)成小寫(xiě)字母。

toUpperCase () – 將整個(gè)字符串轉(zhuǎn)成大寫(xiě)字母。

5、怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)？
1）創(chuàng)建新節(jié)點(diǎn)

　　createDocumentFragment () // 創(chuàng)建一個(gè) DOM 片段

　　createElement () // 創(chuàng)建一個(gè)具體的元素

　　createTextNode () // 創(chuàng)建一個(gè)文本節(jié)點(diǎn)

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

　　appendChild () // 添加

　　removeChild () // 移除

　　replaceChild () // 替換

　　insertBefore () // 插入

3）查找

　　getElementsByTagName () // 通過(guò)標(biāo)簽名稱(chēng)

　　getElementsByName () // 通過(guò)元素的 Name 屬性的值

　　getElementById () // 通過(guò)元素 Id，唯一性

6、寫(xiě)出 3 個(gè)使用 this 的典型應(yīng)用
（1）、在 html 元素事件屬性中使用，如：

<input type=”button” onclick=”showInfo (this);” value=” 點(diǎn)擊一下”/>

（2）、構(gòu)造函數(shù)

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

（3）、input 點(diǎn)擊，獲取值

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

(4)、apply ()/call () 求數(shù)組最值

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

7、比較 typeof 與 instanceof？
相同點(diǎn)：JavaScript 中 typeof 和 instanceof 常用來(lái)判斷一個(gè)變量是否為空，或者是什么類(lèi)型的。

typeof 的定義和用法：返回值是一個(gè)字符串，用來(lái)說(shuō)明變量的數(shù)據(jù)類(lèi)型。

細(xì)節(jié)：

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

(2)、typeof 來(lái)獲取一個(gè)變量是否存在，如 if (typeof a!="undefined"){alert ("ok")}，而不要去使用 if (a) 因?yàn)槿绻?a 不存在（未聲明）則會(huì)出錯(cuò)。

(3)、對(duì)于 Array,Null 等特殊對(duì)象使用 typeof 一律返回 object，這正是 typeof 的局限性。

Instanceof 定義和用法：instanceof 用于判斷一個(gè)變量是否屬于某個(gè)對(duì)象的實(shí)例。

實(shí)例演示：

a instanceof b?alert ("true"):alert ("false"); //a 是 b 的實(shí)例？真：假

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

如上，會(huì)返回 true，同時(shí) alert (a instanceof Object) 也會(huì)返回 true; 這是因?yàn)?Array 是 object 的子類(lèi)。

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

細(xì)節(jié)：

(1)、如下，得到的結(jié)果為‘N’, 這里的 instanceof 測(cè)試的 object 是指 js 語(yǔ)法中的 object，不是指 dom 模型對(duì)象。

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

如何理解閉包？
1、定義和用法：當(dāng)一個(gè)函數(shù)的返回值是另外一個(gè)函數(shù)，而返回的那個(gè)函數(shù)如果調(diào)用了其父函數(shù)內(nèi)部的其它變量，如果返回的這個(gè)函數(shù)在外部被執(zhí)行，就產(chǎn)生了閉包。

2、表現(xiàn)形式：使函數(shù)外部能夠調(diào)用函數(shù)內(nèi)部定義的變量。

3、實(shí)例如下：

(1)、根據(jù)作用域鏈的規(guī)則，底層作用域沒(méi)有聲明的變量，會(huì)向上一級(jí)找，找到就返回，沒(méi)找到就一直找，直到 window 的變量，沒(méi)有就返回 undefined。這里明顯 count 是函數(shù)內(nèi)部的 flag2 的那個(gè) count 。

var count=10; //全局作用域 標(biāo)記為flag1
function add(){
var count=0; //函數(shù)全局作用域 標(biāo)記為flag2
return function(){
count+=1; //函數(shù)的內(nèi)部作用域
alert(count);
}
}
var s = add()
s();//輸出1
s();//輸出2

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

變量的作用域分類(lèi)：全局變量和局部變量。

特點(diǎn)：

1、函數(shù)內(nèi)部可以讀取函數(shù)外部的全局變量；在函數(shù)外部無(wú)法讀取函數(shù)內(nèi)的局部變量。

2、函數(shù)內(nèi)部聲明變量的時(shí)候，一定要使用 var 命令。如果不用的話，你實(shí)際上聲明了一個(gè)全局變量！

使用閉包的注意點(diǎn)
1）濫用閉包，會(huì)造成內(nèi)存泄漏：由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁(yè)的性能問(wèn)題，在 IE 中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。

2）會(huì)改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當(dāng)作對(duì)象（object）使用，把閉包當(dāng)作它的公用方法（Public Method），把內(nèi)部變量當(dāng)作它的私有屬性（private value），這時(shí)一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。

什么是跨域？跨域請(qǐng)求資源的方法有哪些？
1、什么是跨域？

由于瀏覽器同源策略，凡是發(fā)送請(qǐng)求 url 的協(xié)議、域名、端口三者之間任意一與當(dāng)前頁(yè)面地址不同即為跨域。存在跨域的情況：

網(wǎng)絡(luò)協(xié)議不同，如 http 協(xié)議訪問(wèn) https 協(xié)議。

端口不同，如 80 端口訪問(wèn) 8080 端口。

域名不同，如 http://qianduanblog.com 訪問(wèn) http://baidu.com。

子域名不同，如 http://abc.qianduanblog.com 訪問(wèn) http://def.qianduanblog.com。

域名和域名對(duì)應(yīng) ip, 如 http://www.a.com 訪問(wèn) 20.205.28.90.

2、跨域請(qǐng)求資源的方法：

(1)、porxy 代理

定義和用法：proxy 代理用于將請(qǐng)求發(fā)送給后臺(tái)服務(wù)器，通過(guò)服務(wù)器來(lái)發(fā)送請(qǐng)求，然后將請(qǐng)求的結(jié)果傳遞給前端。

實(shí)現(xiàn)方法：通過(guò) nginx 代理；

注意點(diǎn)：1、如果你代理的是 https 協(xié)議的請(qǐng)求，那么你的 proxy 首先需要信任該證書(shū)（尤其是自定義證書(shū)）或者忽略證書(shū)檢查，否則你的請(qǐng)求無(wú)法成功。

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

定義和用法：是現(xiàn)代瀏覽器支持跨域資源請(qǐng)求的一種最常用的方式。

使用方法：一般需要后端人員在處理請(qǐng)求數(shù)據(jù)的時(shí)候，添加允許跨域的相關(guān)操作。如下：

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

定義和用法：通過(guò)動(dòng)態(tài)插入一個(gè) script 標(biāo)簽。瀏覽器對(duì) script 的資源引用沒(méi)有同源限制，同時(shí)資源加載到頁(yè)面后會(huì)立即執(zhí)行（沒(méi)有阻塞的情況下）。

特點(diǎn)：通過(guò)情況下，通過(guò)動(dòng)態(tài)創(chuàng)建 script 來(lái)讀取他域的動(dòng)態(tài)資源，獲取的數(shù)據(jù)一般為 json 格式。

實(shí)例如下：

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

缺點(diǎn)：

　　1、這種方式無(wú)法發(fā)送 post 請(qǐng)求（這里）

　　2、另外要確定 jsonp 的請(qǐng)求是否失敗并不容易，大多數(shù)框架的實(shí)現(xiàn)都是結(jié)合超時(shí)時(shí)間來(lái)判定。
談?wù)劺厥諜C(jī)制方式及內(nèi)存管理
回收機(jī)制方式

1、定義和用法：垃圾回收機(jī)制 (GC:Garbage Collection), 執(zhí)行環(huán)境負(fù)責(zé)管理代碼執(zhí)行過(guò)程中使用的內(nèi)存。

2、原理：垃圾收集器會(huì)定期（周期性）找出那些不在繼續(xù)使用的變量，然后釋放其內(nèi)存。但是這個(gè)過(guò)程不是實(shí)時(shí)的，因?yàn)槠溟_(kāi)銷(xiāo)比較大，所以垃圾回收器會(huì)按照固定的時(shí)間間隔周期性的執(zhí)行。

3、實(shí)例如下：

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 為局部變量，而當(dāng)調(diào)用結(jié)束后，出了 fn1 的環(huán)境，那么該塊內(nèi)存會(huì)被 js 引擎中的垃圾回收器自動(dòng)釋放；在 fn2 被調(diào)用的過(guò)程中，返回的對(duì)象被全局變量 b 所指向，所以該塊內(nèi)存并不會(huì)被釋放。

4、垃圾回收策略：標(biāo)記清除 (較為常用) 和引用計(jì)數(shù)。

標(biāo)記清除：

　　定義和用法：當(dāng)變量進(jìn)入環(huán)境時(shí)，將變量標(biāo)記 "進(jìn)入環(huán)境"，當(dāng)變量離開(kāi)環(huán)境時(shí)，標(biāo)記為："離開(kāi)環(huán)境"。某一個(gè)時(shí)刻，垃圾回收器會(huì)過(guò)濾掉環(huán)境中的變量，以及被環(huán)境變量引用的變量，剩下的就是被視為準(zhǔn)備回收的變量。

　　到目前為止，IE、Firefox、Opera、Chrome、Safari 的 js 實(shí)現(xiàn)使用的都是標(biāo)記清除的垃圾回收策略或類(lèi)似的策略，只不過(guò)垃圾收集的時(shí)間間隔互不相同。

引用計(jì)數(shù)：

　　定義和用法：引用計(jì)數(shù)是跟蹤記錄每個(gè)值被引用的次數(shù)。

　　基本原理：就是變量的引用次數(shù)，被引用一次則加 1，當(dāng)這個(gè)引用計(jì)數(shù)為 0 時(shí)，被視為準(zhǔn)備回收的對(duì)象。

內(nèi)存管理

1、什么時(shí)候觸發(fā)垃圾回收？

垃圾回收器周期性運(yùn)行，如果分配的內(nèi)存非常多，那么回收工作也會(huì)很艱巨，確定垃圾回收時(shí)間間隔就變成了一個(gè)值得思考的問(wèn)題。

IE6 的垃圾回收是根據(jù)內(nèi)存分配量運(yùn)行的，當(dāng)環(huán)境中的變量，對(duì)象，字符串達(dá)到一定數(shù)量時(shí)觸發(fā)垃圾回收。垃圾回收器一直處于工作狀態(tài)，嚴(yán)重影響瀏覽器性能。

IE7 中，垃圾回收器會(huì)根據(jù)內(nèi)存分配量與程序占用內(nèi)存的比例進(jìn)行動(dòng)態(tài)調(diào)整，開(kāi)始回收工作。

2、合理的 GC 方案：(1)、遍歷所有可訪問(wèn)的對(duì)象；(2)、回收已不可訪問(wèn)的對(duì)象。

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

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

開(kāi)發(fā)過(guò)程中遇到的內(nèi)存泄露情況，如何解決的？
1、定義和用法：

內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用，又不能回收，直到瀏覽器進(jìn)程結(jié)束。C# 和 Java 等語(yǔ)言采用了自動(dòng)垃圾回收方法管理內(nèi)存，幾乎不會(huì)發(fā)生內(nèi)存泄露。我們知道，瀏覽器中也是采用自動(dòng)垃圾回收方法管理內(nèi)存，但由于瀏覽器垃圾回收方法有 bug，會(huì)產(chǎn)生內(nèi)存泄露。

2、內(nèi)存泄露的幾種情況:

(1)、當(dāng)頁(yè)面中元素被移除或替換時(shí)，若元素綁定的事件仍沒(méi)被移除，在 IE 中不會(huì)作出恰當(dāng)處理，此時(shí)要先手工移除事件，不然會(huì)存在內(nèi)存泄露。

實(shí)例如下:

<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)、由于是函數(shù)內(nèi)定義函數(shù)，并且內(nèi)部函數(shù) -- 事件回調(diào)的引用外暴了，形成了閉包。閉包可以維持函數(shù)內(nèi)局部變量，使其得不到釋放。

實(shí)例如下：

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 面向?qū)ο笾欣^承實(shí)現(xiàn)？
面向?qū)ο蟮幕咎卣饔校悍忾]、繼承、多態(tài)。

在 JavaScript 中實(shí)現(xiàn)繼承的方法：

原型鏈（prototype chaining）call()/apply()混合方式 (prototype 和 call ()/apply () 結(jié)合)對(duì)象冒充

繼承的方法如下：

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】

01function teacher(name,age){
02this.name = name;
03this.age = age;
04}
05teacher.prototype.sayName = function(){
06console.log('name:'+this.name);
07}
08teacher.prototype.sayAge = function(){
09console.log('age:'+this.age);
10}
11
12function student(){
13var args = arguments;
14teacher.call(this,args[0],args[1]);
15}
16student.prototype = new teacher();
17
18var student1 = new student('xiaolin',23);
19student1.sayName();
20student1.sayAge();
21// name:xiaolin
22// age:23

4、對(duì)象冒充

01function Person(name,age){
02this.name = name;
03this.age = age;
04this.show = function(){
05console.log(this.name+", "+this.age);
06}
07}
08
09function Student(name,age){
10this.student = Person; // 將 Person 類(lèi)的構(gòu)造函數(shù)賦值給 this.student
11this.student (name,age); //js 中實(shí)際上是通過(guò)對(duì)象冒充來(lái)實(shí)現(xiàn)繼承的
12delete this.student; // 移除對(duì) Person 的引用
13}
14
15var s = new Student ("小明",17);
16s.show();
17
18var p = new Person ("小花",18);
19p.show();
20// 小明，17
21// 小花，18

判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計(jì)這個(gè)次數(shù)
01var str = 'asdfssaaasasasasaa';
02var json = {};
03for (var i = 0; i < str.length; i++) {
04 if(!json[str.charAt(i)]){
05 json[str.charAt(i)] = 1;
06 }else{
07 json[str.charAt(i)]++;
08 }
09};
10var iMax = 0;
11var iIndex = '';
12for(var i in json){
13 if(json[i]>iMax){
14 iMax = json[i];
15 iIndex = i;
16 }
17}
18console.log (' 出現(xiàn)次數(shù)最多的是:'+iIndex+' 出現(xiàn) '+iMax+' 次 ');
19 結(jié)果如下：出現(xiàn)次數(shù)最多的是:a 出現(xiàn) 9 次

Array 相關(guān)的屬性和方法
這里只是做了相關(guān)的列舉，具體的使用方法，請(qǐng)參考網(wǎng)址。

Array 對(duì)象屬性

constructor 返回對(duì)創(chuàng)建此對(duì)象的數(shù)組函數(shù)的引用。

length 設(shè)置或返回?cái)?shù)組中元素的數(shù)目。

prototype 使您有能力向?qū)ο筇砑訉傩院头椒ā?/p>

Array 對(duì)象方法
concat () 連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。

join () 把數(shù)組的所有元素放入一個(gè)字符串。元素通過(guò)指定的分隔符進(jìn)行分隔。

pop () 刪除并返回?cái)?shù)組的最后一個(gè)元素。

shift () 刪除并返回?cái)?shù)組的第一個(gè)元素

push () 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度。

unshift () 向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。

reverse () 顛倒數(shù)組中元素的順序。

slice () 從某個(gè)已有的數(shù)組返回選定的元素

sort () 對(duì)數(shù)組的元素進(jìn)行排序

splice () 刪除元素，并向數(shù)組添加新元素。

toSource () 返回該對(duì)象的源代碼。

toString () 把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

toLocaleString () 把數(shù)組轉(zhuǎn)換為本地?cái)?shù)組，并返回結(jié)果。

valueOf () 返回?cái)?shù)組對(duì)象的原始值

2、編寫(xiě)一個(gè)方法 去掉一個(gè)數(shù)組的重復(fù)元素
方法一：

01var arr = [0,2,3,4,4,0,2];
02var obj = {};
03var tmp = [];
04for(var i = 0 ;i< arr.length;i++){
05 if( !obj[arr[i]] ){
06 obj[arr[i]] = 1;
07 tmp.push(arr[i]);
08 }
09}
10console.log(tmp);
11 結(jié)果如下： [0, 2, 3, 4]

方法二：

1var arr = [2,3,4,4,5,2,3,6],
2 arr2 = [];
3for(var i = 0;i< arr.length;i++){
4 if(arr2.indexOf(arr[i]) < 0){
5 arr2.push(arr[i]);
6 }
7}
8console.log(arr2);
9 結(jié)果為：[2, 3, 4, 5, 6]

方法三：

1var arr = [2,3,4,4,5,2,3,6];
2var arr2 = arr.filter(function(element,index,self){
3return self.indexOf(element) === index;
4});
5console.log(arr2);
6
7 結(jié)果為：[2, 3, 4, 5, 6]

jQuery 庫(kù)中的 $() 是什么？
　　$() 函數(shù)是 jQuery () 函數(shù)的別稱(chēng)。$() 函數(shù)用于將任何對(duì)象包裹成 jQuery 對(duì)象，接著你就被允許調(diào)用定義在 jQuery 對(duì)象上的多個(gè)不同方法。你可以將一個(gè)選擇器字符串傳入 $() 函數(shù)，它會(huì)返回一個(gè)包含所有匹配的 DOM 元素?cái)?shù)組的 jQuery 對(duì)象。

如何找到所有 HTML select 標(biāo)簽的選中項(xiàng)？
$('[name=selectname] :selected')

$(this) 和 this 關(guān)鍵字在 jQuery 中有何不同？
$(this) 返回一個(gè) jQuery 對(duì)象，你可以對(duì)它調(diào)用多個(gè) jQuery 方法，比如用 text () 獲取文本，用 val () 獲取值等等。

而 this 代表當(dāng)前元素，它是 JavaScript 關(guān)鍵詞中的一個(gè)，表示上下文中的當(dāng)前 DOM 元素。你不能對(duì)它調(diào)用 jQuery 方法，直到它被 $() 函數(shù)包裹，例如 $(this)。

jquery 怎么移除標(biāo)簽 onclick 屬性？
獲得 a 標(biāo)簽的 onclick 屬性: $("a").attr ("onclick")

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

設(shè)置 onclick 屬性：$("a").attr ("onclick","test ();");

jquery 中 addClass,removeClass,toggleClass 的使用。
$(selector).addClass (class)：為每個(gè)匹配的元素添加指定的類(lèi)名

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

$(selector).toggleClass (class)：如果存在（不存在）就刪除（添加）一個(gè)類(lèi)

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

JQuery 有幾種選擇器？
(1)、基本選擇器：#id，class,element,*;

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

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

(4)、內(nèi)容過(guò)濾器選擇器： :contains ，:empty ，:has ，:parent

(5)、可見(jiàn)性過(guò)濾器選擇器：:hidden ，:visible

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

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

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

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

jQuery 中的 Delegate () 函數(shù)有什么作用？
delegate () 會(huì)在以下兩個(gè)情況下使用到：

1、如果你有一個(gè)父元素，需要給其下的子元素添加事件，這時(shí)你可以使用 delegate () 了，代碼如下：

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

2、當(dāng)元素在當(dāng)前頁(yè)面中不可用時(shí)，可以使用 delegate ()

$(document).ready () 方法和 window.onload 有什么區(qū)別？
(1)、window.onload 方法是在網(wǎng)頁(yè)中所有的元素 (包括元素的所有關(guān)聯(lián)文件) 完全加載到瀏覽器后才執(zhí)行的。

(2)、$(document).ready () 方法可以在 DOM 載入就緒時(shí)就對(duì)其進(jìn)行操縱，并調(diào)用執(zhí)行綁定的函數(shù)。

如何用 jQuery 禁用瀏覽器的前進(jìn)后退按鈕？
實(shí)現(xiàn)代碼如下：

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

jquery 中 $.get () 提交和 $.post () 提交有區(qū)別嗎？
相同點(diǎn)：都是異步請(qǐng)求的方式來(lái)獲取服務(wù)端的數(shù)據(jù)；

異同點(diǎn)：

1、請(qǐng)求方式不同：$.get () 方法使用 GET 方法來(lái)進(jìn)行異步請(qǐng)求的。$.post () 方法使用 POST 方法來(lái)進(jìn)行異步請(qǐng)求的。

2、參數(shù)傳遞方式不同：get 請(qǐng)求會(huì)將參數(shù)跟在 URL 后進(jìn)行傳遞，而 POST 請(qǐng)求則是作為 HTTP 消息的實(shí)體內(nèi)容發(fā)送給 Web 服務(wù)器的，這種傳遞是對(duì)用戶不可見(jiàn)的。

3、數(shù)據(jù)傳輸大小不同：get 方式傳輸?shù)臄?shù)據(jù)大小不能超過(guò) 2KB 而 POST 要大的多

4、安全問(wèn)題： GET 方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來(lái)，因此有安全問(wèn)題。

寫(xiě)出一個(gè)簡(jiǎn)單的 $.ajax () 的請(qǐng)求方式？
01$.ajax({
02 url:'http://www.baidu.com',
03 type:'POST',
04 data:data,
05 cache:true,
06 headers:{},
07 beforeSend：function(){},
08 success:function(){},
09 error:function(){},
10 complete:function(){}
11});

jQuery 的事件委托方法 bind 、live、delegate、on 之間有什么區(qū)別？
(1)、bind 【jQuery 1.3 之前】

定義和用法：主要用于給選擇到的元素上綁定特定事件類(lèi)型的監(jiān)聽(tīng)函數(shù)；

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

特點(diǎn)：

　　(1)、適用于頁(yè)面元素靜態(tài)綁定。只能給調(diào)用它的時(shí)候已經(jīng)存在的元素綁定事件，不能給未來(lái)新增的元素綁定事件。

　　(2)、當(dāng)頁(yè)面加載完的時(shí)候，你才可以進(jìn)行 bind ()，所以可能產(chǎn)生效率問(wèn)題。

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

(2)、live 【jQuery 1.3 之后】

定義和用法：主要用于給選擇到的元素上綁定特定事件類(lèi)型的監(jiān)聽(tīng)函數(shù)；

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

特點(diǎn)：

　　(1)、live 方法并沒(méi)有將監(jiān)聽(tīng)器綁定到自己 (this) 身上，而是綁定到了 this.context 上了。

　　(2)、live 正是利用了事件委托機(jī)制來(lái)完成事件的監(jiān)聽(tīng)處理，把節(jié)點(diǎn)的處理委托給了 document，新添加的元素不必再綁定一次監(jiān)聽(tīng)器。

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

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

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

定義和用法：將監(jiān)聽(tīng)事件綁定在就近的父級(jí)元素上

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

特點(diǎn)：

　　(1)、選擇就近的父級(jí)元素，因?yàn)槭录梢愿斓拿芭萆先?，能夠在第一時(shí)間進(jìn)行處理。

　　(2)、更精確的小范圍使用事件代理，性能優(yōu)于.live ()?？梢杂迷趧?dòng)態(tài)添加的元素上。

實(shí)例如下：

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

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

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

定義和用法：將監(jiān)聽(tīng)事件綁定到指定元素上。

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

實(shí)例如下：$("#info_table").on ("click","td",function (){/ 顯示更多信息 /}); 參數(shù)的位置寫(xiě)法與 delegate 不一樣。

說(shuō)明：on 方法是當(dāng)前 JQuery 推薦使用的事件綁定方法，附加只運(yùn)行一次就刪除函數(shù)的方法是 one ()。

總結(jié)：.bind (), .live (), .delegate (),.on () 分別對(duì)應(yīng)的相反事件為：.unbind (),.die (), .undelegate (),.off ()

什么是盒子模型？
在網(wǎng)頁(yè)中，一個(gè)元素占有空間的大小由幾個(gè)部分構(gòu)成，其中包括元素的內(nèi)容（content），元素的內(nèi)邊距（padding），元素的邊框（border），元素的外邊距（margin）四個(gè)部分。這四個(gè)部分占有的空間中，有的部分可以顯示相應(yīng)的內(nèi)容，而有的部分只用來(lái)分隔相鄰的區(qū)域或區(qū)域。4 個(gè)部分一起構(gòu)成了 css 中元素的盒模型。

行內(nèi)元素有哪些？塊級(jí)元素有哪些？ 空 (void) 元素有那些？
行內(nèi)元素：a、b、span、img、input、strong、select、label、em、button、textarea

塊級(jí)元素：div、ul、li、dl、dt、dd、p、h2-h7、blockquote

空元素：即系沒(méi)有內(nèi)容的 HTML 元素，例如：br、meta、hr、link、input、img

CSS 實(shí)現(xiàn)垂直水平居中
一道經(jīng)典的問(wèn)題，實(shí)現(xiàn)方法有很多種，以下是其中一種實(shí)現(xiàn)：

HTML 結(jié)構(gòu)：

01<div class="wrapper">
02 <div class="content"></div>
03</div>
04CSS：
05
06.wrapper {
07 position: relative;
08 width: 500px;
09 height: 500px;
10 border: 1px solid red;
11 }
12.content{
13 position: absolute;
14 width: 200px;
15 height: 200px;
16 /top、bottom、left 和 right 均設(shè)置為 0/
17 top: 0;
18 bottom: 0;
19 left: 0;
20 right: 0;
21 /margin 設(shè)置為 auto/
22 margin:auto;
23 border: 1px solid green;
24}

簡(jiǎn)述一下 src 與 href 的區(qū)別
href 是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，用于超鏈接。

src 是指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求 src 資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如 js 腳本，img 圖片和 frame 等元素。

當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類(lèi)似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將 js 腳本放在底部而不是頭部。

簡(jiǎn)述同步和異步的區(qū)別
同步是阻塞模式，異步是非阻塞模式。

同步就是指一個(gè)進(jìn)程在執(zhí)行某個(gè)請(qǐng)求的時(shí)候，若該請(qǐng)求需要一段時(shí)間才能返回信息，那么這個(gè)進(jìn)程將會(huì)一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去；

異步是指進(jìn)程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作，不管其他進(jìn)程的狀態(tài)。當(dāng)有消息返回時(shí)系統(tǒng)會(huì)通知進(jìn)程進(jìn)行處理，這樣可以提高執(zhí)行的效率。

px 和 em 的區(qū)別
相同點(diǎn)：px 和 em 都是長(zhǎng)度單位；

異同點(diǎn)：px 的值是固定的，指定是多少就是多少，計(jì)算比較容易。em 得值不是固定的，并且 em 會(huì)繼承父級(jí)元素的字體大小。

瀏覽器的默認(rèn)字體高都是 16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。

瀏覽器的內(nèi)核分別是什么？
IE: trident 內(nèi)核

Firefox：gecko 內(nèi)核

Safari：webkit 內(nèi)核

Opera：以前是 presto 內(nèi)核，Opera 現(xiàn)已改用 Google Chrome 的 Blink 內(nèi)核

Chrome：Blink (基于 webkit，Google 與 Opera Software 共同開(kāi)發(fā))

什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？
漸進(jìn)增強(qiáng) progressive enhancement：

針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí) graceful degradation：

一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

區(qū)別：

優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶體驗(yàn)的供給漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶

sessionStorage 、localStorage 和 cookie 之間的區(qū)別
共同點(diǎn)：用于瀏覽器端存儲(chǔ)的緩存數(shù)據(jù)

不同點(diǎn)：

(1)、存儲(chǔ)內(nèi)容是否發(fā)送到服務(wù)器端：當(dāng)設(shè)置了 Cookie 后，數(shù)據(jù)會(huì)發(fā)送到服務(wù)器端，造成一定的寬帶浪費(fèi)；

web storage, 會(huì)將數(shù)據(jù)保存到本地，不會(huì)造成寬帶浪費(fèi)；

(2)、數(shù)據(jù)存儲(chǔ)大小不同：Cookie 數(shù)據(jù)不能超過(guò) 4K, 適用于會(huì)話標(biāo)識(shí)；web storage 數(shù)據(jù)存儲(chǔ)可以達(dá)到 5M;

(3)、數(shù)據(jù)存儲(chǔ)的有效期限不同：cookie 只在設(shè)置了 Cookid 過(guò)期時(shí)間之前一直有效，即使關(guān)閉窗口或者瀏覽器；

sessionStorage, 僅在關(guān)閉瀏覽器之前有效；localStorage, 數(shù)據(jù)存儲(chǔ)永久有效；

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

Web Storage 與 Cookie 相比存在的優(yōu)勢(shì)：
(1)、存儲(chǔ)空間更大：IE8 下每個(gè)獨(dú)立的存儲(chǔ)空間為 10M，其他瀏覽器實(shí)現(xiàn)略有不同，但都比 Cookie 要大很多。

(2)、存儲(chǔ)內(nèi)容不會(huì)發(fā)送到服務(wù)器：當(dāng)設(shè)置了 Cookie 后，Cookie 的內(nèi)容會(huì)隨著請(qǐng)求一并發(fā)送的服務(wù)器，這對(duì)于本地存儲(chǔ)的數(shù)據(jù)是一種帶寬浪費(fèi)。而 Web Storage 中的數(shù)據(jù)則僅僅是存在本地，不會(huì)與服務(wù)器發(fā)生任何交互。

(3)、更多豐富易用的接口：Web Storage 提供了一套更為豐富的接口，如 setItem,getItem,removeItem,clear 等，使得數(shù)據(jù)操作更為簡(jiǎn)便。cookie 需要自己封裝。

(4)、獨(dú)立的存儲(chǔ)空間：每個(gè)域（包括子域）有獨(dú)立的存儲(chǔ)空間，各個(gè)存儲(chǔ)空間是完全獨(dú)立的，因此不會(huì)造成數(shù)據(jù)混亂。

Ajax 的優(yōu)缺點(diǎn)及工作原理？
定義和用法:

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。Ajax 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。Ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。

傳統(tǒng)的網(wǎng)頁(yè)（不使用 Ajax）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面。

優(yōu)點(diǎn)：

1. 減輕服務(wù)器的負(fù)擔(dān)，按需取數(shù)據(jù)，最大程度的減少冗余請(qǐng)求

2. 局部刷新頁(yè)面，減少用戶心理和實(shí)際的等待時(shí)間，帶來(lái)更好的用戶體驗(yàn)

3. 基于 xml 標(biāo)準(zhǔn)化，并被廣泛支持，不需安裝插件等，進(jìn)一步促進(jìn)頁(yè)面和數(shù)據(jù)的分離

缺點(diǎn)：

1.AJAX 大量的使用了 javascript 和 ajax 引擎，這些取決于瀏覽器的支持。在編寫(xiě)的時(shí)候考慮對(duì)瀏覽器的兼容性.

2.AJAX 只是局部刷新，所以頁(yè)面的后退按鈕是沒(méi)有用的.

3. 對(duì)流媒體還有移動(dòng)設(shè)備的支持不是太好等

AJAX 的工作原理：
1. 創(chuàng)建 ajax 對(duì)象（XMLHttpRequest/ActiveXObject (Microsoft.XMLHttp)）

2. 判斷數(shù)據(jù)傳輸方式 (GET/POST)

3. 打開(kāi)鏈接 open ()

4. 發(fā)送 send ()

5. 當(dāng) ajax 對(duì)象完成第四步（onreadystatechange）數(shù)據(jù)接收完成，判斷 http 響應(yīng)狀態(tài)（status）200-300 之間或者 304（緩存）執(zhí)行回調(diào)函數(shù)

請(qǐng)指出 document load 和 document ready 的區(qū)別？
共同點(diǎn)：這兩種事件都代表的是頁(yè)面文檔加載時(shí)觸發(fā)。

異同點(diǎn)：

ready 事件的觸發(fā)，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件）。

onload 事件的觸發(fā)，表示頁(yè)面包含圖片等文件在內(nèi)的所有元素都加載完成。

寫(xiě)一個(gè) function，清除字符串前后的空格。（兼容所有瀏覽器）
1function trim(str) {
2 if (str && typeof str === "string") {
3 return str.replace(/(^s)|(s)$/g,""); // 去除前后空白符
4 }
5}

使用正則表達(dá)式驗(yàn)證郵箱格式
1var reg = /^(w)+(.w+)*@(w)+((.w{2,3}){1,3})$/;
2var email = "example@qq.com";
3console.log(reg.test(email)); // true

規(guī)避 javascript 多人開(kāi)發(fā)函數(shù)重名問(wèn)題
命名空間

封閉空間

js 模塊化 mvc（數(shù)據(jù)層、表現(xiàn)層、控制層）

seajs

變量轉(zhuǎn)換成對(duì)象的屬性

對(duì)象化

請(qǐng)說(shuō)出三種減低頁(yè)面加載時(shí)間的方法
壓縮 css、js 文件

合并 js、css 文件，減少 http 請(qǐng)求

外部 js、css 文件放在最底下

減少 dom 操作，盡可能用變量替代不必要的 dom 操作

你所了解到的 Web 攻擊技術(shù)
（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過(guò)存在安全漏洞的 Web 網(wǎng)站注冊(cè)用戶的瀏覽器內(nèi)運(yùn)行非法的 HTML 標(biāo)簽或者 JavaScript 進(jìn)行的一種攻擊。

（2）SQL 注入攻擊

（3）CSRF（Cross-Site Request Forgeries，跨站點(diǎn)請(qǐng)求偽造）：指攻擊者通過(guò)設(shè)置好的陷阱，強(qiáng)制對(duì)已完成的認(rèn)證用戶進(jìn)行非預(yù)期的個(gè)人信息或設(shè)定信息等某些狀態(tài)更新。

web 前端開(kāi)發(fā)，如何提高頁(yè)面性能優(yōu)化？
內(nèi)容方面：

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

2. 減少 DOM 元素?cái)?shù)量 (Reduce the Number of DOM Elements)

3. 使得 Ajax 可緩存 (Make Ajax Cacheable)

針對(duì) CSS：

1. 把 CSS 放到代碼頁(yè)上端 (Put Stylesheets at the Top)

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

3. 精簡(jiǎn) JavaScript 與 CSS (Minify JavaScript and CSS)

4. 避免 CSS 表達(dá)式 (Avoid CSS Expressions)

針對(duì) JavaScript ：

腳本放到 HTML 代碼頁(yè)底部 (Put Scripts at the Bottom)從頁(yè)面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)精簡(jiǎn) JavaScript 與 CSS (Minify JavaScript and CSS)移除重復(fù)腳本 (Remove Duplicate Scripts)

面向圖片 (Image)：

1. 優(yōu)化圖片

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

3 使用恰當(dāng)?shù)膱D片格式

4 使用 CSS Sprites 技巧對(duì)圖片優(yōu)化

5、前端開(kāi)發(fā)中，如何優(yōu)化圖像？圖像格式的區(qū)別？

優(yōu)化圖像：

1、不用圖片，盡量用 css3 代替。 比如說(shuō)要實(shí)現(xiàn)修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當(dāng)前主流瀏覽器中都可以用 CSS 達(dá)成。

2、 使用矢量圖 SVG 替代位圖。對(duì)于絕大多數(shù)圖案、圖標(biāo)等，矢量圖更小，且可縮放而無(wú)需生成多套圖?，F(xiàn)在主流瀏覽器都支持 SVG 了，所以可放心使用！

3.、使用恰當(dāng)?shù)膱D片格式。我們常見(jiàn)的圖片格式有 JPEG、GIF、PNG。

基本上，內(nèi)容圖片多為照片之類(lèi)的，適用于 JPEG。

而修飾圖片通常更適合用無(wú)損壓縮的 PNG。

GIF 基本上除了 GIF 動(dòng)畫(huà)外不要使用。且動(dòng)畫(huà)的話，也更建議用 video 元素和視頻格式，或用 SVG 動(dòng)畫(huà)取代。

4、按照 HTTP 協(xié)議設(shè)置合理的緩存。

5、使用字體圖標(biāo) webfont、CSS Sprites 等。

6、用 CSS 或 JavaScript 實(shí)現(xiàn)預(yù)加載。

7、WebP 圖片格式能給前端帶來(lái)的優(yōu)化。WebP 支持無(wú)損、有損壓縮，動(dòng)態(tài)、靜態(tài)圖片，壓縮比率優(yōu)于 GIF、JPEG、JPEG2000、PG 等格式，非常適合用于網(wǎng)絡(luò)等圖片傳輸。

圖像格式的區(qū)別：
矢量圖：圖標(biāo)字體，如 font-awesome；svg

位圖：gif,jpg (jpeg),png

區(qū)別：

　　1、gif: 是是一種無(wú)損，8 位圖片格式。具有支持動(dòng)畫(huà)，索引透明，壓縮等特性。適用于做色彩簡(jiǎn)單 (色調(diào)少) 的圖片，如 logo, 各種小圖標(biāo) icons 等。

　　2、JPEG 格式是一種大小與質(zhì)量相平衡的壓縮圖片格式。適用于允許輕微失真的色彩豐富的照片，不適合做色彩簡(jiǎn)單 (色調(diào)少) 的圖片，如 logo, 各種小圖標(biāo) icons 等。

　　3、png:PNG 可以細(xì)分為三種格式：PNG8，PNG24，PNG32。后面的數(shù)字代表這種 PNG 格式最多可以索引和存儲(chǔ)的顏色值。

關(guān)于透明：PNG8 支持索引透明和 alpha 透明；PNG24 不支持透明；而 PNG32 在 24 位的 PNG 基礎(chǔ)上增加了 8 位（256 階）的 alpha 通道透明；

優(yōu)缺點(diǎn)：

　　1、能在保證最不失真的情況下盡可能壓縮圖像文件的大小。

　　2、對(duì)于需要高保真的較復(fù)雜的圖像，PNG 雖然能無(wú)損壓縮，但圖片文件較大，不適合應(yīng)用在 Web 頁(yè)面上。

瀏覽器是如何渲染頁(yè)面的？
渲染的流程如下：

1. 解析 HTML 文件，創(chuàng)建 DOM 樹(shù)。

自上而下，遇到任何樣式（link、style）與腳本（script）都會(huì)阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）。

2. 解析 CSS。優(yōu)先級(jí)：瀏覽器默認(rèn)設(shè)置 < 用戶設(shè)置 < 外部樣式 < 內(nèi)聯(lián)樣式 < HTML 中的 style 樣式；

3. 將 CSS 與 DOM 合并，構(gòu)建渲染樹(shù)（Render Tree）

4. 布局和繪制，重繪（repaint）和重排（reflow）

感謝各位的閱讀！關(guān)于Web前端開(kāi)發(fā)常見(jiàn)的一些面試題及解決方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！