浏览器中有一个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. Linux命令中service的用法

    用途说明 service命令用于对系统服务进行管理,比如启动(start).停止(stop).重启(restart).查看状态(status)等.相关的命令还包括chkconfig.ntsysv等,c ...

  2. golang开始篇

    一   First Golang 1.1 需求 第一个程序hello.go,可以输出"hello golang" 1.2 开发步骤 开发这个程序时,我们的目录结构怎么处理(让自己或 ...

  3. Go语言【数据结构】指针

    指针 本章围绕字符串.数字.数组.切片.map.channel.结构体与指针赋值及函数传参的应用剖析 字符串 字符串本身也是StringHeader的结构体,包含Data指针与字符串长度,如下 typ ...

  4. python 实例

    进度条 import sys, time class ShowProcess(object): """ 显示处理进度的类 调用该类相关函数即可实现处理进度的显示 &quo ...

  5. ubuntu docker 搭建 mongodb，开启授权访问 redis，mysql mssql 备份还原

    命令安装docker 如果您想从Ubuntu存储库安装docker版本,则可以运行下面的apt命令. sudo apt install docker.io等到安装完成后,您可以启动Docker并使用s ...

  6. （原创）C#操作MYSQL数据库

    应用程序对数据库的操作都是只有4个:增,删,改,查. 只有”查”的操作需要使用适配器来存储查询得到的数据.其它3个操作不需要用到适配器. 不同的数据库有共同操作方法:都要建立连接对象,连接对象要有连接 ...

  7. Django:RestFramework之-------解析器

    7.解析器 依靠Content-Type对用户的请求体中的数据进行解析. 7.1django中的解析器 前戏:django中的request.POST/request.body request.POS ...

  8. 17、在vue中引用移动端框架Vux：

    1:使用vue-cli创建好项目(此处省略步骤)2:在项目中安装vux:npm install vux --save3:​安装vux-loader:npm install vux-loader --s ...

  9. 如何使用Python的Django框架创建自己的网站

    如何使用Python的Django框架创建自己的网站 Django建站主要分四步:1.创建Django项目,2.将网页模板移植到Django项目中,3.数据交互,4.数据库 1创建Django项目 本 ...

  10. python高级编程之 web静态服务器

    返回固定数据 import socket def request_handler(new_client_socket): """ 响应客户端请求的核心函数 "& ...