之所以要转载这篇文章的原因是，有一次调查lightning中右上角有个页面加载时间控件颜色分别代表多少时间范围的问题，搜索查阅了很多资料和文件，最终在一篇有关Lighthouse前端性能优化测试工具的文章中找到了端倪。

其中涉及到一个概念--首次有效渲染时间 First Meaningful Paint (FMP) ， 其是lighthouse报告性能区监测的六个度量指标之一，每个指标收集了页面加载速度的某个方面信息

首次有效渲染时间单位以秒计算。

首次有效渲染时间计算的是从用户访问一个页面到第一个页面元素被用户看到时间。

转载于https://web.dev/first-meaningful-paint/

参考文档：

https://www.w3.org/webperf/

https://developers.google.com/web/tools/lighthouse

https://web.dev/lighthouse-performance/

有关lightning页面中页面加载时间计数器颜色分别表示的时间范围的问题的更多相关文章

  1. MVC中 _ViewStart _Layout Index三个页面中的加载顺序

    MVC学习中忽然想到一个问题.. 在访问一个Index.cshtml页面时, MVC的加载顺序是怎么样的呢? 首先说下我的结论 . _ViewStart.cshtml . Index.cshtml . ...

  2. HTML页面中直接加载其他JSP页面

    1.在经典的框架中填充页面时 要填充2处的页面,2处为内容页面,是另外的一个JSP页面 2.左侧页面代码 <%@ page language="java" import=&q ...

  3. 用于确保页面中js加载完全，对于优化某网页的加载速度，有什么见解

    js方法: <script type="text/javascript"> window.onload = function(){ var userName = &qu ...

  4. jQuery Pjax – 页面无刷新加载，优化用户体验

    pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...

  5. 利用Jquery的load函数实现页面的动态加载

    利用Jquery的load函数实现页面的动态加载  js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...

  6. Winform开发框架之客户关系管理系统(CRM)的开发总结系列4-Tab控件页面的动态加载

    在前面介绍的几篇关于CRM系统的开发随笔中,里面都整合了多个页面的功能,包括多文档界面,以及客户相关信息的页面展示,这个模块就是利用DevExpress控件的XtraTabPage控件的动态加载实现的 ...

  7. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

  8. 页面资源预加载(Link prefetch)功能加速你的页面加载速度

    有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 用户可能清空了缓存 缓存可能已经过期,资源将重新加载 用户访问的缓存文件可能不是最新的,需要重新加载 页面资源预加载/预读取 ...

  9. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

随机推荐

  1. Less 语法快速入门

    Less 语法快速入门 Less 是一门 CSS 预处理语言其可以运行在 Node 或浏览器端. 它将传统的 css 样式结构单一的排版顺序进行了优化,让我们可以通过层级嵌套的方式将 css 类名与H ...

  2. Leecoder466 Count The Repetitons

    Leecoder466 Count The Repetitons 题目大意 定义\([s,n]\)为连续\(n\)个串\(s\)构成的串 现在给定\(s_1,n_1,s_2,n_2\),求最大的\(m ...

  3. eslint的使用和配置

    eslint的使用和配置 什么是eslint ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误.在许多方面,它和 J ...

  4. CSS---cursor 鼠标指针光标样式（形状）

    url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器设置的光标 ...

  5. phpcms V9自定义分页函数

    大家做网站的时候,可能很多时候分页样式都得根据模板的要求来控制的,这时很多人都会去修改全局文件phpcms\libs\functions\global.func.php里的pages()函数,这样问题 ...

  6. 解决netcore在docker容器中连接oracle报错（timezone region not found）

    错误提示: timezone region not found错误原因:docker 容器内时区不是 CST 导致解决办法:1.在dockerfile 中增加一下命令ENV TZ=Asia/Shang ...

  7. 抓取IOS的apsd进程流量

    IOS的apsd是Apple Push Service的相关进程,很多系统服务都跟他有关,比如iMessage.Homekit,因此想抓包查看他是怎么实现的. 1.搜索发现相关资料很少,只有多年前的一 ...

  8. wpf 自定义 ToolTip 模板

    示例是在blend中画的,圆角带阴影和倒三角 <Style x:Key="toolTipStyle" TargetType="ToolTip"> & ...

  9. echarts拓扑图(graph，力导向布局图)

    echarts连接:https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H 讲解:https://www.cnblogs.com/koala201 ...

  10. 使用spring boot中的JPA操作数据库

    前言 Spring boot中的JPA 使用的同学都会感觉到他的强大,简直就是神器一般,通俗的说,根本不需要你写sql,这就帮你节省了很多时间,那么下面我们来一起来体验下这款神器吧. 一.在pom中添 ...