关于前端性能优化的一些建议

本文主要介绍性能优化的一些建议，包括编码，动画性能，页面启动性能优化

编码

避免全局查找

使用全局变量和函数要比局部的开销更大，可以将全局变量保存在局部的变量中，再去调用.
将在一个函数中多次调用的全局对象保存到局部变量总是没错的^[1]

// 全局查找 document
function updateElement() {
    var p = document.getElementsByTagName('p');
    var title = document.getElementById('title');
    
    p.forEach(val => {
        val.innerHTML = document.title;
    })
    title.innerHTML = 'world';
}

// 局部查找
function updateElement() {
    var doc = document;
    var p = doc.getElementsByTagName('p');
    var title = doc.getElementById('title');
    p.forEach(val => {
        val.innerHTML = doc.title;
    })
    title.innerHTML = 'world';
}

避免with语句

with语句相信大家都听说过。它会创建自己的作用域，因此会增加其中执行代码的作用域链长度，造成with语句中执行的代码会比外面执行的代码要慢。

避免不必要的属性查找

能减少算法的复杂度要尽量减少，尽可能地多使用局部变量将属性查找替换为值查找。

// 代码1
var a = 1;
var b = 100 + a;
console.log(b);

// 代码2
var arr = [1, 100];
var b = arr[0] + arr[1];
console.log(c);

上面两端代码执行效率是一样的
代码1它会进行4次常量查找，分别是：a，数字1，数字100，b，时间复杂度为O(1)
代码2的时间复杂度也是O(1)

若是用对象声明变量查找，他会比在数组上访问变量时间更长，比如

1
2
3

var obj = { a: 1, b: 100 };
var result = obj.b - obj.a;
console.log(result);

上面代码访问变量的时间复杂度为O(n)，对象在查找时必须向原型链中搜索该属性，所以对象属性越多，查找时间越长。

简化循环终止条件

将循环终止的条件值放到声明变量中，避免属性查找或其他 O(n)的操作

// before
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
for (let i = 0; i < arr.length; i ++) {
    ...
}

// after
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
for (let i = 0, len = arr.length; i < len; i ++) {
    ...
}

避免双重解释

// 避免!!!
const code = `var a = 0; console.log(a)`;
eval(code);
var test = new Function(code);
setTimeout(code, 1000);

多个变量声明

代码语句数量也是会影响执行的操作的速度，完成多个操作的单个语句要比完成单个操作的多个语句快

// before
var a = 1;
var b = 'a';
var c = {};
var d = [];

// after
var a = 1,
    b = 'a',
    c = {},
    d = [];

使用数组和对象字面量

从上面可以了解到单个操作的多个语句相对而言会比较快，因此在初始化对象或数组是，也可以这样做

// before
var arr = [];
arr[0] = 'aaa';
arr[1] = 'bbb';
arr[2] = 'ccc';

var obj = {};
obj.a = 'aaa';
obj.b = 111;
obj.c = () => {};

// after
var arr = ['aaa', 'bbb', 'ccc'];
var obj = {
    a: 'aaa',
    b: 111,
    c: () => {},
}

优化DOM交互

最小化现场更新

浏览器中渲染界面是一个非常消耗性能的事情，所以减少频繁地插入DOM节点显得非常有必要。例如：

var list = document.getElementById('list');

for (let x = 0, max = 10, x < max; x++) {
    var li = document.createElement('li');
    li.innerHTML = x;
    list.appendChild(li);
}

上面的代码会向list重复插入10个节点，每次插入节点，浏览器都会重新计算一次页面的位置。消耗非常大的性能。解决的办法就是使用createDocumentFragment

var list = document.getElementById('list');
var fragment = document.createDocumentFragment();

for (let x = 0, max = 10, x < max; x++) {
    var li = document.createElement('li');
    li.innerHTML = x;
    fragment.appendChild(li);
}
list.appendChild(fragment);

使用文档片段改进后，只有一次插入节点的操作，有效减少节点更新造成的性能消耗。
除此之外，使用innerHTML也可以造成差不多的效果，但是字符串拼接会有一定的性能损失。

var list = document.getElementById('list');
var html = '';
for (let x = 0, max = 10, x < max; x++) {
    html += `<li>${ x }</li>`;
}
list.innerHTML = html;

使用事件代理

由发布-订阅模式可以知道，随着监听器的增加，内存也会增加，使得页面性能变差。
在点击列表事件时，可以利用事件代理来减少监听器的声明。

/**
 *    <ul id="ul">
 *       <li id="li_1"></li>
 *       ...
 *       <li id="li_n"></li>
 *   </ul>
 */
// before
var list = document.getElementsByTagName('li');
for(let x = 0, len = list.length; x < len; x++) {
    list[x].onclick = () => {
        ...
    }
}

// after
var ul = document.getElementById('#ul');
ul.addEventListener('click', (e) => {
    let target = e.target;
    switch(target.id) {
        case "li_1": .....
        case "li_2": .....
    }
});

优化启动性能

使用dns预获取文件
在需要异步执行的脚本使用 defer 或 async 属性加载。这可以让HTML解析器更高效地处理文档。
使用 Web workers 运行持续时间长的 JavaScript 代码逻辑
所有能并行的数据处理都应该并行化。不要一团接一团地处理数据，如果可能的话，同时处理它们
在你启动的HTML文件中，不要包含不会在关键路径下出现的脚本或样式表。只在需要时加载他们^[2]

参考

JavaScript高级程序设计
web性能