The text/north mom

This article takes 3.2 minutes to read

one

Front-end performance optimization has always been to measure the level of all aspects of a team and a front-end, showing fast loading, which gives people the most intuitive feeling, the sense of accomplishment and the most full feeling, and is the first important concept for user experience, so this is quite important, today BEma will discuss it in combination with meituan’s practice plan.

In fact, many of the solutions in the article, my team and I have already implemented, such as server rendering, nginx forwarding and so on. Today, I post it because I happen to be engaged in performance optimization recently. You may wish to have a look, meituan team published this summary half a year ago, which is very comprehensive and detailed.

The following paragraph is reprinted from: Shared by meituan technical team

Front-end technology has evolved very rapidly since the birth of JavaScript. White screen optimization of mobile terminal is an important optimization direction of front-end interface experience. SSR, CSR, pre-rendering and other technologies were born in Web front-end. Front-end server rendering, back-end server rendering, etc.

In the front-end technology system of Meituan Pay, pre-rendering is used to improve web page optimization, thus optimizing the problem of white screen, improving user experience and forming best practices.

In the field of front-end rendering, there are several main options:

By comparison, the homogeneous scheme combines the advantages of CSR and SSR and can be applied to most business scenarios.

In combination with the payment business scenario that our team is responsible for, on the premise of ensuring system stability, we also need to ensure user experience, so we adopt the method of pre-rendering.

So what exactly is pre-rendering? Let’s start with the most common CSR.

Taking Vue as an example, common FORMS of CSR are as follows:

Everything seemed rosy. However, as the primary goal of user experience, we found an experience problem: the first screen is blank (a common problem in SPAs).

Why is the first screen blank

Browser rendering includes HTML parsing, DOM tree building, CSSOM building, JavaScript parsing, layout, drawing, and more, as shown below:

To figure out why there is a blank screen, we need to use this theoretical basis to carry out a specific analysis of the actual project. Analysis using DevTools:

  • White screen while waiting for the HTML document to return.

  • After the completion of the HTML document parsing, the first screen rendering, because the project to add a gray background color, so present

    Grey screen.

  • File loading and JS parsing causes the interface to remain in grey screen for a long time.

  • When Mounted is triggered by the Vue instance, the frame is displayed.

As a result, users have to wait for file loading, CSSOM construction, JS parsing and other processes, which are time-consuming, resulting in a long time of non-interactive gray screen state on the first screen, giving users a feeling of “slow” web pages.

twoOptimization idea

In user-Centric Performance Metrics, there are four key Metrics for page rendering:

Based on this theory, let’s go back and look at the actual performance of previous projects:

It can be seen that the white screen of FP stays for a long time, and users are not clear whether the website is loading normally, resulting in poor user experience.

By comparing DOM differences of FP, FCP and FMP, it is found that the differences are as follows:

  • FP: Only one div root node.

  • FCP: Contains the basic framework of the page, but no data content.

  • FMP: Contains all elements and data of the page.

Take Vue as an example. In its life cycle, Mounted corresponds to FCP, and updated to FMP. So which life-cycle HTML structure should you use?

After comparing the above, the final option is to trigger build-time prerendering on Mounted.

three

Build time pre-render scheme

Pre-render process at build time:

Configuration is read

Since a SPA can be composed of multiple routes, it is necessary to determine which routes need to be pre-rendered based on the business scenario. So the configuration file here is mainly used to inform the compiler of routes that need to be pre-rendered.

In our system architecture, scaffolding is based on Webpack’s own development, from which we can customize automated build tasks and configurations.

Trigger a build

Using TypeScript and TS decorators, we have encapsulated a unified pre-render build hook method that triggers build-time pre-render in a single line of code.

TS decorator:

Use:

In order to improve construction efficiency, pre-render construction is carried out for multiple configured pages or routes in parallel, and construction can be completed within 5S. The flow chart is as follows:

four

Let’s sort out the simplified project launching process:

Develop -> Compile -> Go live

Pre-render the development process and effects during construction

Finally, the r&d process of pre-rendering during construction is as follows:

Development stage:

  • TypeScript decorators introduce single-line pre-rendered build trigger methods.

  • Modify the build configuration file before publishing.

Release phase:

  • Start with regular project construction.

  • Triggers a pre-render build if there are pre-render related configurations.

  • Get the final file through pre-rendering, and complete the release online action.

The complete user request path is as follows:

Through the use of build-time prerendering in projects, FCP times were reduced by 75%.

We were never bothered by the slow first screen again. And the feasibility is very good, but also let other need to practice together.

Experience is a good thing. A lot of people just use it to do a lot of things. But sometimes it can hurt you because it can mean being stubborn.

Popular reading

A state-owned enterprise with a monthly salary of 5K, and a private enterprise with a monthly salary of 20,000, I choose a state-owned enterprise…

The difficulty for the less educated is particularly pronounced for programmers

Every day just want to hear you say: small north the most handsome!

Long click scan code to follow me

You don’t mess with the front end

Surprise every day

I think “watching” versus “forwarding”

It’s also a recognition of me