前端优化js篇

前言

分享即学习，欢迎转载，随意抄袭，学到了就是你的。

• 文章共分成两个部分，分别为js部分与html+css部分。
• 本文针对js优化部分，后续会跟进html+css部分。
• 纯手码内容较长，建议分开食用，下面会先呈上目录。

正文

js优化建议

首先说明，本文仅供优化的方向和思路，会举例说明，并不代表所有的语法都要这么写，要结合应用场景与当前开发团队的平均水平，合理使用，而不是一味追求优化而去要求团队的代码风格，如果非要追求代码的统一性，也应该把业务处理或数据处理的方法变成共通方法，让开发人员调用。

在没有足够的时间和经验以及项目积累的情况下，时刻谨记，按时完成任务才是关键，完成任务是主优化代码其次。

js优化方向

提到优化，大多数想到的场景都是性能优化。
以前，由于浏览器以及网速的限制，代码性能优化就显得极为重要。
但在如今，谷歌浏览器独步天下已成必然，网速更是直线飞起，互联网产品的版本更新迭代更加频繁。
所以，应该适度考虑牺牲一点点性能，而去做代码层次的优化。
语义清晰、逻辑明了的代码既可以增强开发效率，同时也更利于增强代码的可读性、降低维护成本、版本迭代更新。
恰到好处的高级函数使用才是对于前端代码优化的最好方向，而不是一味地追求性能。

js优化建议

言归正传，优化的思路主要考虑以下4点：

• 语义简单明了，逻辑清晰且合理
• 合理使用高级函数
• 方法尽早返回、尽早结束
• 减少运算、 减少语句

满足以上四点，哪怕不做性能优化，也能保证代码的执行效率。

举例：
众所周知，就性能而言for > map
在网上可能都看过这样的测试

let test = 99999
let arr = new Array(33333333).fill(test)

console.time()

// 原生for
for (let i = 0; i < arr.length; i++) {}

// map
arr.map((item, index, arr) => {})

console.timeEnd()

电脑配置i7-9750H测试结果
for 18ms左右
map 420-480ms

乍一看相差确实很大，但是现实中使用的场景却不可能是这样的，肯定是带着运算和数据处理的，看下面的例子:

console.time()

let test = 9999999
let arr = new Array(9999999).fill(test)

let arrayList = []
// 原生for
for (let i = 0; i < arr.length; i++) {
   arrayList.push(arr[i])
}

// map
let arrayList = arr.map(item => item)

console.timeEnd()

电脑配置i7-9750H测试结果
for 705-720ms左右
map 680-700ms左右

结果map还比for快。单单论性能而言，肯定是for更快，但是写for方法的时候多了很多运算比如arr.length、push在每次循环时都执行。
所以，不论是考虑代码的性能还是、可读性，合理的使用高级函数才对代码的最好优化。

---

以判断语句为例，优化之时应考虑以下几点：

• 更少的嵌套，尽早返回，错误语句应提前抛出，使用return或throw
• 就性能而言：当数据量达到万级以上，if的执行速度反而会比switch更快；
• 正常逻辑判断数量不会超过两位数，所以应选择合适的实现方式；
• if在某些情景更适合表达逻辑，witch的控制表达式会依次与case后的值匹配，可以根据case标签的执行频率排列case标签的顺序进一步提高速度。

// bad
if (color) {
    if (color === 'black') {
        printBlackBackground();
    } else if (color === 'red') {
        printRedBackground();
    } else if (color === 'blue') {
        printBlueBackground();
    } else if (color === 'green') {
        printGreenBackground();
    } else {
        printYellowBackground();
    }
}

// good
var colorObj = {
    'black': printBlackBackground,
    'red': printRedBackground,
    'blue': printBlueBackground,
    'green': printGreenBackground,
    'yellow': printYellowBackground
}
if (color in colorObj) {
    colorObj[color]()
}

// bad
function condition(fruit) {
  if (fruit == 'apple' || fruit == 'banana') {
    console.log(fruit);
  }
}

// good
function condition(fruit){
    const allFruit = ['apple','banana'];
    if(allFruit.includes(fruit)){
        console.log(fruit)
    }
}

let与const使用

let取代var

let可以完全取代var且没有副作用；
下述例子如果把let替换成var则输出的是undefined，这违反了变量先声明后使用的原则

console.log(a)
let a = 'hello world'

const的使用

let与const之间，const定义的是常量，let定义的是变量；
建议优先使用const，尤其在全局环境中，大多数场景中我们应该在全局优先设置常量然后使用，变量大多数使用在方法体内。

字符串定义

字符串定义应该使用const
推荐eslint规则应限制使用单引号或反引号，且不使用分号，动态字符串应用反引号拼接而不是用加减号。
原因：

1. JavaScript编译器会对const进行优化，所以多使用const有利于程序的运行效率；
2. 单引号是为了减少不必要的转义；
3. 分号，习惯而已个人认为没必要加，精简代码；
4. 动态字符串拼接，不用加减号，减少不必要的运算；

// bad

var a = "hello world";
var b = "<div class=\"header\">" + a + "</div>";

// acceptable
const a = 'hello world'
const b = '<div class="header">' + a + '</div>'

// good
const a = 'hello world'
const b = `<div class="header">${a}</div>`

解构赋值

• 减少运算和不必要的语句

深拷贝

单层

// bad
const a = { a: 'a', b: 'b'}
const b = JSON.parse(JSON.stringify(a))

// good
const a = { a: 'a', b: 'b'}
const b = { ...a }

解构赋值

数组赋值
const arr = [ 1, 2, 3, 4]

// bad
const first = arr[ 0 ]
const second = arr[ 1 ]
 
// good
const [ first, second ] = arr

Array

• 数组拼接使用 unshift、splice、push
• Array.sort()数组排序
• Array.filter()过滤
• Array.flat(Infinity)数据扁平化
• Array.Stringify()转字符串
• Array.includes()检测数组包含指定值
• Array.every()全部条件符合
• Array.some()部分条件符合
• Array.find()返回通过函数内判断的第一个元素的值
• Array.findIndex()返回通过函数内判断的第一个元素的下标
• Array.reduce()数组中的每个值作为累加，最终计算为一个值。

Object

• delete obj0.age 删除
• prototype 返回对象类型原型的引用
• Object.keys(obj)对obj中的索引进行循环
• Object.values(obj)对obj中的值进行循环
• Object.entries(obj)循环obj中的某一项

对象的循环调用

let obj = {
    name:"张三",
    sex:"男",
    age:20,
    height:150
}
 
for ( let [key,val] of Object.entries(obj)){
    console.log(key,val)
}

// name 张三
// sex 男
// age 20
// height 150

对象尽量静态化

// bad
const obj = {}
obj.newData = 3

// conventional
const obj = {}
Object.assign(obj, { newData:'11' })

// good
const obj = { newData: null }
obj.newData = 3

对象属性名称动态

const varName = () => {
    return 'key'
}

// bad
const obj = {
    id: 5,
    name : 'XiaoMing'
}
obj[varName()] = 123

// good
const obj = {
    id: 5,
    name : 'XiaoMing',
    [varName()]: 123
}

对象属性动态

const obj_B = { a: 'a', b: 'b' }
const obj_C = { c: 'c' }

// bad
const obj_A = {}
obj_A.a = obj_B.a
obj_A.b = obj_B.b
obj_A.c = obj_C.c

// conventional
const obj_A = {
    a: obj_B.a,
    b: obj_B.b,
    c: obj_C.c
}

// good
const obj_A = {
    ...obj_B,
    ...obj_C
}

对象属性简写

const obj = {
    name: 'name',
    
    // bad
    funNameA: function (item) {
        console.log('item', item)
    },
    
    // good
    funNameB: item => console.log('item', item),
    
    // best：
    funNameC(item){
        console.log('item', item)
    }
}

函数

链式调用

返回对象使方法可以链式调用

function Person(name) {
    this.name = name
    this.sayName = function() {
        console.log("Hello my name is: ", this.name)
        return this
    }
    this.changeName = function(name) {
        this.name = name
        return this
    }
}
let person = new Person("John")
person.sayName().changeName("Timmy").sayName()

箭头函数

某些需要使用函数表达式的场合，尽量用箭头函数代替;
省去不必要的return，而且绑定了this，代码更整洁

let arrayA = [1, 2, 3, 4]
let arrayB = []

// bad
arrayA.map(function (x) {
    arrayB.push(x * x)
})

// good
arrayB = arrayA.map( x => {
    return x * x
})

// best
arrayB = arrayA.map( x => x * x)

函数的参数赋值

// bad
function requestAction( items ) {
    const paramA = items.paramA
    const paramB = items.paramB
}
 
// good
function requestAction( items ) {
    const { paramA , paramB } = items
}
 
// best
function requestAction( { paramA , paramB }) {
}

多个函数返回值

// bad
function requestAction() {
    return [ valA, valB, val3]
}
 
// good
function requestAction() {
    return { valA, valB, val3 }
}
 
// best
const { valA, valB, val3 } = requestAction()

函数参数默认值

函数的参数都要设置默认值，这样的的函数才能足够健壮

// bad
function( items ) {
    items = items || {}
}

// good
function( items = {} ) {
    // ...
}

性能优化

这里的性能优化并不是指是否使用高级函数，是指减少不必要的运算与语句的使用，下面举几个例子

循环优化

在for中定义array.length，每次循环都会重新计算array的长度，所以循环最大限制次数应该是个定值

// bad
for(let i = 0; i < array.length; i++) {
    // ...
}

// good
const length = array.length
for(let i = 0; i < length; i++) {
    // ...
}

减少运算

加号也算运算

// bad
let testData = '测试数据'
console.log('testData' + testData)

// good
console.log('testData', testData)

最小化语句数

// bad
let a = '1',
let b = '2',
let c = 3

// good
let a = '1',
    b = '2',
    c = 3

合并语句

// bad
let i = 0
let value = array[i]
i++

// good
let i = 0
let value = array[i++]

写在最后

以上是我针对于前端开发代码优化js部分的一些建议与心得。

希望大家明白，知道高级函数与合理的使用高级函数是两码事。

如何优雅的写出漂亮且高效的代码，严谨的规则、明了的语义和清晰的逻辑思路缺一不可，这样才能结合实际场景合理判断出适用的高阶函数加以使用，万万不可为了使用高级函数而去使用高级函数。

后续更新html+css部分。

分享即学习，欢迎转载，随意抄袭，学到了就是你的。