JS性能优化

JS性能

---

1、for循环优化

• 循环每迭代一次，循环中的每条语句都会被执行包括for()
• 能够放在循环之外的语句或赋值会使循环运行得更快。

// example每次 
for(let i = 0; i < arr.length; i++) {}
// 优化后 
let i;
const arrL = arr.length;
for(i = 0; i < arrL; i++) {}

2、减少DOM访问

• 与其他JS比较, HTML DOM访问非常缓慢
• 如果多次用到同一DOM, 尽量访问一次保存本地

3、避免使用with和eval();

• with关键字会使代码运行速度非常慢
  • 原因是 JavaScript 引擎会在编译阶段进行数项的性能优化。其中有些优化依赖于能够根据代码的词法进行静态分析，并预先确定所有变量和函数的定义位置，才能在执行过程中快速找到标识符。 出现了with所有的引擎优化都是无意义的, 最好的方式就是不优化
• with会破环作用域, 导致数据泄露

const objA = {a: 0};
const objB = {b: 1};
function ev(obj) {
  with(obj) {
    a = 2;
  }
}
ev(objA);
ev(objB);
console.log(objA.a); // 2
console.log(objB.a); // undefined
console.log(a); // 2 a被泄露到父级作用域

• eval();参数: 一个表示 JavaScript 表达式、语句或一系列语句的字符串。表达式可以包含变量与已存在对象的属性。
  • 如果参数不是字符串则原封不动的返回, 否者执行并返回(执行时等价于在全局作用域调用);
  • Remark不要使用eval();否者容易出现XSS攻击
    //example
    // const w = 1; eval('w + 2') => 3; eval(w) => w;

4、避免不必要的变量

• 请不要创建不存储的变量

// example 
const treeName = '圣诞树';
const treeAge = '20';
const title = treeName + treeAge;
console.log(`${title}岁`); //👎👎👎
console.log(`${treeName}${treeAge}岁`); //👍👍👍

5、延缓JS加载

• 把脚本放在页面底部，使浏览器首先加载页面。
• 脚本在下载时，浏览器不会启动任何其他的下载。此外所有解析和渲染活动都可能会被阻塞。