浅谈 JavaScript 性能优化

概要

JavaScript 性能优化是提升网页加载速度、交互流畅度和用户体验的关键手段。以下从代码执行效率、内存管理、渲染优化等方面进行浅谈。

一、代码执行优化

1. 减少全局变量访问

• 原因：全局变量在作用域链顶端，访问速度慢于局部变量。
• 优化：
  • 将常用全局变量缓存为局部变量（如 const doc = document）。
  • 使用模块系统（ES6 Modules）或闭包封装变量，避免污染全局作用域。

2. 避免不必要的计算

• 防抖（Debounce）与节流（Throttle）：
  • 防抖：事件触发后延迟执行，若短时间内多次触发则重新计时（适用于搜索联想、窗口 resize 等）。
  • 节流：限制事件触发频率，确保单位时间内最多执行一次（适用于滚动加载、高频点击等）。
• 示例代码：

  // 防抖
  function debounce(fn, delay) {let timer = null;return function (...args) {clearTimeout(timer);timer = setTimeout(() => fn.apply(this, args), delay);};
  }// 节流（时间戳版）
  function throttle(fn, delay) {let lastTime = 0;return function (...args) {const now = Date.now();if (now - lastTime >= delay) {fn.apply(this, args);lastTime = now;}};
  }
  

3. 优化循环操作

• 使用高效循环方式：
  • 优先使用 for 循环而非 forEach（后者存在函数调用开销）。
  • 缓存循环长度（如 for (let i = 0, len = arr.length; i < len; i++)）。
• 避免循环内的复杂操作：将耗时逻辑移至循环外。

二、内存管理优化

1. 减少内存泄漏

• 常见场景：
  • 全局变量未及时清理（如意外挂载在 window 上的对象）。
  • 定时器或事件监听器未移除（如 addEventListener 需搭配 removeEventListener）。
  • DOM 元素与 JavaScript 对象的循环引用（如缓存 DOM 节点时未断开引用）。
• 优化方法：
  • 使用严格模式（'use strict'）检测未声明变量。
  • 手动清理定时器（clearTimeout/clearInterval）和事件监听器。
  • 使用弱引用（WeakMap/WeakSet）避免对象被意外引用。

2. 对象池与内存复用

• 对象池模式：预先创建一组可复用的对象，避免频繁创建/销毁带来的开销（如游戏中的子弹对象）。
• 示例：

  const objectPool = {pool: [],create() {return this.pool.length ? this.pool.pop() : new Object();},recycle(obj) {// 重置对象状态obj.property = null;this.pool.push(obj);}
  };
  

三、渲染性能优化

1. 避免强制同步布局

• 原因：浏览器渲染流程为“样式计算 → 布局 → 绘制 → 合成”，强制同步布局（如在修改样式后立即读取布局属性）会触发额外重排。
• 优化：
  • 批量修改样式：使用 classList 替代直接操作 style，或通过 documentFragment 批量操作 DOM。
  • 错误示例：

    element.style.width = '100px'; // 触发布局
    console.log(element.offsetWidth); // 强制同步布局，导致额外重排
    

  • 正确示例：

    element.classList.add('new-style'); // 批量修改
    

2. 减少 DOM 操作

• 使用文档碎片（Document Fragment）：将多次 DOM 修改合并为一次操作。

  const fragment = document.createDocumentFragment();
  data.forEach(item => {const li = document.createElement('li');li.textContent = item;fragment.appendChild(li);
  });
  ul.appendChild(fragment);
  

• 避免频繁操作内联样式：优先通过 CSS 类名控制样式。

3. 优化动画与合成

• 使用 requestAnimationFrame：将动画操作绑定到浏览器的刷新周期，避免丢帧。

  let progress = 0;
  function animate() {progress += 1;element.style.transform = `translateX(${progress}px)`;if (progress < 100) requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
  

• 利用 CSS 合成层：对频繁动画的元素设置 will-change: transform 或 transform: translateZ(0)，使其单独成为一个合成层，减少重绘影响。

四、网络加载优化

1. 代码压缩与 Tree Shaking

• 工具：使用 Webpack、Rollup 等打包工具压缩代码，移除未使用的代码（Tree Shaking，需配合 ES6 模块）。

2. 按需加载与懒加载

• 按需加载：通过动态导入（import('./module.js')）实现路由或组件的异步加载。
• 懒加载：对非关键资源（如图片、非首屏脚本）延迟加载，使用 Intersection Observer 监听元素进入视口。

3. 缓存策略

• 使用 localStorage/sessionStorage：缓存频繁访问的数据（如用户配置）。
• HTTP 缓存：设置 Cache-Control 头，合理利用浏览器缓存静态资源。

五、其他优化技巧

1. 避免 eval() 和 with 语句

• 原因：eval() 会阻塞 JavaScript 引擎优化，with 会导致作用域链变长，影响性能。

2. 使用高效的数据结构

• 场景：
  • 频繁查找：用 Map 替代对象（键可非字符串，且遍历性能更优）。
  • 有序数据：用 Array 或 Set（去重场景）。

3. 性能监控与分析

• 工具：
  • 浏览器 DevTools（Performance 面板录制性能分析）。
  • Lighthouse 审计性能指标（如 FCP、LCP、TTI 等）。

总结

性能优化需遵循“过早优化是万恶之源”原则，优先通过 profiling 定位瓶颈，再针对性优化。核心思路包括：减少计算量、降低内存占用、优化渲染流程、提升资源加载效率。实际项目中可结合框架特性（如 React 的 useMemo/useCallback、Vue 的 v-show/v-if 合理使用）进一步提升性能。

性能优化之vue3

在 Vue3 中，性能优化需结合 Composition API、响应式原理和渲染机制进行针对性处理。以下从代码结构、响应式优化、渲染效率等角度提供实例和避坑指南：

一、响应式系统优化

1. 避免过度响应式

问题场景：将大型静态数据（如常量配置、初始表单值）放入响应式对象会增加不必要的依赖追踪开销。

优化方案：

• 使用 readonly 包装静态数据
• 使用普通 JS 对象存储无需响应式的数据

import { ref, readonly } from 'vue'// 错误示例：将常量配置转为响应式
const config = reactive({API_URL: 'https://api.example.com',MAX_FILE_SIZE: 1024
})// 正确示例：使用 readonly 包装静态数据
const config = readonly({API_URL: 'https://api.example.com',MAX_FILE_SIZE: 1024
})// 正确示例：表单初始值使用普通对象
const initialFormData = {name: '',age: 0
}
const formData = ref({ ...initialFormData })

2. 局部响应式替代全局响应式

问题场景：在组件中使用 reactive 创建大型对象时，所有属性都会被递归转为响应式，导致性能开销。

优化方案：

• 使用 ref 替代 reactive 存储复杂结构
• 对无需响应式的深层属性使用 shallowReactive/shallowRef

import { ref, shallowReactive } from 'vue'// 错误示例：递归响应式大型对象
const tableData = reactive({list: [], // 可能包含大量数据pagination: { page: 1, size: 10 }
})// 正确示例：仅表层响应式
const tableData = shallowReactive({list: ref([]), // 列表数据变化时手动更新pagination: { page: 1, size: 10 }
})

二、组件设计优化

1. 使用 v-once 缓存静态内容

适用场景：包含大量静态内容的组件（如介绍文案、帮助信息）

<template><div><!-- 静态内容只需渲染一次 --><div v-once class="static-content"><h1>关于我们</h1><p>公司简介：...（大量静态文本）</p></div><!-- 动态内容正常渲染 --><div class="dynamic-content"><p>当前时间：{{ currentTime }}</p></div></div>
</template>

2. 使用 v-memo 缓存重复渲染的列表项

适用场景：列表项中大部分数据不变，仅少量字段变化

<template><div><!-- 仅当 item.id 或 item.name 变化时才重新渲染 --><div v-for="item in list" v-memo="[item.id, item.name]" :key="item.id"><span>{{ item.name }}</span><span>{{ expensiveComputation(item) }}</span> <!-- 复杂计算 --></div></div>
</template>

3. 组件懒加载与 Suspense

适用场景：非首屏组件（如模态框、详情页）

<template><div><button @click="showDetail = true">查看详情</button><!-- 按需加载详情组件 --><Suspense v-if="showDetail"><template #default><LazyDetailComponent :id="itemId" /></template><template #fallback><div>加载中...</div></template></Suspense></div>
</template><script setup>
import { ref } from 'vue'// 懒加载组件
const LazyDetailComponent = defineAsyncComponent(() => import('./DetailComponent.vue'))const showDetail = ref(false)
const itemId = ref(1)
</script>

三、渲染与更新优化

1. 避免不必要的 watch

问题场景：监听大型对象导致频繁触发回调

优化方案：

• 监听特定属性而非整个对象
• 使用 deep: true 时结合 immediate: false 避免初始触发

import { watch } from 'vue'const formData = ref({name: '',age: 0,address: {city: '',street: ''}
})// 错误示例：监听整个对象
watch(formData, (newVal) => {// 每次任何属性变化都会触发
})// 正确示例：监听特定属性
watch(() => formData.value.name, (newName) => {// 仅 name 变化时触发
})// 正确示例：深度监听（仅在必要时使用）
watch(() => formData.value.address, (newAddress) => { /* ... */ },{ deep: true, immediate: false }
)

2. 优化计算属性

问题场景：复杂计算属性未缓存结果，导致重复计算

优化方案：

• 确保计算属性纯函数化
• 对耗时计算使用缓存策略

import { computed } from 'vue'const list = ref([1, 2, 3, 4, 5])// 错误示例：包含副作用的计算属性
const filteredList = computed(() => {console.log('计算中...') // 每次访问都会执行return list.value.filter(item => item > 3)
})// 正确示例：纯函数计算属性
const filteredList = computed(() => list.value.filter(item => item > 3))// 复杂计算的缓存优化
const expensiveResult = computed(() => {// 使用 WeakMap 缓存计算结果const cache = new WeakMap()if (cache.has(list.value)) {return cache.get(list.value)}const result = /* 复杂计算逻辑 */cache.set(list.value, result)return result
})

四、事件处理优化

1. 防抖/节流处理高频事件

适用场景：搜索联想、滚动加载、窗口大小变化

<template><div><input v-model="searchText" @input="debouncedSearch" /></div>
</template><script setup>
import { ref } from 'vue'
import { debounce } from 'lodash-es' // 或自定义防抖函数const searchText = ref('')// 创建防抖函数
const debouncedSearch = debounce((value) => {fetchData(value) // 执行搜索请求
}, 300)
</script>

2. 避免在循环中绑定复杂事件处理函数

问题场景：大型列表中每个项都绑定复杂事件处理函数

优化方案：

• 使用事件委托
• 将事件处理函数提取到组件外部

<template><!-- 错误示例：每个项都创建新的处理函数 --><ul><li v-for="item in list" :key="item.id" @click="() => handleClick(item)">{{ item.name }}</li></ul><!-- 正确示例：事件委托 --><ul @click="handleListClick"><li v-for="item in list" :key="item.id" :data-id="item.id">{{ item.name }}</li></ul>
</template><script setup>
import { ref } from 'vue'const list = ref([...])// 事件委托处理函数
const handleListClick = (event) => {const targetId = event.target.closest('li').dataset.idif (targetId) {// 处理点击逻辑}
}
</script>

五、内存管理优化

1. 手动清理副作用

问题场景：定时器、WebSocket、自定义事件未清理导致内存泄漏

优化方案：

• 在 onUnmounted 钩子中清理副作用
• 使用 watch 的停止函数

import { onUnmounted, watch } from 'vue'// 定时器示例
let timer = nullconst setupTimer = () => {timer = setInterval(() => {// 定时任务}, 1000)
}// 组件卸载时清理
onUnmounted(() => {clearInterval(timer)
})// watch 停止函数示例
const stop = watch(source, (newVal) => {// 监听逻辑
})// 手动停止监听
stop()

2. 避免组件间循环引用

问题场景：父组件引用子组件，子组件又引用父组件

优化方案：

• 通过事件或状态管理（如 Pinia）解耦组件通信
• 使用 provide/inject 替代直接引用

// 错误示例：父子组件循环引用
// Parent.vue
import Child from './Child.vue'// Child.vue
import Parent from './Parent.vue'// 正确示例：使用事件通信
// Parent.vue
<Child @custom-event="handleEvent" />// Child.vue
const emit = defineEmits(['custom-event'])
emit('custom-event', data)

六、构建与部署优化

1. 代码分割与按需加载

配置方案：在 Vite/Webpack 中配置动态导入

// router.js
const routes = [{path: '/dashboard',name: 'Dashboard',// 动态导入组件component: () => import('../views/Dashboard.vue')}
]

2. 使用生产模式构建

优化效果：

• 移除开发环境代码（如 console.log、process.env.NODE_ENV 判断）
• 压缩混淆代码
• 启用 Tree Shaking

# Vite 构建命令
npm run build -- --mode production

性能优化检查清单

1. 响应式检查：

   • 是否将大型静态数据转为响应式？
   • 是否使用 shallowReactive 避免深层响应式？

2. 渲染效率检查：

   • 是否使用 v-once 缓存静态内容？
   • 是否使用 v-memo 优化列表渲染？
   • 是否有不必要的组件重新渲染？

3. 内存管理检查：

   • 是否清理了所有定时器和事件监听器？
   • 是否存在组件间循环引用？

4. 构建优化检查：

   • 是否按需加载非首屏组件？
   • 是否使用生产模式构建？

通过以上优化手段，可有效提升 Vue3 应用的性能表现。建议结合浏览器 DevTools 的 Performance 面板进行性能分析，针对性地解决瓶颈问题。