摘要：創建類中并沒有真正的類，但中有構造函數和運算符。任何函數都可以用作構造函數，構造函數必須使用運算符作為前綴來創建新的實例。調用構造函數時不要丟掉關鍵字。這里使用基于原型的繼承，而沒有用到構造函數和關鍵字。

JavaScript中并沒有真正的類，但JavaScript中有構造函數和new運算符。構造函數用來給實例對象初始化屬性和值。任何JavaScript函數都可以用作構造函數，構造函數必須使用new運算符作為前綴來創建新的實例。

new運算符改變了函數的執行上下文，同時改變了return語句的行為。實際上，使用new和構造函數很類似于傳統的實現了類的語言：

var Person = function (name) {
    this.name = name;
};

//實例化一個Person
var alice = new Person("alice");

//檢查這個實例
assert(alice instanceof Person);

如果不使用new運算符而是：Person("bob";)這個函數只會返回undefined，并且執行上下文是window(全局)對象，無意間創建了一個全局變量name。調用構造函數時不要丟掉new關鍵字。

在JavaScript中，在構造函數中給類添加函數和給對象添加屬性是一樣的：

Person.find - function (id) {};
var person = Person.find(1);

要想給構造函數添加實例函數，則需要用到構造函數的prototype：

Person.prototype.breath = function(){};
var person = new Person;
person.breath();

當事件冒泡時，可以通過stopPropagation()函數來終止冒泡，這個函數是event對象中的方法。比如這段代碼，任何父節點事件回調都不會觸發：

button.addEventListener("click", function (e) {
    e.stopPropagation();
}, false);

和上面提到的函數stopPropagation()和preventDefault()一樣，event對象還包含很多有用的屬性。

從事件冒泡開始就發生了事件委托，我們可以直接給父元素綁定事件監聽，用來檢測在其子元素內發生的事件。

//在ul列表上做了事件委托
list.addEventListener("click", function (e) {
    if (e.currentTarget.tagName == "li") {
        return false;
    }
}, false);

這里使用Object.create()來構造我們的ORM。這里使用基于原型的繼承，而沒有用到構造函數和new關鍵字。

Object.create()只有一個參數即原型對象，它返回一個新對象，這個新對象的原型就是傳入的參數。換句話說，傳入一個對象，返回一個繼承了這個對象的新對象。

有些瀏覽器沒有Object.create()方法，比如IE，可以模擬出該函數：

if (typeof Object.create !== "function") {
    Object.create = function (o) {
        function F() {
        }

        F.prototype = o;
        return new F();
    }
}

JSONP(JSON with padding)，這是另一種從遠程服務器抓取數據的方式。原理是通過創建一個script標簽，所轄的外部文件包含一段JSON數據，數據是由服務器所返回的，作為參數包裝在一個函數調用中。script標簽獲取腳本文件并不受跨域限制，所有瀏覽器都支持這種技術。

//設置一個值
localStorage["someData"] = "wem";
//存儲數據的個數
var itemsStored = localStorage.length;
//設置一個項(是一種hash寫法)
localStorage.setItem("someData", "wem");
//得到一個已經存儲的值，如果不存在就返回Null
localStorage.getItem("someData");//"wem";
//刪除一個項，如果不存在就返回null
localStorage.removeItem("someData");
//清空本地存儲
localStorage.clear();

數據均存儲為字符串，所以如果你想保存的數據是對象或數字，則必須自己做類型轉換，如果使用JSON的話，則需要將對象先做序列化處理再保存它們，從本地存儲中讀取JSON時也需要將它轉換為對象：

var object = {some: "boject"};
//序列化并保存一個對象
localStorage.setItem("seriData", JSON.stringify(object));
//讀取并將JSON轉換為對象
var result = JSON.parse(localStorage.getItem("seriData"));

var views = document.getElementById("views");
views.innerHTML = "";//將元素內容清空
var container = document.createElement("div");
container.id = "user";
var name = document.createElement("span");
name.innerHTML = data.name;
container.appendChild(name);
views.appendChild(container);

有時候用戶可能會看到頁面閃了一下，出現一部分沒有交互行為的內容快速閃過(FUBC)，比如在JavaScript執行之前會有一部分無樣式的頁面原始內容閃爍一下。如果你不依賴JavaScript來修改初始頁面的樣式，問題其實并不嚴重。但是如果依賴JavaScript來操作樣式，則需要將樣式提取出來放入初始化CSS之中，比如隱藏一些元素或展示一個加載指示器，指示頁面正在加載中。

HTML5的文件操作有一定的安全限制，主要的限制是只有被用戶選中的文件才能被訪問。將文件拖曳至瀏覽器中、選擇要輸入的文件或將文件粘貼至Web應用中，這些操作當然可以滿足這一安全限制。盡管已經有人實現了“基于JavaScript的文件系統”，但這里的訪問都是基于沙箱的。顯然，允許JavaScript無限制的操作文件會帶來很嚴重的安全風險。

在HTML5中使用File對象來表示文件，它有三個屬性：

name：文件名，這是一個只讀字符串；

size：文件大小，這是一個只讀的整數；

type：文件的MIME類型，是一個只讀字符串，如果類型沒有指定就是空字符串；

出于安全的原因，文件的路徑是無法得到的。

拖曳的實現非常簡單。可以將元素的draggable屬性設置為true來啟用元素的拖曳。

WebSocket是HTML5規范的一部分，提供了基于TCP的雙向的、全雙工的socket連接。這意味著服務器可以直接將數據推送給客戶端，而不需要開發者求助于長輪詢或插件來實現。和之前的服務器推的技術相比，WebSocket有著巨大的優勢，因為WebSocket是全雙工的，而不是基于HTTP的，一旦建立鏈接就不會斷掉。

提高性能：減少HTTP請求的數量。每一個HTTP請求除了有TCP開銷以外，還包含了大量的頭信息。保持最小的獨立連接數可以保證用戶的頁面家在速度更快。

將多個腳本文件合并成為一個腳本文件，或將多個CSS合并成為一個樣式表，能減少頁面渲染所需的HTTP連接的數量。可以在部署或運行時這樣做。

使用CSS Sprites技術合并多張小圖成為一張大圖，然后使用CSS的background-image和background-position屬性在頁面中顯示對應的圖片。只需要設定圖片要顯示的尺寸和背景位置的偏移坐標。

避免重定向也是減少HTTP請求的數量的方法。

理解瀏覽器如何下載資源也很重要。為了加快頁面渲染，現代瀏覽器并行下載所需的資源。但是，在所有的樣式表和腳本下載完成之前，頁面是不會開始渲染的。

script標簽的defer屬性：設置defer的腳本將和其他資源一起并行下載，它們是不會阻塞頁面的渲染。HTML5還引入了一個新的腳本下載和執行的模式，稱作async。通過設置async屬性，腳本將在完成下載后等待合適的時機執行代碼。這意味著有可能異步不會按照它們在頁面中出現的順序執行代碼，這又可能導致腳本執行如有依賴順序時出錯。如果腳本沒有依賴關系，async則是很有用的。

緩存就是將最近請求的資源存儲到本地，以便接下來的請求能從磁盤中使用這些資源，而不用再次去下載。

針對靜態資源，可以通過添加一個表示“在很遠的將來才過期”的Expires頭，讓緩存“永不”失效。這將保證瀏覽器只會下載一次該資源。所有的靜態資源文件都應該這樣設置，包括腳本、樣式表和圖片。Expires: Thu, 20 March 2015 00:00:00 GMT建議相對于當前日期設置一個表示“很遠的將來”的失效日期。

但是如果想在那個時間之前讓資源過期怎么辦？在引用資源文件的URL查詢參數中添加文件的修改時間。這樣一來，任何時候文件被修改，資源文件的URL都會改變，也即清除了緩存。

HTTP1.1引入了一類新的頭，Cache-Control。它帶給開發者更高級的緩存，同時還彌補了Expires的不足。Cache-Control的控制頭信息有很多選項，可用逗號隔開：Cache-Control:max-age=3600, must-revalidate

Cache-Control參數：

JavaScript源碼壓縮是從腳本文件中刪除不必要的字符，它不改變功能。樣式表和HTML文件也可以被壓縮。

在Web上Gzip是最流行并且支持最廣泛的壓縮方式。

內容分發網絡(或叫CDN)為你的站點提供靜態資源內容服務，以減少它們的加載時間。用戶和Web服務器之間的距離對加載時間有直接的影響。CDN將你的內容部署在跨越多個地理位置的服務器上，故當用戶發起一個請求時，可從就近的服務器得到響應資源。