Good practice and busy ︱ exposure of front buried point

Time:2020-5-6

Recently, one of the job requirements is to expose the burying point so that I can have access to relevant things. Before the internship, I didn’t do this demand, and personal projects have nothing to do with burying points. So I heard the word “burying point” at the meeting last week.

But after listening to the big guy’s analysis, he realized that the original “burying point” means this. The idea of exposing buried points is also very simple: it is nothing more than to judge whether a DOM appears in the window, and collect data and report it to the server when it appears.

The so-called “buried point” is a term used in the field of data collection, especially in the field of user behavior data collection. It refers to the relevant technologies and their implementation processes for capturing, processing and sending specific user behaviors or events. For example, the number of times a user clicks an article, the length of watching a video, and so on.

As for “exposure burying point”, it is the same as “image lazy loading” and “calculation of advertisement browsing”. In essence, it allows you to calculate the relative visual status / relative position of one element and another element (window), and then perform some operations (usually reporting to the service end).

Thinking about how to achieve

The first way to come to mind is to usegetBoundingClientRect / Offset class + onscroll。 That is, register the scrolling event, and then use thegetBoundingClientRect / Offset classGet the location information of each element, and then judge whether the element is in the exposure state / window.

But there are big flaws in this way. If you are familiar with the browser’s rendering process, you will know how to callgetBoundingClientRect / Offset classIt will cause browser reflow and redraw, which will affect the performance / performance of web pages. Frequent and large number of calls is not a proper choice.

I began to try to find other more appropriate methods in the community. I found them: intersection observer

Intersection Observer

It provides aasynchronousObserve theIntersection changeMethod. In other words, it can not only be used to obtain the relativewindowThe exposure can be done more, depending on what the “other element” is.

Intersection ObserverThe work that the developer did originally: monitoring scrolling, traversing and getting the relative position of the element and another element (or window) is done. These two pieces of work are the biggest loss of page performance. Now it will be more appropriate for the browser to implement them than for our developers. Now developers only need to care about other business logic

How about the compatibility of such a good API?

Good practice and busy ︱ exposure of front buried point

It’s not bad, but it can’t be used safely if the compatibility requirements are high.

Polyfill

But don’t worry, we have Polyfill. The W3C provides a Polyfill, which is replaced by a regular solution when the browser does not support it. Its idea is to detect that the current browser does not supportIntersection Observer APIWhen usinggetBoundingClientRectTo make it happen againIntersection Observer API

So what about browser compatibility after using the Polyfill?

excellent! (IE7 is all supported. What else do you want, big brother.)

Good practice and busy ︱ exposure of front buried point

Exposure implementation steps

The idea, as mentioned again and again, is simple:

  1. new IntersectionObserver() Instantiate a globalobserver, (in combination with the Vue instruction) let each DOM add itself to theobserverView list of.
  2. When a DOM enters the window, the corresponding information is collected and reported.
  3. Cancel the observation of the dom.

code implementation

Expose.ts is encapsulated as a class

import 'intersection-observer';

export default class Exposure {
    private observer: IntersectionObserver | undefined;

    constructor() {
        this.init();
    }

    private init() {
        const self = this;

        this.observer = new IntersectionObserver(
            (entries, observer) => {
                entries.forEach(item => {
                    if (item.isIntersecting) {
                        const data = item.target.getAttribute('data-article');
                        self.upload(data);
                        observer!.unobserve(item.target);
                    }
                });
            },
            {
                root: null,
                rootMargin: '0',
                threshold: 0.1,
            }
        );
    }
  
    public add(el: Element) {
        this.observer && this.observer.observe(el);
    }

    private upload(data: string | null) {
        if (data) {
            //Ajax reporting data
        }
    }
}

Directive / exposure.ts encapsulates the Vue instruction

import Exposure from '@/lib/Exposure';
import Vue from 'vue';

const exposure = new Exposure();

Vue.directive('exposure', {
    bind(el) {
        exposure.add(el);
    },
});

*. Vue use instruction

<div v-exposure :data-article='article'>
...
</div>

Recommended Today

Application case of tsutsuga: big data judicial query platform

1. Preface When the public security organs, procuratorial organs and law enforcement organs need to inquire about the bank deposits of enterprises, institutions, institutions and organizations or consult the accounting vouchers, account books, statements and other archives related to the case, the banks shall actively cooperate. When inquiring or consulting, the people’s court shall issue […]