您當(dāng)前位置：首頁 > web前端 > jscript > JavaScript優(yōu)化篇：BASE64極速版

JavaScript優(yōu)化篇：BASE64極速版

來源：程序員人生發(fā)布時間：2013-11-11 23:57:45 閱讀次數(shù)：2667次

　　網(wǎng)(LieHuo.Net)教程 BASE64原理很簡單，但要寫出一個高效的，尤其是用JS這樣高靈活低效率的腳本，還需斟酌一翻。

　　先看看網(wǎng)上比較流行的版本。首先聲明64個常量字符：

以下為引用的內(nèi)容：
var key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

　　這一步大家都一樣，也沒有更好的方法列出這些字符。但接下來的做法，就大有講究了。因為這里的key是一個String，所以各個版本里都大量充斥著charAt，甚至indexOf函數(shù)來操作這個key。用charAt來訪問key的第n個字符，這還在清理之中;但用indexOf來確定字符的位置，就不可原諒了。在VBScript里倒還能湊合著用，但在JS里這種做法是很糟糕的，顯然沒有把其靈活性發(fā)揮出來。何謂靈活性，用最短的話說就是多用哈希表。哈希表是JS與生俱來就有的東西，其效率是其他方法都不能相比的。顯然，在BASE64這樣數(shù)字與字符頻繁轉(zhuǎn)換的算法里，hash是該大顯身手的。

　　再談charAt的問題。charAt雖然不會像indexOf那樣效率數(shù)量級的下降，但也不是最優(yōu)秀的。腳本程序分兩類，一類是自己寫的，另類就是系統(tǒng)內(nèi)置在瀏覽器中的，就是所謂的[Native Code]。后者的效率當(dāng)然是遠(yuǎn)高于前者，這大家都知道。所以盡可能多讓代碼交給系統(tǒng)執(zhí)行，有時看起來可能計算量變大了，但最終的速度反倒提升了。

　　就說BASE64解碼的過程，參數(shù)是個String，按常規(guī)的方法就是先charAt其每個字符。如果有1萬個字符，那么charAt也就運行了1萬次。能否將多次charAt函數(shù)的執(zhí)行合并到1次本地代碼的調(diào)用上呢,當(dāng)然可以：

　　var arr = str.split('');

　　之后的str.charAt(i)就可以用arr[i]代替了。此方法雖多開辟的一塊內(nèi)存，但最終的效率還是有所提高，并且增強(qiáng)了代碼可讀性。當(dāng)然，在運行速度極快的瀏覽器比如FireFox,Chrome就沒什么區(qū)別，甚至還可能倒退。

　　最后就是一個層次上的問題。網(wǎng)上常有人在說BASE64如何支持中文。按照這種說法，BASE64用來編碼解碼字符串了，這與其意義多少有些偏離。BASE64的最初就是將二進(jìn)制文件轉(zhuǎn)成可見字符，在郵件里發(fā)送。因此其意義就在于二進(jìn)制與字符的轉(zhuǎn)換，而不是字符與字符的轉(zhuǎn)換。JS沒有二進(jìn)制，但可以用0-255的數(shù)組來模擬。所以：

　　function 編碼函數(shù)(Array[]){return String;}

　　function 解碼函數(shù)(String){return Array[];}

　　至于中文的問題，無非就是Unicode與ANSI的轉(zhuǎn)換。JS貌似沒有現(xiàn)成的轉(zhuǎn)換函數(shù)，若要實現(xiàn)可以用Unicode與ANSI的對照表。但雙方的編碼/解碼都統(tǒng)一使用Unicode，也就

　　不存在支不支持的問題了。

　　最終的代碼：

以下為引用的內(nèi)容：
<script>
var mapEn = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split('');
var mapDe = {};

for(var i=0; i<64; i++)
mapDe[mapEn[i]] = i;

/*
* 函數(shù): Base64Encode
* 說明: 編碼
* 教程:網(wǎng)liehuo.net
*/
function Base64Encode(data)
{
var buf = [];
var map = mapEn;
var n = data.length; //總字節(jié)數(shù)
var val; //中間值
var i = 0;

/*
* 3字節(jié) ==> val ==> 4字符
*/
while(i < n)
{
val = (data[ i ] << 16) |
(data[i+1] << 8) |
(data[i+2]);

buf.push(map[val>>18],
map[val>>12 & 63],
map[val>>6 & 63],
map[val & 63]);
i += 3;
}

if(n%3 == 1) //湊兩個"="
buf.pop(),buf.pop(),buf.push('=', '=');
else //湊一個"="
buf.pop(),buf.push('=');

return buf.join('');
}

/*
* 函數(shù): Base64Decode
* 說明: 解碼
*/
function Base64Decode(str)
{
var buf = [];
var arr = str.split('');
var map = mapDe;
var n = arr.length; //總字符數(shù)
var val; //中間值
var i=0;

/*
* 長度異常
*/
if(n % 4)
return;

/*
* 4字符 ==> val ==> 3字節(jié)
*/
while(i < n)
{
val = (map[arr[ i ]] << 18) |
(map[arr[i+1]] << 12) |
(map[arr[i+2]] << 6) |
(map[arr[i+3]]);

buf.push(val>>16,
val>>8 & 0xFF,
val & 0xFF);
i += 4;
}

/*
* 湊字字符"="個數(shù)
*/
while(arr[--n] == '=')
buf.pop();

return buf;
}
</script>

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈
程序員人生

------分隔線----------------------------

上一篇 隱藏滾動條的多種方法與實例分析

下一篇 Linux操作系統(tǒng)系列之“載入點”

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

JavaScript優(yōu)化篇：BASE64極速版