完美前端

摘要： 在前端开发中，对于浏览器的报告信息，例如弃用的 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 阅读全文