Tagged articles
13 articles
Page 1 of 1
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 12, 2024 · Frontend Development

Why Lighthouse Dropped Time to Interactive (TTI) and What Replaced It

This article explains why Lighthouse removed the Time to Interactive (TTI) metric after version 10, describes how TTI was calculated, discusses its inaccuracies, and introduces the more reliable replacement metrics such as Total Blocking Time (TBT), First Input Delay (FID) and Interaction to Next Paint (INP) for assessing web performance.

FIDINPLighthouse
0 likes · 13 min read
Why Lighthouse Dropped Time to Interactive (TTI) and What Replaced It
Baidu Geek Talk
Baidu Geek Talk
Dec 18, 2023 · Frontend Development

Browser Event Loop Mechanism: Complete Guide to Rendering, Performance Optimization and Interaction Metrics

The guide explains the browser’s event‑loop cycle, how macro‑tasks, micro‑tasks, requestAnimationFrame and requestIdleCallback interact with rendering, details long‑task impacts, React’s time‑slicing via MessageChannel, key interaction metrics such as TTI, FID and upcoming INP, and practical optimizations like task splitting, lazy loading and service‑worker caching.

Browser RenderingFIDINP
0 likes · 19 min read
Browser Event Loop Mechanism: Complete Guide to Rendering, Performance Optimization and Interaction Metrics
Qunar Tech Salon
Qunar Tech Salon
Mar 21, 2023 · Frontend Development

Performance Analysis of React CSR, SSR, and React 18 Streaming SSR

This article examines how different React rendering strategies—client‑side rendering, server‑side rendering, and the new React 18 Streaming SSR—affect key web performance metrics such as TTI, FCP, and first‑paint, and demonstrates substantial latency reductions achieved through streaming and selective hydration.

SSRStreamingTTI
0 likes · 11 min read
Performance Analysis of React CSR, SSR, and React 18 Streaming SSR
Qunar Tech Salon
Qunar Tech Salon
Dec 7, 2022 · Mobile Development

Optimizing Time‑to‑Interactive (TTI) in the Qunar Travel App: JSBundle Loading, Rendering, and Service Request Strategies

This article describes how Qunar’s travel app team built a unified performance measurement platform and applied a series of frontend‑focused optimizations—including JSBundle pre‑loading, slimming, splitting, rendering‑stage improvements, and service‑request prefetching—to consistently reduce the Time‑to‑Interactive metric by double‑digit percentages across core booking pages.

JSBundleMobile FrontendReact Native
0 likes · 12 min read
Optimizing Time‑to‑Interactive (TTI) in the Qunar Travel App: JSBundle Loading, Rendering, and Service Request Strategies
Baidu Geek Talk
Baidu Geek Talk
Aug 22, 2022 · Mobile Development

How Baidu Optimized Low‑End Device Startup Performance: A Deep Dive

This article explains how Baidu's performance team tackled the slowdown of mobile internet growth by defining low‑end devices, building observability, creating high‑efficiency tooling, redesigning key components such as KV storage and locks, and introducing a smart scheduling framework that together reduced Android cold‑start TTI by over 50% and iOS cold‑start TTI by more than 40%, while establishing a continuous anti‑degradation pipeline.

Mobile DevelopmentSchedulingStartup Time
0 likes · 20 min read
How Baidu Optimized Low‑End Device Startup Performance: A Deep Dive
Ctrip Technology
Ctrip Technology
Jul 7, 2022 · Mobile Development

Performance Optimization Practices for a Flutter‑Based Hotel App at Ctrip

This article details how Ctrip's hotel team used Flutter to improve app performance over two years by monitoring FPS, TTI, memory, applying widget‑tree optimizations, lazy loading, frame rendering, service‑channel enhancements with Protobuf, and systematic memory‑leak detection and mitigation.

FlutterMobile DevelopmentProtobuf
0 likes · 22 min read
Performance Optimization Practices for a Flutter‑Based Hotel App at Ctrip
Kuaishou Tech
Kuaishou Tech
Sep 28, 2021 · Mobile Development

Understanding and Optimizing Time To Interactive (TTI) on the Kuaishou Android App

This article explains the concept of Time To Interactive (TTI) for the Kuaishou Android app, details how to quantify the metric using FrameTime instead of FPS, describes data collection methods, offline and online tracing, a performance lab, and comprehensive governance and task‑scheduling strategies to reduce startup lag.

AndroidFrameTimeMobile Development
0 likes · 17 min read
Understanding and Optimizing Time To Interactive (TTI) on the Kuaishou Android App
Kuaishou Frontend Engineering
Kuaishou Frontend Engineering
Sep 17, 2021 · Mobile Development

How Kuaishou Optimizes Android TTI: From Definition to Real‑Time Monitoring

This article explains the concept of Time To Interactive (TTI) for Kuaishou's Android client, details how the metric is quantified using FrameTime instead of FPS, describes offline and online data‑collection methods, and outlines the scheduling framework and governance measures designed to reduce post‑cold‑start jank.

AndroidFrameTimeTTI
0 likes · 18 min read
How Kuaishou Optimizes Android TTI: From Definition to Real‑Time Monitoring
Ctrip Technology
Ctrip Technology
Jun 29, 2020 · Frontend Development

React Native Rendering Performance Optimization Practices at Ctrip

This article analyzes the challenges of React Native rendering performance, introduces quantitative metrics such as FMP and TTI, and presents practical optimization strategies across native containers, bundle handling, API bridging, front‑end code slimming, service request prioritization, and tooling for offline and online performance analysis.

FMPReact NativeTTI
0 likes · 18 min read
React Native Rendering Performance Optimization Practices at Ctrip