摘要:原生导航设置buttons时候监听点击事件 { "path": "pages/user/uses", "style": { "app-plus": { "bounce": "none", "titleNView": { "buttons": [ {"text": "分享"}, {"text": "分
阅读全文
摘要:1. navigation - 页面性能 这个 entryType 提供了与页面导航相关的性能度量。它可以告诉我们页面从开始加载到完全加载的整个过程中发生了什么。通过这些数据,我们可以了解到例如DNS解析时间、TCP握手时间、页面响应时间、页面下载时间等。 应用场景: 当用户访问你的网站时,你可以使
阅读全文
摘要:# PerformanceObserver: 深入了解前端性能监测 前端开发中,性能监测是一个重要的环节。为了更好地理解用户的实际体验,我们需要了解和监测网站的性能。`PerformanceObserver` 是 Web 性能 API 的一部分,用于监测性能指标。本文将详细介绍 `Performan
阅读全文
摘要:在前端开发中,对于浏览器的报告信息,例如弃用的 API 使用、浏览器的干预、CSS 特性使用情况等,我们常常需要一种机制来收集和处理。这时,ReportingObserver API 就发挥了它的作用。 什么是 ReportingObserver? // ReportingObserver 是一个浏
阅读全文
摘要:在前端性能分析领域,了解和监控网页的运行性能至关重要。PerformanceObserver API 为我们提供了一个强大的工具来监听性能时间线上的事件,从而实现更细粒度的性能监控。 PerformanceObserver 是一种浏览器提供的接口,允许我们订阅性能时间线上的特定类型事件。当与 Per
阅读全文
摘要:ResizeObserver 它允许开发者监听元素的尺寸变化。 在前端开发中,元素尺寸的变化可能会受到许多因素的影响,例如窗口大小调整、设备方向变化、内部内容变化等。 提供了一种高效的方法来响应这些变化,而不需要频繁使用事件监听器或轮询技术。 1. 使用方法 const ro = new Resiz
阅读全文
摘要:IntersectionObserver 是一个现代的浏览器 API,允许开发者在某个元素与其祖先元素或顶层文档视口发生交叉时得到通知。它非常适合实现图片懒加载、无限滚动、广告曝光率等功能。 1. 浏览器的兼容性 IntersectionObserver 目前在大多数现代浏览器中都得到了支持。但是在
阅读全文
摘要:MutationObserver 提供了监听 DOM 树变化的能力。从简单的 UI 变更追踪到复杂的 SPA 页面变化都有涉及。 可以追踪 DOM 树的变化,包括节点的增加、删除、属性的修改等。它是异步的,这意味着它会将所有的 DOM 变化集合起来一次性报告,而不是在每一次变化后立刻报告。 兼容性
阅读全文
摘要:在日常的 Web 开发中,我们经常与内置的浏览器事件互动,例如 click、input 和 submit。但有时,我们可能希望在特定情境下创建并触发自己的事件。这时,CustomEvent 就派上了用场。 基本用法 // 使用 new CustomEvent 创建一个自定义事件 const myEv
阅读全文