JS逐日一题：前端机能监控你会监控哪些数据? 如何做?

2024年4月8日 100次阅读 来源: febobo

20190318期

前端机能监控你会监控哪些数据? 如何做?

最先之前给人人引荐两个搜检网页机能的地点

为何要做机能监控

关于公司来讲，机能在肯定程度上与好处直接相干

为何机能会影响公司的收益呢？根本原因照样在于机能影响了用户体验。加载的耽误、操纵的卡顿等都邑影响用户的运用体验。尤其是挪动端，用户对页面相应耽误和衔接中缀的容忍度很低。设想一下你拿着手机翻开一个网页想看到某个信息却加载半天的心境，你极可能挑选直接脱离换一个网页。谷歌也将页面加载速率作为 SEO 的一个权重

哪些点须要监控

我们能够分为以下几个点来举行监控

  • 白屏时候
  • 首屏时候
  • 用户可操纵时候
  • 总下载时候
白屏时候

白屏时候是用户初次看到内容的时候，也叫做初次衬着时候，chrome 高版本有 firstPaintTime 接口来猎取这个耗时，但大部分浏览器并不支撑，必需想其他方法来监测。仔细视察 WebPagetest 视图剖析发明，白屏时候出现在头部外链资本加载完四周，由于浏览器只要加载并剖析完头部资本才会真正衬着页面。基于此我们能够经由过程猎取头部资本加载完的时候来近似统计白屏时候

代码明白

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8"/>
    <script>
      var start_time = +new Date; //测试时候出发点，现实统计出发点为 
    </script>
    <script src="js"></script>  
    <script>
      var end_time = +new Date; //时候尽头
      var headtime = end_time - start_time; //头部资本加载时候    
      console.log(headtime);
    </script>
</html>
首屏时候

首屏时候的统计比较复杂，由于触及图片等多种元素及异步衬着等体式格局。视察加载视图可发明，影响首屏的主要因素的图片的加载。经由过程统计首屏内图片的加载时候便能够猎取首屏衬着完成的时候。统计流程以下

首屏位置挪用 API 最先统计 -> 
绑定首屏内一切图片的 load 事宜 -> 页面加载完后推断图片是不是在首屏内，找出加载最慢的一张 ->
首屏时候
可操纵时候

用户可操纵默许能够统计domready时候，由于一般会在这时候绑定事宜操纵。关于运用了模块化异步加载的 JS 能够在代码中去主动标记主要 JS 的加载时候，这也是产物目标的统计体式格局

总下载时候

总下载时候默许能够统计onload时候，如许能够统计同步加载的资本悉数加载完的耗时。假如页面中存在许多异步衬着，能够将异步衬着悉数完成的时候作为总下载时候

总结

  • 白屏时候指head内资本加载完成
  • 首屏时候指可视区域内末了一张图片加载完成的时候
  • 可操纵时候指Document.onready时候
  • 总下载时候指Document.onload时候

关于JS逐日一题

JS逐日一题能够看成是一个语音答题社区
天天应用碎片时候采纳60秒内的语音情势来完成当天的考题
群主在越日0点推送当天的参考答案

  • 注 毫不仅限于完成当天使命，更多是查漏补缺，进修群内别的同砚优异的答题思绪

点击到场答题

    原文作者：febobo
    原文地址: https://segmentfault.com/a/1190000018564930
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞