Time-to-Interactive Polyfill 使用教程

Time-to-Interactive Polyfill 使用教程

tti-polyfill Time-to-interactive polyfill 项目地址: https://gitcode.com/gh_mirrors/tt/tti-polyfill

1、项目介绍

Time-to-Interactive Polyfill 是一个用于测量网页交互时间的 polyfill。它通过观察长任务（long tasks）来计算网页的交互时间（TTI），即用户可以与页面进行可靠交互的时间点。TTI 是衡量网页性能的重要指标之一，尤其是在现代单页应用（SPA）中。

该项目由 GoogleChromeLabs 开发，旨在帮助开发者更好地理解和优化网页的交互性能。尽管 TTI 在实际应用中不再推荐作为主要指标，但在实验室测量工具（如 Lighthouse）中仍然有其价值。

2、项目快速启动

安装

你可以通过 npm 安装 tti-polyfill：

npm install tti-polyfill

使用

使用 tti-polyfill 分为两个步骤：

1. 在 HTML 头部添加代码片段：

   在页面头部添加以下代码，以创建一个 PerformanceObserver 实例并开始观察长任务：

   <script>
     (function() {
       if ('PerformanceLongTaskTiming' in window) {
         var g = window.__tti = { e: [] };
         var o = new PerformanceObserver(function(l) {
           g.e = g.e.concat(l.getEntries());
         });
         o.observe({ entryTypes: ['longtask'] });
       }
     })();
   </script>
   

2. 在应用代码中导入并使用 tti-polyfill：

   在你的应用代码中导入 tti-polyfill 模块，并调用 getFirstConsistentlyInteractive() 方法：

   import ttiPolyfill from 'tti-polyfill';
   
   ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
     // 使用 `tti` 值进行一些操作
     console.log('TTI:', tti);
   });
   

   该方法返回一个 Promise，解析为 TTI 的值（以毫秒为单位）。如果无法找到 TTI 值或浏览器不支持所需的 API，则 Promise 解析为 null。

3、应用案例和最佳实践

应用案例

• 单页应用（SPA）性能优化：在单页应用中，TTI 是一个重要的性能指标。通过使用 tti-polyfill，开发者可以更好地了解用户与页面交互的时间点，从而优化应用的加载和渲染过程。

• 性能监控：在性能监控工具中，TTI 可以作为一个关键指标来衡量网页的交互性能。通过集成 tti-polyfill，开发者可以在监控工具中收集和分析 TTI 数据。

最佳实践

• 异步加载 Polyfill：为了不影响页面的关键资源加载，建议使用 <script async> 标签异步加载 tti-polyfill。

• 配置选项：根据具体需求，可以调整 getFirstConsistentlyInteractive() 方法的配置选项，如 minValue 和 useMutationObserver，以优化性能和准确性。

4、典型生态项目

• Lighthouse：Google 的 Lighthouse 是一个开源的自动化工具，用于改进网页质量。它支持 TTI 作为性能指标之一，并使用 tti-polyfill 进行实验室测量。

• Web Vitals：Web Vitals 是 Google 推出的一组核心指标，用于衡量网页的用户体验。尽管 TTI 不再是推荐的主要指标，但 Web Vitals 中的 FID（First Input Delay）与 TTI 有一定的关联性。

• Performance Observer API：tti-polyfill 依赖于 Performance Observer API 来观察长任务。了解和使用该 API 可以帮助开发者更好地理解和优化网页性能。

通过以上步骤和案例，你可以快速上手并应用 tti-polyfill 来优化网页的交互性能。

tti-polyfill Time-to-interactive polyfill 项目地址: https://gitcode.com/gh_mirrors/tt/tti-polyfill