window.performance_前端性能监控

更新日期: 2019-05-12阅读: 3.3k标签: 性能

html5提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端分析。它是浏览器的直接实现,比在网页中用js设置Date.time或者cookie来分析网页时间上要精确很多。

要学习这套api的使用,先简单介绍下前端的基础知识。 


 1.页面加载 

 一个页面的请求到响应再到显示出来,需要经过下面一些重要过程,当我们在浏览器输入一个URL或者说点击一个URL开始,会出现如下流程: 

 (1)页面准备 

 (2)重定向:在header定义了重定向才会有这个过程,如果没有重定向,不会产生这个过程。  

(3)app cache:会先检查这个域名是否有缓存,如果有缓存就不需要DNS解析域名。这里的app是值应用程序application,不指手机app。 

 (4)DNS解析:把域名解析成IP,如果直接用ip地址访问,不产生这个过程。 

 (5)TCP连接:http协议是经过TCP来传输的,所以产生一个http请求就会有TCP connect,但是依赖于长连接,不会产生这个过程。 

 (6)request header:请求头信息。 

 (7)request body:请求体信息,比如get请求是没有请求体信息的,所以没有这个过程,这就是为什么把头跟体分开写的原因。 

 (8)response header:响应头信息。 

 (9)response body:响应体信息。 

 (10)解析HTML结构 

 (11)加载外部脚本和样式表文件:正常来说JS、css都是外部加载的,当然有不正常的人啊,比如我。 

 (12)解析并执行脚本代码 

 (13)构建与解析HTML dom树:这个过程可以去了解下DOM树是怎样的就明白啦。 

 (14)加载外部图片 

 (15)页面加载完成,显示出来。 


 2.重定向分析

为什么单独说一下这个重定向呢?因为刚开始我也想不通为什么重定向放在最开始,因为是否重定向是在request header中定义的啊,但是接着DNS、TCP连接,不应该是先DNS、TCP连接、request header再重定向吗?答案是的,来看看下面流程: 

(1)app cach

(2)DNS解析

(3)TCP连接

(4)request header

(5)重定向

(6)app cach

(7)DNS解析

(8)TCP连接

(9)request header

从上面就可以看出来,实际上面15个步骤我是把重定向的过程没有写的那么细啦,而实际重定向本身就是要经过DNS、TCP连接、request header再重定向的。所以说一般有重定向的请求耗时会多一些。


performance  

说完了前端的东西,这下轮到说正题啦,开始介绍到performance提供了一套API,下面就从API介绍开始吧。  


performance.mark() 

通过一个给定的名称,将该名称(作为键)和对应的DOMHighResTimeStamp(作为值)保存在一个哈希结构里。该键值对表示了从某一时刻(译者注:某一时刻通常是 navigationStart 事件发生时刻)到记录时刻间隔的毫秒数。(译者注:该方法一般用来多次记录时间,用于求得各记录间的时间差)


performance.now() 

该方法返回一个DOMHighResTimeStamp对象,该对象表示从某一时刻(译者注:某一时刻通常是 navigationStart 事件发生时刻)到调用该方法时刻的毫秒数。


Performance.clearMarks()

将给定的 mark 从浏览器的性能输入缓冲区中移除。 


Performance.clearMeasures()

 将给定的 measure 从浏览器的性能输入缓冲区中。


Performance.clearResourceTimings() 

从浏览器的性能数据缓冲区中移除所有 entryType 是 "resource" 的 performance entries。 


Performance.getEntries() 

基于给定的 filter 返回一个 PerformanceEntry 对象的列表。 


Performance.getEntriesByName() 

基于给定的 name 和 entry type 返回一个 PerformanceEntry 对象的列表。 


Performance.getEntriesByType() 

基于给定的 entry type 返回一个 PerformanceEntry 对象的列表


Performance.measure() 

在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的 timestamp


Performance.setResourceTimingBufferSize() 

将浏览器的资源 timing 缓冲区的大小设置为 "resource" type performance entry 对象的指定数量 


Performance.toJSON() 

其是一个 JSON 格式转化器,返回 Performance 对象的 JSON 对象


performance.timing

是一个PerformanceTiming 对象,包含延迟相关的性能信息。


performance.navigation

是一个 PerformanceNavigation 对象,该对象表示在当前给定浏览上下文中网页导航的类型(译者注:TYPE_BACK_FORWARD,TYPE_NAVIGATE, TYPE_RELOAD,TYPE_RESERVED)以及次数。 


performance.memory

在Chrome其是 Chrome 添加的一个非标准扩展,这个属性提供了一个可以获取到基本内存使用情况的对象。不应该使用这个非标准的 API。


Performance.timeOrigin

返回性能测量开始时的时间的高精度时间戳。


链接: https://www.fly63.com/article/detial/3298

提高js加载速度,实现js无阻塞加载方式,高性能的加载执行JavaScript

为解决JS加载速度慢,采用js的延时加载,和动态加载。由于js的堵塞特性,当浏览器在加载javascript代码时,不能同时做其他任何事情,如果javascript执行时间越久,浏览器等待响应的时间就越久。

如何提高CSS性能?CSS优化、提高性能提升总汇

如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要表现为: 加载性能 (主要是从减少文件体积,减少阻塞加载,提高并发方面入手),选择器性能,渲染性能,可维护性。

前端性能优化_css加载会造成哪些阻塞现象?

css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。

2018 前端性能检查表

性能十分重要。然而,我们真的知道性能瓶颈具体在哪儿吗?是执行复杂的 JavaScript,下载缓慢的 Web 字体,巨大的图片,还是卡顿的渲染?研究摇树(Tree Shaking),作用域提升(Scope Hoisting)

高性能Javascript总结

Js高性能总结:加载和运行、数据访问、DOM编程、算法和流程控制、响应接口、Ajax 异步JavaScript和XML、编程实践...

优化网站性能规则_前端性能优化策略【网络加载、页面渲染】

前端网站性能优化规则:网络加载类、页面渲染类。包括:减少 HTTP 资源请求次数、减小 HTTP 请求大小、避免页面中空的 href 和 src、合理设置 Etag 和 Last-Modified、使用可缓存的 AJAX、减少 DOM 元素数量和深度等

前端性能的本质是什么?

性能一直以来是前端开发中非常重要的话题。随着前端能做的事情越来越多,浏览器能力被无限放大和利用:从 web 游戏到复杂单页面应用,从 NodeJS 服务到 web VR/AR 和数据可视化,前端工程师总是在突破极限

BigPipe_高性能流水线页面技术

BigPipe是一个重新设计的基础动态网页服务体系。大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程:多重指令管线通过不同的处理器执行单元,以达到性能的最佳。

用CSS开启硬件加速来提高网站性能

你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗?现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。

原生js实现懒加载并节流

像淘宝网站等,页面中有着大量图片,一次性全部加载这些图片会使浏览器发送大量请求和造成浪费。采用懒加载技术,即用户浏览到哪儿,就加载该处的图片。这样节省网络资源、提升用户体验、减少服务器压力。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!