js&jq面試筆記（上）

時間 2019-11-16

原文原文鏈接

js&jq涉及內容衆多，分爲上下兩部分進行整理，該部分爲上部分。

一、對前端工程師這個職位你是怎麼樣理解的？

前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好;
參與項目，快速高質量完成實現效果圖，精確到1px;
與團隊成員，UI設計，產品經理的溝通;
作好的頁面結構，頁面重構和用戶體驗;
處理hack，兼容、寫出優美的代碼格式;
針對服務的優化、擁抱最新前端技術。

DOM相關

一、原生JavaScript操做DOM

<table border="1" id="t">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

首先經過題目給的table id 得到該對象;
tableObj.rows.length; 得到行數;
tableObj.rows[x].cells[y].innerText 能夠得到x行y列的值;
遍歷tablejavascript

function show(){
    var    tableRowInfo ="";
    tableObj = document.getElementById("t");
    for(var i =0 ;i<tableObj.rows.length ; i++){
        
        for(var j=0 ;j<tableObj.rows[i].cells.length ; j++){
            tableRowInfo  +=  tableObj.rows[i].cells[j].innerText + " ";
        }
        console.log(tableRowInfo); // 打印每行信息
        tableRowInfo ="";    
    }
}

二、獲取頁面html標籤的個數

var elementArr = document.getElementsByTagName('*')
var tagNameArr = []
for(var i= 0,len=elementArr.length;i<len;i++){
    if(tagNameArr.indexOf(elementArr[i].tagName) == -1){
        tagNameArr.push(elementArr[i].tagName)
    }
}

三、DOM事件流包括哪幾個階段

事件流，從頁面接收事件的順序；IE的事件流叫作事件冒泡；Netscape的事件流叫作事件捕獲；
「DOM2級事件」規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段

document.addEventListener(type, handler, false);//true事件捕獲模式，false事件冒泡模式css

四、html元素添加事件的方法

原生方法：

//1
<input type='buttom' value='click me' onclick='try{showMessage()}catch(ex){}'>

//2
var btn = document.getElementById('myBtn')
btn.onclick = function(){}

//3
btn.addEventListener('click',function(){},false)//false在冒泡階段調用事件處理程序

IE：btn.attachEventListener('click',function(){},false)

五、用js代碼完成，body裏面生成100個div，內容是1-100自身序號，顏色按照紅、黃、藍、綠交替變色，10行10列

// CSS 
#box { position:relative; }
#box div { width: 60px; height: 60px; position: absolute; }

// HTML 
<div id="box"></div>

// JavaScript 
<script>
var box = document.getElementById('box');
var str = '';
var arr = ['red', 'yellow', 'blue', 'green'];

for (var i = 0; i < 100; i++) {
    str += '<div style="left:' + i%10*60 + 'px; top:' + Math.floor(i/10)*60 + 'px; background:' + arr[i%arr.length] + ';">' + (i+1)+'</div>';
}
box.innerHTML += str;

正則表達式

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

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

二、使用正則表達式驗證郵箱格式html

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

js其餘

一、一個圓心座標爲(0,0)的圓，半徑r=10，求45°方向的點座標(x,y)

x = Math.cos(Math.PI/4)*r
y = Math.sin(Math.PI/4)*r

二、事件委託的實現原理是什麼，優缺點

原理：事件冒泡，子元素的單擊事件會冒泡到頂層元素document對象上
優勢：DOM操做少，只獲取一個頂層DOM元素；減小事件註冊，節省內存佔用；簡化了DOM節點更新時的事件更新
缺點：不支持不冒泡的事件；出現不指望的事件誤判
適合採用事件委託技術的事件包括：click、mousedown、mouseup、keydown、keyup、keypress前端

不冒泡的事件：blur、focus、load、unload java

使用原生js爲如下li實現事件委託，點擊後打印對應的node-type屬性值node

<ul id="test">
    <li node-type="1">b</li>
    <li node-type="2">a</li>
    <li node-type="3">t</li>
</ul>
var ele = document.getElementById('test');
ele.addEventListener('click',function(e){
    var value = e.target.attributes[0].nodeValue;
    console.log(value);
},false)

三、js捕獲離開（刷新、關閉、後退）頁面事件

onbeforeunload 事件在即將離開當前頁面（刷新或關閉）時觸發。

該事件可用於彈出對話框，提示用戶是繼續瀏覽頁面仍是離開當前頁面。對話框默認的提示信息根據不一樣的瀏覽器有所不一樣，標準的信息相似"肯定要離開此頁嗎？"。該信息不能刪除。但你能夠自定義一些消息提示與標準信息一塊兒顯示在對話框。
注意：若是你沒有在 <body> 元素上指定 onbeforeunload 事件，則須要在 window對象上添加事件，並使用 returnValue 屬性建立自定義信息。nginx

window.onbeforeunload = function(){
    setTimeout(function(){console.log('cancel');},1000);
    return '肯定離開？'
}

四、typeof 和 instanceof 操做的用法、實例

typeof操做符判斷基本數據類型；instanceof檢測對象的繼承關係，左操做數是對象，右操做數是構造函數

console.log(typeof null);//object
console.log(typeof undefined);//undefined
console.log(typeof 'a');//string
console.log(typeof 1);//number
console.log(typeof true);//boolean
console.log(typeof []);//object

instanceof能夠準確判斷 左對象 是 右對象 的實例
console.log([] instanceof Array);//true
console.log('a' instanceof String);//false
console.log(/a/ instanceof RegExp);//true
console.log([] instanceof Object);//true

五、頁面的三種彈窗

alert警告框；confirm確認框；prompt提示框

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

共同點：這兩種事件都表明的是頁面文檔加載時觸發。
異同點：
ready 事件的觸發，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）。
onload 事件的觸發，表示頁面包含圖片等文件在內的全部元素都加載完成。

七、函數節流定義、做用、示例

函數節流：某些代碼不能夠在沒有間斷的狀況下連續重複執行，不只消耗內存大、佔用CPU時間長，同時還會形成不指望的後果，必須採起節流手段；
基本思想：第一次調用函數，建立一個定時器，在指定的時間間隔後運行代碼；第二次調用，清除前一次的定時器並設置另外一個；
目的：只用在，執行函數的請求中止了一段時間以後才執行；

var processor = {
  timeoutId: null,
  performProcessing: function(){
    //執行的代碼
  },
  process: function(){
    clearTimeout(this.timeoutId);
    var that = this;
    this.timeoutId = setTimeout(function(){
      that.performProcessing();
    },500);
  }
}

processor.process();

在微信小程序開發中，scroll-view標籤用於建立可滾動的列表區域，這個屬性能夠綁定用戶滾動到列表底部的事件，
以下：<scroll-view scroll-y bindscrolltolower="bottom"></scroll-view>，可是，頁面到達底部以前的臨界點，這個事件會重複觸發無數次，致使向後臺請求分頁數據無數次。此時，能夠採用函數節流技術；

八、開發過程當中如何調試抓包（http、https）

pc端：chrome瀏覽器-Network
手機的通訊包：Fiddler是一個http協議調試代理工具，它可以記錄並檢查全部你的電腦和互聯網之間的http通信，設置斷點，查看全部的「進出」Fiddler的數據（指cookie,html,js,css等文件）。
Fiddler 要比其餘的網絡調試器要更加簡單，由於它不只僅暴露http通信還提供了一個用戶友好的格式。

九、http狀態碼

1信息，2成功，3重定向，4客戶端錯誤，5服務器錯誤
302請求的資源被臨時移動；
303查看其餘地址；
304請求的資源未修改，讀取緩存資源；
403請求被服務器拒絕；
404沒法找到資源；
500服務器內部錯誤；
502無效請求程序員

1xx：1開頭的是信息狀態碼
2xx：2開頭的是請求成功
3xx：3開頭的是重定向
4xx：4開頭的是客戶端錯誤
5xx：5開頭的是服務器錯誤web

十、一次完整的HTTP事務是怎樣的一個過程？

基本流程：ajax
1. 域名解析
2. 發起TCP的3次握手
3. 創建TCP鏈接後發起http請求
4. 服務器端響應http請求，瀏覽器獲得html代碼
5. 瀏覽器解析html代碼，並請求html代碼中的資源
6. 瀏覽器對頁面進行渲染呈現給用戶

11：從輸入url到顯示頁面，都經歷了什麼

通常會經歷如下幾個過程：
一、首先，在瀏覽器地址欄中輸入url
二、瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存，若是緩存中有，會直接在屏幕中顯示頁面內容。若沒有，則跳到第三步操做。
三、在發送http請求前，須要域名解析(DNS解析)(DNS（域名系統，Domain Name System）是互聯網的一項核心服務，它做爲能夠將域名和IP地址相互映射的一個分佈式數據庫，可以令人更方便的訪問互聯網，而不用去記住IP地址。)，解析獲取相應的IP地址。
四、瀏覽器向服務器發起tcp鏈接，與瀏覽器創建tcp三次握手。（TCP即傳輸控制協議。TCP鏈接是互聯網鏈接協議集的一種。）
五、握手成功後，瀏覽器向服務器發送http請求，請求數據包。
六、服務器處理收到的請求，將數據返回至瀏覽器
七、瀏覽器收到HTTP響應
八、讀取頁面內容，解析html源碼
九、生成Dom樹、解析css樣式、js交互，瀏覽器渲染
十、客戶端和服務器交互
十一、ajax查詢

十二、常見的兼容性問題，列舉三種

所謂的瀏覽器兼容性問題，是指由於不一樣的瀏覽器對同一段代碼有不一樣的解析，形成頁面顯示效果不統一的狀況。在大多數狀況下，咱們的需求是，不管用戶用什麼瀏覽器來查看咱們的網站或者登錄咱們的系統，都應該是統一的顯示效果。因此瀏覽器的兼容性問題是前端開發人員常常會碰到和必需要解決的問題。
html，H5新標籤低版本瀏覽器沒法解析；img標籤的alt屬性不一樣瀏覽器解析不一樣；css，margin和padding屬性不一樣瀏覽器的初始值不一樣；font-size在chrome瀏覽器中最小字體是12px;
js，標準的事件綁定方法爲addEventListener，IE下是attachEvent;

1三、ajax中get請求與post請求的區別

get請求會將參數跟在url後進行傳遞，而post請求則是做爲http消息的實體內容發送給web服務器，可是這種區別對用戶是不可見的;
使用Get請求發送數據量小,Post請求發送數據量大;
get安全性很是低，post安全性較高;
在如下狀況中，請使用 POST請求：沒法使用緩存文件（更新服務器上的文件或數據庫）；向服務器發送大量數據（POST 沒有數據量限制）；
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
若符合下列任一狀況，則用GET方法：請求是爲了查找資源，HTML表單數據僅用來幫助搜索。請求結果無持續性的反作用。收集的數據及HTML表單內的輸入字段名稱的總長不超過1024個字符。

1四、ajax的原生js過程

目前Ajax技術有兩種方式實現請求：1、經過他的核心對象XHR（XMLHttpRequest的縮寫）；
2、經過window.fetch()方法進行請求。
1.經過XHR對象進行請求（原生js）代碼以下：

//一、建立XHR對象
var request = new XMLHttpRequest();//在大多數瀏覽器中，在ie五、ie6中不支持這個方式
//在ie五、ie6中兼容只需定義下面這個函數
var request;
if(window.XMLHttpRequest){
    request = new XMLHttpRequest();
}else{
    request = new ActiveXObject("Microsoft.XMLHTTP");
}


//二、進行請求完整代碼
var xhr = '';
var requestData = '';
//兼容性處理
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open('GET/POST','url',true/false);//get和post請求，true爲異步請求、false我爲同步請求,請求的URL中可帶參數進行請求
xhr.setRequestHeader("Content-type", "application/json");//添加http頭信息，該函數的順序必須是open以後，send以前
xhr.send(JSON.stringify({
    name: '小明',
    age: 20
}));//post的send(String)必需要，send用於發送請求參數，若是不須要請求體發送請求參數，則爲null。
    //send傳輸的數據是以json數據格式傳給後臺的。
//返回響應
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            //請求成功的處理函數，服務器返回的數據存入responseText屬性中
            requestData = xhr.responseText;//獲取到後臺響應的數據
            var date = JSON.parse(requestData);//將響應數據轉化成json格式，以便使用
            //使用數據
            //~~~
        }else{
            //請求數據錯誤的處理函數
        }
    }else{
        //ajax發送失敗，沒有獲得響應數據
    }
}

2.使用jQuery的$.ajax()方法實現請求，代碼以下：

$.ajax({
    type: 'GET',//請求方式
    url: 'url',//請求資源地址或請求接口
    data: {
        //請求參數
    },
    success: function(data){//服務器響應的數據都存入data中
        //請求成功處理函數
        if(data.status === '0'){
            alert(data.message);
        } else {
            //向本身的html添加服務器響應的數據
        }
    }
    error: function(){
        //請求失敗處理函數
    }
});

目前市場上已經在使用window.fetch()方法，XMLHttpRequest 是一個設計粗糙的 API、不符合關注分離（Separation of Concerns）的原則，配置和調用方式很是混亂，並且基於事件的異步模型寫起來也沒有現代的 ·Promise，generator/yield，async/await· 友好。Fetch 的出現就是爲了解決XHR的問題

請求代碼以下：

window.fetch(url).then(function(response){//響應值放入response中
    return response.json();//用json()方法把相應的數據轉化爲javascript對象
}).then(function(data)
    //請求成功處理函數
}).catch(function(e){
    //請求失敗處理函數
})

1五、頁面中如何響應鼠標點擊並提取點擊座標

document.onclick = clickStat;
function clickStat() {
    var e = arguments[0] || window.event,x = '',y = '';
    if(e.clientX || e.clientY){
        x = e.clientX;
        y = e.clientY;
    }else{//兼容ie
        x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
        y = e.clientY + document.documentElement.scrollTop;
    }
    console.log(x,y)
}

1六、ajax請求時，如何解析JSON數據

eval();//此方法不推薦
eval( '(' + jsonDate + ')' );

JSON.parse();//推薦方法
JSON.parse( jsonDate );
eval();方法解析的時候不會去判斷字符串是否合法，並且json對象中的js方法也會被執行，這是很是危險的；

1七、寫出3個使用this的典型應用

在html元素事件屬性中使用，如：

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

構造函數

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

input點擊，獲取值

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

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八、比較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'

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

變量的做用域
要理解閉包，首先必須理解Javascript特殊的變量做用域。
變量的做用域分類：全局變量和局部變量。
特色：
一、函數內部能夠讀取函數外部的全局變量；在函數外部沒法讀取函數內的局部變量。
二、函數內部聲明變量的時候，必定要使用var命令。若是不用的話，你實際上聲明瞭一個全局變量！
使用閉包的注意點

一、濫用閉包，會形成內存泄漏：因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。
二、會改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

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

什麼是跨域？

因爲瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不一樣即爲跨域。存在跨域的狀況：

網絡協議不一樣，如http協議訪問https協議。

端口不一樣，如80端口訪問8080端口。

域名不一樣，如qianduanblog.com訪問baidu.com。

子域名不一樣，如abc.qianduanblog.com訪問def.qianduanblog.com。

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

跨域請求資源的方法：

一、porxy代理

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

    實現方法：經過nginx代理；

    注意點：一、若是你代理的是https協議的請求，那麼你的proxy首先須要信任該證書（尤爲是自定義證書）或者忽略證書檢查，不然你的請求沒法成功。

二、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>

缺點：

　　一、這種方式沒法發送post請求（這裏）

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

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

定義和用法：垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程當中使用的內存。
原理：垃圾收集器會按期（週期性）找出那些不在繼續使用的變量，而後釋放其內存。可是這個過程不是實時的，由於其開銷比較大，因此垃圾回收器會按照固定的時間間隔週期性的執行。
實例以下：

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所指向，因此該塊內存並不會被釋放。

垃圾回收策略：標記清除(較爲經常使用)和引用計數。
標記清除：

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

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

引用計數：

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

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

內存管理
一、何時觸發垃圾回收？

垃圾回收器週期性運行，若是分配的內存很是多，那麼回收工做也會很艱鉅，肯定垃圾回收時間間隔就變成了一個值得思考的問題。

IE6的垃圾回收是根據內存分配量運行的，當環境中的變量，對象，字符串達到必定數量時觸發垃圾回收。垃圾回收器一直處於工做狀態，嚴重影響瀏覽器性能。

IE7中，垃圾回收器會根據內存分配量與程序佔用內存的比例進行動態調整，開始回收工做。

二、合理的GC方案：(1)、遍歷全部可訪問的對象; (2)、回收已不可訪問的對象。

三、GC缺陷：(1)、中止響應其餘操做；

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

開發過程當中遇到的內存泄露狀況，如何解決的？
一、定義和用法：

內存泄露是指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束。C#和Java等語言採用了自動垃圾回收方法管理內存，幾乎不會發生內存泄露。咱們知道，瀏覽器中也是採用自動垃圾回收方法管理內存，但因爲瀏覽器垃圾回收方法有bug，會產生內存泄露。

二、內存泄露的幾種狀況:

1.意外的全局變量引發的內存泄露
function leak(){  
  leak="xxx";//leak成爲一個全局變量，不會被回收  
}
2.閉包引發的內存泄露

3.沒有清理的DOM元素引用

4.被遺忘的定時器或者回調 5）子元素存在引發的內存泄露

(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;
}

2二、如何判斷一個變量是對象仍是數組？

判斷數組和對象分別都有好幾種方法，其中用Object.prototype.toString.call()兼容性最好。

2三、定時器的執行順序或機制。

由於js是單線程的，瀏覽器遇到setTimeout或者setInterval會先執行完當前的代碼塊，在此以前會把定時器推入瀏覽器的待執行事件隊列裏面，等到瀏覽器執行完當前代碼以後會看一下事件隊列裏面有沒有任務，有的話才執行定時器的代碼。
因此即便把定時器的時間設置爲0仍是會先執行當前的一些代碼。

2四、Javascript中callee和caller的做用？

caller是返回一個對函數的引用，該函數調用了當前函數；caller返回調用者，指向當前函數的直接父函數
callee是返回正在被執行的function函數，也就是所指定的function對象的正文。callee是被執行的function對象，他是arguments的一個屬性，就是指向當前函數b的父函數a
callee, caller不建議使用，由於這兩個屬性在嚴格模式(use strict)下都不存在。

2五、Web Storage與Cookie相比存在的優點：

(1)、存儲空間更大：IE8下每一個獨立的存儲空間爲10M，其餘瀏覽器實現略有不一樣，但都比Cookie要大不少。

(2)、存儲內容不會發送到服務器：當設置了Cookie後，Cookie的內容會隨着請求一併發送的服務器，這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。

(3)、更多豐富易用的接口：Web Storage提供了一套更爲豐富的接口，如setItem,getItem,removeItem,clear等,使得數據操做更爲簡便。cookie須要本身封裝。

(4)、獨立的存儲空間：每一個域（包括子域）有獨立的存儲空間，各個存儲空間是徹底獨立的，所以不會形成數據混亂。

2六、瀏覽器緩存有哪些，一般緩存有哪幾種

http緩存

websql

cookie

localstorage

sessionstorage

2七、document.write和innerHTML的區別：

document.write是直接寫入到頁面的內容流，若是在寫以前沒有調用document.open, 瀏覽器會自動調用open。每次寫完關閉以後從新調用該函數，會致使頁面被重寫。

innerHTML則是DOM頁面元素的一個屬性，表明該元素的html內容。你能夠精確到某一個具體的元素來進行更改。若是想修改document的內容，則須要修改document.documentElement.innerElement。

innerHTML將內容寫入某個DOM節點，不會致使頁面所有重繪

2八、xml和json的區別，請用四個詞語來形容

JSON相對於XML來說，數據的體積小，傳遞的速度更快些

JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互

XML對數據描述性比較好；

JSON的速度要遠遠快於XML

2九、new操做符到底到了什麼

var Func=function(){};  

var func=new Func ();  

new共通過了4幾個階段

一、建立一個空對象
    var obj=new Object();  


二、設置原型鏈
    obj.__proto__= Func.prototype;  


三、讓Func中的this指向obj，並執行Func的函數體。
    var result =Func.call(obj); 
    

四、判斷Func的返回值類型：

    若是是值類型，返回obj。若是是引用類型，就返回這個引用類型的對象。

    if (typeof(result) == "object"){  
        func=result;  
    }else{  
        func=obj;;  
    }      

(1) 建立一個新對象；
(2) 將構造函數的做用域賦給新對象（所以 this 就指向了這個新對象） ；
(3) 執行構造函數中的代碼（爲這個新對象添加屬性） ；
(4) 返回新對象。

30、簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；

異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

3一、sessionStorage 、localStorage 和 cookie 之間的區別

共同點：用於瀏覽器端存儲的緩存數據

不一樣點：

(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；

    web storage,會將數據保存到本地，不會形成寬帶浪費；

(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;

(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；

    sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。