大多数情况下，前端很少遇到性能瓶颈。但如果在大型前端项目、数据量百万千万的场景下，有时候一些毫不起眼的代码习惯也可能会带来性能问题。
if else 或许性能更优
有时候我们为了偷懒，喜欢使用语法糖来缩减代码的编写，比如说判断两个字符串数组是否内容一致：
代码语言：ts复制/**
* 判断两个字符串数组是否内容一致
*/
function isStringArrayTheSame(stringArrayA: string[], stringArrayB: string[]): boolean {
return stringArrayA.sort().join(',') === stringArrayB.sort().join(',');
}但同样的，假设这个方法被调用十万百万次，性能问题可能就会变得是否明显，不管是sort还是数组拼接成字符串都会有一定开销。这种情况下我们可以这么写：
/**
* 使用场景为数组内的字符串不会重复
*/
function isStringArrayTheSame(stringArrayA: string[], stringArrayB: string[]): boolean {
// 数量不一致，肯定不同
if (stringArrayA.length !== stringArrayB.length) return false;
// 相同数量时，A 的每一个都应该存在 B 中，才完全一致
for (const type of stringArrayA) {
if (!stringArrayB.includes(type)) return false;
}
return true;
}下面这种偷懒写法也是:
代码语言：ts复制// bad
function mergeStringArray(stringArrayA: string[], stringArrayB: string[]): string[] {
return Array.from(new Set(stringArrayA.concat(stringArrayB)));
}
// good
// 使用场景为单数组内的字符串不会重复
function mergeStringArray(stringArrayA: string[], stringArrayB: string[]): string[] {
const newStringArray = [].concat(stringArrayA);
stringArrayB.forEach(type => {
if (!newStringArray.includes(type)) newStringArray.push(type);
});
return newStringArray;
}低性能消耗代码判断提前
if...else写法也有很多注意事项，最简单的莫过于尽量使执行代码提前return。假设我们现在有这样的代码：
function test(arrayA: string[], arrayB: string[]): boolean {
if (costTimeFunction(arrayA, arrayB) || noCostTimeFunction(arrayA, arrayB)) {
testCodeA();
} else {
testCodeB();
}
}这样写看起来没什么问题，但假设已知costTimeFunction函数执行会有一定的性能消耗，那么在数组长度很大、调用次数很多的情况下，我们可以将耗时较少的函数放在前面执行：
function test(arrayA: string[], arrayB: string[]): boolean {
if (noCostTimeFunction(arrayA, arrayB) || costTimeFunction(arrayA, arrayB)) {
testCodeA();
// 提前 retrun 可以简化代码复杂度
return;
}
testCodeB();
}结束语
虽然这些都是很细节的事情，有时候写代码甚至注意不到，但如果养成了思考代码性能的习惯，就可以写出更高效执行的代码。
实际上，除了简单的代码习惯以外，更多时候我们的性能问题也往往出现在不合理的代码执行流程里，这种就跟项目关系紧密，不在这里介绍啦。
查看Github有更多内容噢: https://github.com/godbasin
