This article explains the Vue.js nextTick API, why scrolling to newly added list items may stop prematurely, demonstrates proper usage with scrollIntoView, and provides a hand‑written implementation using MutationObserver to ensure DOM updates complete before executing callbacks.
This article walks through the evolution of watermark techniques, demonstrates how to harden a front‑end watermark against deletion, invisibility, and covering using MutationObserver and canvas, introduces a low‑visibility dark watermark with decode logic, and details OCR integration and optimization to improve recognition accuracy in screenshot‑search scenarios.
This article details a practical solution that adds environment identifiers via Nginx response headers and front‑end detection to clearly distinguish test, sandbox, and production environments in middle‑back office applications, reducing confusion and operational errors.
This article presents a comprehensive solution for integrating ECharts into Vue and React projects, addressing bundle size, API complexity, and lack of CSS‑variable support by introducing custom imports, a draw helper, MutationObserver‑based resizing, theme‑aware color replacement, lazy loading, and usage examples for both frameworks.
The article details progressive front‑end watermark schemes—from a basic canvas overlay to mutation‑observer‑protected, hide‑ and cover‑resistant, and low‑opacity dark watermarks—and explains how adaptive tone handling, contrast tuning, region cropping, and a hybrid OCR pipeline (internal service with tesseract.js fallback) ensure robust, invisible data protection and accurate screenshot analysis.
rrweb is an open-source library that records web page DOM changes as JSON arrays instead of video streams, enabling precise replay of user interactions without compression artifacts or storage overhead.
This article explores several techniques—including MutationObserver, IntersectionObserver, ResizeObserver, onload listeners, and an iframe hack—to reliably detect when a rich‑text container with images exceeds a maximum height so a "show more" button can be displayed.
This article explains how to use the five browser Observer APIs—IntersectionObserver, MutationObserver, ResizeObserver, PerformanceObserver, and ReportingObserver—to monitor element visibility, attribute changes, size adjustments, performance metrics, and browser interventions, providing code examples and practical use cases.
The article explains the concept of white‑screen time, its impact on user experience, and presents multiple detection methods—including Navigation Timing API, MutationObserver, element‑point analysis, and headless‑browser simulation—along with implementation code and a monitoring‑alert architecture for front‑end performance optimization.
This article explores why adding watermarks to web pages is essential for protecting confidential content, compares front‑end and back‑end watermarking approaches, and provides step‑by‑step implementations using DOM overlays, canvas, SVG, image processing, and MutationObserver to keep watermarks resilient against tampering.
This article explains how to capture user interactions on insurance web pages by taking DOM snapshots, creating incremental snapshots with MutationObserver, leveraging the rrweb library for recording and replay, and converting the recorded data into high‑frame‑rate video using Puppeteer and FFmpeg to ensure reliable evidence.
This article presents multiple techniques for generating robust web page and image watermarks—including Canvas and SVG rendering, MutationObserver protection, and Node.js server-side generation—complete with code examples, compatibility notes, and best‑practice recommendations to prevent content leakage and enable traceability.
This article presents a universal frontend event tracking (埋点) solution designed for Baidu Takeaway's sales CRM platform, detailing its background, comparison of tracking methods, a declarative approach using Vue directives and MutationObserver mixins, support for legacy jQuery, and practical usage and results.
This article explores practical techniques for intercepting and protecting JavaScript APIs—such as setAttribute—using MutationObserver, API hooks, random token naming, property hiding, and recursive iframe monitoring to build a resilient front‑end defense against XSS and other injection attacks.
