js面試題（中）

JS延遲加載的方式有哪些？

JS的延遲加載有助與提升頁面的加載速度。
defer和async、動態建立DOM方式（用得最多）、按需異步載入JS
defer：延遲腳本。當即下載，但延遲執行（延遲到整個頁面都解析完畢後再運行），按照腳本出現的前後順序執行。
async：異步腳本。下載完當即執行，但不保證按照腳本出現的前後順序執行。

同步和異步的區別

同步的概念在操做系統中：不一樣進程協同完成某項工做而前後次序調整（經過阻塞、喚醒等方式），同步強調的是順序性，誰先誰後。異步不存在順序性。
同步：瀏覽器訪問服務器，用戶看到頁面刷新，從新發請求，等請求完，頁面刷新，新內容出現，用戶看到新內容以後進行下一步操做。
異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器在後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容。

頁面編碼和被請求的資源編碼若是不一致如何處理？

若請求的資源編碼，如外引js文件編碼與頁面編碼不一樣。可根據外引資源編碼方式定義爲 charset="utf-8"或"gbk"。
好比：http://www.yyy.com/a.html 中嵌入了一個http://www.xxx.com/test.js
a.html 的編碼是gbk或gb2312的。 而引入的js編碼爲utf-8的 ，那就須要在引入的時候
<script src="http://www.xxx.com/test.js&amp;quot; charset="utf-8"></script>

call,apply,bind

那些操做會形成內存泄漏

全局變量、閉包、DOM清空或刪除時，事件未清除、子元素存在引用

flash和js經過什麼類如何交互

Flash提供了ExternalInterface接口與JavaScript通訊，ExternalInterface有兩個方法，call和addCallback，call的做用是讓Flash調用js裏的方法，addCallback是用來註冊flash函數讓js調用。

Flash與Ajax各自的優缺點？

Flash：適合處理多媒體、矢量圖形、訪問機器。但對css、處理文本不足，不容易被搜索。
Ajax：對css、文本支持很好，但對多媒體、矢量圖形、訪問機器不足。

XML與JSON的區別

1) 數據體積方面。JSON相對於XML來說，數據的體積小，傳遞的速度更快些。
2) 數據交互方面。JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。
3) 數據描述方面。JSON對數據的描述性比XML較差。
4) 傳輸速度方面。JSON的速度要遠遠快於XML。

Web Worker和Web Socket

web socket：在一個單獨的持久鏈接上提供全雙工、雙向的通訊。使用自定義的協議（ws://、wss://），同源策略對web socket不適用。
web worker：運行在後臺的JavaScript，不影響頁面的性能。
建立worker：var worker = new Worker(url);
向worker發送數據：worker.postMessage(data);
接收worker返回的數據：worker.onmessage
終止一個worker的執行：worker.terminate();

JS垃圾回收機制

1) 標記清除：
這個算法把「對象是否再也不須要」簡化定義爲「對象是否能夠得到」。
這個算法假定設置一個叫作根（root）的對象（在Javascript裏，根是全局對象）。按期的，垃圾回收器將從根開始，找全部從根開始引用的對象，而後找這些對象引用的對象。從根開始，垃圾回收器將找到全部能夠得到的對象和全部不能得到的對象。

2) 引用計數：
這是最簡單的垃圾收集算法。此算法把「對象是否再也不須要」簡化定義爲「對象有沒有其餘對象引用到它」。若是沒有引用指向該對象（零引用），對象將被垃圾回收機制回收。
該算法有個限制：沒法處理循環引用。兩個對象被建立，並互相引用，造成了一個循環。它們被調用以後不會離開函數做用域，因此它們已經沒有用了，能夠被回收了。然而，引用計數算法考慮到它們互相都有至少一次引用，因此它們不會被回收。
前端面試查漏補缺--(二) 垃圾回收機制

web應用從服務器主動推送data到客戶端的方式

JavaScript數據推送：commet（基於http長鏈接的服務器推送技術）。
基於web socket的推送：SSE（server-send Event）

如何刪除一個cookie

1） 將cookie的失效時間設置爲過去的時間（expires）

document.cookie = ‘user=’+ encodeURIComponent(‘name’) + ';
expires=’+ new Date(0);

2） 將系統時間設置爲當前時間往前一點時間

var data = new Date();
date.setDate(date.getDate()-1);

Ajax

• 如何實現ajax請求

1.經過實例化一個XMLHttpRequest對象獲得一個實例，調用實例的open方法爲此次 ajax請求設定相應的http方法、相應的地址和以及是否異步，固然大多數狀況下咱們都是選異步， 以異步爲例，以後調用send方法ajax請求，這個方法能夠設定須要發送的報文主體，而後經過 監聽readystatechange事件，經過這個實例的readyState屬性來判斷這個ajax請求的狀態，其中分爲0,1,2,3,4這四種 狀態，當狀態爲4的時候也就是接收數據完成的時候，這時候能夠經過實例的status屬性判斷這個請求是否成功

var xhr = new XMLHttpRequest();
xhr.open('get', 'aabb.php', true);
xhr.send(null);
xhr.onreadystatechange = function() {
  if(xhr.readyState==4) {
    if(xhr.status==200) {
      console.log(xhr.responseText);
    }
  }
}

• Ajax請求的頁面歷史記錄狀態問題？

  • 經過location.hash記錄狀態，讓瀏覽器記錄Ajax請求時頁面狀態的變化。
  • 經過HTML5的history.pushstate，來實現瀏覽器地址欄的無刷新改變

• Ajax的優點

  • 無刷新頁面請求，使產品更快，更小更友好
  • 服務器端的任務轉嫁到客戶端處理
  • 減輕瀏覽器負擔，節約帶寬
  • 基於標準化對象，不須要安裝特定的插件
  • 完全將頁面與數據分離

• Ajax侷限性

  • AJAX 不支持瀏覽器 back 按鈕。(沒法使用回退按鈕)
  • 安全問題 AJAX 暴露了與服務器交互的細節。
  • 對搜索引擎的支持比較弱。不會執行你的 JS 腳本，只會操做你的網頁源代碼；(不利於網頁的SEO)
  • 跨域請求有必定限制。解決方式：jsonp；(不能發送跨域請求)

attribute與property的區別？

attribute是dom元素在文檔中做爲html標籤擁有的屬性
property是dom元素在js中做爲對象擁有的屬性。
因此，對於html的標準屬性來講，attribute和property是同步的，是會自動更新的。但對於自定義屬性，他們不一樣步。

js事件

• js事件委託機制

1. 簡要介紹事件代理，以及何時使用，事件代理髮生在事件處理流程的哪一個階段，有什麼好處？

事件代理就是說咱們將事件添加到原本要添加事件的父節點，將事件委託給父節點來觸發處理函數，這一般會在 這一般會使用在大量的同級元素須要添加同一類事件的時候，好比一個動態的很是多的列表，須要爲每一個列表項都添加 點擊事件，這時可使用事件代理，經過判斷e.target.nodeName來判斷髮生的具體元素，從而判斷是不是在 列表項中觸發，這樣的好處是能夠減小事件綁定，同時動態的DOM結構仍然能夠監聽。事件代理髮生在冒泡階段。

參考：
淺析JavaScript的事件代理和委託

• 請描述一下 JavaScript 事件冒泡機制
• DOM事件模型是如何的,編寫一個EventUtil工具類實現事件管理兼容

1.DOM事件包含捕獲（capture）和冒泡（bubble）兩個階段：捕獲階段事件從window開始觸發事件而後經過祖先節點一次傳遞到觸發事件的DOM元素上；冒泡階段事件從初始元素依次向祖先節點傳遞直到window
2.標準事件監聽elem.addEventListener(type, handler, capture)/elem.removeEventListener(type, handler, capture)：handler接收保存事件信息的event對象做爲參數，event.target爲觸發事件的對象，handler調用上下文this爲綁定監聽器的對象，event.preventDefault()取消事件默認行爲，event.stopPropagation()/event.stopImmediatePropagation()取消事件傳遞
3.老版本IE事件監聽elem.attachEvent('on'+type, handler)/elem.detachEvent('on'+type, handler)：handler不接收event做爲參數，事件信息保存在window.event中，觸發事件的對象爲event.srcElement，handler執行上下文this爲window使用閉包中調用handler.call(elem, event)可模仿標準模型，而後返回閉包，保證了監聽器的移除。event.returnValue爲false時取消事件默認行爲，event.cancleBubble爲true時取消時間傳播
4.一般利用事件冒泡機制託管事件處理程序提升程序性能。

/**
 * 跨瀏覽器事件處理工具。只支持冒泡。不支持捕獲
 * @author  (qiu_deqing@126.com)
 */

var EventUtil = {
    getEvent: function (event) {
        return event || window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    // 返回註冊成功的監聽器，IE中須要使用返回值來移除監聽器
    on: function (elem, type, handler) {
        if (elem.addEventListener) {
            elem.addEventListener(type, handler, false);
            return handler;
        } else if (elem.attachEvent) {
            var wrapper = function () {
              var event = window.event;
              event.target = event.srcElement;
              handler.call(elem, event);
            };
            elem.attachEvent('on' + type, wrapper);
            return wrapper;
        }
    },
    off: function (elem, type, handler) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, handler, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, handler);
        }
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else if ('returnValue' in event) {
            event.returnValue = false;
        }
    },
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else if ('cancelBubble' in event) {
            event.cancelBubble = true;
        }
    },
    /**
     * keypress事件跨瀏覽器獲取輸入字符
     * 某些瀏覽器在一些特殊鍵上也觸發keypress，此時返回null
     **/
     getChar: function (event) {
        if (event.which == null) {
            return String.fromCharCode(event.keyCode);  // IE
        }
        else if (event.which != 0 && event.charCode != 0) {
            return String.fromCharCode(event.which);    // the rest
        }
        else {
            return null;    // special key
        }
     }
};

正則表達式

• 註冊帳號要求以字母開頭，能夠包含字母、數字、下劃線，請寫出驗證該帳號的正則表達式

/^[a-zA-Z]w+$/