浅谈 JavaScript 性能优化

文章目录

- 概要
- 一、代码执行优化
- - [1. 减少全局变量访问](#1. 减少全局变量访问)
  - [2. 避免不必要的计算](#2. 避免不必要的计算)
  - [3. 优化循环操作](#3. 优化循环操作)
- 二、内存管理优化
- - [1. 减少内存泄漏](#1. 减少内存泄漏)
  - [2. 对象池与内存复用](#2. 对象池与内存复用)
- 三、渲染性能优化
- - [1. 避免强制同步布局](#1. 避免强制同步布局)
  - [2. 减少 DOM 操作](#2. 减少 DOM 操作)
  - [3. 优化动画与合成](#3. 优化动画与合成)
- 四、网络加载优化
- - [1. 代码压缩与 Tree Shaking](#1. 代码压缩与 Tree Shaking)
  - [2. 按需加载与懒加载](#2. 按需加载与懒加载)
  - [3. 缓存策略](#3. 缓存策略)
- 五、其他优化技巧
- - [1. 避免 eval() 和 with 语句](#1. 避免 eval() 和 with 语句)
  - [2. 使用高效的数据结构](#2. 使用高效的数据结构)
  - [3. 性能监控与分析](#3. 性能监控与分析)
- 总结
- 性能优化之vue3
- - 一、响应式系统优化
  - - [1. 避免过度响应式](#1. 避免过度响应式)
    - [2. 局部响应式替代全局响应式](#2. 局部响应式替代全局响应式)
  - 二、组件设计优化
  - - [1. 使用 `v-once` 缓存静态内容](#1. 使用 v-once 缓存静态内容)
    - [2. 使用 `v-memo` 缓存重复渲染的列表项](#2. 使用 v-memo 缓存重复渲染的列表项)
    - [3. 组件懒加载与 Suspense](#3. 组件懒加载与 Suspense)
  - 三、渲染与更新优化
  - - [1. 避免不必要的 watch](#1. 避免不必要的 watch)
    - [2. 优化计算属性](#2. 优化计算属性)
  - 四、事件处理优化
  - - [1. 防抖/节流处理高频事件](#1. 防抖/节流处理高频事件)
    - [2. 避免在循环中绑定复杂事件处理函数](#2. 避免在循环中绑定复杂事件处理函数)
  - 五、内存管理优化
  - - [1. 手动清理副作用](#1. 手动清理副作用)
    - [2. 避免组件间循环引用](#2. 避免组件间循环引用)
  - 六、构建与部署优化
  - - [1. 代码分割与按需加载](#1. 代码分割与按需加载)
    - [2. 使用生产模式构建](#2. 使用生产模式构建)
  - 性能优化检查清单

概要

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

一、代码执行优化

1. 减少全局变量访问

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

2. 避免不必要的计算

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

示例代码 ：

javascript 复制代码

// 防抖
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. 对象池与内存复用

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

示例：

javascript 复制代码

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。
- 错误示例 ：
  javascript 复制代码
```
element.style.width = '100px'; // 触发布局
console.log(element.offsetWidth); // 强制同步布局，导致额外重排
```
- 正确示例 ：
  javascript 复制代码
```
element.classList.add('new-style'); // 批量修改
```

2. 减少 DOM 操作

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

javascript 复制代码

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

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

3. 优化动画与合成

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

javascript 复制代码

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 对象存储无需响应式的数据

javascript 复制代码

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

javascript 复制代码

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` 缓存静态内容

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

vue 复制代码

<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` 缓存重复渲染的列表项

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

vue 复制代码

<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

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

vue 复制代码

<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 避免初始触发

javascript 复制代码

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. 优化计算属性

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

优化方案：

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

javascript 复制代码

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. 防抖/节流处理高频事件

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

vue 复制代码

<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. 避免在循环中绑定复杂事件处理函数

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

优化方案：

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

vue 复制代码

<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.id
  if (targetId) {
    // 处理点击逻辑
  }
}
</script>

五、内存管理优化

1. 手动清理副作用

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

优化方案：

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

javascript 复制代码

import { onUnmounted, watch } from 'vue'

// 定时器示例
let timer = null

const setupTimer = () => {
  timer = setInterval(() => {
    // 定时任务
  }, 1000)
}

// 组件卸载时清理
onUnmounted(() => {
  clearInterval(timer)
})

// watch 停止函数示例
const stop = watch(source, (newVal) => {
  // 监听逻辑
})

// 手动停止监听
stop()

2. 避免组件间循环引用

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

优化方案：

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

javascript 复制代码

// 错误示例：父子组件循环引用
// 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 中配置动态导入

javascript 复制代码

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

2. 使用生产模式构建

优化效果：

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

bash 复制代码

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

性能优化检查清单

响应式检查：
- 是否将大型静态数据转为响应式？
- 是否使用 shallowReactive 避免深层响应式？
渲染效率检查：
- 是否使用 v-once 缓存静态内容？
- 是否使用 v-memo 优化列表渲染？
- 是否有不必要的组件重新渲染？
内存管理检查：
- 是否清理了所有定时器和事件监听器？
- 是否存在组件间循环引用？
构建优化检查：
- 是否按需加载非首屏组件？
- 是否使用生产模式构建？

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

浅谈 JavaScript 性能优化

文章目录

概要

一、代码执行优化

1. 减少全局变量访问

2. 避免不必要的计算

3. 优化循环操作

二、内存管理优化

1. 减少内存泄漏

2. 对象池与内存复用

三、渲染性能优化

1. 避免强制同步布局

2. 减少 DOM 操作

3. 优化动画与合成

四、网络加载优化

1. 代码压缩与 Tree Shaking

2. 按需加载与懒加载

3. 缓存策略

五、其他优化技巧

1. 避免 eval() 和 with 语句

2. 使用高效的数据结构

3. 性能监控与分析

总结

性能优化之vue3

一、响应式系统优化

1. 避免过度响应式

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

二、组件设计优化

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

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

3. 组件懒加载与 Suspense

三、渲染与更新优化

1. 避免不必要的 watch

2. 优化计算属性

四、事件处理优化

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

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

五、内存管理优化

1. 手动清理副作用

2. 避免组件间循环引用

六、构建与部署优化

1. 代码分割与按需加载

2. 使用生产模式构建

性能优化检查清单

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

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