Noções Básicas de Desempenho

npx create-expo-app@latest MyPerfApp --template blank-typescript
cd MyPerfApp
npx expo start

// src/perf/tti.ts - contrato definido pela equipe
export type TtiMilestone =
  | "app_launch" // início do processo / entrada JS
  | "root_layout_mounted"
  | "primary_tab_layout"
  | "primary_data_ready"
  | "primary_interactive";
 
/**
 * Aplicativo de feed de consumidor: inicialização fria → feed inicial rolável + pull-to-refresh funcionando.
 * Aplicativo de formulário B2B: inicialização fria → primeiro input focado e teclado pronto.
 * Documente SUA aba principal e portão em docs/performance-budgets.md.
 */
export const TTI_CONTRACT = {
  start: "app_launch" as const,
  end: "primary_interactive" as const,
  referenceDevice: "Classe Pixel 6a Android",
  budgetMs: 2500,
};

// app/_layout.tsx
import { useEffect, useRef } from "react";
import { Slot } from "expo-router";
 
const t0 = globalThis.performance?.now?.() ?? Date.now();
 
export default function RootLayout() {
  const reported = useRef(false);
 
  useEffect(() => {
    if (reported.current) return;
    reported.current = true;
    const rootMounted = globalThis.performance?.now?.() ?? Date.now();
    console.info("[perf] root_layout_mounted_ms", Math.round(rootMounted - t0));
  }, []);
 
  return <Slot />;
}

// app/(tabs)/index.tsx - aba principal marca como interativa
import { useEffect, useRef } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
 
export default function HomeScreen() {
  const interactive = useRef(false);
 
  useEffect(() => {
    if (interactive.current) return;
    interactive.current = true;
    // Em produção: analytics.track("tti_primary_interactive", { ms: ... })
    console.info("[perf] primary_interactive");
  }, []);
 
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Home</Text>
      <Pressable style={styles.cta}>
        <Text style={styles.ctaText}>Ação principal</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, justifyContent: "center" },
  title: { fontSize: 24, fontWeight: "700", marginBottom: 16 },
  cta: { backgroundColor: "#2563eb", padding: 14, borderRadius: 10, alignItems: "center" },
  ctaText: { color: "#fff", fontWeight: "600" },
});

// Apenas para desenvolvimento - agite o dispositivo → "Show Perf Monitor" no menu de desenvolvimento
// Observe ambos os contadores enquanto rola uma FlatList pesada
import { FlatList, StyleSheet, Text, View } from "react-native";
 
const ROWS = Array.from({ length: 500 }, (_, i) => ({ id: String(i), title: `Linha ${i}` }));
 
export default function FpsDemo() {
  return (
    <FlatList
      data={ROWS}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
}
 
const styles = StyleSheet.create({
  row: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: "#e2e8f0" },
});

// scripts/perf/frame-budget.ts - constante de documentação para a equipe
export const FRAME_BUDGET = {
  targetFps: 60,
  frameBudgetMs: 1000 / 60, // ~16.7
  auditFloorFps: 55,
  primaryScenarios: [
    "home_feed_fast_fling",
    "tab_switch_animation",
    "modal_open_close",
    "pull_to_refresh",
  ],
} as const;

// src/perf/memory-budget.ts
export const MEMORY_BUDGET = {
  tier: "standard" as const,
  ceilingMb: 350,
  soakMinutes: 10,
  scenarios: ["scroll_home", "open_profile", "background_2min", "return_and_scroll"],
};

# Exporte o bundle de produção para verificação de tamanho (ajuste o ponto de entrada para seu aplicativo)
npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file node_modules/expo-router/entry.js \
  --bundle-output /tmp/index.android.bundle \
  --assets-dest /tmp/assets
 
ls -lh /tmp/index.android.bundle

import { Pressable, StyleSheet, Text } from "react-native";
 
export function SlowButton({ onPress }: { onPress: () => void }) {
  return (
    <Pressable
      style={styles.btn}
      onPress={() => {
        // Executa na thread JS - bloqueia outro trabalho JS até terminar
        let sum = 0;
        for (let i = 0; i < 2_000_000; i++) sum += i;
        onPress();
      }}
    >
      <Text style={styles.label}>Me toque</Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  btn: { padding: 14, backgroundColor: "#2563eb", borderRadius: 8 },
  label: { color: "#fff", fontWeight: "600" },
});

import { useEffect, useState } from "react";
import { InteractionManager, StyleSheet, Text, View } from "react-native";
 
export default function HomeWithDeferredInit() {
  const [ready, setReady] = useState(false);
 
  useEffect(() => {
    const task = InteractionManager.runAfterInteractions(() => {
      // Inicialização de analytics, flags de recursos, prefetch não crítico
      setReady(true);
    });
    return () => task.cancel();
  }, []);
 
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Home</Text>
      <Text style={styles.meta}>{ready ? "Telemetria ativa" : "Apenas UI principal"}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16 },
  title: { fontSize: 22, fontWeight: "700" },
  meta: { marginTop: 8, color: "#64748b" },
});

## Auditoria semanal de rolagem (5 minutos)
 
1. Inicialização fria do aplicativo no Pixel 6a (ou dispositivo de referência da equipe).
2. Abra a aba principal do feed.
3. Role rapidamente por 15 segundos.
4. Registre: FPS da UI min, FPS do JS min, quaisquer linhas em branco.
5. Abra/feche modal no feed - observe picos de re-renderização do pai no DevTools.
6. Compare com o último RC - regressões > 10% acionam investigação.

// src/perf/budgets.ts - importe constantes em scripts de CI e docs
export const PERF_BUDGETS = {
  bundleGzipMb: 4,
  ttiMs: 2500,
  scrollFpsFloor: 55,
  memoryCeilingMb: 350,
} as const;