浏览器中有一个performance的性能监控，平时我也没有用到，接手了一个大数据的项目，发现页面打开的比较慢，使用浏览器的performance分析可以看到各个步骤花费的时间。

关于项目的性能分析如下图

上图反应这个页面从开始reload到完全打开的数据，可以看到几个指标

蓝色(Loading)：网络通信和HTML解析
黄色(Scripting)：JavaScript执行
紫色(Rendering)：样式计算和布局，即重排
绿色(Painting)：重绘
灰色(System)：其它事件花费的时间
白色(Idle)：空闲时间

在这些指标中，我的空闲时间最多，我结合代码找了下原因，是因为之前同时请求了很多接口，promise.all需要等待所有接口返回成功后才会渲染页面，所以我的idle时间变长了很多,浏览器一直在等待接口全部返回。

浏览器性能监控performance使用的更多相关文章

  1. 浏览器性能接口performance.timing说明

    原文来自于 https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html 下图描述了该接口的各个时间 ...

  2. 前端性能监控方案window.performance 调研(转)

    1. 业界案例 目前前端性能监控系统大致为分两类:以GA为代表的代码监控和以webpagetest为代表的工具监控. 代码监控依托于js代码并部署到需监控的页面,手动计算时间差或者使用浏览器的的API ...

  3. Performance — 前端性能监控利器

    Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到.最简单的办法是在window.onload事件中读取各种数据. 大 ...

  4. 使用performance进行前端性能监控

    该文章仅作为自己的总结 1.performance.timing对象 navigationStart:当前浏览器窗口的前一个网页关闭,发生unload事件时的Unix毫秒时间戳.如果没有前一个网页,则 ...

  5. 页面性能监控之performance

    页面性能监测之performance author: @TiffanysBear 最近,需要对业务上的一些性能做一些优化,比如降低首屏时间.减少核心按钮可操作时间等的一些操作:在这之前,需要建立的就是 ...

  6. Performance --- 前端性能监控

    阅读目录 一:什么是Performance? 二:使用 performance.timing 来计算值 三:前端性能如何优化? 四:Performance中方法 五:使用performane编写小工具 ...

  7. 前端性能监控之performance

    如果我们想要对一个网页进行性能监控,那么使用window.performance是一个比较好的选择. 我们通过window.performance可以获取到用户访问一个页面的每个阶段的精确时间,从而对 ...

  8. Performance Monitor1：开始性能监控

    Performance Monitor是Windows内置的一个可视化监控工具,能够在OS级别上实时记录系统资源的使用情况,通过收集和存储日志数据,在SQL Server发生异常时,能够还原系统当时的 ...

  9. 借助window.performance实现基本的前端基础性能监控日志

    借助window.performance实现基本的前端基础性能监控日志并二次重写console方法方便日常前端console日志的调试 npm install sn-console

随机推荐

  1. HUT 排序训练赛 G - Clock

    Clock Time Limit: 1000MS   Memory Limit: 32768KB   64bit IO Format: %I64d & %I64u [Submit]   [Go ...

  2. .NET Core如何使用NLog

    1.新建ASP.NET Core项目 1.1选择项目 1.2选择.Net版本 2. 添加NLog插件 2.1 通过Nuget安装 2.2下载相关的插件 3.修改NLog配置文件 3.1添加NLog配置 ...

  3. 【leetcode-49】字母异位词分组

    给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", "tan&quo ...

  4. .NET Core解析DNS域名或主机名的方法

    在.NET Core中我们可以用System.Net.Dns类来解析域名或主机名的IP地址,我们新建一个.NET Core控制台项目,写入下面代码: using System; using Syste ...

  5. Maven中 jar包冲突原理与解决办法

    Maven中jar包冲突是开发过程中比较常见而又令人头疼的问题,我们需要知道 jar包冲突的原理,才能更好的去解决jar包冲突的问题.本文将从jar包冲突的原理和解决两个方面阐述Maven中jar包冲 ...

  6. Date+闭包

    date类: var  time=new.date() get date() 返回一个月中的某一天 get day () 返回一周中的某一天 get fullyear() 对象以四位数返回年份 get ...

  7. Java 之 Arrays 类

    一.概述 java.util.Arrays 此类包含用来操作数组的各种方法.比如排序和搜索等,其所有方法均为静态方法,调用非常方便. 二.操作数组的方法 (1)使用二分搜索法来搜索指定的 int 型数 ...

  8. Springboot2 jpa druid多数据源

    package com.ruoyi; import org.mybatis.spring.annotation.MapperScan; import org.springframework.beans ...

  9. ubuntu升级python版本(3.5 -> 3.6)

    #获取最新的python3.6,将其添加至当前apt库中,并自动导入公钥 $ sudo add-apt-repository ppa:jonathonf/python-3.6 $ sudo apt-g ...

  10. 自制微擎AI面相识别算术阈值

    有时在朋友圈或其他地方会看到一些AI面相的分享链接或小程序,不是面相算命的有多吸引人,而是前面有"AI"两个字母.于是我就上网找了一下相关代码,发现了一个微擎系统的面相模块.下载下 ...