简介
1 .首次输入延迟是测量加载响应度的一个以用户为中心的重要指标，改指标降用户尝试与无响应页面交互时的体验做了量化。低FID有助于让用户确信页面是有效的
2 .点击链接，点击按钮或者由js驱动的自定义控件，直到浏览器做出相应，并能实际开始处理事件处理程序所进过的时间
3 .为了良好的用户体验，网站应该努力将首次输入延迟控制在100ms以内。
4 .较长的首次输入延迟通常发生在首次内容绘制和可交互时间之间。在此期间，页面已经渲染出了部分内容，但是交互性还上不可靠。浏览器的主线程正在忙着解析和执行刚才加载的js文件，这个时候，浏览器不能运行任何事件监听器。因为输入发生在浏览器运行任务的过程中，必须要等到浏览器执行完任务才能对输入进行相应。浏览器必须等待的这段时间就是这位用户在该页面上体验到的fid值
5 .在这里我们可能做的是点击按钮进行登录的操作
6 .https://github.com/GoogleChrome/web-vitals 使用这个库可以测量fid时间
如何改进fid
1 .运行一次lighthouse,会给出一些建议
2 .减少第三方代码的影响
3 .减少js执行时间
4 .最小化主线程工作
5 .保持较低的请求数和较小的传输大小
分割长任务
1 .除了尽量首页尽量少的加载js。还有一个非常有用的方法是将长时间运行的代码拆解为更小的异步任务
2 .阻塞主线程50ms以上的代码都算长任务。
3 .chrome dev tools可以讲场任务可视化
image.png
3 .灰色的都是，主线程视图中有红色标记
4 .大型脚本通常是导致长任务的主要原因，因此要考虑将他们拆分，还要留意第三方脚本。
5 .拆分标准 https://philipwalton.com/articles/idle-until-urgent/
优化页面，做好交互准备
1 .数据获取也会影响交互的许多方面
1 .等待一连串的级联获取会影响交互延迟。尽量最大限度的减少对级联数据获取的依赖
2 .大型内联数据的存储也会延长HTML解析时间并影响绘制和交互指标。尽量最大限度的减少需要在客户端进行后处理的数据。
3 .一个init就拿到最初始的数据
4 .不要在服务端在进行数据处理，而是服务端拿到就是已经可以直接使用的数据
2 .第三方脚本执行也会加剧交互延迟
1 .许多网站站加载的一些第三方标签和分析也会使网络一直处于忙碌状态，并且使的主线程周期性的无响应
2 .一些不在可视区域的非首屏广告，不要在第一时间加载
3 .甚至一些第三方脚本会在主线程的优先级和带宽方面抢占第一方脚本，并延迟页面做好交互准备时间。所以不必要的一定不要第一时间加载
3 .使用webworker
1 .web worker能够让js在后台运行，将非用户界面操作移动到单独的工作线程上可以缩减主线程阻塞时间，从而改善fid
2 .Comlink:一个助手类库，抽象了postMessage,可以更容易使用
减少Js执行时间
1 .延迟加载未使用的js
1 .现在是按照页面来分的，其实可以是非首屏的页面的代码
2 .每个方法的代码也是可以
form.addEventListener("submit", e => {
e.preventDefault();
import('library.moduleA')
.then(module => module.default) // using the default export
.then(someFunction())
.catch(handleError());
});
const someFunction = () => {
// uses moduleA
}
2 .最大限度减少未使用的polyfill
1 .babel转义器的时候，使用@babel/preset-env来只将计划定位的浏览器所需的polyfill包括在其中
2 .许多使用babel编译的较新的ECMAScript特性已经在支持js模块中的环境中得到了支持
3 .第三方脚本一定是使用defer,async来加载
网友评论