如何加速JavaScript 代码运行速度

前言
减少DOM访问
避免不必要的变量
延迟script加载
异步和同步
使用异步编程
避免使用With关键词

前言

本文主要通过五个方面来讲解如何使Js代码得到性能优化，从而实现加快Js代码运行速度的作用。那么好，本文正式开始。

减少DOM访问

减少DOM访问的意思就是如果说，我们要多次调用一个DOM节点使用，那么可以把这个DOM节点定义到一个变量中下次直接调用这个变量即可，这样就可以减少DOM节点的调用，多次调用DOM节点会影响性能，因为它会从HTML文档结构渲染树中找到对应的DOM节点，代码如下：

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

可以使用这种方式，只访问一次DOM节点，下次直接访问变量。

避免不必要的变量

能不定义全局变量就不定义全局变量，因为全局变量有内存冗余和内存泄漏的风险，全局变量只有等页面被关闭才会被释放。

<body><div id="a"></div><div id="b"></div><script>var a = document.getElementById('a')var b=document.getElementById('b')let hello='hello'let world='world'a.innerHTML=hello+''+worldlet hellos='hellos'let worlds='world'let ans=hellos+''+worldsb.innerHTML=ans</script>
</body>

在上述代码中，有一个DOMa和DOMb我们做了innerHTML操作，DOM用了ans变量作为中间值，但这个中间值不是必要的，而且这个中间值ans只用了一次，所以我们可以不通过中间值，直接赋值a的HTML结构中。

延迟script加载

把script放在页面底部，使得页面先于sript被加载，或者放在顶部，在script标签中加上defer或async标签，defer标签的意思是指在浏览器中先按HTML顺序下载，但是等页面加载完后才加载这些js，async也是类似，不同的是async是异步加载。
defer：同步属性，先下载js文件，然后渲染HTML，最后渲染js文件，按照顺序。
async：异步属性，先解析HTMl，但当js下载完成后会停止HTML解析，执行脚本，解析脚本后才继续渲染HTML。

异步和同步

同步是指按顺序加载，而异步是指不按顺序加载。两者都能加载完，只不过加载的方式不同，如果我们某个js文件需要依托另一个文件的内容调用，需要用同步，否则同步异步都可以。

使用异步编程

使用异步编程可以很好的解决js可能造成的阻塞问题，因为js是单线程的语言，所以它对于同步代码会按顺序处理，那同时因为它的运行机制，可以利用事件循环来进行解决，大体就是先执行同步任务，再执行异步任务。也就是说，当执行完所有的同步任务后，才会执行异步任务，异步任务又分为宏任务和微任务，先执行微任务，后执行宏任务，所以说，在特定情况下，多使用异步编程会解决页面阻塞问题。