Học từ Facebook #30: Tải trước feed theo chất lượng mạng

/**
 * Tải trước đuôi feed sớm hay muộn tuỳ chất lượng mạng.
 *
 * Ý tưởng từ CometFeedTailLoadBufferHeight + CometFeedInfiniteScrollSuspenseList của Facebook:
 * khoảng cách (px) từ đáy viewport tới "đuôi" feed mà ở đó bắt đầu tải trang kế tiếp được
 * chọn theo hạng kết nối. Mạng càng kém thì buffer càng LỚN: request mất nhiều thời gian hơn
 * nên phải bắt đầu sớm hơn mới kịp có nội dung trước khi người dùng cuộn tới.
 */

export type ConnectionClass = 'EXCELLENT' | 'GOOD' | 'MODERATE' | 'POOR' | 'UNKNOWN';

/** Đúng bộ số Facebook dùng (px). */
export const TAIL_LOAD_BUFFER: Record<Exclude<ConnectionClass, 'UNKNOWN'>, number> = {
  EXCELLENT: 2570,
  GOOD: 2933,
  MODERATE: 3227,
  POOR: 4948,
};

/** FB log lỗi "mustfix" rồi dùng 2500px nếu không tra được bảng. */
export const FALLBACK_BUFFER = 2500;

export function tailBufferFor(connectionClass: ConnectionClass): number {
  if (connectionClass === 'UNKNOWN') return TAIL_LOAD_BUFFER.EXCELLENT; // FB coi UNKNOWN như EXCELLENT
  return TAIL_LOAD_BUFFER[connectionClass] ?? FALLBACK_BUFFER;
}

/**
 * Facebook lấy hạng kết nối do server đoán (WebConnectionClassServerGuess), gửi kèm trang.
 * Không có server thì ước lượng ở client: ưu tiên RTT đo được từ chính các request của app,
 * sau đó mới tới Network Information API (chỉ có trên trình duyệt nhân Chromium).
 * Ngưỡng dưới đây là của bản viết lại, không phải của Facebook.
 */
export function guessConnectionClass(input: {
  measuredRttMs?: number | null;
  effectiveType?: string | null;
  saveData?: boolean;
}): ConnectionClass {
  const { measuredRttMs, effectiveType, saveData } = input;
  if (measuredRttMs != null) {
    // thời gian của cả một request lấy trang feed (gồm thời gian server xử lý), không phải ping
    if (measuredRttMs < 300) return 'EXCELLENT';
    if (measuredRttMs < 800) return 'GOOD';
    if (measuredRttMs < 1600) return 'MODERATE';
    return 'POOR';
  }
  if (saveData) return 'POOR';
  switch (effectiveType) {
    case '4g':
      return 'GOOD'; // "4g" chỉ nói là ≥ ngưỡng 4g, không nói là xuất sắc
    case '3g':
      return 'MODERATE';
    case '2g':
    case 'slow-2g':
      return 'POOR';
    default:
      return 'UNKNOWN';
  }
}

/** Trung bình trượt mũ (EWMA) của thời gian request: cập nhật rẻ, quên dần số liệu cũ. */
export function createRttEstimator(alpha = 0.3) {
  let value: number | null = null;
  return {
    add(ms: number) {
      value = value == null ? ms : value + alpha * (ms - value);
      return value;
    },
    get: () => value,
    reset: () => {
      value = null;
    },
  };
}

export interface TailLoaderOptions {
  /** phần tử cuộn; null = viewport */
  root: HTMLElement | null;
  /** phần tử đặt ở đuôi danh sách (thường là skeleton "đang tải") */
  sentinel: HTMLElement;
  bufferPx: number;
  /** giống waitOnScrollIntent của FB: chưa cuộn lần nào thì không tải trước */
  waitForScrollIntent?: boolean;
  onLoadMore: () => void;
  /**
   * Gọi khi skeleton thực sự lọt vào khung nhìn: người dùng đã đuổi kịp đuôi feed và phải
   * nhìn trạng thái đang tải. FB ghi sự kiện này với tên "collision_happened".
   */
  onCollision?: (info: { hadScrollIntent: boolean }) => void;
}

/**
 * Hai IntersectionObserver trên cùng một sentinel:
 * - một cái có rootMargin = buffer: chạm vào là bắt đầu tải trang kế tiếp;
 * - một cái rootMargin = 0: chạm vào nghĩa là đã "va chạm", người dùng đang nhìn skeleton.
 */
export function createTailLoader(options: TailLoaderOptions) {
  const { root, sentinel, onLoadMore, onCollision } = options;
  let bufferPx = options.bufferPx;
  let hadScrollIntent = !options.waitForScrollIntent;
  let prefetchObserver: IntersectionObserver | null = null;
  const scrollTarget: HTMLElement | Window = root ?? window;
  const startScroll = root ? root.scrollTop : window.scrollY;

  const makePrefetchObserver = () => {
    prefetchObserver?.disconnect();
    // chưa có ý định cuộn thì buffer = 0: chỉ tải khi đuôi feed đã hiện ra
    const margin = hadScrollIntent ? bufferPx : 0;
    prefetchObserver = new IntersectionObserver(
      (entries) => {
        if (entries.some((e) => e.isIntersecting)) onLoadMore();
      },
      { root, rootMargin: `0px 0px ${margin}px 0px` },
    );
    prefetchObserver.observe(sentinel);
  };

  const collisionObserver = new IntersectionObserver(
    (entries) => {
      if (entries.some((e) => e.isIntersecting)) onCollision?.({ hadScrollIntent });
    },
    { root },
  );

  const onScroll = () => {
    const now = root ? root.scrollTop : window.scrollY;
    if (now !== startScroll && !hadScrollIntent) {
      hadScrollIntent = true;
      scrollTarget.removeEventListener('scroll', onScroll);
      makePrefetchObserver();
    }
  };

  if (!hadScrollIntent) scrollTarget.addEventListener('scroll', onScroll, { passive: true });
  makePrefetchObserver();
  collisionObserver.observe(sentinel);

  return {
    /** đổi buffer khi hạng kết nối thay đổi */
    setBuffer(px: number) {
      if (px === bufferPx) return;
      bufferPx = px;
      makePrefetchObserver();
    },
    /**
     * IntersectionObserver chỉ báo khi trạng thái giao nhau ĐỔI. Tải xong mà sentinel vẫn
     * nằm trong vùng buffer thì sẽ không có callback mới; gọi hàm này sau khi render trang
     * mới để observer kiểm tra lại từ đầu.
     */
    recheck() {
      makePrefetchObserver();
    },
    destroy() {
      prefetchObserver?.disconnect();
      collisionObserver.disconnect();
      scrollTarget.removeEventListener('scroll', onScroll);
    },
  };
}

/**
 * Thu thông tin phần cứng + tốc độ mạng/đĩa đo được từ Resource Timing để đoán "hạng" thiết bị.
 *
 * Ý tưởng từ WebDevicePerfInfoLogging của Facebook. Ở FB client chỉ thu số liệu, còn việc
 * xếp hạng do server làm (XDeviceClassRealtimeController trả về devicePerfClassLevel).
 * Hàm classifyDevice() bên dưới là ngưỡng của bản viết lại.
 */

export interface DeviceInfo {
  cpuCores?: number;
  /** GB, đã được trình duyệt làm tròn (0.25, 0.5, 1, 2, 4, 8…) */
  ramGb?: number;
  gpuVendor?: string;
  gpuRenderer?: string;
  /** bytes/ms đọc từ cache (transferSize = 0) */
  cachedSpeed?: number;
  cachedFiles?: number;
  /** bytes/ms tải qua mạng */
  networkSpeed?: number;
  networkFiles?: number;
  skippedHidden?: number;
}

export function readHardware(): Pick<DeviceInfo, 'cpuCores' | 'ramGb'> {
  const nav = navigator as Navigator & { deviceMemory?: number };
  return {
    cpuCores: nav.hardwareConcurrency || undefined,
    ramGb: nav.deviceMemory, // chỉ có trên trình duyệt nhân Chromium
  };
}

/** Tên GPU thật qua extension WEBGL_debug_renderer_info (một số trình duyệt trả về chuỗi đã che bớt). */
export function readGpu(): Pick<DeviceInfo, 'gpuVendor' | 'gpuRenderer'> {
  try {
    const canvas = document.createElement('canvas');
    const gl = (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')) as WebGLRenderingContext | null;
    if (!gl) return {};
    const ext = gl.getExtension('WEBGL_debug_renderer_info');
    if (!ext) return {};
    const result = {
      gpuVendor: String(gl.getParameter(ext.UNMASKED_VENDOR_WEBGL)),
      gpuRenderer: String(gl.getParameter(ext.UNMASKED_RENDERER_WEBGL)),
    };
    // trả context lại ngay, trình duyệt giới hạn số WebGL context sống cùng lúc
    gl.getExtension('WEBGL_lose_context')?.loseContext();
    return result;
  } catch {
    return {};
  }
}

/** Khoảng thời gian tab bị ẩn, đo trên cùng trục thời gian với performance.now(). */
export function createHiddenTimeline() {
  const changes: Array<{ at: number; hidden: boolean }> = [{ at: 0, hidden: document.hidden }];
  const onChange = () => changes.push({ at: performance.now(), hidden: document.hidden });
  document.addEventListener('visibilitychange', onChange);
  return {
    /** số ms tab bị ẩn trong khoảng [start, end] */
    hiddenTime(start: number, end: number): number {
      let total = 0;
      for (let i = 0; i < changes.length; i++) {
        if (!changes[i].hidden) continue;
        const from = Math.max(start, changes[i].at);
        const to = Math.min(end, i + 1 < changes.length ? changes[i + 1].at : Infinity);
        if (to > from) total += to - from;
      }
      return total;
    },
    destroy: () => document.removeEventListener('visibilitychange', onChange),
  };
}

export interface ResourceSample {
  name: string;
  transferSize: number;
  encodedBodySize: number;
  responseStart: number;
  responseEnd: number;
  startTime: number;
}

/**
 * Tốc độ đọc cache và tốc độ mạng từ các resource đã tải.
 * - transferSize === 0 && encodedBodySize > 0: lấy từ cache → đo tốc độ đọc đĩa.
 * - transferSize >= encodedBodySize: tải qua mạng (transferSize có cả header nên thường lớn hơn).
 * - còn lại (transferSize < encodedBodySize): bỏ, không rõ nguồn.
 * Bỏ resource tải trong lúc tab bị ẩn: trình duyệt giảm ưu tiên tab nền nên số đo sai lệch.
 *
 * Khác bản gốc: FB gọi getHiddenTime(entry.startTime, entry.responseEnd) với thời gian TƯƠNG ĐỐI,
 * trong khi các mốc ẩn/hiện của nó lưu theo epoch (Date.now), nên phép lọc có lẽ không bao giờ
 * loại được resource nào. Ở đây mọi mốc cùng trục performance.now(). Ngoài ra resource khác
 * origin không có Timing-Allow-Origin có cả transferSize lẫn encodedBodySize bằng 0, FB vẫn
 * tính là "cache" với tốc độ 0; bản này bỏ chúng.
 */
export function measureResourceSpeed(
  entries: ResourceSample[],
  hiddenTime: (start: number, end: number) => number = () => 0,
): Pick<DeviceInfo, 'cachedSpeed' | 'cachedFiles' | 'networkSpeed' | 'networkFiles' | 'skippedHidden'> {
  let cachedSum = 0;
  let cachedFiles = 0;
  let networkSum = 0;
  let networkFiles = 0;
  let skippedHidden = 0;
  for (const e of entries) {
    if (e.encodedBodySize === 0) continue; // không đo được (opaque, rỗng, hoặc thiếu Timing-Allow-Origin)
    const duration = e.responseEnd - e.responseStart;
    if (duration <= 0) continue; // tránh chia cho 0 → Infinity
    if (hiddenTime(e.startTime, e.responseEnd) > 0) {
      skippedHidden++;
      continue;
    }
    if (e.transferSize === 0) {
      cachedSum += e.encodedBodySize / duration;
      cachedFiles++;
    } else if (e.transferSize >= e.encodedBodySize) {
      networkSum += e.transferSize / duration;
      networkFiles++;
    }
  }
  return {
    cachedSpeed: cachedFiles ? cachedSum / cachedFiles : undefined,
    cachedFiles,
    networkSpeed: networkFiles ? networkSum / networkFiles : undefined,
    networkFiles,
    skippedHidden,
  };
}

export type DeviceTier = 'low' | 'mid' | 'high' | 'unknown';

/** Ngưỡng của bản viết lại: ưu tiên RAM và số nhân, không có dữ liệu thì "unknown". */
export function classifyDevice(info: DeviceInfo): DeviceTier {
  const { cpuCores, ramGb } = info;
  if (cpuCores == null && ramGb == null) return 'unknown';
  if ((ramGb != null && ramGb <= 2) || (cpuCores != null && cpuCores <= 2)) return 'low';
  if ((ramGb != null && ramGb >= 8) && (cpuCores == null || cpuCores >= 8)) return 'high';
  if (ramGb == null && cpuCores != null && cpuCores >= 8) return 'high';
  return 'mid';
}