性能优化学习笔记

js、css松散耦合

尽量避免直接用js操作样式，改为控制类名
element.className = 'edit';

解耦应用逻辑和事件处理程序

• 事件处理应该和业务逻辑拆分，如请求后端数据并进行二次加工，就应该拆分为请求数据函数、接受一个数据进行业务逻辑处理的方法

使用常量优化性能，提升代码维护性

• 任何多处用到的值，都应该抽取为一个常量
• 所有的URL应该在一个公共的位置存储
• 所有在用户界面展示的字符串都应该抽离出来方便国际化

避免全局查找

• 尽量避免全局查找，尤其是DOM
• 将多次用到的全局变量存储为局部变量总是没错的

优化循环性能

• 减值迭代——大多数情况下，从最大值开始，在循环中不断减值的迭代器更加高效
• 简化终止条件——每次循环过程都会计算终止条件，尽量避免属性查找
• 简化循环体
• 使用后测试循环——当数组大于零时，do-while会避免最初的终止条件计算，所以更快

一个基本的for循环
for (let i = 0; i < values.length; i++) {
    ...
}
一个减值操作的for循环
for (let i = values.length - 1; i >= 0; i--) {
    ...
}
一个后测试循环
let i = values.length - 1;
if (i > -1) {
    do {
        ...
    } while(--i >= 0);
}

处理大数据时应该展开循环操作

• 当循环次数确定时，展开循环往往更快
• 当循环次数不确定时，可以采用Duff装置技术

传统Duff装置
// 假设values.length > 0
let iterations = Math.ceil(values.length / 8), // 向上取整技术循环次数
    startAt = values.length % 8,    // 取余，计算第一次循环执行次数
    i = 0;

do {
    // case没有break，所以会从匹配到的startAt开始向后会全部执行
    switch(startAt) {
        case 0: 
            process(values[i++]);
        case 7: 
            ...;
        case 6: 
            ...;
        case 5: 
            ...;
        case 4: 
            ...;
        case 3: 
            ...;
        case 2: 
            ...;
        case 1: 
            ...;
    }
    startAt = 0;    // 初始化startAt，下一次循环会从case 0开始执行
} while (--iterations > 0);

更快的Duff装置
let iterations = Math.ceil(values.length / 8), // 向上取整技术循环次数
    leftover = values.length % 8,   // 取余，计算第一次循环执行次数
    i = 0;

if (leftover > 0) {
    do {
        process(values[i++]);
    } while (--leftover > 0)
}
do {
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
} while (--iterations > 0);

性能的其他注意事项

• 原生方法较快
• switch语句较快
• 位运算符较快