JavaScript中三種GBK/GB2312編解碼方案對比

BlackFlagBin 發(fā)布于2019-08-20 11:02 / 1165人閱讀

摘要：筆者在編碼詳解與中編碼實踐一文中介紹了中編碼相關(guān)的基礎(chǔ)知識，其中沒有介紹純粹的編解碼方案，筆者后來根據(jù)網(wǎng)上的代碼完善了下這個庫，并且對中三種不同的編解碼方案進行了比較。

Isomorphic Urlencode

Here is English Version For README

筆者在URL編碼詳解與DOM中GBK編碼實踐一文中介紹了JavaScript中URL編碼相關(guān)的基礎(chǔ)知識，其中沒有介紹純粹的JavaScript編解碼方案，筆者后來根據(jù)網(wǎng)上的代碼完善了下Isomorphic Urlencode這個庫，并且對JavaScript中三種不同的編解碼方案進行了比較。核心的出發(fā)點為

對于瀏覽器中版本使用純粹的前端代碼實現(xiàn)GBK編碼

保證能夠在Node與Browser環(huán)境下實現(xiàn)無縫對切

可以使用npm命令直接安裝該依賴:

npm install --save isomorphic-urlencode

Usage Pure JavaScript

基于純粹的JavaScript優(yōu)勢在于可以跨平臺使用，不過缺陷在于其性能相對較差，另外目前只支持GBK/GB2312編碼，不如另外兩種可以用于其他編碼規(guī)范。在使用純粹的JavaScript中，如果使用UTF8編碼，那么直接調(diào)用JavaScript內(nèi)置的encodeURIComponent，如果使用GBK編碼，那么會使用如下兩個函數(shù)，其關(guān)鍵代碼為:

function gbkEncode(str) {
  return str.replace(/./g, function (a) {
    var code = a.charCodeAt(0);
    if (isAscii(code)) {
      return encodeURIComponent(a);
    } else {
      var key = code.toString(16);
      if (key.length != 4)key = ("000" + key).match(/....$/)[0];
      return U2Ghash[key] || a;
    }
  });
}

function gbkDecode(str, callback) {
  return str.replace(/%[0-9A-F]{2}%[0-9A-F]{2}/g, function (a) {
    if (a in G2Uhash) {
      return String.fromCharCode("0x" + G2Uhash[a]);
    } else {
      return a;
    }
  }).replace(/%[w]{2}/g, function (a) {

    return decodeURIComponent(a);

  });
}

Node

Node版本使用了 node-urlencode，其對于UTF8的編解碼也是使用了JavaScript內(nèi)置的encodeURIComponent，而對于GBK等其他編碼使用了iconv-lite這個庫:

function encode(str, charset) {
  if (isUTF8(charset)) {
    return encodeURIComponent(str);
  }

  var buf = iconv.encode(str, charset);
  var encodeStr = "";
  var ch = "";
  for (var i = 0; i < buf.length; i++) {
    ch = buf[i].toString("16");
    if (ch.length === 1) {
      ch = "0" + ch;
    }
    encodeStr += "%" + ch;
  }
  encodeStr = encodeStr.toUpperCase();
  return encodeStr;
}

DOM

如果你是在瀏覽器環(huán)境中使用,請在HTML文件頭部添加:

if (parent._urlEncode_iframe_callback) {

    parent._urlEncode_iframe_callback(location.search.split("=")[1]);

    //直接關(guān)閉當前子窗口
    window.close();
}

注意,上面一段代碼是將自身作為iframe的加載地址,因此務(wù)必放在HTML文件首部。然后在JS代碼中使用:

var urlencode = require("isomorphic-urlencode").dom;

urlencode("王下邀月熊").then(function (data) {
  console.log(data);

  //測試解碼
  urlencode.decode(data).then(function (data) {
    console.log(data);
  })
});

urlencode("王下邀月熊", "gbk").then(function (data) {
  console.log(data);

  //測試解碼
  urlencode.decode(data, "gbk").then(function (data) {
    console.log(data);
  })
});

瀏覽器版本主要基于iframe與form實現(xiàn),詳細原理參考這篇博客

Benchmark Pure JavaScript VS DOM

主要的測試代碼如下所示，從結(jié)果中可見對于大數(shù)據(jù)串還是使用DOM效率較好，但是基于DOM的解決方案需要嵌入iframe，這個可能造成額外的代碼侵入與性能損耗。

/**
 * Created by apple on 16/9/8.
 */

var urlencode = require("../urlencode");

var urlencodeDOM = require("../urlencode").dom;


//測試長字符串編碼時間
var str = "";

for (i = 0; i < 100000; i++) {
  str += "王下邀月熊";
}

console.time("基于Pure JavaScript的編解碼");

urlencode.decode(urlencode(str, "gbk"), "gbk");

console.timeEnd("基于Pure JavaScript的編解碼");


console.time("基于DOM的編解碼");

urlencodeDOM(str, "gbk").then(function (data) {

  //測試解碼
  urlencodeDOM.decode(data, "gbk").then(function (data) {
    console.timeEnd("基于DOM的編解碼")
  })
});

//測試短時間內(nèi)多次編碼
var timerPure = 0;

var timerDOM = 0;

str = "王下邀月熊";

for (i = 0; i < 1000; i++) {

  var start = new Date();

  urlencode.decode(urlencode(str, "gbk"), "gbk");

  timerPure += new Date().getMilliseconds() - start.getMilliseconds();

  (function test(start) {

    urlencodeDOM(str, "gbk").then(function (data) {

      //測試解碼
      urlencodeDOM.decode(data, "gbk").then(function (data) {
        timerDOM += new Date().getMilliseconds() - start.getMilliseconds();

        console.log("timerDOM:" + timerDOM);

      })
    });

  })(new Date());

}
console.log("timerPure:" + timerPure);

// 基于Pure JavaScript的編解碼: 526.27ms
// 基于DOM的編解碼: 155.32ms

Pure JavaScript VS Node

主要的測試代碼如下所示，可以看出基于Node的編解碼速度會快于純粹的JavaScript編解碼。

/**
 * Created by apple on 16/9/8.
 */
var urlencode = require("./urlencode");
var urlencodeNode = require("./node-urlencode");


//測試長字符串編碼時間
var str = "";

for (i = 0; i < 1000000; i++) {
  str += "王下邀月熊";
}

console.time("基于Pure JavaScript的編解碼");

urlencode.decode(urlencode(str));

urlencode.decode(urlencode(str, "gbk"), "gbk");

console.timeEnd("基于Pure JavaScript的編解碼");


console.time("基于NODE的編解碼");

urlencodeNode.decode(urlencode(str));

urlencodeNode.decode(urlencode(str, "gbk"), "gbk");

console.timeEnd("基于NODE的編解碼");


// 基于Pure JavaScript的編解碼: 526.27ms
// 基于DOM的編解碼: 155.32ms

//測試短時間內(nèi)多次編碼
var timerPure = 0;

var timerNODE = 0;

str = "王下邀月熊王下邀月熊王下邀月熊王下邀月熊";

for (i = 0; i < 1000; i++) {

  var start = new Date();

  urlencode.decode(urlencode(str));
  urlencode.decode(urlencode(str, "gbk"), "gbk");

  timerPure += new Date().getMilliseconds() - start.getMilliseconds();
}

for (i = 0; i < 1000; i++) {

  var start = new Date();

  urlencodeNode.decode(urlencode(str));
  urlencodeNode.decode(urlencode(str, "gbk"), "gbk");

  timerNODE += new Date().getMilliseconds() - start.getMilliseconds();

}

console.log("timerPure:" + timerPure);

console.log("timerNODE:" + timerNODE);

// 基于Pure JavaScript的編解碼: 10932.610ms
// 基于NODE的編解碼: 7585.223ms
// timerPure:28
// timerNODE:31

Test

使用node node-urlencode.test.js來測試Node環(huán)境下轉(zhuǎn)碼。
使用webpack demo/demo.js demo/demo.dist.js,然后在瀏覽器中打開demo.html,在Console中可以查看運行結(jié)果