认识达内从这里开始

性能优化一直以来都是程序员需要长期关注的一个软件问题，而本文我们就通过案例分析来简单了解一下，web前端性能优化方法都有哪些变化。

一、优先提示

优先提示是我今年看到的影响大的浏览器功能，在优化LCP时提供快速获胜。

默认情况下，图像请求的优先级较低，在呈现页面后，屏图像的优先级会提高。

添加fetchpriority=high意味着浏览器可以立即启动图像请求。

二、Chrome中不再有OSCP请求

在线证书状态协议(OCSP)允许浏览器检查给定的SSL证书是否已被吊销。

如果网站使用的是扩展验证证书，则Chrome会在建立连接时进行这些检查。

下面的请求瀑布显示了作为SSL连接(紫色)的一部分发出的OCSP请求(灰色)的示例。

基本上，二个请求是作为HTML文档请求的一部分进行的。

Chrome停止在Chrome106中发出OSCP请求。对于使用扩展验证证书的网站，这带来了显着的性能改进。

三、与NextPaint指标的交互

InteractiontoNextPaint(INP)是Google的一项新指标，用于衡量页面对用户输入的响应速度。

它测量用户交互(如单击或按键)与屏幕的下一次更新之间经过的时间。

INP终可能会取代次输入延迟(FID)作为核心Web生命指标(CoreWebVitals)之一。

由于INP还包括处理时间和呈现延迟，因此它具有比次输入延迟更高的值。它还查看慢的页面交互，而不像FID只查看一个。

四、DesktopCoreWebVitals作为排名因素

谷歌有三个核心网络生命指标评估用户体验，并被谷歌用作排名因素。

五、Chrome中的后退/前进缓存

许多页面导航只是浏览器历史记录中的后退/前进运动。

长期以来，移动浏览器一直试图通过保存页面状态和恢复页面状态来加速这些导航。

Chrome的后退/前进缓存现已在移动设备和桌面设备上全面推出。

六、在PageSpeedInsights中查看观察到的指标

在解释PageSpeedInsights报告的指标时，许多基于Lighthouse的工具使用的模拟节流经常造成混淆。

我们现在发布了一个Chrome扩展程序，可以显示Lighthouse从Chrome收集的原始数据。

七、HTTP/3标准化

浏览器长期以来一直在试验HTTP/3协议，但终在2022年6月实现了标准化。

HTTP/3实现了几个性能目标，例如减少建立连接的网络往返次数，并使移动用户在不同网络之间切换时更容易迁移连接。

八、为阻塞渲染的请求提供更多的参考信息

呈现阻塞渲染的请求对于性能很重要，因为它们会阻止呈现整个页面。

但有时很难识别它们。幸运的是，Chrome已经开始报告有关请求是否呈现阻塞的更多详细信息，如你在此瀑布视图中所见。

ResourceTimingAPI现在还报告了renderBlockingStatus属性。

DevTools中新的PerformanceInsights选项卡也显示了这些数据。

九、ChromeDevTools性能洞察面板

DevToolsPerformance选项卡显示了网站的综合视图，但它在确定信息的优先级和生成见解方面作用不大。

ChromeDevTools中新的PerformanceInsights选项卡旨在更轻松地识别影响CoreWebVitals的问题。

它显示了一系列与性能相关的见解，然后提出了一些修复建议。

十、103状态码

浏览器资源提示告诉浏览器在需要资源之前加载资源或创建服务器连接。

103HTTP状态码允许Web服务器在完整的HTML响应准备好之前告诉浏览器将来需要的资源。

这样浏览器就可以在服务器仍在处理请求时开始加载这些资源。

例如，阻止呈现的样式表或网络字体可以提前开始加载，或者浏览器可以预连接到API子域。

这在使用CDN时特别有用。CDN提供与用户位置非常接近的服务器。

它可以在几毫秒内返回一个早期的103响应，然后将文档请求发送到主网站服务器进行处理。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei456学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。