1、 背景

特别注意今天还是两个哦

TTI（Time to Interactive）TTI是指页面变得可交互所需的时间 TTD（Time to Display）TTD是指页面显示所需的时间

使用chatGPT，设计一套可落地的前端性能优化方案（下）- TBT、CLS的优化方案 - 掘金 (juejin.cn)

本篇呢，继续上一篇的内容，继续调研性能指标的优化方案，定两个主要方向：

• 编译时 —— 构建工具打包时的优化（我主要站webpack队的，以下优化方案，如果没有特别说明，均是webpack方案）
• 运行时 —— 用户从输入URL到展示指标以及对应的优化方案

根据最新的chrome Lighthouse规则，前端的性能指标主要有：

• FCP（First Contenful Paint）：首次内容绘制时间，即浏览器首次绘制任何文本、图像、非空白canvas或SVG的时间。
• SI（Speed Index）：速度指数，即页面渲染速度的指标。
• LCP（Largest Contentful Paint）：最大内容绘制时间，即页面中最大的可见内容元素绘制完成的时间。
• TBT（Total Blocking Time）：总阻塞时间，即页面主线程被阻塞的总时间。
• CLS（Cumulative Layout Shift）：累计布局偏移，即页面上所有元素在视觉上发生的意外移动的总和。
• TTI（Time to Interactive）TTI是指页面变得可交互所需的时间
• TTD（Time to Display）TTD是指页面显示所需的时间

2、 TTI（Time to Interactive）TTI是指页面变得可交互所需的时间。

问题：前端性能中TTI的优化目标是什么？你能给我一些优化TTI的具体方法吗？

简单总结一下：

• TTI是指页面变得可交互所需的时间，它是一个重要的前端性能指标，反映了页面的加载响应度
• TTI的优化目标是让页面尽快变得可交互，一般建议在5秒内
• 优化TTI的方法有减少首屏加载的资源数量和大小、优化JavaScript的执行时间、优化CSS的解析和渲染时间、优化网络请求的时间等

优化 TTI 的具体方法有以下几点：

• 减少第三方代码的影响，尽量避免或延迟加载不必要的第三方脚本，比如广告、统计、社交媒体等。
• 减少 JavaScript 的执行时间，使用代码分割、懒加载、预加载等技术，只加载当前页面需要的脚本，避免阻塞主线程。
• 最小化主线程的工作，使用 Web Worker、requestIdleCallback 等技术，将一些非关键的任务移到后台线程执行，避免长任务占用主线程。
• 保持较低的请求数和较小的传输大小，使用缓存、压缩、CDN 等技术，减少网络请求的开销，提高资源加载的速度。

这里所有的优化方案在前文都有提及，这里就不赘述了

3、TTD（Time to Display）TTD是指页面显示所需的时间

问题：前端性能中TTD的优化目标是什么？你能给我一些优化TTD的具体方法吗？

简单总结一下：

• 前端性能中TTD的优化目标是缩短从用户请求页面到页面可交互的时间，一些优化TTD的具体方法有减少HTTP请求、优化JavaScript和CSS、优化DOM和CSSOM、优化图片和字体、使用性能监测工具等。

• TTD的具体数值指标是指从用户在浏览器地址栏输入网址开始，到页面上所有的主要资源都加载完成并且可以响应用户操作的时间，一般来说，TTD的优化目标是在5秒以内。

这里所有的优化方案在前文都有提及，这里就不赘述了。

4、 总结

好的，到这里呢，基本的优化方案就都写完了，我们不妨让GPT帮我们总结一下：

以我对 这几天，写的这几篇文章的了解来看呢，GPT的总结还是有些问题的，虽然逻辑能自洽，但内容还是有些出入的，不过我稍微做一些修改就可以用啦：修改如下

基于深度学习的对话生成模型，来设计一套可落地的前端性能优化方案的。每一条回答都介绍了一个不同的性能指标，如FCP、SI、LCP、TBT、CLS、TTI、TTD等，以及如何优化这些指标的方法和步骤。让大家了解前端性能优化的重要性和技巧，以及如何利用chatGPT来辅助优化过程。

这里篇幅有限，谢谢大家的阅读，本系列到此结束

5 结束了么？

前端性能优化的方法远不止这些，其实还有很多细节可以做，如vue中怎么做优化，react中怎么做优化，等等。

后面，有机会我会另起文章来写的

本文正在参加 人工智能创作者扶持计划