Javascript的ES6 class写法和ES5闭包写法性能对比
创始人
2024-05-31 19:22:10
0

看到很多闭包写法的函数, 
一直怀疑它对性能是否有影响.
还有就是备受推崇的React Hooks函数式写法中出现大量的闭包和临时函数,
我很担心这样会影响性能.

于是, 做了一个实验来做对比.
这个实验很简单, 用md5计算一百万次.

计算过程将结果再放回参数, 这样避免结果没被引用被优化, 影响对比结果.
其中test.js采用闭包写法, test2.js采用class写法.
最终的对比结果如下图所示.
闭包的写法略差于class写法, 大概20%
因此对性能要求比较高的话, 还是推荐class写法.  


下面是闭包写法test.js的代码

function md5 (string) {function rotateLeft(lValue, iShiftBits) {return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));}function addUnsigned(lX, lY) {let lX8 = lX & 0x80000000;let lY8 = lY & 0x80000000;let lX4 = lX & 0x40000000;let lY4 = lY & 0x40000000;let lResult = (lX & 0x3fffffff) + (lY & 0x3fffffff);if (lX4 & lY4) {return lResult ^ 0x80000000 ^ lX8 ^ lY8;}if (lX4 | lY4) {if (lResult & 0x40000000) {return lResult ^ 0xc0000000 ^ lX8 ^ lY8;} else {return lResult ^ 0x40000000 ^ lX8 ^ lY8;}} else {return lResult ^ lX8 ^ lY8;}}function F(x, y, z) {return (x & y) | (~x & z);}function G(x, y, z) {return (x & z) | (y & ~z);}function H(x, y, z) {return x ^ y ^ z;}function I(x, y, z) {return y ^ (x | ~z);}function FF(a, b, c, d, x, s, ac) {a = addUnsigned(a, addUnsigned(addUnsigned(F(b, c, d), x), ac));return addUnsigned(rotateLeft(a, s), b);}function GG(a, b, c, d, x, s, ac) {a = addUnsigned(a, addUnsigned(addUnsigned(G(b, c, d), x), ac));return addUnsigned(rotateLeft(a, s), b);}function HH(a, b, c, d, x, s, ac) {a = addUnsigned(a, addUnsigned(addUnsigned(H(b, c, d), x), ac));return addUnsigned(rotateLeft(a, s), b);}function II(a, b, c, d, x, s, ac) {a = addUnsigned(a, addUnsigned(addUnsigned(I(b, c, d), x), ac));return addUnsigned(rotateLeft(a, s), b);}function convertToWordArray(string) {let lWordCount;let lMessageLength = string.length;let lNumberOfWordsTempOne = lMessageLength + 8;let lNumberOfWordsTempTwo = (lNumberOfWordsTempOne - (lNumberOfWordsTempOne % 64)) / 64;let lNumberOfWords = (lNumberOfWordsTempTwo + 1) * 16;let lWordArray = Array(lNumberOfWords - 1);let lBytePosition = 0;let lByteCount = 0;while (lByteCount < lMessageLength) {lWordCount = (lByteCount - (lByteCount % 4)) / 4;lBytePosition = (lByteCount % 4) * 8;lWordArray[lWordCount] =lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition);lByteCount++;}lWordCount = (lByteCount - (lByteCount % 4)) / 4;lBytePosition = (lByteCount % 4) * 8;lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);lWordArray[lNumberOfWords - 2] = lMessageLength << 3;lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;return lWordArray;}function wordToHex(lValue) {let WordToHexValue = "";let WordToHexValueTemp = "";let lByte;for (let lCount = 0; lCount <= 3; lCount++) {lByte = (lValue >>> (lCount * 8)) & 255;WordToHexValueTemp = "0" + lByte.toString(16);WordToHexValue = WordToHexValue + WordToHexValueTemp.substr(WordToHexValueTemp.length - 2, 2);}return WordToHexValue;}function uTF8Encode(string) {string = string.replace(/\x0d\x0a/g, "\x0a");let output = "";for (let n = 0; n < string.length; n++) {let c = string.charCodeAt(n);if (c < 128) {output += String.fromCharCode(c);} else if (c > 127 && c < 2048) {output += String.fromCharCode((c >> 6) | 192);output += String.fromCharCode((c & 63) | 128);} else {output += String.fromCharCode((c >> 12) | 224);output += String.fromCharCode(((c >> 6) & 63) | 128);output += String.fromCharCode((c & 63) | 128);}}return output;}function res(string) {let x = [];let AA, BB, CC, DD;let S11 = 7;let S12 = 12;let S13 = 17;let S14 = 22;let S21 = 5;let S22 = 9;let S23 = 14;let S24 = 20;let S31 = 4;let S32 = 11;let S33 = 16;let S34 = 23;let S41 = 6;let S42 = 10;let S43 = 15;let S44 = 21;string = uTF8Encode(string);x = convertToWordArray(string);let a = 0x67452301;let b = 0xefcdab89;let c = 0x98badcfe;let d = 0x10325476;for (let k = 0; k < x.length; k += 16) {AA = a;BB = b;CC = c;DD = d;a = FF(a, b, c, d, x[k + 0], S11, 0xd76aa478);d = FF(d, a, b, c, x[k + 1], S12, 0xe8c7b756);c = FF(c, d, a, b, x[k + 2], S13, 0x242070db);b = FF(b, c, d, a, x[k + 3], S14, 0xc1bdceee);a = FF(a, b, c, d, x[k + 4], S11, 0xf57c0faf);d = FF(d, a, b, c, x[k + 5], S12, 0x4787c62a);c = FF(c, d, a, b, x[k + 6], S13, 0xa8304613);b = FF(b, c, d, a, x[k + 7], S14, 0xfd469501);a = FF(a, b, c, d, x[k + 8], S11, 0x698098d8);d = FF(d, a, b, c, x[k + 9], S12, 0x8b44f7af);c = FF(c, d, a, b, x[k + 10], S13, 0xffff5bb1);b = FF(b, c, d, a, x[k + 11], S14, 0x895cd7be);a = FF(a, b, c, d, x[k + 12], S11, 0x6b901122);d = FF(d, a, b, c, x[k + 13], S12, 0xfd987193);c = FF(c, d, a, b, x[k + 14], S13, 0xa679438e);b = FF(b, c, d, a, x[k + 15], S14, 0x49b40821);a = GG(a, b, c, d, x[k + 1], S21, 0xf61e2562);d = GG(d, a, b, c, x[k + 6], S22, 0xc040b340);c = GG(c, d, a, b, x[k + 11], S23, 0x265e5a51);b = GG(b, c, d, a, x[k + 0], S24, 0xe9b6c7aa);a = GG(a, b, c, d, x[k + 5], S21, 0xd62f105d);d = GG(d, a, b, c, x[k + 10], S22, 0x2441453);c = GG(c, d, a, b, x[k + 15], S23, 0xd8a1e681);b = GG(b, c, d, a, x[k + 4], S24, 0xe7d3fbc8);a = GG(a, b, c, d, x[k + 9], S21, 0x21e1cde6);d = GG(d, a, b, c, x[k + 14], S22, 0xc33707d6);c = GG(c, d, a, b, x[k + 3], S23, 0xf4d50d87);b = GG(b, c, d, a, x[k + 8], S24, 0x455a14ed);a = GG(a, b, c, d, x[k + 13], S21, 0xa9e3e905);d = GG(d, a, b, c, x[k + 2], S22, 0xfcefa3f8);c = GG(c, d, a, b, x[k + 7], S23, 0x676f02d9);b = GG(b, c, d, a, x[k + 12], S24, 0x8d2a4c8a);a = HH(a, b, c, d, x[k + 5], S31, 0xfffa3942);d = HH(d, a, b, c, x[k + 8], S32, 0x8771f681);c = HH(c, d, a, b, x[k + 11], S33, 0x6d9d6122);b = HH(b, c, d, a, x[k + 14], S34, 0xfde5380c);a = HH(a, b, c, d, x[k + 1], S31, 0xa4beea44);d = HH(d, a, b, c, x[k + 4], S32, 0x4bdecfa9);c = HH(c, d, a, b, x[k + 7], S33, 0xf6bb4b60);b = HH(b, c, d, a, x[k + 10], S34, 0xbebfbc70);a = HH(a, b, c, d, x[k + 13], S31, 0x289b7ec6);d = HH(d, a, b, c, x[k + 0], S32, 0xeaa127fa);c = HH(c, d, a, b, x[k + 3], S33, 0xd4ef3085);b = HH(b, c, d, a, x[k + 6], S34, 0x4881d05);a = HH(a, b, c, d, x[k + 9], S31, 0xd9d4d039);d = HH(d, a, b, c, x[k + 12], S32, 0xe6db99e5);c = HH(c, d, a, b, x[k + 15], S33, 0x1fa27cf8);b = HH(b, c, d, a, x[k + 2], S34, 0xc4ac5665);a = II(a, b, c, d, x[k + 0], S41, 0xf4292244);d = II(d, a, b, c, x[k + 7], S42, 0x432aff97);c = II(c, d, a, b, x[k + 14], S43, 0xab9423a7);b = II(b, c, d, a, x[k + 5], S44, 0xfc93a039);a = II(a, b, c, d, x[k + 12], S41, 0x655b59c3);d = II(d, a, b, c, x[k + 3], S42, 0x8f0ccc92);c = II(c, d, a, b, x[k + 10], S43, 0xffeff47d);b = II(b, c, d, a, x[k + 1], S44, 0x85845dd1);a = II(a, b, c, d, x[k + 8], S41, 0x6fa87e4f);d = II(d, a, b, c, x[k + 15], S42, 0xfe2ce6e0);c = II(c, d, a, b, x[k + 6], S43, 0xa3014314);b = II(b, c, d, a, x[k + 13], S44, 0x4e0811a1);a = II(a, b, c, d, x[k + 4], S41, 0xf7537e82);d = II(d, a, b, c, x[k + 11], S42, 0xbd3af235);c = II(c, d, a, b, x[k + 2], S43, 0x2ad7d2bb);b = II(b, c, d, a, x[k + 9], S44, 0xeb86d391);a = addUnsigned(a, AA);b = addUnsigned(b, BB);c = addUnsigned(c, CC);d = addUnsigned(d, DD);}let tempValue = wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d);return tempValue.toLowerCase();}return res(string);
}function testMd5() {let startTick = Date.now() / 1000;let result = "测试文本字符串测试文本字符串测试文本字符串";for (let i = 0; i< 1e6; ++i) {result = md5(result+i);}console.log(result);let endTick = Date.now() / 1000; console.log(endTick - startTick);
}testMd5();

 下面是类写法test2.js的代码.

class Md5Class {rotateLeft(lValue, iShiftBits) {return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));}addUnsigned(lX, lY) {let lX8 = lX & 0x80000000;let lY8 = lY & 0x80000000;let lX4 = lX & 0x40000000;let lY4 = lY & 0x40000000;let lResult = (lX & 0x3fffffff) + (lY & 0x3fffffff);if (lX4 & lY4) {return lResult ^ 0x80000000 ^ lX8 ^ lY8;}if (lX4 | lY4) {if (lResult & 0x40000000) {return lResult ^ 0xc0000000 ^ lX8 ^ lY8;} else {return lResult ^ 0x40000000 ^ lX8 ^ lY8;}} else {return lResult ^ lX8 ^ lY8;}}F(x, y, z) {return (x & y) | (~x & z);}G(x, y, z) {return (x & z) | (y & ~z);}H(x, y, z) {return x ^ y ^ z;}I(x, y, z) {return y ^ (x | ~z);}FF(a, b, c, d, x, s, ac) {a = this.addUnsigned(a, this.addUnsigned(this.addUnsigned(this.F(b, c, d), x), ac));return this.addUnsigned(this.rotateLeft(a, s), b);}GG(a, b, c, d, x, s, ac) {a = this.addUnsigned(a, this.addUnsigned(this.addUnsigned(this.G(b, c, d), x), ac));return this.addUnsigned(this.rotateLeft(a, s), b);}HH(a, b, c, d, x, s, ac) {a = this.addUnsigned(a, this.addUnsigned(this.addUnsigned(this.H(b, c, d), x), ac));return this.addUnsigned(this.rotateLeft(a, s), b);}II(a, b, c, d, x, s, ac) {a = this.addUnsigned(a, this.addUnsigned(this.addUnsigned(this.I(b, c, d), x), ac));return this.addUnsigned(this.rotateLeft(a, s), b);}convertToWordArray(string) {let lWordCount;let lMessageLength = string.length;let lNumberOfWordsTempOne = lMessageLength + 8;let lNumberOfWordsTempTwo = (lNumberOfWordsTempOne - (lNumberOfWordsTempOne % 64)) / 64;let lNumberOfWords = (lNumberOfWordsTempTwo + 1) * 16;let lWordArray = Array(lNumberOfWords - 1);let lBytePosition = 0;let lByteCount = 0;while (lByteCount < lMessageLength) {lWordCount = (lByteCount - (lByteCount % 4)) / 4;lBytePosition = (lByteCount % 4) * 8;lWordArray[lWordCount] =lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition);lByteCount++;}lWordCount = (lByteCount - (lByteCount % 4)) / 4;lBytePosition = (lByteCount % 4) * 8;lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);lWordArray[lNumberOfWords - 2] = lMessageLength << 3;lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;return lWordArray;}wordToHex(lValue) {let WordToHexValue = "";let WordToHexValueTemp = "";let lByte;for (let lCount = 0; lCount <= 3; lCount++) {lByte = (lValue >>> (lCount * 8)) & 255;WordToHexValueTemp = "0" + lByte.toString(16);WordToHexValue = WordToHexValue + WordToHexValueTemp.substr(WordToHexValueTemp.length - 2, 2);}return WordToHexValue;}uTF8Encode(string) {string = string.replace(/\x0d\x0a/g, "\x0a");let output = "";for (let n = 0; n < string.length; n++) {let c = string.charCodeAt(n);if (c < 128) {output += String.fromCharCode(c);} else if (c > 127 && c < 2048) {output += String.fromCharCode((c >> 6) | 192);output += String.fromCharCode((c & 63) | 128);} else {output += String.fromCharCode((c >> 12) | 224);output += String.fromCharCode(((c >> 6) & 63) | 128);output += String.fromCharCode((c & 63) | 128);}}return output;}res(string) {let x = [];let AA, BB, CC, DD;let S11 = 7;let S12 = 12;let S13 = 17;let S14 = 22;let S21 = 5;let S22 = 9;let S23 = 14;let S24 = 20;let S31 = 4;let S32 = 11;let S33 = 16;let S34 = 23;let S41 = 6;let S42 = 10;let S43 = 15;let S44 = 21;string = this.uTF8Encode(string);x = this.convertToWordArray(string);let a = 0x67452301;let b = 0xefcdab89;let c = 0x98badcfe;let d = 0x10325476;for (let k = 0; k < x.length; k += 16) {AA = a;BB = b;CC = c;DD = d;a = this.FF(a, b, c, d, x[k + 0], S11, 0xd76aa478);d = this.FF(d, a, b, c, x[k + 1], S12, 0xe8c7b756);c = this.FF(c, d, a, b, x[k + 2], S13, 0x242070db);b = this.FF(b, c, d, a, x[k + 3], S14, 0xc1bdceee);a = this.FF(a, b, c, d, x[k + 4], S11, 0xf57c0faf);d = this.FF(d, a, b, c, x[k + 5], S12, 0x4787c62a);c = this.FF(c, d, a, b, x[k + 6], S13, 0xa8304613);b = this.FF(b, c, d, a, x[k + 7], S14, 0xfd469501);a = this.FF(a, b, c, d, x[k + 8], S11, 0x698098d8);d = this.FF(d, a, b, c, x[k + 9], S12, 0x8b44f7af);c = this.FF(c, d, a, b, x[k + 10], S13, 0xffff5bb1);b = this.FF(b, c, d, a, x[k + 11], S14, 0x895cd7be);a = this.FF(a, b, c, d, x[k + 12], S11, 0x6b901122);d = this.FF(d, a, b, c, x[k + 13], S12, 0xfd987193);c = this.FF(c, d, a, b, x[k + 14], S13, 0xa679438e);b = this.FF(b, c, d, a, x[k + 15], S14, 0x49b40821);a = this.GG(a, b, c, d, x[k + 1], S21, 0xf61e2562);d = this.GG(d, a, b, c, x[k + 6], S22, 0xc040b340);c = this.GG(c, d, a, b, x[k + 11], S23, 0x265e5a51);b = this.GG(b, c, d, a, x[k + 0], S24, 0xe9b6c7aa);a = this.GG(a, b, c, d, x[k + 5], S21, 0xd62f105d);d = this.GG(d, a, b, c, x[k + 10], S22, 0x2441453);c = this.GG(c, d, a, b, x[k + 15], S23, 0xd8a1e681);b = this.GG(b, c, d, a, x[k + 4], S24, 0xe7d3fbc8);a = this.GG(a, b, c, d, x[k + 9], S21, 0x21e1cde6);d = this.GG(d, a, b, c, x[k + 14], S22, 0xc33707d6);c = this.GG(c, d, a, b, x[k + 3], S23, 0xf4d50d87);b = this.GG(b, c, d, a, x[k + 8], S24, 0x455a14ed);a = this.GG(a, b, c, d, x[k + 13], S21, 0xa9e3e905);d = this.GG(d, a, b, c, x[k + 2], S22, 0xfcefa3f8);c = this.GG(c, d, a, b, x[k + 7], S23, 0x676f02d9);b = this.GG(b, c, d, a, x[k + 12], S24, 0x8d2a4c8a);a = this.HH(a, b, c, d, x[k + 5], S31, 0xfffa3942);d = this.HH(d, a, b, c, x[k + 8], S32, 0x8771f681);c = this.HH(c, d, a, b, x[k + 11], S33, 0x6d9d6122);b = this.HH(b, c, d, a, x[k + 14], S34, 0xfde5380c);a = this.HH(a, b, c, d, x[k + 1], S31, 0xa4beea44);d = this.HH(d, a, b, c, x[k + 4], S32, 0x4bdecfa9);c = this.HH(c, d, a, b, x[k + 7], S33, 0xf6bb4b60);b = this.HH(b, c, d, a, x[k + 10], S34, 0xbebfbc70);a = this.HH(a, b, c, d, x[k + 13], S31, 0x289b7ec6);d = this.HH(d, a, b, c, x[k + 0], S32, 0xeaa127fa);c = this.HH(c, d, a, b, x[k + 3], S33, 0xd4ef3085);b = this.HH(b, c, d, a, x[k + 6], S34, 0x4881d05);a = this.HH(a, b, c, d, x[k + 9], S31, 0xd9d4d039);d = this.HH(d, a, b, c, x[k + 12], S32, 0xe6db99e5);c = this.HH(c, d, a, b, x[k + 15], S33, 0x1fa27cf8);b = this.HH(b, c, d, a, x[k + 2], S34, 0xc4ac5665);a = this.II(a, b, c, d, x[k + 0], S41, 0xf4292244);d = this.II(d, a, b, c, x[k + 7], S42, 0x432aff97);c = this.II(c, d, a, b, x[k + 14], S43, 0xab9423a7);b = this.II(b, c, d, a, x[k + 5], S44, 0xfc93a039);a = this.II(a, b, c, d, x[k + 12], S41, 0x655b59c3);d = this.II(d, a, b, c, x[k + 3], S42, 0x8f0ccc92);c = this.II(c, d, a, b, x[k + 10], S43, 0xffeff47d);b = this.II(b, c, d, a, x[k + 1], S44, 0x85845dd1);a = this.II(a, b, c, d, x[k + 8], S41, 0x6fa87e4f);d = this.II(d, a, b, c, x[k + 15], S42, 0xfe2ce6e0);c = this.II(c, d, a, b, x[k + 6], S43, 0xa3014314);b = this.II(b, c, d, a, x[k + 13], S44, 0x4e0811a1);a = this.II(a, b, c, d, x[k + 4], S41, 0xf7537e82);d = this.II(d, a, b, c, x[k + 11], S42, 0xbd3af235);c = this.II(c, d, a, b, x[k + 2], S43, 0x2ad7d2bb);b = this.II(b, c, d, a, x[k + 9], S44, 0xeb86d391);a = this.addUnsigned(a, AA);b = this.addUnsigned(b, BB);c = this.addUnsigned(c, CC);d = this.addUnsigned(d, DD);}let tempValue = this.wordToHex(a) + this.wordToHex(b) + this.wordToHex(c) + this.wordToHex(d);return tempValue.toLowerCase();}
}
let md5 = new Md5Class();function testMd5() {let startTick = Date.now() / 1000;let result = "测试文本字符串测试文本字符串测试文本字符串";for (let i = 0; i< 1e6; ++i) {result = md5.res(result+i);}console.log(result);let endTick = Date.now() / 1000; console.log(endTick - startTick);
}testMd5();

还有就是对于React Hooks写法, 个人感觉,
会导致代码更凌乱, 结构层次不清晰, 可读性和可维护性下降.

相关内容

热门资讯

122.(leaflet篇)l... 听老人家说:多看美女会长寿 地图之家总目录(订阅之前建议先查看该博客) 文章末尾处提供保证可运行...
育碧GDC2018程序化大世界... 1.传统手动绘制森林的问题 采用手动绘制的方法的话,每次迭代地形都要手动再绘制森林。这...
育碧GDC2018程序化大世界... 1.传统手动绘制森林的问题 采用手动绘制的方法的话,每次迭代地形都要手动再绘制森林。这...
Vue使用pdf-lib为文件... 之前也写过两篇预览pdf的,但是没有加水印,这是链接:Vu...
PyQt5数据库开发1 4.1... 文章目录 前言 步骤/方法 1 使用windows身份登录 2 启用混合登录模式 3 允许远程连接服...
Android studio ... 解决 Android studio 出现“The emulator process for AVD ...
Linux基础命令大全(上) ♥️作者:小刘在C站 ♥️个人主页:小刘主页 ♥️每天分享云计算网络运维...
再谈解决“因为文件包含病毒或潜... 前面出了一篇博文专门来解决“因为文件包含病毒或潜在的垃圾软件”的问题,其中第二种方法有...
南京邮电大学通达学院2023c... 题目展示 一.问题描述 实验题目1 定义一个学生类,其中包括如下内容: (1)私有数据成员 ①年龄 ...
PageObject 六大原则 PageObject六大原则: 1.封装服务的方法 2.不要暴露页面的细节 3.通过r...
【Linux网络编程】01:S... Socket多进程 OVERVIEWSocket多进程1.Server2.Client3.bug&...
数据结构刷题(二十五):122... 1.122. 买卖股票的最佳时机 II思路:贪心。把利润分解为每天为单位的维度,然后收...
浏览器事件循环 事件循环 浏览器的进程模型 何为进程? 程序运行需要有它自己专属的内存空间࿰...
8个免费图片/照片压缩工具帮您... 继续查看一些最好的图像压缩工具,以提升用户体验和存储空间以及网站使用支持。 无数图像压...
计算机二级Python备考(2... 目录  一、选择题 1.在Python语言中: 2.知识点 二、基本操作题 1. j...
端电压 相电压 线电压 记得刚接触矢量控制的时候,拿到板子,就赶紧去测各种波形,结...
如何使用Python检测和识别... 车牌检测与识别技术用途广泛,可以用于道路系统、无票停车场、车辆门禁等。这项技术结合了计...
带环链表详解 目录 一、什么是环形链表 二、判断是否为环形链表 2.1 具体题目 2.2 具体思路 2.3 思路的...
【C语言进阶:刨根究底字符串函... 本节重点内容: 深入理解strcpy函数的使用学会strcpy函数的模拟实现⚡strc...
Django web开发(一)... 文章目录前端开发1.快速开发网站2.标签2.1 编码2.2 title2.3 标题2.4 div和s...