JavaScript性能优化实战

### 1. 减少全局变量
JavaScript里，全局变量就像一个大杂烩，啥都往里扔，很容易出问题，还会影响性能。为啥呢？因为全局变量会被所有函数共享，查找起来特别费劲，就像在一个大仓库里找东西，每次都得翻个遍。

**优化方法：**
尽量把变量定义在局部，用完就扔。比如，你在函数里用到的变量，就直接在函数里声明。这样，JavaScript引擎就能快速找到它，性能自然就上去了。

```javascript
// 不好的写法
var x = 10;
function add() {
    console.log(x + 20);
}

// 好的写法
function add() {
    var x = 10;
    console.log(x + 20);
}
```

### 2. 避免使用过多的嵌套函数
嵌套函数太多，就像套娃一样，一层套一层，不仅代码难读，性能也会大打折扣。为啥呢？因为每次调用函数，JavaScript引擎都要保存当前的状态，然后去执行嵌套的函数，等嵌套函数执行完再回来，这来回折腾，效率能高才怪。

**优化方法：**
能拆开的尽量拆开，把逻辑写得简单点。如果实在需要嵌套，尽量控制在两层以内。

```javascript
// 不好的写法
function outer() {
    function inner() {
        function innermost() {
            console.log("Hello");
        }
        innermost();
    }
    inner();
}

// 好的写法
function innermost() {
    console.log("Hello");
}
function inner() {
    innermost();
}
function outer() {
    inner();
}
```

### 3. 少用for-in循环
for-in循环看起来很酷，能遍历对象的所有属性，但问题是，它会遍历对象的原型链上的属性，这就容易出问题，而且效率也不高。

**优化方法：**
如果只是想遍历数组，就用普通的for循环或者`for-of`循环。如果是对象，可以用`Object.keys()`或者`Object.values()`来遍历。

```javascript
// 不好的写法
var obj = {a: 1, b: 2, c: 3};
for (var key in obj) {
    console.log(key, obj[key]);
}

// 好的写法
var obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach(function(key) {
    console.log(key, obj[key]);
});
```

### 4. 缓存DOM查询结果
DOM操作是很耗性能的，尤其是频繁地查询DOM元素。每次调用`document.getElementById`或者`document.querySelector`，浏览器都要去页面里找对应的元素，这要是频繁操作，页面肯定卡得不行。

**优化方法：**
把查询到的DOM元素存起来，下次用的时候直接用，不用再重新查询。

```javascript
// 不好的写法
function changeText() {
    document.getElementById("myElement").innerText = "Hello";
}

// 好的写法
var myElement = document.getElementById("myElement");
function changeText() {
    myElement.innerText = "Hello";
}
```

### 5. 减少重绘和重排
重绘和重排是浏览器的两个耗时操作。重排就是重新计算页面布局，重绘就是重新绘制页面。比如，你频繁地修改元素的样式或者位置，浏览器就得不停地重新计算和绘制页面。

**优化方法：**
尽量批量修改样式，减少对DOM的操作次数。比如，把多个样式修改放在一个`style`属性里，或者用`classList`来切换样式类。

```javascript
// 不好的写法
var element = document.getElementById("myElement");
element.style.width = "100px";
element.style.height = "100px";
element.style.backgroundColor = "red";

// 好的写法
var element = document.getElementById("myElement");
element.style.cssText = "width: 100px; height: 100px; background-color: red;";
```

### 6. 使用事件委托
如果你有一个列表，每个列表项都需要绑定事件，直接给每个列表项绑定事件，那效率肯定低得不行。因为每个元素都要绑定一个事件处理器，这不仅浪费内存，还会影响性能。

**优化方法：**
用事件委托，把事件绑定到父元素上。当事件触发时，通过事件冒泡机制，父元素会捕获到事件，然后根据目标元素来判断怎么做。

```javascript
// 不好的写法
var items = document.querySelectorAll(".item");
items.forEach(function(item) {
    item.addEventListener("click", function() {
        console.log("Item clicked");
    });
});

// 好的写法
var list = document.getElementById("myList");
list.addEventListener("click", function(event) {
    if (event.target.classList.contains("item")) {
        console.log("Item clicked");
    }
});
```

### 7. 压缩和合并代码
如果你的项目有很多JavaScript文件，每个文件都要单独加载，那页面加载速度肯定慢得不行。而且，代码里可能还有好多不必要的空格、注释之类的，这些都会增加文件大小。

**优化方法：**
用工具把多个JavaScript文件合并成一个文件，然后压缩代码，去掉多余的空格和注释。这样，浏览器加载的时候就快多了。

### 8. 使用异步加载
有时候，你的JavaScript文件特别大，或者依赖的资源特别多，页面加载的时候就会卡住。因为浏览器会先加载JavaScript文件，等文件加载完并执行完后，才会继续加载页面的其他内容。

**优化方法：**
用异步加载的方式，让JavaScript文件在后台加载，页面先加载其他内容。比如，可以用`defer`或者`async`属性。

```html
<script src="script.js" defer></script>
```

### 9. 减少不必要的计算
代码里有时候会有一些不必要的计算，比如重复的数学运算、多余的逻辑判断之类的。这些虽然看起来没啥影响，但积累起来就会拖慢代码的运行速度。

**优化方法：**
仔细检查代码，把不必要的计算去掉。比如，能用变量存储结果的，就不要每次都重新计算。

```javascript
// 不好的写法
for (var i = 0; i < array.length; i++) {
    console.log(array[i] * 2);
}

// 好的写法
var length = array.length;
for (var i = 0; i < length; i++) {
    console.log(array[i] * 2);
}
```

### 10. 使用Web Workers
如果有些计算特别复杂，比如数据处理、加密解密之类的，直接在主线程里运行，页面肯定卡得不行。因为主线程既要处理页面的渲染，又要处理这些复杂的计算，忙不过来。

**优化方法：**
用Web Workers，把复杂的计算放到后台线程里运行，主线程只负责页面的渲染。这样，页面就不会卡住了。

```javascript
// 主线程
var worker = new Worker("worker.js");
worker.postMessage("Hello");

worker.onmessage = function(event) {
    console.log("Message from worker:", event.data);
};

// worker.js
self.onmessage = function(event) {
    console.log("Message from main thread:", event.data);
    self.postMessage("Hello from worker");
};
```

### 总结
JavaScript性能优化其实没那么难，关键是要养成好习惯。少用全局变量、减少嵌套函数、缓存DOM查询结果、使用事件委托、异步加载……这些方法都很实用，而且不难做到。只要你把这些小技巧用起来，你的代码运行速度肯定会有很大提升，网页也能流畅得飞起来！

好啦，今天的分享就到这里啦！如果你觉得有用，别忘了点赞和分享哦！下次见！