本文从代码层面出发，介绍一些小技巧以提升性能

古语有云，千里之堤，溃于蚁穴，性能的问题如出一辙。尤其是在图形化编程的项目中，日积月累的烂代码，导致最终页面的不堪重负。而此时，却束手无策，只能大量重构。因此，在写每一行代码的时候，都应该对性能有所考虑。

1.HTML、JS、CSS三者解耦，各司其职

html是数据，js是行为，css负责外观。三者代表了三个层面，应该各司其职互不干扰.如下代码:

const dom = document.getElementById('id')
dom.style.height = 100 + 'px'
dom.style.width = 100 + 'px'

css才应该负责样式层，所以任何的样式问题都应该通过css文件解决。而上述代码则是js承担了页面显示的任务。造成js和css的耦合。但是这种需求有时候不可避免，我们可以使用替代方案，降低耦合度：

const dom = document.getElementById('id')
dom.className = 'dddd'

通过设置类名的方式，达到我们目的的同时，还能保持css负责显示的底线。

2.事件处理逻辑和应用程序逻辑分隔开

const handleClick = (event) => {
  if (event.keyCode === 13) {
    const dom = document.getElementById('dom')
    // ......
    // ......
  }
}

上面代码中，当按下某个code为13的案件后，触发了handleClick函数，然后获取dom进行后续的操作。在这个实例中，从获取dom开始的后续操作，就是应用程序的逻辑，需要严格提炼出来。改造如下：

const Operation = () => {
  const dom = document.getElementById('dom')
  // ......
  // ......
}

const handleClick = (event) => {
  if (event.keyCode === 13) {
    Operation()
  }
}

为什么要这么做？理由很简单，降低耦合度。设想一下，倘若现在不止一个事件会触发operation函数所做的事情呢？我是不是在每一个休要触发的地方都加上operation函数中的那托代码？这一点极其的重要，工程实践最佳。事件处理程序应该专注于处理时间的分发，后续的处理必须严格交给应用程序的逻辑函数。

3.避免全局查找

只要函数中存在引用超过两次的全局对象，就应该把这个变量保存为局部变量。

4.if-else 较为复杂的时候，使用switch替换。同时将最可能的情况放在前面，最不可能的往后放，以进一步提升性能

尽量避免一坨一坨的if-else

5.一条可以执行多个操作的语句，比多条语句中每个语句执行一个操作要快

let v1 = 100
let v2 = [100, 200]
let v3 = 'asdasd'
.....
.....
let v1 = 100,
v2 = [100, 200],
v3 = 'asdasd'

持续更新中…