佛山网站建设4-win方维分析网站推广和优化的原因
一、概念
前端埋点是指在网页或者应用程序中插入特定的代码，用于收集用户的行为数据并发送给服务器进行分析。这些数据可以包括用户的点击、浏览、输入等操作，帮助开发者了解用户在其网站中的行为，从而进行针对性的优化和改进。
前端埋点通常包括以下几个步骤：
1、定义事件：定义需要收集的数据事件，如点击、浏览等。
2、添加代码：在网页或应用程序中添加特定的代码，用于收集事件数据。
3、发送数据：将收集到的数据发送给服务器进行分析。
4、分析数据：对收集到的数据进行分析和挖掘，找出用户行为规律和需求，为产品的改进和优化提供数据。
二、前端监控
（一）常见的监控
1、数据监控（主要关注用户在网站或应用中的行为和交互）
- PV：即页面浏览量或点击量
- UV：指访问某个站点或点击某条新闻的不同IP地址的人数
- 用户在每一个页面的停留时间
- 用户通过什么入口来访问该网页
- 用户在相应的页面中触发的行为
2、性能监控（主要关注网站或应用的加载速度、响应时间和用户体验等方面）
- 不同用户，不同机型和不同系统下的首屏加载时间
- 白屏时间
- http等请求的响应时间
- 静态资源整体下载时间
- 页面渲染时间
- 页面交互动画完成时间
3、异常监控（主要关注网站或应用在运行过程中是否出现错误或异常）
- JavaScript的异常监控
- 样式丢失的异常监控
（二）性能数据
- unload：前一个页面卸载耗时。计算方式：unloadEventEnd - unloadEventStart
- redirect：重定向耗时。计算方式：redirectEnd-redirectStart。意义：重定向时间。
- appCache：缓存耗时。domainLookupStart - fetchStart。意义：读取缓存的时间。
- dns：DNS解析耗时。domainLoopupEnd - domainLookupStart。意义：观察域名解析服务是否正常。
- tcp：TCP连接耗时。connectEnd - connectStart。意义：建立连接的耗时。
- sst：SSL安全连接耗时。connectEnd - secureConnectStart。意义：反映数据安全连接建立耗时。
- response：响应数据传输耗时。responseEnd - responseStart。意义：观察网络是否正常。
- dom：DOM解析耗时，domInteractive - responseEnd。意义：观察DOM结构是否合理，是否有JS阻塞页面解析
- dcl：DOMContentLoaded事件耗时，domContentLoadedEventEnd - domContentLoadedEventStart。意义：当HTML文档被完全加载和解析之后，DOMContentLoaded事件被触发，无需等待样式表、图像的完成加载。
- resources：资源加载耗时。domComplete - domContentLoadedEventEnd。意义：可以观察文档浏览是否过大。
- domReady：DOM阶段渲染耗时。domContentLoadedEventEnd - fetchStart。意义：DOM树和页面加载完成时间，会触发domContentLoaded时间。
- 首次渲染耗时：responsedEnd - fetchStart。加载文档到看到第一帧非空图像的时间（白屏时间）
- 首次可交互时间：domInteractive - fetchStart。DOM树解析完成时间，此时document.readyStart为interactive
- 首包时间耗时：responseStart - domainLookupStart。DNS解析到响应返回给浏览器第一个字节的时间。
- 页面完全加载时间：loadEventStart - fetchStart
- onLoad：onLoad事件耗时。loadEventEnd - loadEventStart。
性能采集：Navigation Timing API - Web API | MDN