程序员人生 网站导航

JavaScript优化篇:BASE64极速版

栏目:jscript时间:2013-11-11 23:57:45

  网(LieHuo.Net)教程 BASE64原理很简单,但要写出一个高效的,尤其是用JS这样高灵活低效率的脚本,还需斟酌一翻。

  先看看网上比较流行的版本。首先声明64个常量字符:

以下为引用的内容:
var key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

  这一步大家都一样,也没有更好的方法列出这些字符。但接下来的做法,就大有讲究了。因为这里的key是一个String,所以各个版本里都大量充斥着charAt,甚至indexOf函数来操作这个key。用charAt来访问key的第n个字符,这还在清理之中;但用indexOf来确定字符的位置,就不可原谅了。在VBScript里倒还能凑合着用,但在JS里这种做法是很糟糕的,显然没有把其灵活性发挥出来。何谓灵活性,用最短的话说就是多用哈希表。哈希表是JS与生俱来就有的东西,其效率是其他方法都不能相比的。显然,在BASE64这样数字与字符频繁转换的算法里,hash是该大显身手的。

  再谈charAt的问题。charAt虽然不会像indexOf那样效率数量级的下降,但也不是最优秀的。脚本程序分两类,一类是自己写的,另类就是系统内置在浏览器中的,就是所谓的[Native Code]。后者的效率当然是远高于前者,这大家都知道。所以尽可能多让代码交给系统执行,有时看起来可能计算量变大了,但最终的速度反倒提升了。

  就说BASE64解码的过程,参数是个String,按常规的方法就是先charAt其每个字符。如果有1万个字符,那么charAt也就运行了1万次。能否将多次charAt函数的执行合并到1次本地代码的调用上呢,当然可以:

  var arr = str.split('');

  之后的str.charAt(i)就可以用arr[i]代替了。此方法虽多开辟的一块内存,但最终的效率还是有所提高,并且增强了代码可读性。当然,在运行速度极快的浏览器比如FireFox,Chrome就没什么区别,甚至还可能倒退。

  最后就是一个层次上的问题。网上常有人在说BASE64如何支持中文。按照这种说法,BASE64用来编码解码字符串了,这与其意义多少有些偏离。BASE64的最初就是将二进制文件转成可见字符,在邮件里发送。因此其意义就在于二进制与字符的转换,而不是字符与字符的转换。JS没有二进制,但可以用0-255的数组来模拟。所以:

  function 编码函数(Array[]){return String;}

  function 解码函数(String){return Array[];}

  至于中文的问题,无非就是Unicode与ANSI的转换。JS貌似没有现成的转换函数,若要实现可以用Unicode与ANSI的对照表。但双方的编码/解码都统一使用Unicode,也就

  不存在支不支持的问题了。

  最终的代码:

以下为引用的内容:
<script>
var mapEn = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split('');
var mapDe = {};

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

/*
* 函数: Base64Encode
* 说明: 编码
* 教程:网liehuo.net
*/
function Base64Encode(data)
{
var buf = [];
var map = mapEn;
var n = data.length; //总字节数
var val; //中间值
var i = 0;

/*
* 3字节 ==> 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('');
}

/*
* 函数: Base64Decode
* 说明: 解码
*/
function Base64Decode(str)
{
var buf = [];
var arr = str.split('');
var map = mapDe;
var n = arr.length; //总字符数
var val; //中间值
var i=0;

/*
* 长度异常
*/
if(n % 4)
return;

/*
* 4字符 ==> val ==> 3字节
*/
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;
}

/*
* 凑字字符"="个数
*/
while(arr[--n] == '=')
buf.pop();

return buf;
}
</script>

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐