浏览器中有一个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. JavaScript核心知识点

    一.JavaScript 简介 一.JavaScript语言的介绍:JavaScript是基于对象和原型的一种动态.弱类型的脚本语言 二.JavaScript语言的组成:JavaScript是由核心语 ...

  2. 用Powershell强制同步Windows主机与Internet time server的时间

    第一步,判断Windows Time服务是否正在运行,如果没有,则开启它. 第二步,强制同步,不知为何,往往第一次会失败,那么就多运行几次好了. Get-Service w32time | Where ...

  3. 【leet-code】接雨水

    给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这种情况下,可以接 ...

  4. C++核心技术登录实现

    void CLMSDlg::OnButtonlogin() { // TODO: Add your control notification handler code here CMainsystem ...

  5. C++ 01 基础知识点

    1.为某一特定的问题而设计的指令序列称为:程序 2.‘32位微型计算机’中的32位指的是:机器的字长 3.存储设备中,存取速度最快的是:Cache 4.指令的操作码表示的是:作何操作 5.一条指令由哪 ...

  6. Go学习笔记之Map

    Go学习笔记之Map Map 引用类型,哈希表.map的key必须可以比较相等,除了slice, map, function的内建类型都可以作为key.struct类型不包含上述字段,也可作为key. ...

  7. 服务器推送之SSE简单使用

    前端 <!DOCTYPE html> <html> <head> <meta name="viewport" content=" ...

  8. 2019-08-01 JQuery事件

    Jquery简单的事件 l blur(fn) 当失去焦点时 l change(fn) 当内容发生改变时 l click(fn) 当鼠标单击时 l dblclick 当鼠标双击时 l focus(fn) ...

  9. 在ZYNQ上裸机跑ARM程序的演示

    今天给大家演示如何在ZYNQ上,裸机跑ARM程序,本测试用的是米尔Z-turn Board单板,测试代码用的XILINX官方的C语言测试程序,用于测试挂接在ARM总线上的设备是否正常,并在串口终端打印 ...

  10. JavaScript设计模式与开发实践随笔（二）

    多态 多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果.换句话说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈 var makeSoun ...