24小时接单的黑客

黑客接单,接单的黑客,如何联系黑客,如何找黑客,黑客服务

2022年04月06日 12:46:00

2021 年 Web 核心性能指标是什么？谷歌工程师告诉你，FMP 过时啦！

性能指标针对平台而言是一个长期性必须勤奋提升提高的总体目标，谷歌因此发布了一系列专用工具，文中我觉得给大伙儿详细介绍 web-vitals[1]这一由谷歌技术工程师撰写的小而美的性能指标精确测量 sdk。

文中是 ssh 梳理来源于 web-vitals 官方网站的一些內容，感激谷歌技术工程师们在性能层面撰写的如此出色的材料。

怎样界定性能实体模型

先讲下性能，谷歌明确提出了广为人知的 RAIL 实体模型：

RAIL

各自相匹配回应、动漫、空余和载入，由上而下的在每个流程拓宽出各种各样提升方式，实际的各环节详细介绍能看 Measure performance with the RAIL model[2] 这篇文章，文中关键致力于解读如何去理解这种环节的性能优劣。

性能监控的类型

随后必须了解一下性能监控的类型，性能监控分成二种：

  • 生成监控(Synthetic Monitoring，SYN)是一种仿真模拟网页页面载入或是脚本制作运作来精确测量性能指标的方法，輸出网页页面性能汇报。这类形式的意义取决于提早发觉有可能具有的性能问题，不依赖于用户汇报。Lighthouse[3] 便是谷歌开发设计的十分知名的一种生成检测工具，它既可以做为游览器运作，还可以做为 cli 脚本制作，乃至以程序化交易的形式运作在你的 Node.js 编码中。
  • 真正用户监控(Real User Monitoring，RUM)是纪录用户真正实际操作的一种处于被动监控，它的特性是用户真正的网页页面互动中去评定和纪录性能数据信息。例如我们常说的性能监控 sdk，便是因此而引进的。文中所介紹的 web-vitals 恰好是为了更好地这类类别的监控为之。

生成监控和真正用户监控紧密联系，前面一种用以在试验室自然环境下提早发觉一些性能问题;后面一种则深层次到真实的世界，和用户机器设备、网络速度、自然环境等密切相关。

在这里前提条件下，谷歌也把性能指标分成两大类：

  • 试验室指标(In the lab)：应用软件在一致的条件中仿真模拟页面加载。
  • 真正指标(In the field)：在真实用户自然环境中载入而且和用户互动。

关键性能指标

Web Vitals 实际上是谷歌进行的一项提倡，统一重要性能的规范，协助网址开发人员去统计分析最重要的指标，简单化了很多繁杂的定义。

根据一直以来的性能指标提升感受，全新的性能指标关键致力于载入、互动、视觉效果平稳，综合性出来便是下边的 3 个指标：

关键性能指标

  • Largest Contentful Paint (LCP)[4]: 较大內容制作，是用于精确测量载入的性能。最好是确保在 2.5 秒之内发生。
  • First Input Delay (FID)[5]: 第一次键入延迟时间，用以精确测量可易用性。应当在 100 ms之内。
  • Cumulative Layout Shift (CLS)[6]：总计合理布局偏移，用以精确测量视觉效果可靠性。这一指标应当低于 0.1。

许多中国的旧文提及 First Meaningful Paint (FMP)，也就是初次更有意义的3D渲染，可是这一指标实际上早已在 Lighthouse 6.0 中被丢弃了，缘故取决于网页页面的一切微小差别对这一指标的干扰都太大，产生了双峰分布(bimodal distribution)的不一致性问题。并且这一精确测量太依靠电脑浏览器的完成关键点了，代表着无法在全部电脑浏览器中规范化。

现阶段可以应用 Largest Contentful Paint (LCP)[7] 来取代它。

精确测量关键指标

这种关键指标，现阶段都能够运用 web APIs 在 JavaScript 中开展精确测量。

应用 web-vitals

为了更好地封装形式一些关键点差别，谷歌给予了 GoogleChrome/web-vitals[8] 这一轻便、准备好用以生产制造的包，它仅仅 web APIs 的一层封装形式，用户不用再关注指标的搜集机会，自然环境分辨等问题。

  • import{getCLS,getFID,getLCP}from"web-vitals";
  • functionsendToAnalytics(metric){
  • constbody=JSON.stringify(metric);
  • //Use`navigator.sendBeacon()`ifavailable,fallingbackto`fetch()`.
  • (navigator.sendBeacon&&navigator.sendBeacon("/analytics",body))||
  • fetch("/analytics",{body,method:"POST",keepalive:true});
  • }
  • getCLS(sendToAnalytics);
  • getFID(sendToAnalytics);
  • getLCP(sendToAnalytics);

    • 取得了这种性能数据信息之后，你也就可以自身清理、梳理并统计分析转化成数据可视化的主视图，自然你也可以用谷歌的 GoogleChromeLabs/web-vitals-report[9] 来转化成数据可视化的数据看板。

    手动式精确测量

    自然，你还可以运用最底层 web APIs 来手动式精确测量，可是这就需要自已决策汇报的机会也有搜集的频次这些。

    LCP

  • newPerformanceObserver((entryList)=>{
  • for(constentryofentryList.getEntries()){
  • console.log("LCPcandidate:",entry.startTime,entry);
  • }
  • }).observe({type:"largest-contentful-paint",buffered:true});

    • FID

  • newPerformanceObserver((entryList)=>{
  • for(constentryofentryList.getEntries()){
  • constdelay=entry.processingStart-entry.startTime;
  • console.log("FIDcandidate:",delay,entry);
  • }
  • }).observe({type:"first-input",buffered:true});

    • CLS

  • letcls=0;
  • newPerformanceObserver((entryList)=>{
  • for(constentryofentryList.getEntries()){
  • if(!entry.hadRecentInput){
  • cls =entry.value;
  • console.log("CurrentCLSvalue:",cls,entry);
  • }
  • }
  • }).observe({type:"layout-shift",buffered:true});

    • 前二者立即运用了 PerformanceObserver[10] 的特定 type 就可以。CLS 相对性独特一些，由于是网页布局的总计偏移，因此要一直监视而且累加这一值。

    手动式精确测量的缺陷取决于，你需要自身遵循 Web Vitals 的检测规范去在相对应的机会逐渐、完毕精确测量，并且许多界限状况也想要你自身解决。

    怎样提升关键性能参数

    如果你精确测量了网址的关键性能参数以后，下一步便是提升他们。这2~3篇文章内容可以给你很好的具体指导：

    • Optimize Largest Contentful Paint[11]
    • Optimize First Input Delay[12]
    • Optimize Cumulative Layout Shift[13]

    别的性能参数

    尽管关键性能参数是给予出色的用户体验设计的重要，但也以及别的关键的指标值。

    例如 Time to First Byte (TTFB) —— 首字节数時间[14]和 First Contentful Paint (FCP) —— 初次內容3D渲染[15] 针对载入感受而言都很重要，针对确诊 LCP 而言也很好用(例如网络服务器速率太慢，或是有堵塞3D渲染的資源)。

    相近的也有 Total Blocking Time (TBT) —— 总堵塞時间[16] 和 Time to Interactive (TTI) —— 初次可互动時间[17] ，他们都是会危害 FID，是用于剖析潜在性的可易用性问题的试验室指标值。他们并不属于关键性能参数，由于他们并不适合用以真正自然环境精确测量，也不会反映客户为核心的体会。

    飞速发展的性能参数

    Web Vitals 和关键性能参数意味着了现如今用于考量 Web 感受品质的最好可以用数据信号，将来会持续的快速发展和改善。

    关键性能参数和谷歌分析专用工具及其依靠它的网页页面密切相关，变更会造成普遍的危害。因而，开发人员理应期待它是比较稳定的，假如要升级得话应当事先通告，而且应该是以年为周期时间、可预估的升级。

    别的性能参数通常和指定的专用工具关系，对比起关键性能参数更具备试验特性，升级的頻率很有可能会更高一些。

    针对全部指数的升级，这一 CHANGELOG[18] 里都是会清晰的记下来。

    参考文献

    Measure performance with the RAIL model[19]

    Synthetic monitoring - Wikipedia[20]

    Real user monitoring - Wikipedia[21]

    Web Vitals[22]

    User-centric performance metrics[23]

    参考资料

    [1]

    web-vitals: https://github.com/GoogleChrome/web-vitals/

    [2]

    Measure performance with the RAIL model: https://web.dev/rail/

    [3]

    Lighthouse: https://github.com/GoogleChrome/lighthouse

    [4]

    Largest Contentful Paint (LCP): https://web.dev/lcp/

    [5]

    First Input Delay (FID): https://web.dev/fid/

    [6]

    Cumulative Layout Shift (CLS): https://web.dev/cls/

    [7]

    Largest Contentful Paint (LCP): https://web.dev/lcp/

    [8]

    GoogleChrome/web-vitals: https://github.com/GoogleChrome/web-vitals

    [9]

    GoogleChromeLabs/web-vitals-report: https://github.com/GoogleChromeLabs/web-vitals-report

    [10]

    PerformanceObserver: https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver/PerformanceObserver

    [11]

    Optimize Largest Contentful Paint: https://web.dev/optimize-lcp/

    [12]

    Optimize First Input Delay: https://web.dev/optimize-fid/

    [13]

    Optimize Cumulative Layout Shift: https://web.dev/optimize-cls/

    [14]

    Time to First Byte (TTFB) —— 首字节数時间: https://web.dev/time-to-first-byte/

    [15]

    First Contentful Paint (FCP) —— 初次內容3D渲染: https://web.dev/fcp/

    [16]

    Total Blocking Time (TBT) —— 总堵塞時间: https://web.dev/tbt/

    [17]

    Time to Interactive (TTI) —— 初次可互动時间: https://web.dev/tti/

    [18]

    CHANGELOG: https://chromium.googlesource.com/chromium/src/ /master/docs/speed/metrics_changelog/README.md

    [19]

    Measure performance with the RAIL model: https://web.dev/rail/

    [20]

    Synthetic monitoring - Wikipedia: https://en.wikipedia.org/wiki/Synthetic_monitoring

    [21]

    Real user monitoring - Wikipedia: https://en.wikipedia.org/wiki/Real_user_monitoring

    [22]

    Web Vitals: https://web.dev/vitals/#core-web-vitals

    [23]

    User-centric performance metrics: https://web.dev/user-centric-performance-metrics

    标签：Web 性能 指标 

    作者:访客 , 分类:黑客服务 , 浏览:1083 , 评论:5

    • 评论列表:
    •  拥嬉沐白
       发布于 2022-06-05 18:12:46  回复该评论
    • iki/Synthetic_monitoring[21]Real user monitoring - Wikipedia: https://en.wikipedia.org/wiki/Real_user_monitoring[
    •  弦久寂星
       发布于 2022-06-05 16:48:09  回复该评论
    • e lab)：应用软件在一致的条件中仿真模拟页面加载。 真正指标(In the field)：在真实用户自然环境中载入而且和用户互动。关键性能指标Web Vitals 实际上是谷歌进行的一项提倡，统一重
    •  慵吋风晓
       发布于 2022-06-05 22:48:39  回复该评论
    • 恰好是为了更好地这类类别的监控为之。生成监控和真正用户监控紧密联系，前面一种用以在试验室自然环境下提早发觉一些性能问题;后面一种则深层次到真实的世界，和用户机器设备、网络速度、自然环境等密切相关。在这
    •  夙世嘤咛
       发布于 2022-06-05 21:19:58  回复该评论
    • 能参数意味着了现如今用于考量 Web 感受品质的最好可以用数据信号，将来会持续的快速发展和改善。关键性能参数和谷歌分析专用工具及其依靠它的网页页面密切相关，变更会造成普遍的危害。因而，开发人员理应期待它是比较稳定的，假如要升级得话应当事先通告，而且应该是以
    •  丑味旧竹
       发布于 2022-06-05 16:35:53  回复该评论
    • tps://web.dev/lcp/[5]First Input Delay (FID): https://web.dev/fid/[6]Cumulative Layout Shift (CLS): https://web.dev/cls/[7]Largest Contentful Pai

    发表评论:

    Powered By

    Copyright Your WebSite.Some Rights Reserved.