灏天阁

前端性能优化探索

· Yin灏

JavaScript 性能优化

JavaScript 是前端开发中最常用的脚本语言之一，优化它的性能可以有效地提升页面响应速度和流畅度。下面介绍一些常见的 JavaScript 性能优化方法：

1. 函数节流

函数节流是指在一定时间内只执行一次函数，比如鼠标滚动事件，如果没有限制，那么每次鼠标滚动都会触发大量事件，导致浏览器卡顿甚至崩溃，而通过函数节流可以使得事件执行稳定流畅。

function throttle(fn, wait) {
  var timer;
  return function () {
    var context = this,
      args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        fn.apply(context, args);
        timer = null;
      }, wait);
    }
  };
}

2. 函数防抖

函数防抖是指在一定时间内，多次触发事件只执行最后一次。比如搜索框输入事件，如果没有限制，那么每次键盘按下都会触发搜索，导致请求过多，而通过函数防抖可以避免这种情况。

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

3. DOM 操作优化

DOM 操作是 JavaScript 中最耗费性能的操作之一，因此需要尽可能减少 DOM 操作的次数。例如，在修改多个元素的类名时，可以创建一个临时节点，然后一次性修改所有元素的类名，最后再删除临时节点。

var temp = document.createElement("div");
temp.className = "hidden";
document.body.appendChild(temp);

for (var i = 0; i < list.length; i++) {
  list[i].className += " hidden";
}

document.body.removeChild(temp);

React 性能优化

React 是目前最流行的前端框架之一，但是在大型应用中，组件数量庞大，每次渲染都会造成很大的性能压力。下面介绍一些常见的 React 性能优化方法：

1. Pure Component

Pure Component 是一种纯组件，当其 props 和 state 没有任何变化时，就不会重新渲染。与普通组件相比，Pure Component 避免了不必要的渲染，提高了渲染效率。

import React, { PureComponent } from "react";

class Button extends PureComponent {
  render() {
    return <button onClick={this.props.onClick}>{this.props.label}</button>;
  }
}

2. Memo

Memo 是一种记忆组件，类似于 Pure Component，但是可以自定义比较规则。当组件的 props 发生变化时，Memo 会根据比较规则判断是否需要重新渲染。

import React, { memo } from "react";

const Button = memo(
  ({ onClick, label }) => <button onClick={onClick}>{label}</button>,
  (prevProps, nextProps) => prevProps.label === nextProps.label
);

3. Virtualized List

Virtualized List 是一种虚拟列表技术，它只渲染可见区域内的列表项，而不会全部渲染。这样可以大大减少 DOM 节点数量，提高页面性能。

import React, { PureComponent } from "react";
import { FixedSizeList } from "react-window";

class List extends PureComponent {
  render() {
    return (
      <FixedSizeList height={400} width={300} itemSize={50} itemCount={1000}>
        {({ index, style }) => <div style={style}>Item {index}</div>}
      </FixedSizeList>
    );
  }
}

Vue 性能优化

Vue 是另一种流行的前端框架，与 React 类似，在大型应用中也需要考虑性能问题。下面介绍一些常见的 Vue 性能优化方法：

1. v-for 指令

v-for 指令用于渲染列表数据，但是当列表数据过多时，会导致渲染速度变慢。为了解决这个问题，可以使用 v-for 的 key 属性，通过唯一标识符来优化列表渲染。

<ul>
    <li v-for="item in items" :key="item.id">{{item.name}}</li>
</ul>

2. 计算属性

计算属性可以缓存数据并且在依赖项发生变化时才重新计算，避免了无意义的重复计算，提高了渲染效率。

computed: {
    totalPrice() {
        return this.items.reduce((total, item) => total + item.price * item.quantity, 0);
    }
}

3. 异步组件

异步组件是一种延迟加载组件的方式，当组件被需要时再进行加载。这样可以减少首次渲染时间，提高页面加载速度。

const MyComponent = () => import('./MyComponent.vue');

- Book Lists -