优化与性能：实战案例与技巧

## 防抖与节流
防抖和节流是前端开发中常用的优化技巧，可以减少不必要的函数调用，提高性能。
### 防抖
防抖是指在规定时间内只执行一次函数，若在规定时间内再次触发函数，则取消上一次的执行并重新计时。
例如，在滚动事件中，如果我们想在滚动停止后执行某个函数，可以使用防抖来避免在滚动过程中不断触发函数。
```javascript
const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
};

window.addEventListener('scroll', debounce(() => {
  // 滚动停止后执行的函数
}, 200));

节流

节流是指在规定时间内只执行一次函数，即使在规定时间内多次触发函数，也只执行一次。
例如，在点击事件中，如果我们想在按钮点击后执行某个函数，但又不想在按钮快速点击时多次触发函数，可以使用节流来避免这种情况。

const throttle = (func, wait) => {
  let lastCallTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCallTime >= wait) {
      func.apply(this, args);
      lastCallTime = now;
    }
  };
};

const button = document.getElementById('button');
button.addEventListener('click', throttle(() => {
  // 按钮点击后执行的函数
}, 200));

某个全局组件一挂载就发请求的优化

在项目中，我们遇到过一个问题，某个全局组件一挂载就发请求，导致页面加载速度变慢。为了解决这个问题，我们可以使用懒加载的方式，只在需要的时候再发请求。
例如，我们可以使用Vue.js的keep-alive组件来实现懒加载。

<keep-alive>
  <component :is="componentName" />
</keep-alive>

这样，只有当componentName对应的组件被激活时，才会发请求。

路由带参跳转报错

在项目中，我们还遇到过路由带参跳转报错的问题。这是因为在路由配置中没有定义参数。为了解决这个问题，我们需要在路由配置中定义参数。
例如，在Vue.js中，我们可以使用以下方式定义参数：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: UserDetail
    }
  ]
});

这样，我们就可以在路由跳转时传递参数了。

总结

以上是项目中的一些优化、性能问题以及解决方案。希望这些解决方案能够帮助大家提高前端开发效率和网站性能。