之前給客戶做了個網站，其中有這么一個功能：
文章內容中，有指向某個圖片的鏈接，鏈接內容為圖片名稱（文字），點擊之后在頁面上彈出該圖片顯示，圖片可以為png,jpg,gif等。
於是，祭出了JQuery與JQuery的插件們。彈出圖片，用了blockUI，簡單易用。
為了獲取到圖片的大小，借用了 http://www.planeart.cn/?p=1121 再談javascript圖片預加載技術 文中的代碼
HTML中，做了最基礎的鏈接，加上一個名為“image” 的css，用來做JQuery的選擇器
<a href="image/pic01.jpg" class="image">圖片1</a>
Js中如下寫：
$(document).ready(function(){
$('a.image').click(function(){
var src = $(this).attr('src');
// 之前在HTML定義了一個 #imgBox 的div作為容器
//
imgReady(src,function(){
var w = this.width ;
var h = this.height ;
$('#imgBox').html('').append($(this));
$.blockUI({
message: $('#imgBox'),
css: {
top: '50%',
left: '50%',
textAlign: 'center',
marginLeft: '-' + (w / 2) + 'px',
marginTop: '-' + (h / 2) + 'px',
width: (parseInt(w) + 30) + 'px',
height: (parseInt(h) + 30) + 'px',
background: 'none'
}
});
$('.blockOverlay').attr('title', '單擊關閉').click($.unblockUI);
});
看起來就這么簡單，用chrom和ie9測試過后，沒有問題就交給了客戶。可沒過幾天，客戶反應，這些鏈接在IE8中點一個1，2次再點就沒反應了。仔細檢查代碼，沒發現不妥，遂找來虛擬機開始測試。
1、IE8，第一次點鏈接，圖片很快顯示，但點到幾次之后，明顯越來越慢，打開任務管理器，發現內存飆升很快，不會明顯減少；
一個采樣數據：啟動：4.5MB左右，打開網頁：98MB左右
點擊鏈接彈出圖片
1次：160MB，關閉后減小到128MB
2次：190MB，關閉后：159MB
3次：220MB，關閉后：189MB
后面就會一直這么上升，響應速度越來越慢..
2、Chrome，點擊圖片n次，都是OK的，跟了下Chrome的內存占用情況，內存也會小幅增長，但是也會恢復到之前的水平；
[我常用的是Chrome，為了測試，先用IE來編輯博客，要能夠CHrome來測試。。]
打開Chrome：居然開了4個進程（xxxx），沒搞懂怎么回事，打開同一個網頁，然后從 任務管理器中“轉到進程”，占用123MB
點擊圖片
#1 顯示圖片：轉到的進程沒什么變化，另外一個進程從 24MB增加到了30MB，關閉圖片：30MB的進程減小都25MB
#2 顯示圖片：跟第一次一樣，另外一個進程從24-》30MB，關閉圖片，這次30MB的進程沒變化
后面經過N次點擊，發生變化的進程內存從30-45MB之間波動，彈出圖片也很流暢
疑問：難道Chrome的JS引擎是單獨一個進程？
3、IE10，使用按鍵精靈點擊若干遍之后，內存依然平穩
IE10，打開之后，2個進程：一個13MB，一個6MB
載入網頁：啟動了第三個進程？（不是很明白IE10的工作模式），內存108MB
點擊彈出圖片
#1 內存基本沒變，增加了1MB，變成了109MB，其他兩個基本沒變化，關閉圖片：基本沒變化
#2 變化依然不大
點擊了幾十次之后，110MB左右，幾乎無波動。
------------------------------------------------------------------------------
注：測試所用的圖片很小，分辨率為640*800，JPG
-----------------------------------------------------------------------------
難道IE8的JS引擎就是如此不堪？還是blockUI吃資源太嚴重？還是我用到的JS代碼存在不合理？ 還請園子里的朋友幫忙解答..
（未完待續）