閱讀目錄

• [JavaScript部分]
• [JQurey部分]
• [HTML/CSS部分]
• [正則表達式]
• [開發(fā)及性能優(yōu)化部分]

本篇收錄了一些面試中經(jīng)常會遇到的經(jīng)典面試題以及自己面試過程中遇到的一些問題募判，并且都給出了我在網(wǎng)上收集的答案弧满。馬上就要過春節(jié)了槐脏，開年就是嶄新的一年废离，相信很多的前端開發(fā)者會有一些跳槽的悸動，通過對本篇知識的整理以及經(jīng)驗的總結绍撞，希望能幫到更多的前端面試者正勒。（如有錯誤或更好的答案，歡迎指正傻铣，水平有限章贞，望各位不吝指教。

javascript:

JavaScript中如何檢測一個變量是一個String類型矾柜？請寫出函數(shù)實現(xiàn)

方法1阱驾、

function isString(obj){
    return typeof(obj) === "string"? true: false;
    // returntypeof obj === "string"? true: false;
}

方法2、

function isString(obj){
    return obj.constructor === String? true: false;
}

方法3.

function isString(obj){
     return Object.prototype.toString.call(obj) === "[object String]"?true:false;
}

//如：
var isstring = isString('xiaoming');
console.log(isstring);  // true

請用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中查詢字符串中的參數(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(); // obj
console.log(href['name']); // xiaoming

js ****字符串操作函數(shù)

我這里只是列舉了常用的字符串函數(shù)，具體使用方法渡冻，請參考網(wǎng)址戚扳。

• concat() – 將兩個或多個字符的文本組合起來，返回一個新的字符串族吻。

• indexOf() – 返回字符串中一個子串第一處出現(xiàn)的索引帽借。如果沒有匹配項珠增，返回 -1 。

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

• lastIndexOf() – 返回字符串中一個子串最后一處出現(xiàn)的索引蒂教，如果沒有匹配項，返回 -1 脆荷。

• match() – 檢查一個字符串是否匹配一個正則表達式凝垛。

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

• substring() – 返回字符串的一個子串蜓谋。傳入?yún)?shù)是起始位置和結束位置梦皮。

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

• replace() – 用來查找匹配一個正則表達式的字符串届氢，然后使用新字符串代替匹配的字符串欠窒。

• search() – 執(zhí)行一個正則表達式匹配查找覆旭。如果查找成功，返回字符串中匹配的索引值岖妄。否則返回 -1 型将。

• split() – 通過將字符串劃分成子串，將一個字符串做成一個字符串數(shù)組荐虐。

• length – 返回字符串的長度七兜，所謂字符串的長度是指其包含的字符的個數(shù)。

• toLowerCase() – 將整個字符串轉成小寫字母福扬。

• toUpperCase() – 將整個字符串轉成大寫字母腕铸。

怎樣添加、移除铛碑、移動狠裹、復制、創(chuàng)建和查找節(jié)點汽烦？

1）創(chuàng)建新節(jié)點

createDocumentFragment() //創(chuàng)建一個DOM片段
　　createElement() //創(chuàng)建一個具體的元素
　　createTextNode() //創(chuàng)建一個文本節(jié)點

2）添加涛菠、移除、替換撇吞、插入

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

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

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

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

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

（2）迄薄、構造函數(shù)

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()求數(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

比較typeof與instanceof死姚？

相同點：JavaScript 中 typeof 和 instanceof 常用來判斷一個變量是否為空，或者是什么類型的勤篮。

typeof的定義和用法：返回值是一個字符串都毒，用來說明變量的數(shù)據(jù)類型。

細節(jié)：

(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

細節(jié)：

(1)、如下顷级，得到的結果為‘N’,這里的 instanceof 測試的 object 是指 js 語法中的 object凫乖，不是指 dom 模型對象。

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

如何理解閉包弓颈？

1帽芽、定義和用法：當一個函數(shù)的返回值是另外一個函數(shù)，而返回的那個函數(shù)如果調用了其父函數(shù)內部的其它變量翔冀，如果返回的這個函數(shù)在外部被執(zhí)行导街，就產生了閉包。

2橘蜜、表現(xiàn)形式：使函數(shù)外部能夠調用函數(shù)內部定義的變量菊匿。

3、實例如下：

(1)计福、根據(jù)作用域鏈的規(guī)則跌捆，底層作用域沒有聲明的變量，會向上一級找象颖，找到就返回佩厚，沒找到就一直找，直到window的變量说订，沒有就返回undefined抄瓦。這里明顯count 是函數(shù)內部的flag2 的那個count 潮瓶。

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

4、變量的作用域

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

變量的作用域分類：全局變量和局部變量。

特點：

1煞额、函數(shù)內部可以讀取函數(shù)外部的全局變量思恐；在函數(shù)外部無法讀取函數(shù)內的局部變量。

2膊毁、函數(shù)內部聲明變量的時候胀莹，一定要使用var命令。如果不用的話婚温，你實際上聲明了一個全局變量描焰！

5、使用閉包的注意點

1）濫用閉包栅螟，會造成內存泄漏：由于閉包會使得函數(shù)中的變量都被保存在內存中荆秦，內存消耗很大，所以不能濫用閉包嵌巷，否則會造成網(wǎng)頁的性能問題萄凤，在IE中可能導致內存泄露。解決方法是搪哪，在退出函數(shù)之前，將不使用的局部變量全部刪除坪圾。

2）會改變父函數(shù)內部變量的值晓折。所以，如果你把父函數(shù)當作對象（object）使用兽泄，把閉包當作它的公用方法（Public Method）漓概，把內部變量當作它的私有屬性（private value），這時一定要小心病梢，不要隨便改變父函數(shù)內部變量的值胃珍。

什么是跨域？跨域請求資源的方法有哪些蜓陌？

1觅彰、什么是跨域？

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

• 網(wǎng)絡協(xié)議不同飒责，如http協(xié)議訪問https協(xié)議赘娄。

• 端口不同，如80端口訪問8080端口宏蛉。

• 域名不同遣臼，如qianduanblog.com訪問baidu.com。

• 子域名不同拾并，如abc.qianduanblog.com訪問def.qianduanblog.com暑诸。

• 域名和域名對應ip,如www.a.com訪問20.205.28.90.

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

(1)辟灰、porxy代理

定義和用法：proxy代理用于將請求發(fā)送給后臺服務器个榕，通過服務器來發(fā)送請求，然后將請求的結果傳遞給前端芥喇。

實現(xiàn)方法：通過nginx代理西采；

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

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

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

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

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

定義和用法：通過動態(tài)插入一個script標簽。瀏覽器對script的資源引用沒有同源限制囚枪，同時資源加載到頁面后會立即執(zhí)行（沒有阻塞的情況下）派诬。

特點：通過情況下，通過動態(tài)創(chuàng)建script來讀取他域的動態(tài)資源链沼，獲取的數(shù)據(jù)一般為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、這種方式無法發(fā)送post請求（這里）

2括勺、另外要確定jsonp的請求是否失敗并不容易缆八，大多數(shù)框架的實現(xiàn)都是結合超時時間來判定。

談談垃圾回收機制方式及內存管理

回收機制方式

1疾捍、定義和用法：垃圾回收機制(GC:Garbage Collection),執(zhí)行環(huán)境負責管理代碼執(zhí)行過程中使用的內存奈辰。

2、原理：垃圾收集器會定期（周期性）找出那些不在繼續(xù)使用的變量拾氓，然后釋放其內存冯挎。但是這個過程不是實時的，因為其開銷比較大，所以垃圾回收器會按照固定的時間間隔周期性的執(zhí)行房官。

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的環(huán)境孵奶，那么該塊內存會被js引擎中的垃圾回收器自動釋放；在fn2被調用的過程中蜡峰，返回的對象被全局變量b所指向了袁，所以該塊內存并不會被釋放。

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

標記清除：

定義和用法：當變量進入環(huán)境時，將變量標記"進入環(huán)境"油航，當變量離開環(huán)境時崭庸，標記為："離開環(huán)境"。某一個時刻谊囚，垃圾回收器會過濾掉環(huán)境中的變量怕享，以及被環(huán)境變量引用的變量，剩下的就是被視為準備回收的變量镰踏。

到目前為止函筋，IE、Firefox奠伪、Opera跌帐、Chrome、Safari的js實現(xiàn)使用的都是標記清除的垃圾回收策略或類似的策略芳来，只不過垃圾收集的時間間隔互不相同含末。

引用計數(shù)：

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

基本原理：就是變量的引用次數(shù)，被引用一次則加1，當這個引用計數(shù)為0時枝誊，被視為準備回收的對象逻淌。

內存管理

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

垃圾回收器周期性運行紊搪，如果分配的內存非常多，那么回收工作也會很艱巨全景，確定垃圾回收時間間隔就變成了一個值得思考的問題耀石。

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

IE7中野崇，垃圾回收器會根據(jù)內存分配量與程序占用內存的比例進行動態(tài)調整，開始回收工作亩钟。

2乓梨、合理的GC方案：(1)、遍歷所有可訪問的對象; (2)清酥、回收已不可訪問的對象扶镀。

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

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

開發(fā)過程中遇到的內存泄露情況，如何解決的荸频？

1菱肖、定義和用法：

內存泄露是指一塊被分配的內存既不能使用，又不能回收旭从，直到瀏覽器進程結束稳强。C#和Java等語言采用了自動垃圾回收方法管理內存，幾乎不會發(fā)生內存泄露和悦。我們知道退疫，瀏覽器中也是采用自動垃圾回收方法管理內存，但由于瀏覽器垃圾回收方法有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)瓦呼、由于是函數(shù)內定義函數(shù)喂窟，并且內部函數(shù)--事件回調的引用外暴了，形成了閉包。閉包可以維持函數(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面向對象中繼承實現(xiàn)？

面向對象的基本特征有：封閉钱贯、繼承挫掏、多態(tài)。

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

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類的構造函數(shù)賦值給this.student
   this.student(name,age);   //js中實際上是通過對象冒充來實現(xiàn)繼承的
   delete this.student;           //移除對Person的引用
}

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

var p = new Person("小花",18);
p.show();
// 小明,  17
// 小花,  18

javascript相關程序計算題

1袄友、判斷一個字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計這個次數(shù)

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('出現(xiàn)次數(shù)最多的是:'+iIndex+'出現(xiàn)'+iMax+'次');

結果如下：出現(xiàn)次數(shù)最多的是:a出現(xiàn)9次

JavaScript 數(shù)組(Array)對象

1霹菊、Array相關的屬性和方法

這里只是做了相關的列舉剧蚣，具體的使用方法，請參考網(wǎng)址旋廷。

Array 對象屬性

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

var test=new Array();

if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Boolean)
{
document.write("This is a Boolean");
}
if (test.constructor==Date)
{
document.write("This is a Date");
}
if (test.constructor==String)
{
document.write("This is a String");
}

length 設置或返回數(shù)組中元素的數(shù)目。

prototype 使您有能力向對象添加屬性和方法饶碘。

Array 對象方法

concat() 連接兩個或更多的數(shù)組目尖，并返回結果。

var arr = [1,2,3,4];
var arr2 = [5,6,7,8];
var arr3 = arr.concat(arr2);
console.log(arr3); // 連接之后返回的數(shù)組為：[1, 2, 3, 4, 5, 6, 7, 8]

join() 把數(shù)組的所有元素放入一個字符串扎运。元素通過指定的分隔符進行分隔瑟曲。

var arr = ['xiao','lin','qiqi','mingtian'];
var arr2 = arr.join(',');
console.log(arr2); // 根據(jù)','隔開返回的字符串為："xiao,lin,qiqi,mingtian"

pop() 刪除并返回數(shù)組的最后一個元素。

var arr = [2,3,4,5];
var arr2 = arr.pop();
console.log(arr2); // 刪除的數(shù)組的最后一個元素為：5
console.log(arr);  // 刪除元素之后的數(shù)組為：[2, 3, 4]

shift() 刪除并返回數(shù)組的第一個元素

var arr = [2,3,4,5];
var arr2 = arr.shift();
console.log(arr2); // 刪除的數(shù)組的第一個元素為：2
console.log(arr);  // 刪除元素之后的數(shù)組為：[3, 4豪治，5]

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

var arr = [2,3,4,5];
var arr2 = arr.push(6);
console.log(arr2);  // 返回的數(shù)組長度：5 
console.log(arr);  // [2, 3, 4, 5, 6]

unshift() 向數(shù)組的開頭添加一個或更多元素负拟，并返回新的長度烦衣。

var arr = ['xiao','ming','qiqi','aiming'];
var arr1 = arr.unshift('lang');
console.log(arr1);  // 返回的數(shù)組的長度：  5
console.log(arr);  //向數(shù)組開頭添加元素返回的結果：["lang", "xiao", "ming", "qiqi", "aiming"]

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

var arr = [2,3,4,5];
arr.reverse();
console.log(arr);   //  [5, 4, 3, 2]

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

var arr = [2,3,4,5];
var arr2 = arr.slice(1,3);
console.log(arr2);  // 截取區(qū)間返回的數(shù)組為：[3, 4]
console.log(arr);  // [2, 3, 4, 5]

sort() 對數(shù)組的元素進行排序

//借助排序函數(shù)掩浙，實現(xiàn)數(shù)值由小到大排序
function sortNumber(a,b){
    return a - b
}
var arr = [23,30,42,5];
var arr2 = arr.sort(sortNumber);
console.log(arr2);  // [5, 23, 30, 42]
console.log(arr);   // [5, 23, 30, 42]

//借助排序函數(shù)琉挖，實現(xiàn)數(shù)值由大到小排序
function sortNumber(a,b){
    return b - a
}
var arr = [23,30,42,5];
var arr2 = arr.sort(sortNumber);
console.log(arr2);  // [42, 30, 23, 5]
console.log(arr);  // [42, 30, 23, 5]

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

語法:arrayObject.splice(index,howmany,item1,.....,itemX)
index:必需。整數(shù)寥茫，規(guī)定添加/刪除項目的位置遣蚀，使用負數(shù)可從數(shù)組結尾處規(guī)定位置。
howmany:必需。要刪除的項目數(shù)量芭梯。如果設置為 0险耀，則不會刪除項目。
item1, ..., itemX:可選玖喘。向數(shù)組添加的新項目甩牺。

// 創(chuàng)建一個新數(shù)組，并向其添加一個元素
var arr = [1,2,3,4];
arr.splice(2,0,5);
console.log(arr);  // [1, 2, 5, 3, 4]

// 刪除位于 index 2 的元素累奈，并添加一個新元素來替代被刪除的元素：
var arr = [1,2,3,4];
arr.splice(2,1,5);
console.log(arr);  // [1, 2, 5, 4]

toSource() 返回該對象的源代碼贬派。

瀏覽器支持
只有 Gecko 核心的瀏覽器（比如 Firefox）支持該方法，也就是說 IE澎媒、Safari搞乏、Chrome、Opera 等瀏覽器均不支持該方法戒努。
<script type="text/javascript">
function employee(name,job,born){
    this.name=name;
    this.job=job;
    this.born=born;
}
var bill = new employee("Bill Gates","Engineer",1985);
document.write(bill.toSource());
</script>
輸出：({name:"Bill Gates", job:"Engineer", born:1985}) 

toString() 把數(shù)組轉換為字符串请敦，并返回結果。

var arr = ['xiao','ming','qiqi','aiming'];
arr.toString();
console.log(arr);  // ["xiao", "ming", "qiqi", "aiming"]

toLocaleString() 把數(shù)組轉換為本地數(shù)組储玫，并返回結果侍筛。

var arr = ['xiao','ming','qiqi','aiming'];
arr.toLocaleString();
console.log(arr);  // ["xiao", "ming", "qiqi", "aiming"]

valueOf() 返回數(shù)組對象的原始值

var arr = ['xiao','ming','qiqi','aiming'];
arr.valueOf('lang');
console.log(arr);  // ["xiao", "ming", "qiqi", "aiming"]

2、編寫一個方法 去掉一個數(shù)組的重復元素

方法一：

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]

方法四：

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

結果為：[1, 2, 3, 4]

方法五：ES6 提供了新的數(shù)據(jù)結構 Set撒穷。它類似于數(shù)組匣椰，但是成員的值都是唯一的，沒有重復的值桥滨。

function unique(arr) {
  return [...new Set(arr)]
}
var arr = [1,2,3,3,3,2];
unique(arr);

結果為：[1, 2, 3]

3窝爪、求數(shù)組的最值？

方法一：

• 求數(shù)組最大值：Math.max.apply(null,arr);

var arr = [3,43,23,45,65,90];
var max = Math.max.apply(null,arr);
console.log(max);
// 90

• 求數(shù)組最小值：Math.min.apply(null,arr);

var arr = [3,43,23,45,65,90];
var min = Math.min.apply(null,arr);
console.log(min);
// 3

方法二：Array.max = function(arr){} / Array.min = function(arr){}

var array = [3,43,23,45,65,90];

Array.max = function( array ){ 
   return Math.max.apply( Math, array );
};
Array.min = function( array ){ 
   return Math.min.apply( Math, array );
};

var max = Array.max(array);
console.log(max);  // 90

var min = Array.min(array);
console.log(min);  // 3

方法三：Array.prototype.max = function(){};Array.prototype.min = function(){};

• 求數(shù)組最大值(基本思路：將數(shù)組中的第一個值賦值給變量max ,將數(shù)組進行循環(huán)與max進行比較齐媒，將數(shù)組中的大值賦給max,最后返回max;)

var arr = [3,43,23,45,65,90];
Array.prototype.max = function() { 
    var max = this[0];
    var len = this.length; 
    for (var i = 0; i < len; i++){ 
        if (this[i] > max) { 
          max = this[i]; 
        } 
    } 
    return max;
}
var max = arr.max();
console.log(max);  // 90

• 求數(shù)組最小值：

var arr = [3,43,23,45,65,90];
Array.prototype.min = function() { 
    var min = this[0];
    var len = this.length;
    for(var i = 0;i< len;i++){
        if(this[i] < min){
            min = this[i];
        }
    }
    return min;
}
var min = arr.min();
console.log(min);  // 3

4蒲每、數(shù)組排序相關

結合sort和函數(shù)排序：

• 數(shù)組由小到大進行排序：sort,sortnum;

var arr = [3,43,23,45,65,90];
function sortnum(a,b){
　　return a-b;
}
arr = arr.sort(sortnum);
console.log(arr);
// [3, 23, 43, 45, 65, 90]

• 數(shù)組由大到小進行排序：sort,sortnum;

var arr = [3,43,23,45,65,90];
function sortnum(a,b){
　　return a+b;
}
arr = arr.sort(sortnum);
console.log(arr);
// [90, 65, 45, 23, 43, 3]

冒泡排序：即實現(xiàn)數(shù)組由小到大進行排序；思路為：每次比較相鄰的兩個數(shù)喻括，如果后一個比前一個小邀杏，換位置。如果要實現(xiàn)由大到小排序唬血，使用reverse()即可望蜡；

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

function bubbleSort(arr) {
    var len = arr.length;
    for (var i = len; i >= 2; --i) {
        for (var j = 0; j < i - 1; j++) {
            if (arr[j + 1] < arr[j]) {
                var temp;
                temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

var arr2 = bubbleSort(arr); 
console.log(arr2);  // [1, 2, 3, 4, 5, 6, 7]
var arr3 = arr2.reverse();
console.log(arr3);  //  [7, 6, 5, 4, 3, 2, 1]

快速排序：

思路：采用二分法，取出中間數(shù)拷恨，數(shù)組每次和中間數(shù)比較脖律，小的放到左邊，大的放到右邊腕侄。

var arr = [3, 1, 4, 6, 5, 7, 2];
function quickSort(arr) {
    if(arr.length == 0) {
        return [];  // 返回空數(shù)組
    }
    var cIndex = Math.floor(arr.length / 2);
    var c = arr.splice(cIndex, 1);
    var l = [];
    var r = [];

    for (var i = 0; i < arr.length; i++) {
        if(arr[i] < c) {
            l.push(arr[i]);
        } else {
            r.push(arr[i]);
        }
    }
    return quickSort(l).concat(c, quickSort(r));
}
console.log(quickSort(arr));
//[1, 2, 3, 4, 5, 6, 7]

5小泉、數(shù)組的翻轉（非reverse()）

方法一：

var arr = [1,2,3,4];
var arr2 = [];
while(arr.length) {
    var num = arr.pop(); //刪除數(shù)組最后一個元素并返回被刪除的元素
    arr2.push(num);
}
console.log(arr2);
// [4, 3, 2, 1]

方法二：

var arr = [1,2,3,4];
var arr2 = [];
while(arr.length){
    var num = arr.shift(); //刪除數(shù)組第一個元素并返回被刪除的元素
    arr2.unshift(num);
}
console.log(arr2);

jquery相關

1芦疏、 jQuery 庫中的 $() 是什么？

() 函數(shù)用于將任何對象包裹成 jQuery 對象，接著你就被允許調用定義在 jQuery 對象上的多個不同方法兢交。你可以將一個選擇器字符串傳入 $() 函數(shù)，它會返回一個包含所有匹配的 DOM 元素數(shù)組的 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()函數(shù)有什么作用佛析？

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

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

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

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

8桃纯、$(document).ready()方法和window.onload有什么區(qū)別？

(1)披坏、window.onload方法是在網(wǎng)頁中所有的元素(包括元素的所有關聯(lián)文件)完全加載到瀏覽器后才執(zhí)行的态坦。

(2)、$(document).ready() 方法可以在DOM載入就緒時就對其進行操縱棒拂，并調用執(zhí)行綁定的函數(shù)伞梯。

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

實現(xiàn)代碼如下：

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

10谜诫、 jquery中.post()提交有區(qū)別嗎？

相同點：都是異步請求的方式來獲取服務端的數(shù)據(jù)攻旦；

異同點：

1喻旷、請求方式不同：.post() 方法使用POST方法來進行異步請求的牢屋。

2且预、參數(shù)傳遞方式不同：get請求會將參數(shù)跟在URL后進行傳遞，而POST請求則是作為HTTP消息的實體內容發(fā)送給Web服務器的伟阔，這種傳遞是對用戶不可見的辣之。

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

4皱炉、安全問題： GET 方式請求的數(shù)據(jù)會被瀏覽器緩存起來怀估，因此有安全問題。

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之間有什么區(qū)別赌髓？

(1)从藤、bind 【jQuery 1.3之前】

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

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

特點：

(1)夷野、適用于頁面元素靜態(tài)綁定。只能給調用它的時候已經(jīng)存在的元素綁定事件荣倾，不能給未來新增的元素綁定事件悯搔。

(2)、當頁面加載完的時候舌仍，你才可以進行bind()妒貌，所以可能產生效率問題通危。

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

(2)、live 【jQuery 1.3之后】

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

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

特點：

(1)菊碟、live方法并沒有將監(jiān)聽器綁定到自己(this)身上，而是綁定到了this.context上了平匈。

(2)框沟、live正是利用了事件委托機制來完成事件的監(jiān)聽處理，把節(jié)點的處理委托給了document增炭，新添加的元素不必再綁定一次監(jiān)聽器。

(3)拧晕、使用live（）方法但卻只能放在直接選擇的元素后面隙姿，不能在層級比較深，連綴的DOM遍歷方法后面使用厂捞，即("body").find("ul").live...不行；

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

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

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

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

特點：

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

(2)、更精確的小范圍使用事件代理胧弛，性能優(yōu)于.live()尤误。可以用在動態(tài)添加的元素上结缚。

實例如下：

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

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

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

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

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

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

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

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

HTML & CSS:

1茵宪、什么是盒子模型最冰？

在網(wǎng)頁中，一個元素占有空間的大小由幾個部分構成眉厨，其中包括元素的內容（content）锌奴，元素的內邊距（padding），元素的邊框（border）憾股，元素的外邊距（margin）四個部分鹿蜀。這四個部分占有的空間中箕慧，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區(qū)域或區(qū)域茴恰。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實現(xiàn)垂直水平居中

一道經(jīng)典的問題绞蹦，實現(xiàn)方法有很多種力奋，以下是其中一種實現(xiàn)：
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的區(qū)別

href 是指向網(wǎng)絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接猿挚。

src是指向外部資源的位置咐旧，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內绩蜻，例如js腳本铣墨，img圖片和frame等元素。

當瀏覽器解析到該元素時办绝，會暫停其他資源的下載和處理伊约，直到將該資源加載、編譯孕蝉、執(zhí)行完畢屡律，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內降淮。這也是為什么將js腳本放在底部而不是頭部疹尾。

5、簡述同步和異步的區(qū)別

同步是阻塞模式骤肛，異步是非阻塞模式。
同步就是指一個進程在執(zhí)行某個請求的時候窍蓝，若該請求需要一段時間才能返回信息腋颠，那么這個進程將會一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去吓笙；
異步是指進程不需要一直等下去淑玫，而是繼續(xù)執(zhí)行下面的操作，不管其他進程的狀態(tài)面睛。當有消息返回時系統(tǒng)會通知進程進行處理絮蒿，這樣可以提高執(zhí)行的效率。

6叁鉴、px和em的區(qū)別

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

異同點：px的值是固定的，指定是多少就是多少幌墓，計算比較容易但壮。em得值不是固定的，并且em會繼承父級元素的字體大小常侣。
瀏覽器的默認字體高都是16px蜡饵。所以未經(jīng)調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em胳施。

7溯祸、瀏覽器的內核分別是什么?

IE: trident內核

Firefox：gecko內核

Safari：webkit內核

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

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

8焦辅、什么叫優(yōu)雅降級和漸進增強博杖？

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

優(yōu)雅降級 graceful degradation：
一開始就構建完整的功能仆抵，然后再針對低版本瀏覽器進行兼容跟继。

區(qū)別：

a. 優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給

b. 漸進增強則是從一個非沉统螅基礎的舔糖，能夠起作用的版本開始，并不斷擴充莺匠，以適應未來環(huán)境的需要

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

9趣竣、sessionStorage 摇庙、localStorage 和 cookie 之間的區(qū)別

共同點：用于瀏覽器端存儲的緩存數(shù)據(jù)

不同點：

(1)、存儲內容是否發(fā)送到服務器端：當設置了Cookie后遥缕，數(shù)據(jù)會發(fā)送到服務器端卫袒，造成一定的寬帶浪費；

    web storage,會將數(shù)據(jù)保存到本地单匣，不會造成寬帶浪費夕凝；

(2)、數(shù)據(jù)存儲大小不同：Cookie數(shù)據(jù)不能超過4K,適用于會話標識户秤；web storage數(shù)據(jù)存儲可以達到5M;

(3)码秉、數(shù)據(jù)存儲的有效期限不同：cookie只在設置了Cookid過期時間之前一直有效，即使關閉窗口或者瀏覽器鸡号；

    sessionStorage,僅在關閉瀏覽器之前有效转砖；localStorage,數(shù)據(jù)存儲永久有效；

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

10礁竞、Web Storage與Cookie相比存在的優(yōu)勢：

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

(2)、存儲內容不會發(fā)送到服務器：當設置了Cookie后狂男，Cookie的內容會隨著請求一并發(fā)送的服務器综看，這對于本地存儲的數(shù)據(jù)是一種帶寬浪費。而Web Storage中的數(shù)據(jù)則僅僅是存在本地岖食，不會與服務器發(fā)生任何交互红碑。

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

(4)蔑穴、獨立的存儲空間：每個域（包括子域）有獨立的存儲空間忠寻，各個存儲空間是完全獨立的，因此不會造成數(shù)據(jù)混亂存和。

11奕剃、Ajax的優(yōu)缺點及工作原理？

定義和用法:

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

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

優(yōu)點：

1.減輕服務器的負擔,按需取數(shù)據(jù),最大程度的減少冗余請求

2.局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗

3.基于xml標準化,并被廣泛支持,不需安裝插件等,進一步促進頁面和數(shù)據(jù)的分離

缺點：

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

2.AJAX只是局部刷新,所以頁面的后退按鈕是沒有用的.

3.對流媒體還有移動設備的支持不是太好等

AJAX的工作原理：

1.創(chuàng)建ajax對象（ XMLHttpRequest / ActiveXObject(Microsoft.XMLHttp) ）
var xhr = new XMLHttpRequest();

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

xhr.onload = function() {
console.log("READYSTATE:", xhr.readyState);
console.log(this.responseText);
}

3.打開鏈接 open()
xhr.open("GET"," user.txt", true);

4.發(fā)送 send()
xhr.send();

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

關于AJAX快速入門可參照另一篇文章“AJAX 神碼”

http://www.reibang.com/p/5587db185056

12、請指出document load和document ready的區(qū)別猪钮？

共同點：這兩種事件都代表的是頁面文檔加載時觸發(fā)品山。

異同點：

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

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

13扑馁、圣杯/雙飛翼布局

圣杯布局與雙飛翼布局針對的都是三列左右欄固定中間欄邊框自適應的網(wǎng)頁布局

• 三列布局涯呻，中間寬度自適應，兩邊定寬
• 中間欄要在瀏覽器中優(yōu)先展示渲染
• 允許任意列的高度最高

顯示如圖：

(1)腻要、浮動布局（float+calc）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
    <style type="text/css">
    .container {
      width: 100%;
      height: 300px;
    }
    .container > div {
        float: left;
    }
    .left, .right {
        width: 60px;
        height: 100%;
    }
    .left {
        background-color:red;
    }
    .right {
        background-color:blue;
    }
    .main {
        width: calc(100% - 120px);
        height: 100%;
        background-color:green;
    }
    </style>
</head>
<body>

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

</body>
</html>

(2)复罐、絕對布局（absolute+calc）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
    <style>
        .container{
            width:100%;
            height:300px;
            position:relative;
         }
        .container > div{
            position:absolute;
            height:100%;
         }
        
        .left,.right{
           width:100px;
         }
        .left{
            left:0;
            background-color:green;
         }
        .right{
            right:0;
            background-color:blue;
         }
        .main{
            width: calc(100% - 200px);
            left:100px;
            background-color:red;
         }
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
         <div class="main"></div>
        <div class="right"></div>
    </div>
    
</body>
</html>

(3)、flex布局雄家；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
    <style>
        .container{
            width:100%;
            height:300px;
            display:flex;
         }
        .container > div{
            height:100%;
         }
        
        .left,.right{
           width:60px;
         }
        .left{
            background-color:green;
         }
        .right{
            background-color:blue;
         }
        .main{
            flex:1;
            background-color:red;
         }
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
         <div class="main"></div>
        <div class="right"></div>
    </div>
    
</body>
</html>

正則表達式

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 = "example@qq.com";
 console.log(reg.test(email));  // true  

開發(fā)及性能優(yōu)化

1咽笼、規(guī)避javascript多人開發(fā)函數(shù)重名問題

• 命名空間
• 封閉空間
• js模塊化mvc（數(shù)據(jù)層、表現(xiàn)層戚炫、控制層）
• seajs
• 變量轉換成對象的屬性
• 對象化

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

• 壓縮css、js文件
• 合并js双肤、css文件施掏，減少http請求
• 外部js、css文件放在最底下
• 減少dom操作杨伙，盡可能用變量替代不必要的dom操作

3其监、你所了解到的Web攻擊技術

（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過存在安全漏洞的Web網(wǎng)站注冊用戶的瀏覽器內運行非法的HTML標簽或者JavaScript進行的一種攻擊限匣。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries抖苦，跨站點請求偽造）：指攻擊者通過設置好的陷阱，強制對已完成的認證用戶進行非預期的個人信息或設定信息等某些狀態(tài)更新米死。

4锌历、web前端開發(fā)，如何提高頁面性能優(yōu)化峦筒？

內容方面：

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

2.減少 DOM 元素數(shù)量 (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.優(yōu)化圖片

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

3 使用恰當?shù)膱D片格式

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

5究西、前端開發(fā)中，如何優(yōu)化圖像物喷？圖像格式的區(qū)別卤材？

優(yōu)化圖像：

1、不用圖片峦失，盡量用css3代替扇丛。 比如說要實現(xiàn)修飾效果，如半透明尉辑、邊框帆精、圓角、陰影隧魄、漸變等卓练，在當前主流瀏覽器中都可以用CSS達成。

2购啄、 使用矢量圖SVG替代位圖襟企。對于絕大多數(shù)圖案、圖標等狮含，矢量圖更小整吆，且可縮放而無需生成多套圖」澳欤現(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用表蝙！

3.拴测、使用恰當?shù)膱D片格式。我們常見的圖片格式有JPEG府蛇、GIF集索、PNG。

基本上汇跨，內容圖片多為照片之類的务荆，適用于JPEG。

而修飾圖片通常更適合用無損壓縮的PNG穷遂。

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

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

5抒寂、使用字體圖標webfont、CSS Sprites等掠剑。

6屈芜、用CSS或JavaScript實現(xiàn)預加載。

7朴译、WebP圖片格式能給前端帶來的優(yōu)化井佑。WebP支持無損、有損壓縮眠寿，動態(tài)毅糟、靜態(tài)圖片，壓縮比率優(yōu)于GIF澜公、JPEG、JPEG2000喇肋、PG等格式坟乾，非常適合用于網(wǎng)絡等圖片傳輸。

圖像格式的區(qū)別：

矢量圖：圖標字體蝶防，如 font-awesome甚侣；svg

位圖：gif,jpg(jpeg),png

區(qū)別：

1、gif:是是一種無損间学，8位圖片格式殷费。具有支持動畫印荔，索引透明，壓縮等特性详羡。適用于做色彩簡單(色調少)的圖片仍律，如logo,各種小圖標icons等。

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

3、png:PNG可以細分為三種格式:PNG8蟹漓，PNG24炕横，PNG32。后面的數(shù)字代表這種PNG格式最多可以索引和存儲的顏色值葡粒。

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

優(yōu)缺點：

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

2塔鳍、對于需要高保真的較復雜的圖像伯铣，PNG雖然能無損壓縮，但圖片文件較大轮纫，不適合應用在Web頁面上腔寡。

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

渲染的流程如下：

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

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

2.解析CSS撩扒。優(yōu)先級：瀏覽器默認設置<用戶設置<外部樣式<內聯(lián)樣式<HTML中的style樣式似扔；

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

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