Web前端关于性能监控讲解

一、前端指的是什么呢？

关于网站来说，一般是指网站的前台部分，也就是Web运用中用户能够看得见碰得着的东西。

二、因为什么要做前端监控？

前端资源加载是否快速对功用影响是最大的，这里面资源的加载次序，并发数量，都有许多的作业可做：比方，如果发现 CSS 加载之前的阻塞时刻很长，那很可能是资源加载次序不合理，这必然会导致阅读器烘托拖延。

三、前端功能监控目标

白屏时刻：用户从翻开页面开端到页面开端有东西呈现为止

首屏时刻：用户阅读器首屏内一切内容都呈现出来所花费的时刻

用户可交互时刻：用户能够进行正常的点击、输入等操作，默许能够核算domready时刻，因为一般会在这时分绑定事情操作

总下载时刻：页面一切资源都加载完结并呈现出来所花的时刻，即页面 onload 的时刻

确定核算的起点

需求在用户输入 URL 或许点击链接的时分就开端核算，因为这样才干衡量用户的等候时刻。高端阅读器Navigation Timing接口；一般阅读器经过 cookie 记载时刻戳的办法来核算，需求留意的是 Cookie 办法只能核算到站内跳转的数据。

白屏时刻的核算

白屏时刻指的是用户初次看到内容的时刻，也叫做初次烘托时刻，chrome 高版别有 firstPaintTime 接口来获取这个耗时，但大部分阅读器并不支撑，有必要想其他办法来监测。仔细调查 WebPagetest 视图剖析发现，白屏时刻呈现在头部外链资源加载完邻近，因为阅读器只有加载并解析完头部资源才会实在烘托页面。根据此能够经过获取头部资源加载完的时刻来近似核算白屏时刻。虽然并不准确，但却考虑了影响白屏的首要因素：首字节时刻和头部资源加载时刻。

怎么核算头部资源加载呢？发现头部内嵌的JS一般需等候前面的 JS\CSS 加载完才会履行，是不是能够在阅读器head内底部加一句JS核算头部资源加载完毕点呢？能够经过一个简略的示例进行测验：

核算的头部加载时刻正好跟头部资源下载时刻附近，并且换成一个履行时刻很长的 JS 也会比及 JS 履行完才核算。阐明此办法是可行的(具体原因可查看阅读器烘托原理及 JS 单线程相关介绍)。

核算首屏时刻

首屏时刻的核算比较杂乱，因为涉及图片等多种元素及异步烘托等办法。调查加载视图可发现，影响首屏的首要因素的图片的加载。经过核算首屏内图片的加载时刻便能够获取首屏烘托完结的时刻。核算的流程如下：

首屏方位调用 API 开端核算 -> 绑定首屏内一切图片的 load 事情 -> 页面加载完后判别图片是否在首屏内，找出加载最慢的一张 -> 首屏时刻。

页面存在 iframe 的情况下也需求判别加载时刻

gif 图片在 IE 上可能重复触发 load 事情需扫除

异步烘托的情况下应在异步获取数据刺进之后再核算首屏

css 重要背景图片能够经过 JS 恳求图片 url 来核算(阅读器不会重复加载)

没有图片则以核算 JS 履行时刻为首屏，即以为文字呈现时刻

核算用户总操作和总下载

用户可操作默许能够核算domready时刻，因为一般会在这时分绑定事情操作。关于运用了模块化异步加载的 JS 能够在代码中去自动符号重要 JS 的加载时刻，这也是产品目标的核算办法

总下载时刻默许能够核算onload时刻，这样能够核算同步加载的资源悉数加载完的耗时。如果页面中存在许多异步烘托，能够将异步烘托悉数完结的时刻作为总下载时刻

四、功能监控东西

因为搜集数据的办法和目标不一样，前端功用监控首要分为非侵入式式和侵入式两种

关于核算脚本需求满意两个条件

1、防止对业务代码的侵略

2、不影响被丈量的页面的功用

想要更深入学习的小伙伴可以加下我的前端学习交流群386250991，最新的免费学习资料，视频。欢迎各位的到来，觉得写的还可以的点下关注，欢迎大家转载文章！