js性能优化

1.可以通过 Audit 工具获得网站的多个指标的性能报告
2.可以通过 Performance 工具了解网站的性能瓶颈
3.可以通过 Performance API 具体测量时间
4.为了减少编译时间，我们可以采用减少代码文件的大小或者减少书写嵌套函数的方式
5.为了让 V8 优化代码，我们应该尽可能保证传入参数的类型一致。这也给我们带来了一个思考，这是不是也是使用 TypeScript 能够带来的好处之一
6.在浏览器中缓存
7.删除未使用的JavaScript
8.避免使用太多内存
9.推迟不必要的JS加载
10.避免内存泄漏
11.适当的使用Web worker
12.优先访问局部变量
13.避免使用全局变量
14.实施一些优化方案
始终使用计算复杂度最低的算法和最佳的数据结构来解决任务。
重写算法以获得相同的结果和更少的计算。
避免递归调用。
给重复的函数加入变量、计算和调用。
分解和简化数学公式。
使用搜索数组：用它们来获取基于另一个的值，而不是使用
switch/case 语句。
使条件总是更有可能为真，以更好地利用处理器的推测执行。
如果可以，请使用位级运算符替换某些操作，因为这些运算符的
处理周期较短。
15.使用工具检测问题
Lighthouse 是一个很好的网页性能工具

16. 最小化dom访问次数，尽可能在js端执行；
17. 如果需要多次访问某个dom节点，请使用局部变量存储对它的引用；
18. 小心处理html集合，因为它实时连系着底层的文档，把集合的长度缓存到一个变量中，并在迭代中使用它，如果需要经常操作集合，建议把它拷贝到一个数组中；
19. 如果可能的话，使用速度更快的API，比如querySelectorAll和firstElementChild；
20. 要留意重绘和重排；批量修改样式时，“离线”操作dom树；使用缓存，并减少访问布局的次数；
21. 动画中使用绝对定位，使用拖放代理
22. 使用事件委托来减少事件处理器的数量
23. 函数中读写局部变量总是最快的，而全局变量的读取则是最慢的；
24. 尽可能地少用with 语句，因为它会增加with 语句以外的数据的访问代价；
25. 闭包尽管强大，但不可滥用，否则会影响到执行速度以及内存；
26. 嵌套的对象成员会明显影响性能，尽量少用；
27. 避免多次访问对象成员或函数中的全局变量，尽量将它们赋值给局部变量以缓存。
    28.应尽量少用for(in)循环，for(;?、while()循环的性能基本持平.
    29.如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度
    30.尽量避免对象的嵌套查询，对于obj1.obj2.obj3.obj4这个语句
    31.使运算符时，尽量使用+＝，－＝、*＝、=等运算符号，而不是直接进行赋值运算
    32.当需要将数字转换成字符时，采用如下方式："" + 1。从性能上来看，将数字转换成字符时，有如下公式：("" +) > String() > .toString() > new String()。String()属于内部函数，所以速度很快。而.toString()要查询原型中的函数，所以速度逊色一些，new String()需要重新创建一个字符串对象，速度最慢。
    33.当需要将浮点数转换成整型时，应该使用Math.floor()或者Math.round()。而不是使用parseInt(),该方法 用于将字符串转换成数字。而且Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用时间，速度是最快的。
    34.尽量作用JSON格式来创建对象，而不是var obj=new Object()方法。因为前者是直接复制，而后者需要调用构造器，因而前者的性能更好。
    35.对字符串进行循环操作，例如替换、查找，就使用正则表达式。因为JS的循环速度比较慢，而正则表达式的操作是用C写成的API，性能比较好。
    36.对于大的JS对象，因为创建时时间和空间的开销都比较大，因此应该尽量考虑采用缓存。
    37.JS解析是JS性能消耗的主要部分.
    38.避免全局查找（因为涉及作用域上的查找） ，比如：循环中的document引用，查到次数是O(n)，每次都要进行作用域链查找。
    39.在JS中访问变量或数组都是O(1)操作，比访问对象上的属性更有效率，后者是一个O(n)操作
    40.当循环的次数确定时，消除循环并使用多次函数调用往往更快
    接下来给出更快的Duff装置技术，将do-while循环分成2个单独的循环

// Speed Up Your Site(New Riders, 2003)
function process(v) {
    alert(v);
}
 
var values = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];
var iterations = Math.floor(values.length / 8);
var leftover = values.length % 8;
var 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);

41.原生方法更快
42.switch语句较快
43.多个变量声明。var i = 1, j = "hello";
44.优化DOM交互, 最小化现场更新,多使用innerHTML
45.垃圾收集 - 对象相互引用会导致引用计数始终为2，所以用完对象后应将引用设为null
46.事件委托
47.预加载。懒加载

参考： https://www.cnblogs.com/cnblogs-jcy/p/5654351.html