浏览器中有一个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. fiddle4 弱网测试

    下载:https://www.telerik.com/download/fiddler/fiddler4 参考:https://blog.csdn.net/qq_28905427/article/de ...

  2. Docker的安装与使用

    Docker的安装 (1)卸载老版本yum remove docker \                  docker-client \                  docker-clien ...

  3. C++之救济金发放问题

    n(n<20)个人站成一圈,逆时针编号为1~n.有两个官员,A从1开始逆时针数,B从n开始顺时针数.在每一轮中,官员A数k个就停下来,官员B数m个就停下来(注意有可能两个官员停在同一个人上).接 ...

  4. C++分治策略实现线性时间选择

    问题描述: 给定线性序集中n个元素和一个整数k,1≤k≤n,要求找出这n个元素中第k小的元素,即如果将这n个元素依其线性序排列时,排在第k个的元素即为要找到元素. 细节须知:(与之前的随笔相比) (1 ...

  5. CSAPP第二章show_bytes函数的探究

    CSAPP第二章中给出了一个帮助我们观察数据的位模式的函数--show_bytes函数,具体实现如下: #include<stdio.h> typedef unsigned char *b ...

  6. 解决Spring Boot 从1.x升级到 2.x 后 单点登陆(SSO)问题

    解决Spring Boot 从1.x升级到 2.x 后 单点登陆(SSO)问题   在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因此决定先把Spring S ...

  7. Spring Security 解析(三) —— 个性化认证 以及 RememberMe 实现

    Spring Security 解析(三) -- 个性化认证 以及 RememberMe 实现   在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因此决定先把 ...

  8. MAC电脑下Appium + python3 + robotframework ios的真机测试环境搭建

    本人的环境搭建前的准备,MAC电脑一台(macOS Mojave 10.14.0及以上),Xcode 10.0及以上   ,自己注册的一个Apple ID 账户,必须你的电脑能连接互联网,最好不要用公 ...

  9. [转发] SAP EPIC 银企直连+TRM资金管理

    事务代码:EPIC_PROC 电子支付集成 收款; 付款; 付款审批; 银行回单(下载,创建,修改,辩识,认领); 查询账户余额; 查询交易明细; BADI增强; VA虚拟账户客户回单自动辨识; .. ...

  10. 20、解决Vue使用bus兄弟组件间传值，第一次监听不到数据

    1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from ...