首页 > 其他分享 >前端监控

前端监控

时间:2025-01-01 14:43:04浏览次数:1  
标签:前端 filterTime 监控 timing 加载 页面

前端监控

01-监控【一手IT免费资源加微信2268731】.flv
02-监控【一手IT免费资源加微信2268731】.flv
03-监控【一手IT免费资源加微信2268731】.flv
04-监控【一手IT免费资源加微信2268731】.flv
05-监控5【一手IT免费资源加微信2268731】.flv
什么样的前端项目是一个好的前端项目?
好项目用了React/Vue用dispatch不用setState用TypeScript使用webpack打包模块化思想符合MVVM/MVC模式

差项目还在用jQuery操作DOM组件通信还在用event没有各种lint资源依赖手动处理window上挂了很多变量命令式代码

你的项目用了下面的技术支持,和老大说我的这个前端项目很好,老大认不认?·使用了最热的react全家桶,还抽象了几个redux中间件·使用了webpack打包,不仅抽离了公用lib,甚至还做了代码分割·使用了less+css next,让css写起来更好·非核心必要组件改造成异步组件·…

点了这个按钮怎么没反应了?页面为什么白了?怎么一直是正在加载?先点1按钮后点2按钮会出问题唉。大量云南的用户说看不到图片!

那么,前端监控了解一下?

技术监控页面性能监控静态资源性能监控错误监控接口性能监控

行为监控用户行为路径打点监控大量log上报策略时效策略

数据挖掘 分析 回报ppt

nm

https://github.com/geeknull/eagle-monitor

O www.rollupjs.com

Performance 接口可以获取到当前页面与性能相关的信息。它是High Resolution Time APl的一部分,同时也融合了Performance Timeline API、Navigatigg Timing API、User TimingAPI 和 Resource Timing API。该类型的对象可以通过调用只读属性window.performance 来获得。

Performance 性能分析...

多数是时间戳

image-20250101135653661

image-20250101135653661

https://caniuse.com/#search=Performance.timing

ie9+

      let timing = performance.timing;

      let perfData = {
        // 网络建连
        pervPage: filterTime(timing.fetchStart, timing.navigationStart), // 上一个页面
        redirect: filterTime(timing.responseEnd, timing.redirectStart), // 页面重定向时间
        dns: filterTime(timing.domainLookupEnd, timing.domainLookupStart), // DNS查找时间
        connect: filterTime(timing.connectEnd, timing.connectStart), // TCP建连时间
        network: filterTime(timing.connectEnd, timing.navigationStart), // 网络总耗时

        // 网络接收
        send: filterTime(timing.responseStart, timing.requestStart), // 前端从发送到接收到后端第一个返回
        receive: filterTime(timing.responseEnd, timing.responseStart), // 接受页面时间
        request: filterTime(timing.responseEnd, timing.requestStart), // 请求页面总时间

        // 前端渲染
        dom: filterTime(timing.domComplete, timing.domLoading), // dom解析时间
        loadEvent: filterTime(timing.loadEventEnd, timing.loadEventStart), // loadEvent时间
        frontend: filterTime(timing.loadEventEnd, timing.domLoading), // 前端总时间

        // 关键阶段
        load: filterTime(timing.loadEventEnd, timing.navigationStart), // 页面完全加载总时间
        domReady: filterTime(timing.domContentLoadedEventStart, timing.navigationStart), // domready时间
        interactive: filterTime(timing.domInteractive, timing.navigationStart), // 可操作时间
        ttfb: filterTime(timing.responseStart, timing.navigationStart),  // 首字节时间
      };

bhx +-

一个document的Document.readyState属性描述了文档的加载状态。值一个文档的readyState可以是以下之一:loading/加载document仍在加载。interactive/互动文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。complete/完成T文档和所有子资源已完成加载。状态表示1oad事件即将被触发。当这个属性的值变化时,document 对象上的readystatechange 事件将被触发。

(窗口。性能观察者) (window.PerformanceObserver)

let xhr = window.XMLHttpRequest; +flag 优化 不多调

//这三种状态都代表这请求已经结束了需要统计一些信息并上报上去this.addEventListener('load',I false);this.addEventListener('error', false);this.addEventListener('abort', false);

error事件的事件处理程序。针对各种目标的不同类型的错误触发了 Error事件:·当JavaScript运行时错误(包括语法错误)发生时,window会触发一个ErrorEvent接口的error事件,并执行window.onerror()。·当一项资源(如

标签:前端,filterTime,监控,timing,加载,页面
From: https://www.cnblogs.com/KooTeam/p/18645917

相关文章

  • 有哪些操作可能会引起前端安全的问题?
    在前端开发中,以下操作可能会引起安全问题:跨站脚本攻击(XSS):当网站没有对用户输入进行充分限制时,攻击者可以注入恶意脚本,导致其他用户在浏览页面时执行这些脚本。这可能会窃取用户数据、冒充用户行为或进行其他恶意操作。XSS攻击主要分为存储型、反射型和DOM型三种。存储型XSS:恶......
  • 前端成长必经之路
    核心jscsscompontent模块化适配手机响应式rem前端成长必经之路20:42307899881-1课程导学.mp4组件化思维与技巧京东金融实战WebComponents课程特色组件化的思维方式及项目设计组件化和模块化不仅仅是JS也包括CSS如何将项目做出亮点,面试又该如何表现学会独立构建......
  • 398.大学生HTML期末大作业 —【薛之谦明星主题精品网页(7页)】 Web前端网页制作 html+
    目录一、网页简介二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强欢迎来到我的CSDN主页!您的支持是我创作的动力!Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交......
  • Web 前端面试指南与高频考题解析
    Web前端面试指南与高频考题解析准备:简历编写和面试前准备一般来说,跳槽找工作要经历投递简历、准备面试、面试和谈offer四个阶段。其中面试题目会因你的等级和职位而异,从入门级到专家级,广度和深度都会有所增加。不过,不管什么级别和职位,面试题目一般都可以分类为理论知识、算法......
  • 树形DP学习笔记(二):打家劫舍III & 监控二叉树
    参考:树形DP:打家劫舍III【基础算法精讲24】_哔哩哔哩_bilibili树形DP:监控二叉树【基础算法精讲25】_哔哩哔哩_bilibilips:笔记中的代码按本人理解整理,重思路,对比原视频中的代码稍有改动往期:树形DP学习笔记(一):树的路径问题-CSDN博客状态机DP学习笔记-CSDN博客【如果笔记......
  • QT程序监控不到拖拽事件如dragEnterEvent - Windows权限问题的解决方案
    问题:当客户端已高完整性启动(例如启动客户端的进程是BypassUAC启动的高完整性的进程,导致客户端继承了其高完整性),由于explorer.exe资源管理器是以中等Medium权限启动,客户端的权限较高,导致设置了qt编写的客户端设置了的setAcceptDrops(true)后依然无法触发dropEvent,导致无法接受其它......
  • web前端期末大作业:旅游网页设计与实现——个人旅游博客(4页)HTML+CSS (2)
    ......
  • 夜莺监控突破一万 star,这是汗水,也是鞭策
    夜莺监控项目在上周突破了一万star,算是一个小小的里程碑。在开源领域,通常把star数量看作项目的繁荣指标,star数量越多,说明愿意关注你的人越多。这个数字的背后,是一群人对你的鼓励、认可和支持,当然,还有鞭策。夜莺项目最早发起于2020年初,发展到现在接近四年时间,本文想借此机会......
  • 前端-2
    elementui简介网站快速成型工具,一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。安装npmielement-ui-S(--save)i=install安装-S=--save安装后的配置保存到package.json中配置https://element.eleme.cn/#/zh-CN/component/quickstart......
  • 前端-1
    nodejs简介https://nodejs.cn/Node.js是一个开源的、跨平台的JavaScript运行时环境。让前端像后端项目在tomcat中一样运行访问的技术(前端工程化)。作者:RyanDahl,基于谷歌V8引擎和Javascript,开发nodejs。测试是否安装成功windows键+r输入cmd回车node-v或者nod......