Summary of Vue first screen performance optimization component knowledge points

Vue first screen performance optimization component

Simply implement a Vue first screen performance optimization component. Modern browsers provide many new interfaces. Without considering IE compatibility, these interfaces can greatly reduce the workload of writing code and doing some performance optimization. Of course, in order to consider IE, we can also provide a backup for it when encapsulating components. The first screen performance optimization component in this article mainly uses the two interfaces of IntersectionObserver and requestIdleCallback.

describe

Let's first consider the first screen scenario. When making a first screen mainly for display, more resources such as pictures are usually loaded. If we don't want to load all resources when the user opens it, but want the user to scroll to the relevant position before loading the component, then we can choose the IntersectionObserver interface. Of course, we can also use the onscroll event to do a listener, but the performance may be worse. There are also some components that we hope must be loaded, but we don't want them to be loaded synchronously when the page is initialized. In this way, we can use asynchronous methods such as Promise and setTimeout. However, if we want to lower the priority of loading this component, we can consider the requestIdleCallback interface. The relevant code is in the vue--first-screen-optimization branch of https://github.com/WindrunnerMax/webpack-simple-environment.

IntersectionObserver

The IntersectionObserver interface, which belongs to the Intersection Observer API, provides a method for asynchronously observing the intersection status of a target element with its ancestor element or the top-level document viewport. The ancestor element and the viewport are called roots. That is to say, the IntersectionObserver API can automatically observe whether the element is visible. Since the essence of visible is that the target element and the viewport produce an intersection area, this API is called the intersection observer. Compatibility https://caniuse.com/?search=IntersectionObserver.

const io = new IntersectionObserver(callback, option);

// Start observing io.observe(document.getElementById("example"));
// Stop observing io.unobserve(element);
// Close the observer io.disconnect();

• The parameter callback creates a new IntersectionObserver object. When it detects that the visible part of the target element crosses one or more thresholds, the specified callback function is executed.
• Parameter option, the second parameter of the IntersectionObserver constructor is a configuration object, which can set the following properties:
• The threshold attribute determines when the callback function is triggered. It is an array in which each member is a threshold value. The default value is [0], which means that the callback function is triggered when the intersection ratio reaches 0. Users can customize this array. For example, [0, 0.25, 0.5, 0.75, 1] ​​means that the callback function will be triggered when the target element is 0%, 25%, 50%, 75%, and 100% visible.
• The root attribute specifies the container node where the target element is located, that is, the root element. The target element will not only scroll with the window, but also scroll inside the container, such as scrolling in an iframe window. In this case, the root attribute needs to be set. Note that the container element must be the ancestor node of the target element.
• The rootMargin attribute defines the margin of the root element, which is used to expand or reduce the size of the rootBounds rectangle, thereby affecting the size of the intersection area of ​​intersectionRect. It uses the CSS definition method, such as 10px 20px 30px 40px, which represents the values ​​in the top, right, bottom and left directions.
• The IntersectionObserver.root property is read-only and refers to the specific ancestor element element of the monitored object. If no value is passed in or the value is null, the top-level document window is used by default.
• The property IntersectionObserver.rootMargin is read-only. It is the rectangular offset added to the root bounding box when calculating the intersection. It can effectively reduce or expand the root determination range to meet the calculation needs. The value returned by this property may be different from the value specified when calling the constructor, so you may need to change the value to match internal requirements. All offsets can be expressed in pixels (px) or percentages (%). The default value is 0px 0px 0px 0px.
• The property IntersectionObserver.thresholds is read-only, a list containing thresholds in ascending order. Each threshold in the list is the ratio of the intersection area to the boundary area of ​​the listening object. When any threshold of the listening object is crossed, a notification Notification is generated. If no value is passed in the constructor, the default value is 0.
• The method IntersectionObserver.disconnect() stops the IntersectionObserver object from monitoring.
• The method IntersectionObserver.observe() causes IntersectionObserver to start monitoring a target element.
• The method IntersectionObserver.takeRecords() returns an array of IntersectionObserverEntry objects for all observed targets.
• The method IntersectionObserver.unobserve() stops IntersectionObserver from observing a specific target element.
  

In addition, when the callback function is executed, an IntersectionObserverEntry object parameter is passed, which provides the following information.

• time: The time when visibility changes, which is a high-precision timestamp in milliseconds.
• target: The target element being observed is a DOM node object.
• rootBounds: Information about the rectangular area of ​​the root element, which is the return value of the getBoundingClientRect method. If there is no root element and scrolling is done directly relative to the viewport, null is returned.
• boundingClientRect: Information about the rectangular area of ​​the target element.
• intersectionRect: Information about the intersection area between the target element and the viewport or root element.
• intersectionRatio: The visible ratio of the target element, that is, the ratio of intersectionRect to boundingClientRect. It is 1 when it is completely visible and less than or equal to 0 when it is completely invisible.

{
  time: 3893.92,
  rootBounds: ClientRect {
    bottom: 920,
    height: 1024,
    left: 0,
    right: 1024,
    top: 0,
    width: 920
  },
  boundingClientRect: ClientRect {
     // ...
  },
  intersectionRect:ClientRect {
    // ...
  },
  intersectionRatio: 0.54,
  target: element
}

requestIdleCallback

The requestIdleCallback method can accept a function that will be called during the browser's idle period. This allows developers to perform background and low-priority work on the main event loop without affecting delayed key events such as animations and input responses. Functions are generally executed in the order of first-in-first-out. If the callback function specifies an execution timeout, it is possible to disrupt the execution order in order to execute the function before the timeout. Compatibility https://caniuse.com/?search=requestIdleCallback.

const handle = window.requestIdleCallback(callback[, options]);

• The requestIdleCallback method returns an ID, which can be passed to the window.cancelIdleCallback() method to end the callback.
• The parameter callback is a reference to a function that will be called when the event loop is idle. The function will receive a parameter called IdleDeadline, which can obtain the current idle time and whether the callback has been executed before the timeout.
• The parameter options is optional and includes optional configuration parameters with the following properties:
• timeout: If timeout is specified and has a positive value, and the callback has not been called after timeout milliseconds have elapsed, the callback task will be queued to the event loop, even if doing so may have a negative impact on performance.

accomplish

In fact, writing components mainly involves figuring out how to use these two main APIs. First, let's focus on IntersectionObserver. Because we need to use the dynamic component <component />, we need to use the asynchronous component loading () => import("component") form when passing values ​​to it. When listening, you can consider destroying the listener after loading is complete, or destroying it after leaving the visual area, etc. This is mainly a strategic issue. When the page is destroyed, the Intersection Observer must be disconnected to prevent memory leaks. Using requestIdleCallback is relatively simple. You only need to execute the callback function, which is similar to the asynchronous processing of Promise.resolve().then.

Here is a simple implementation logic. Usually, the usage of observer is to use a div as a placeholder first, and then monitor the container of the placeholder in the observer. When the container is in the viewport, load the relevant components. The relevant code is in the vue--first-screen-optimization branch of https://github.com/WindrunnerMax/webpack-simple-environment. Please try to use yarn for installation. You can use the yarn.lock file to lock the version to avoid dependency issues. After running with npm run dev, you can see the order in which these four lazy-loaded components are created in the Console. Among them, the lazy loading of A's observer needs to wait until the loading page is rendered and it is judged to be in the visible area before loading, so that it can be seen directly on the first screen. The lazy loading of D requires sliding the scroll bar until the external container of D appears in the view before it appears. In other words, the D component will not be loaded unless it is scrolled to the bottom. In addition, attrs and listeners can be passed to the lazy-loaded component through component-params and component-events, which is similar to $attrs and $listeners. At this point, the lazy-loading component has been simply implemented.

<!-- App.vue -->
<template>
    <div>
        <section>1</section>
        <section>
            <div>2</div>
            <lazy-load
                :lazy-component="Example"
                type="observer"
                :component-params="{ content: 'Example A' }"
                :component-events="{
                    'test-event': testEvent,
                }"
            ></lazy-load>
        </section>
        <section>
            <div>3</div>
            <lazy-load
                :lazy-component="Example"
                type="idle"
                :component-params="{ content: 'Example B' }"
                :component-events="{
                    'test-event': testEvent,
                }"
            ></lazy-load>
        </section>
        <section>
            <div>4</div>
            <lazy-load
                :lazy-component="Example"
                type="lazy"
                :component-params="{ content: 'Example C' }"
                :component-events="{
                    'test-event': testEvent,
                }"
            ></lazy-load>
        </section>
        <section>
            <div>5</div>
            <lazy-load
                :lazy-component="Example"
                type="observer"
                :component-params="{ content: 'Example D' }"
                :component-events="{
                    'test-event': testEvent,
                }"
            ></lazy-load>
        </section>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import LazyLoad from "./components/lazy-load/lazy-load.vue";
@Component({
    components: { LazyLoad },
})
export default class App extends Vue {
    protected Example = () => import("./components/example/example.vue");

    protected testEvent(content: string) {
        console.log(content);
    }
}
</script>

<style lang="scss">
@import "./common/styles.scss";
body {
    padding: 0;
    margin: 0;
}
section {
    margin: 20px 0;
    color: #fff;
    height: 500px;
    background: $color-blue;
}
</style>
Copy
<!-- lazy-load.vue -->
<template>
    <div>
        <component
            :is="renderComponent"
            v-bind="componentParams"
            v-on="componentEvents"
        ></component>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class LazyLoad extends Vue {
    @Prop({ type: Function, required: true })
    lazyComponent!: () => Vue;
    @Prop({ type: String, required: true })
    type!: "observer" | "idle" | "lazy";
    @Prop({ type: Object, default: () => ({}) })
    componentParams!: Record<string, unknown>;
    @Prop({ type: Object, default: () => ({}) })
    componentEvents!: Record<string, unknown>;

    protected observer: IntersectionObserver | null = null;
    protected renderComponent: (() => Vue) | null = null;

    protected mounted() {
        this.init();
    }

    private init() {
        if (this.type === "observer") {
            // `window.IntersectionObserver` exists
            if (window.IntersectionObserver) {
                this.observer = new IntersectionObserver(entries => {
                    entries.forEach(item => {
                        // `intersectionRatio` is the visible ratio of the target element, greater than `0` means it is visible // There are also implementation strategy issues here, such as not releasing `observe` after loading and destroying it when it is invisible, etc. if (item.intersectionRatio > 0) {
                            this.loadComponent();
                            // After loading is complete, uncheck `observe`
                            this.observer?.unobserve(item.target);
                        }
                    });
                });
                this.observer.observe(this.$el.parentElement || this.$el);
            } else {
                // Load directly this.loadComponent();
            }
        } else if (this.type === "idle") {
            // `requestIdleCallback` exists
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            if (window.requestIdleCallback) {
                requestIdleCallback(this.loadComponent, { timeout: 3 });
            } else {
                // Load directly this.loadComponent();
            }
        } else if (this.type === "lazy") {
            // `Promise` exists
            if (window.Promise) {
                Promise.resolve().then(this.loadComponent);
            } else {
                // Downgrade to use `setTimeout`
                setTimeout(this.loadComponent);
            }
        } else {
            throw new Error(`type: "observer" | "idle" | "lazy"`);
        }
    }

    private loadComponent() {
        this.renderComponent = this.lazyComponent;
        this.$emit("loaded");
    }

    protected destroyed() {
        this.observer && this.observer.disconnect();
    }
}
</script>

Daily Question

https://github.com/WindrunnerMax/EveryDay

refer to

https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html

https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback

This concludes this article about the summary of Vue's first screen performance optimization component knowledge points. For more relevant Vue's first screen performance optimization component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!