React 和 React Native：测量屏幕加载时间

李, 若俞 • 2024年7月3日下午4:04 • 技术随笔 • 阅读 121

本文旨在指导你如何测量屏幕加载数据和渲染其 UI 元素所需的时间。这些步骤必须在用户能够与 UI 进行交互之前完成。

测量加载时间不仅仅是一项任务，它是确保用户体验快速和流畅的重要步骤。它是众多确定新功能开发或重构对应用性能影响的关键。

放心，在完成本指南后，你将构建一个自定义钩子，可以无缝地插入到任何 React 或 React Native 应用中，并开始测量加载时间。

实现

screenName：定义屏幕名称
isLoading：指示加载是否完成，用户是否可以开始交互

下面是如何创建一个自定义钩子来测量屏幕加载时间：

import { useEffect, useState } from 'react';

const useGetPerformance = ({ screenName, isLoading }) => {
  const [startTime, setStartTime] = useState(null);
  const [loadTime, setLoadTime] = useState(null);

  useEffect(() => {
    if (!isLoading) {
      setStartTime(performance.now());
    } else if (startTime) {
      const endTime = performance.now();
      const timeToLoad = endTime - startTime;
      setLoadTime(timeToLoad);
      console.log(`${screenName} 加载时间: ${timeToLoad.toFixed(2)} 毫秒`);
    }
  }, [isLoading]);

  return loadTime;
};

export default useGetPerformance;

在 useEffect 中，一旦用户到达屏幕并设置了开始时间，我们就开始用 performance.now() 测量时间。

performance.now() 方法以毫秒为单位返回高分辨率时间戳。

加载数据后，我们设置 endTime 并通过测量结束时间和开始时间的差值来计算加载时间。

开始测量

我们简单地使用迄今为止构建的功能，开始测量时间。为此，我们只需导入并调用 useGetPerformance 钩子及其属性。

React Native

import { useState } from 'react';
import { Text, View } from 'react-native';
import { useGetPerformanceReport } from './performance';

export const Feed = () => {
  const [feedDataLoaded, setFeedDataLoaded] = useState(false);

  useGetPerformanceReport({
    screenName: 'Feed',
    isLoading: feedDataLoaded,
  });

  return (
    <View>
      <Text>Feed Screen</Text>
    </View>
  );
};

React

import { useState } from 'react';
import { useGetPerformanceReport } from './performance';

export const Feed = () => {
  const [feedDataLoaded, setFeedDataLoaded] = useState(false);

  useGetPerformanceReport({
    screenName: 'Feed',
    isLoading: feedDataLoaded,
  });

  return (
    <div>
      <h1>Feed Screen</h1>
    </div>
  );
};