浏览器中有一个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. flume安装使用+根据数据源分类

    安装搭建: 1)解压下载的flume(安装jdk1.6及其以上) 2)在conf文件夹里面建立example.conf文件 #example.conf:单节点Flume配置 #命名Agent a1的组 ...

  2. 1.1 关于LVM的创建、删除、扩容和缩减

    一.新建LVM的过程 1.使用fdisk 新建分区 修改ID为8e 3.使用 pvcreate 创建 PV  4.使用 vgcreate 创建 VG  5.使用 lvcreate 创建 LV  6.格 ...

  3. SSL密钥协商过程分析

    一.说明 尽管做过证书生成.双向认证.SSL通信编程等事情,但一直不清楚SSL如何完成密钥交换.看网上的资料则众说纷纭,最近和朋友学习时聊到了这个问题,然后正巧上周处理客户反馈SSL版本过低时领导也想 ...

  4. [转帖]统一操作系统 UOS 龙芯版上线

    统一操作系统 UOS 龙芯版上线 看评论很有必要 搞一波 深度的操作系统了https://www.oschina.net/news/112065/chinauos-with-loongson?p=4 ...

  5. 第五节：管道中间件入门(Use、Run、Map)

    一. 简介 1.中间件是一种装配到应用管道以处理请求和响应的组件,每个组件可以选择是否把请求传递到管道中的下一个组件.可在管道中的下一个组件的前后执行工作.请求管道中的每一个组件负责调用管道中的下一个 ...

  6. Python协程介绍（转）

    原文:https://www.liaoxuefeng.com/wiki/897692888725344/923057403198272 协程,又称微线程,纤程.英文名Coroutine. 协程的概念很 ...

  7. c#使用SoundPlayer播放wav格式音频

    1.引用System.Media名称空间下的类SoundPlayer   SoundPlayer player = new SoundPlayer(); 2.方法调用Play(); public vo ...

  8. PHP面试题2019年腾讯工程师面试题和答案

    一.单选题(共29题,每题5分) 1.PHP执行的时候有如下执行过程:Scanning(Lexing) - Compilation - Execution - Parsing,其含义分别为: A.将P ...

  9. tomcat重启session不失效问题

    本地写代码每次重启都要重新登录浪费了很多时间,如何重启不用重新登录呢,只要让tomcat在关闭时将session写入文件中,在启动时从文件中读取session即可. 只需在conf/context.x ...

  10. [摘抄] 2. module对象

    2. module对象 Node内部提供一个Module 构建函数,所有函数都是Module的实例. function Moudle(id,parent) { this.id = id; this.e ...