之所以要转载这篇文章的原因是，有一次调查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. 修改github上的项目语言类型

    当在github上上传一个项目时,可能会出现一个问题就是项目代码类型是自动生成的,可能与我们实际项目代码种类不匹配,此时就需要修改项目语言类型了. 由于无法直接更改,所以用到此方法: 在你的项目根目录 ...

  2. H3CFTP操作示例

  3. 【2016常州一中夏令营Day7】

    序列(sequence)[题目描述]蛤布斯有一个序列,初始为空.它依次将 1-n 插入序列,其中 i插到当前第 ai 个数的右边 (ai=0 表示插到序列最左边).它希望你帮它求出最终序列.[输入数据 ...

  4. 数据预处理以及探索性分析(EDA)

    1.根据某个列进行groupby,判断是否存在重复列. # Count the unique variables (if we got different weight values, # for e ...

  5. Vijos 1206 CoVH之再破难关 [BFS] [位运算]

    1.题意:一个由01组成的4*4的矩阵,可以实现相邻元素交换位置的操作,给出初试状态和目标状态,试求最少操作数的方案: 2.输入输出:输入给出初试矩阵和目标矩阵:要求输出最小操作的次数: 3.分析:输 ...

  6. Asp.NetCore3.1版本的CodeFirst与经典的三层架构与AutoFac批量注入

    Core3.1 CodeFirst与AutoFac批量注入(最下面附GitHub完整 Demo,由于上传网速较慢,这里就直接压缩打包上传了) ===Core3.1 CodeFirst 数据库为远程阿里 ...

  7. kubernetes实战(三十)：CentOS 8 二进制 高可用 安装 k8s 1.17.x

    1. 基本说明 本文章将演示CentOS 8二进制方式安装高可用k8s 1.17.x,相对于其他版本,二进制安装方式并无太大区别. 2. 基本环境配置 主机信息 192.168.1.19 k8s-ma ...

  8. ML基础——搜索引擎与图书管理，百度与李彦宏

    本文始发于个人公众号:TechFlow 谈及机器学习,大家想必会有许多联想,比如最近火热的人工智能,再比如战胜李世石的AlphaGo,甚至还会有人联想起骇客帝国或者是机械公敌等经典机器人电影. 但实际 ...

  9. SpringBoot入门简易教程

    使用SpringBoot来开发一个简单的restful api网关功能,目标:实现对SpringBoot的简单入门. 1. 创建SpringBoot项目 可以通过spring官网(https://st ...

  10. 【python测试开发栈】帮你总结python random模块高频使用方法

    随机数据在平时写python脚本时会经常被用到,比如随机生成0和1来控制逻辑.或者从列表中随机选择一个元素(其实抽奖程序也类似,就是从公司所有人中随机选择中奖用户)等等.这篇文章,就帮大家整理在pyt ...