(1)減少HTTP請求次數(shù)

• 盡量合并圖片、CSS、JS。

舉例：
如有5個(gè)css文件，則需要發(fā)出5次http請求，第一次訪問頁面需要等待很長世間。
如合并成1個(gè)css文件，則發(fā)出1次http請求，節(jié)省網(wǎng)絡(luò)請求時(shí)間，加快頁面的加載。

• Expires和Cache-Control （多由服務(wù)器端去設(shè)置）
  瀏覽器在第一次訪問頁面時(shí)向服務(wù)器請求資源，并緩存起來，下次再訪問時(shí)會判斷在緩存中是否已有該資源且有沒有更新過，如果已有該資源且未更新過，則直接從瀏覽器緩存中讀取。

(1)Expires 表示存在時(shí)間:
允許客戶端在這個(gè)時(shí)間之前不去檢查（發(fā)請求），等同max-age的效果。但是如果同時(shí)存在
則被Cache-Control的max-age覆蓋。
(2)Cache-control用于控制HTTP緩存:

1.原理
通過HTTP的Expires和Cache-Control，使已緩存資源不再發(fā)起http請求。
（將靜態(tài)內(nèi)容設(shè)為永不過期，或者很長時(shí)間后才過期。）

2.應(yīng)用
通過HTTP的META設(shè)置expires和cache-control
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />
上述設(shè)置僅為舉例，實(shí)際使用其一即可。
這樣寫的話僅對該網(wǎng)頁有效，對網(wǎng)頁中的圖片或其他請求無效，并不會做任cache。

(2)對HTTP傳輸進(jìn)行壓縮 (gzip壓縮)（多由服務(wù)端去設(shè)置）

即在js，css、圖片等資源已經(jīng)壓縮的基礎(chǔ)上，在HTTP傳輸過程中的再次壓縮。

1.原理
客戶端：通過Accept-Encoding頭來聲明瀏覽器支持的壓縮方式，
服務(wù)端：通過content-Encoding來啟用壓縮，配置壓縮的文件類型，壓縮方式。
（當(dāng)客戶端的請求到達(dá)服務(wù)器，服務(wù)器對資源進(jìn)行壓縮后，返回給客戶端，客戶端按照相應(yīng)的方式進(jìn)行解析。）

客戶端（HTTP請求頭）——accept-encoding: gzip, deflate, sdch, br
服務(wù)器（HTTP響應(yīng)頭）——content-encoding:gzip

2.應(yīng)用
以tomcat服務(wù)器的配置為例：
找到tomcat安裝目錄下的conf文件夾下的server.xml文件，進(jìn)行如下配置，重啟tomcat即可：
①　compress="on" ：表示開啟壓縮。
②　compressionMinSize="2048"：表示對大于2KB的文件進(jìn)行壓縮
③　compressableMimeType="text/html,text/xml,application/
JavaScript,text/css,text/plain,image/png,image/jpeg,image/gif" //表示將進(jìn)行壓縮的文件類型

注意：不應(yīng)該對圖片進(jìn)行再壓縮，因?yàn)閳D片本身已經(jīng)被壓縮過
(如果再進(jìn)行g(shù)zip壓縮，可能得到的結(jié)果是和圖片本身大小相差不大，純粹是浪費(fèi)服務(wù)器的CPU資源來做無用功。)

3.優(yōu)缺點(diǎn)
對HTTP傳輸內(nèi)容進(jìn)行壓縮的優(yōu)、缺點(diǎn)：
①　優(yōu)點(diǎn)：減少HTTP響應(yīng)時(shí)間，提升傳輸效率。
②　缺點(diǎn)：壓縮過程占用服務(wù)器額外的CPU周期，客戶端也要對壓縮文件進(jìn)行解壓縮，這也需要占用部分時(shí)間。

（3）將CSS文件放在頂部

原理：
將CSS放在底部，頁面可以逐步呈現(xiàn)，
但在CSS下載并解析完畢后，已經(jīng)呈現(xiàn)的文字和圖片就要需要根據(jù)新的樣式重繪，這是一種不好的用戶體驗(yàn)。

（4）將javascript放在底部

原理：
script沒有async和defer時(shí)，JS文件將在下載后立即執(zhí)行。這種情況下，script放在頂部會阻塞頁面呈現(xiàn)，
在網(wǎng)速慢的情況下會導(dǎo)致“白屏”，直到腳本下載完畢才繼續(xù)呈現(xiàn)頁面。因此，script放在底部可以讓頁面盡快呈現(xiàn)。

script全部放在head中會出現(xiàn)的問題：
在需要操作body中的某元素時(shí)，可能找不到該元素，因此，若要放在head中，
一般需要綁定一個(gè)監(jiān)聽windows.onload=function(){ ... }，
當(dāng)文檔全部解析完之后再執(zhí)行script代碼。

(5)cookie優(yōu)化

cookie原理：

1、去除沒有必要的cookie，如果網(wǎng)頁不需要cookie就完全禁掉。

2、將cookie的大小減到最小。
由于cookie在訪問對應(yīng)域名下的資源時(shí)都會通過HTTP請求發(fā)送到服務(wù)器，
因此，減小cookie的大小，能減小HTTP請求報(bào)文的大小，提高響應(yīng)速度。

3、設(shè)置合適的過期時(shí)間，較長的過期時(shí)間可以提高響應(yīng)速度。
給cookie添加一個(gè)過期時(shí)間，則cookie信息將存儲到硬盤上，即使瀏覽器退出Cookie還會存
在。只要Cookie未被清除且還在過期時(shí)間內(nèi)，該Cookie就會在訪問對應(yīng)域名時(shí)發(fā)送給服務(wù)器。

4、通過使用不同的domain減少cookie的使用。
cookie在訪問對應(yīng)域名下的資源時(shí)都會通過HTTP請求發(fā)送到服務(wù)器，但在訪問一些資源，如js，css和圖片時(shí)，
大多數(shù)情況下cookie是多余的，可以使用不同的domain來存儲這些靜態(tài)資源，這樣訪問這些資源時(shí)就不會發(fā)送
多余的cookie，從而提高響應(yīng)速度。

(6)可緩存的AJAX

異步請求同樣的造成用戶等待，所以使用ajax請求時(shí)，要主動告訴瀏覽器如果該請求有緩存就去請求緩存內(nèi)容。
如下代碼片段: cache:true就是顯式的要求如果當(dāng)前請求有緩存的話，直接使用緩存
$.ajax({
     url : 'url',
     dataType : "json",
     cache: true,   //如果有緩存，就直接使用緩存
     success : function(son, status){    
      }

(7)使用GET來完成AJAX請求

當(dāng)使用XMLHttpRequest時(shí)，瀏覽器中的POST方法是一個(gè)“兩步走”的過程：首先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)。

因此使用GET獲取數(shù)據(jù)時(shí)更加有意義。

(8) 避免404

比如外鏈的css或者js文件出現(xiàn)問題返回404時(shí)，會破壞瀏覽器對文件的并行加載。

并且瀏覽器會把試圖在返回的404響應(yīng)內(nèi)容中找到可能有用的部分當(dāng)作JavaScript代碼來執(zhí)行。

(9)避免使用CSS表達(dá)式

例如：
font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

這個(gè)表達(dá)式會持續(xù)的在頁面上計(jì)算樣式，影響頁面的性能。并且css表達(dá)式只被IE支持。

(10)避免空的src和href

當(dāng)link標(biāo)簽的href屬性為空、script標(biāo)簽的src屬性為空的時(shí)候，瀏覽器渲染的時(shí)候會把當(dāng)前頁面的URL

作為它們的屬性值，從而把頁面的內(nèi)容加載進(jìn)來作為它們的值。所以要避免犯這樣的疏忽

(11)縮小favicon.ico并緩存

https://www.ico.la/ 提供的在線免費(fèi)創(chuàng)建favicon.ico文件服務(wù).

(1)使它盡量在1KB左右。使用ico格式，不要使用png,jpg等其他格式。
(2)將該文件放在單獨(dú)的主機(jī)中,例如 images.mydomain.com . 這樣可以避免在請求該文件時(shí)發(fā)送cookie. 
(3)緩存

(12)不要在HTML中縮放圖片

需要的圖片尺寸是50* 50，不要用500*500的圖片在img中設(shè)置成50*50
<img width=”50″ height=”50″ src=“hahah.jpg” alt=”hahaha” />

(13)使用CDN

網(wǎng)站上靜態(tài)資源即css、js全都使用cdn分發(fā)，圖片亦然。

(14)減少dom元素?cái)?shù)量

原理：
減少DOM數(shù)量，就會減少瀏覽器的解析負(fù)擔(dān)

(15)不要使用濾鏡

IE獨(dú)有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果。
這個(gè)濾鏡的問題在于瀏覽器加載圖片時(shí)它會終止內(nèi)容的呈現(xiàn)并且凍結(jié)瀏覽器。在每一個(gè)元素（不僅僅是圖片）
它都會運(yùn)算一次，增加了內(nèi)存開支，因此它的問題是多方面的。完全避免使用AlphaImageLoader的最好方法
就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實(shí)需要使用AlphaImageLoader，
請使用下劃線_filter又使之對IE7以上版本的用戶無效。

Javascript優(yōu)化篇

• 避免全局查找
  在一個(gè)函數(shù)中會用到全局對象存儲為局部變量來減少全局查找，因?yàn)樵L問局部變量的速度要比訪問全局變量的速度更快些

  function search() {
            //當(dāng)我要使用當(dāng)前頁面地址和主機(jī)域名
            alert(window.location.href + window.location.host);
        }
        //最好的方式是如下這樣  先用一個(gè)簡單變量保存起來
        function search() {
            var location = window.location;
            alert(location.href + location.host);
        }

• 定時(shí)器
  如果針對的是不斷運(yùn)行的代碼，不應(yīng)該使用setTimeout，而應(yīng)該是用setInterval，因?yàn)閟etTimeout每一次都會初始化一個(gè)定時(shí)器，而setInterval只會在開始的時(shí)候初始化一個(gè)定時(shí)器

var timeoutTimes = 0;
        function timeout() {
            timeoutTimes++;
            if (timeoutTimes < 10) {
                setTimeout(timeout, 10);
            }
        }
        timeout();
        //可以替換為：
        var intervalTimes = 0;
        function interval() {
            intervalTimes++;
            if (intervalTimes >= 10) {
                clearInterval(interv);
            }
        }
        var interv = setInterval(interval, 10);

• 字符串連接
  如果要連接多個(gè)字符串，應(yīng)該少使用+=，如
  s+=a;
  s+=b;
  s+=c;
  應(yīng)該寫成s+=a + b + c；
  而如果是收集字符串，比如多次對同一個(gè)字符串進(jìn)行+=操作的話，最好使用一個(gè)緩存，使用JavaScript數(shù)組來收集，最后使用join方法連接起來

     var buf = [];
        for (var i = 0; i < 100; i++) {
            buf.push(i.toString());
        }
        var all = buf.join("");

• 避免with語句
  和函數(shù)類似 ，with語句會創(chuàng)建自己的作用域，因此會增加其中執(zhí)行的代碼的作用域鏈的長度，由于額外的作用域鏈的查找，在with語句中執(zhí)行的代碼肯定會比外面執(zhí)行的代碼要慢，在能不使用with語句的時(shí)候盡量不要使用with語句。

with (a.b.c.d) {
            property1 = 1;
            property2 = 2;
        }
        //可以替換為：
        var obj = a.b.c.d;
        obj.property1 = 1;
        obj.property2 = 2;

• 數(shù)字轉(zhuǎn)換成字符串
  般最好用”" + 1來將數(shù)字轉(zhuǎn)換成字符串，雖然看起來比較丑一點(diǎn)，但事實(shí)上這個(gè)效率是最高的，性能上來說：
  (“” +) > String() > .toString() > new String()

• 重復(fù)使用的調(diào)用結(jié)果，事先保存到局部變量

 //避免多次取值的調(diào)用開銷
        var h1 = element1.clientHeight + num1;
        var h2 = element1.clientHeight + num2;
        //可以替換為：
        var eleHeight = element1.clientHeight;
        var h1 = eleHeight + num1;
        var h2 = eleHeight + num2;

• 條件分支
  (1)將條件分支，按可能性順序從高到低排列：可以減少解釋器對條件的探測次數(shù)
  (2)在同一條件子的多（>2）條件分支時(shí)，使用switch優(yōu)于if：switch分支選擇的效率高于if，在IE下尤為明顯。4分支的測試，IE下switch的執(zhí)行時(shí)間約為if的一半。
  (3)使用三目運(yùn)算符替代條件分支

 if (a > b) {
            num = a;
        } else {
            num = b;
        }
        //可以替換為：
        num = a > b ? a : b;

• 避免雙重解釋
  如果要提高代碼性能，盡可能避免出現(xiàn)需要按照J(rèn)avaScript解釋的字符串，也就是
  (1)盡量少使用eval函數(shù)
  使用eval相當(dāng)于在運(yùn)行時(shí)再次調(diào)用解釋引擎對內(nèi)容進(jìn)行運(yùn)行，需要消耗大量時(shí)間，而且使用Eval帶來的安全性問題也是不容忽視的。
  (2)不要使用Function構(gòu)造器
  不要給setTimeout或者setInterval傳遞字符串參數(shù)

    var num = 0;
        setTimeout('num++', 10);
        //可以替換為：
        var num = 0;
        function addNum() {
            num++;
        }
        setTimeout(addNum, 10);

• 使用一次innerHTML賦值代替構(gòu)建dom元素
  對于大的DOM更改，使用innerHTML要比使用標(biāo)準(zhǔn)的DOM方法創(chuàng)建同樣的DOM結(jié)構(gòu)快得多。

   var frag = document.createDocumentFragment();
        for (var i = 0; i < 1000; i++) {
            var el = document.createElement('p');
            el.innerHTML = i;
            frag.appendChild(el);
        }
        document.body.appendChild(frag);
        //可以替換為：
        var html = [];
        for (var i = 0; i < 1000; i++) {
            html.push('<p>' + i + '</p>');
        }
        document.body.innerHTML = html.join('');

• 使用DocumentFragment優(yōu)化多次append
  一旦需要更新DOM,請考慮使用文檔碎片來構(gòu)建DOM結(jié)構(gòu)，然后再將其添加到現(xiàn)存的文檔中。

for (var i = 0; i < 1000; i++) {
            var el = document.createElement('p');
            el.innerHTML = i;
            document.body.appendChild(el);
        }
        //可以替換為：
        var frag = document.createDocumentFragment();
        for (var i = 0; i < 1000; i++) {
            var el = document.createElement('p');
            el.innerHTML = i;
            frag.appendChild(el);
        }
        document.body.appendChild(frag);

• 浮點(diǎn)數(shù)轉(zhuǎn)換成整型
  很多人喜歡使用parseInt()，其實(shí)parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字，而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換，我們應(yīng)該使用Math.floor()或者M(jìn)ath.round()

• 使用firstChild和nextSibling代替childNodes遍歷dom元素

• ==和===的區(qū)別
  避免在if和while語句的條件部分進(jìn)行賦值，如if (a = b)，應(yīng)該寫成if (a == b)，但是在比較是否相等的情況下，最好使用全等運(yùn)行符，也就是使用===和!==操作符會相對于==和!=會好點(diǎn)。==和!=操作符會進(jìn)行類型強(qiáng)制轉(zhuǎn)換

 var valueA = "1";
        var valueB = 1;
        if (valueA == valueB) {
            alert("Equal");
        }
        else {
            alert("Not equal");
        }
        //output: "Equal"
        if (valueA === valueB) {
            alert("Equal");
        }
        else {
            alert("Not equal");
        }
        //output: "Not equal"

• 何時(shí)用單引號，何時(shí)用雙引號
  雖然在JavaScript當(dāng)中，雙引號和單引號都可以表示字符串, 為了避免混亂，我們建議在HTML中使用雙引號，在JavaScript中使用單引號，但為了兼容各個(gè)瀏覽器，也為了解析時(shí)不會出錯，定義JSON對象時(shí)，最好使用雙引號

• 使用return語句需要注意
  一條有返回值的return語句不要用()括號來括住返回值，如果返回表達(dá)式，則表達(dá)式應(yīng)與return關(guān)鍵字在同一行，以避免壓縮時(shí)，壓縮工具自動加分號而造成返回與開發(fā)人員不一致的結(jié)果

   function F1() {
            var valueA = 1;
            var valueB = 2;
            return valueA + valueB;
        }
        function F2() {
            var valueA = 1;
            var valueB = 2;
            return
            valueA + valueB;
        }
        alert(F1());  //output: 3 
        alert(F2());  //ouput: undefined

• 每條語句末尾須加分號
  在if語句中，即使條件表達(dá)式只有一條語句也要用{}把它括起來，以免后續(xù)如果添加了語句之后造成邏輯錯

• 使用+號時(shí)需謹(jǐn)慎
  JavaScript 和其他編程語言不同的是，在 JavaScript 中，’+'除了表示數(shù)字值相加，字符串相連接以外，還可以作一元運(yùn)算符用，把字符串轉(zhuǎn)換為數(shù)字。因而如果使用不當(dāng)，則可能與自增符’++’混淆而引起計(jì)算錯誤

 var valueA = 20;
        var valueB = "10";
        alert(valueA + valueB);     //ouput: 2010 
        alert(valueA + (+valueB));  //output: 30 
        alert(valueA + +valueB);    //output:30 
        alert(valueA ++ valueB);     //Compile error

• switch語句相對if較快
  通過將case語句按照最可能到最不可能的順序進(jìn)行組織

• 位運(yùn)算較快
  當(dāng)進(jìn)行數(shù)字運(yùn)算時(shí)，位運(yùn)算操作要比任何布爾運(yùn)算或者算數(shù)運(yùn)算快

• 解耦CSS/JavaScript
  顯示問題的唯一來源應(yīng)該是CSS，行為問題的唯一來源應(yīng)該是JavaScript，層次之間保持松散耦合才可以讓你的應(yīng)用程序更加易于維護(hù)，所以像以下的代碼element.style.color=”red”盡量改為element.className=”edit”，而且不要在css中通過表達(dá)式嵌入JavaScript

• 解耦HTML/JavaScript
  JavaScript和HTML的緊密耦合：直接寫在HTML中的JavaScript、使用包含內(nèi)聯(lián)代碼的<script>元素、使用HTML屬性來分配事件處理程序等
  HTML和JavaScript的緊密耦合：JavaScript中包含HTML，然后使用innerHTML來插入一段html文本到頁面
  其實(shí)應(yīng)該是保持層次的分離，這樣可以很容易的確定錯誤的來源，所以我們應(yīng)確保HTML呈現(xiàn)應(yīng)該盡可能與JavaScript保持分離

• 解耦應(yīng)用程序/事件處理程序
  將應(yīng)用邏輯和事件處理程序相分離：一個(gè)事件處理程序應(yīng)該從事件對象中提取，并將這些信息傳送給處理應(yīng)用邏輯的某個(gè)方法中。這樣做的好處首先可以讓你更容易更改觸發(fā)特定過程的事件，其次可以在不附加事件的情況下測試代碼，使其更易創(chuàng)建單元測試

• 釋放javascript對象
  在rich應(yīng)用中，隨著實(shí)例化對象數(shù)量的增加，內(nèi)存消耗會越來越大。所以應(yīng)當(dāng)及時(shí)釋放對對象的引用，讓GC能夠回收這些內(nèi)存控件。
  對象：obj = null
  對象屬性：delete obj.myproperty
  數(shù)組item：使用數(shù)組的splice方法釋放數(shù)組中不用的item

• 釋放dom元素占用的內(nèi)存
  將dom元素的innerHTML設(shè)置為空字符串，可以釋放其子元素占用的內(nèi)存。
  在rich應(yīng)用中，用戶也許會在一個(gè)頁面上停留很長時(shí)間，可以使用該方法釋放積累得越來越多的dom元素使用的內(nèi)存。

• 避免string的隱式裝箱
  對string的方法調(diào)用，比如’xxx’.length，瀏覽器會進(jìn)行一個(gè)隱式的裝箱操作，將字符串先轉(zhuǎn)換成一個(gè)String對象。推薦對聲明有可能使用String實(shí)例方法的字符串時(shí)，采用如下寫法：
  var myString = new String(‘Hello World’);

• 通過javascript創(chuàng)建的dom對象，必須append到頁面中
  IE下，腳本創(chuàng)建的dom對象，如果沒有append到頁面中，刷新頁面，這部分內(nèi)存是不會回收的！

       function create() {
            var gc = document.getElementById('GC');
            for (var i = 0; i < 5000; i++) {
                var el = document.createElement('div');
                el.innerHTML = "test";
                //下面這句可以注釋掉，看看瀏覽器在任務(wù)管理器中，點(diǎn)擊按鈕然后刷新后的內(nèi)存變化
                gc.appendChild(el);
            }
        }

• 避免全局量（使用閉包函數(shù)）
  全局變量應(yīng)該全部字母大寫，各單詞之間用_下劃線來連接。盡可能避免全局變量和函數(shù), 盡量減少全局變量的使用，因?yàn)樵谝粋€(gè)頁面中包含的所有JavaScript都在同一個(gè)域中運(yùn)行。所以如果你的代碼中聲明了全局變量或者全局函數(shù)的話，后面的代碼中載入的腳本文件中的同名變量和函數(shù)會覆蓋掉（overwrite）你的。

//糟糕的全局變量和全局函數(shù)
var current = null;
function init(){
//...
}
function change() {
    //...
}
function verify() {
    //...
}
--
--
//解決辦法有很多，Christian Heilmann建議的方法是：
//如果變量和函數(shù)不需要在“外面”引用，那么就可以使用一個(gè)沒有名字的方法將他們?nèi)及饋怼?閉包)
(function(){
var current = null;
function init() {
    //...
}
function change() {
    //...
}
function verify() {
    //...
}
})();
--
--
//如果變量和函數(shù)需要在“外面”引用，需要把你的變量和函數(shù)放在一個(gè)“命名空間”中
//我們這里用一個(gè)function做命名空間而不是一個(gè)var，因?yàn)樵谇罢咧新暶鱢unction更簡單，而且能保護(hù)隱私數(shù)據(jù)
myNameSpace = function() {
    var current = null;

    function init() {
        //...
    }
    function change() {
        //...
    }
    function verify() {
        //...
    }
//所有需要在命名空間外調(diào)用的函數(shù)和屬性都要寫在return里面
    return {
        init: init,
        //甚至你可以為函數(shù)和屬性命名一個(gè)別名
        set: change
    };
};

• 尊重對象的所有權(quán)
  (1)不要為實(shí)例或原型添加屬性
  (2)不要為實(shí)例或者原型添加方法
  (3)不要重定義已經(jīng)存在的方法
  (4)不要重復(fù)定義其它團(tuán)隊(duì)成員已經(jīng)實(shí)現(xiàn)的方法，永遠(yuǎn)不要修改不是由你所有的對象，你可以通過以下方式為對象創(chuàng)建新的功能:
  (5)創(chuàng)建包含所需功能的新對象，并用它與相關(guān)對象進(jìn)行交互
  (6)創(chuàng)建自定義類型，繼承需要進(jìn)行修改的類型，然后可以為自定義類型添加額外功能

-循環(huán)引用
如果循環(huán)引用中包含DOM對象或者ActiveX對象，那么就會發(fā)生內(nèi)存泄露。內(nèi)存泄露的后果是在瀏覽器關(guān)閉前，即使是刷新頁面，這部分內(nèi)存不會被瀏覽器釋放。

簡單的循環(huán)引用： var el = document.getElementById('MyElement');
        var func = function () {
            //…
        }
        el.func = func;
        func.element = el;
但是通常不會出現(xiàn)這種情況。通常循環(huán)引用發(fā)生在為dom元素添加閉包作為expendo的時(shí)候。
function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
        }
        init();
init在執(zhí)行的時(shí)候，當(dāng)前上下文我們叫做context。
這個(gè)時(shí)候，context引用了el，el引用了function，function引用了context。這時(shí)候形成了一個(gè)循環(huán)引用。
//解決方如下
//解決方如下
//解決方如下
1)  置空dom對象
 function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
        }
        init();
        //可以替換為：
        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
            el = null;
        }
        init();
將el置空，context中不包含對dom對象的引用，從而打斷循環(huán)應(yīng)用。
如果我們需要將dom對象返回，可以用如下方法：
  function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
            return el;
        }
        init();
        //可以替換為：
        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
            try {
                return el;
            } finally {
                el = null;
            }
        }
        init();
//解決方如下
//解決方如下
//解決方如下
2)  構(gòu)造新的context
   function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
        }
        init();
        //可以替換為：
        function elClickHandler() {
            //……
        }
        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = elClickHandler;
        }
        init();
把function抽到新的context中，這樣，function的context就不包含對el的引用，從而打斷循環(huán)引用。