1.减小javascript大小初始页面（注销状态下的首页）包含300kb的JavaScript，包括React和Lodash等库。使用Chrome模拟3G连接，加载时间为7s。由于页面由简单的HTML元素组成，因此不再需要React，Netflix团队使用原生javascript重构了页面。删除React和几个库后，javacript大小减少了200kb以上。将TTI时间缩短50%。用Lighthouse测试Netflix的首页，97%用户的TTI时间小于3.5s的FID时间也很短？关于web性能指标的更多描述我会单独开一篇文章，这里只提一下文章中提到的LighthouseLighthouse是一个开源的提供web质量的自动化工具。Lighthouse可以作为Chrome扩展程序或通过命令行运行。点击Generatereport开始测试TTITimetoInteractive，从页面开始加载到其主要子资源加载完成的时间，优秀的TTI时间应该小于5s。如何计算TTI？从FCP（FirstContentfulPaint）开始。从FCP向后查看是否有5s的静默窗口。静默窗口的定义是：没有长任务，并且挂起的GET请求不超过2个。从静默窗口向前搜索，找到第一个长任务。如果没有找到长任务，则转到FCP。TTI的时间就是静默窗口期待第一个长任务结束的时间。如果没有长任务，就是FCP的时间。下图？是上述过程的示意图。LongTasks，长任务，指所有执行时间超过50ms的任务。SSR和TTISSR技术缩短了网页的FCP时间（因为html已经在服务端渲染好了，只需要去客户端水化）。但是SSR可能会导致TTI时间变长，因为FCP时间提前了，但是水合还是需要重新加载javascript文件。我们应该减少FCP和TTI之间的时间。如果有必要，我们可以明确的告知用户资源还没有加载，避免用户的任务页面没有响应。如何测量TTI您可以使用Lighthouse工具测量FCPFirstContentfulPaint，即从页面开始加载到页面内容（任何部分）呈现在屏幕上的时间。内容是指：文本、图像、背景图像、svg和非空白画布元素。如何测量FCP？Chrome用户体验报告Lighthouse使用JS来衡量FCP。最简单的使用方法是使用web-vitals库import{getFCP}from'web-vitals';getFCP(console.log);FIDFirstInputDelay，用户第一次与页面交互的时间（点击一个按钮，或）与浏览器进行相应的交互。一个好的FID应该小于100ms。当浏览器的主线程忙于其他操作时，就会出现“输入滞后”。比如浏览器在解析执行一个大的js文件时，浏览器是不能运行任何事件监听器的。这时候如果用户点击按钮，就会形成一个“输入延迟”。上图中黄色部分代表主线程忙。页面FCP之后，TTI之前（页面看起来可以交互，但是资源还没有加载），可能会有很长的“输入延迟”。如果用户与最长黄色块附近的页面进行交互，则会导致更长的FID。FID是如何测量的？您可以使用Chrome用户体验报告，或web-vitalslibraryimport{getFID}from'web-vitals';getFID(console.log);2、预读后续页面的React为了提高下一个页面的性能，我们可以在当前页面预取资源的技术有两种。使用
