This article comes from The front end engineer @Taigo, who is in charge of the front end performance optimization PM of this year’s Flying Pig Double Eleven conference. Let’s take a look at our performance optimization practice from Weex to Web.
One, foreword
There is no fastest, only faster! Performance is a constant topic in front-end development. It not only represents the experience given to users, but also directly affects the effect of business. According to the consensus in the industry, each additional second of page loading time leads to 10% loss of users. On the other hand, every time the performance is faster, it will bring more users and improve the GMV business. When I think about my contribution to the sales of 498.2 billion yuan in this year’s Singles’ Day, I am still a little excited. The biggest difference in the conference section is from Rax0.6 on Weex to Rax1.0 on Web. In the first half of this year, the upgrade of “end rendering” in the shopping guide domain was launched, and the front-end rendering engine returned to WebView. The preliminary conclusion was that there was little difference in adding carrier sense under the condition of strong network and offline, but the performance data of Web first screen was slightly worse. But as you all know, on the Web, there has been no page practice for a long time, and optimization needs to be re-explored
This year’s Double 11, the front end in the performance of the goal is to surpass Weex on the sense of motion, data also strive to surpass Weex
Challenges
For Follow Group’s main project, using Rax1.0 unified DSL, one-code multi-terminal support for H5, small program and future Flutter, Flying Piggy has fully switched the venue rendering side to Rax1.0 Web rendering since 618, when the priority was not so high in terms of performance. After that, the special performance optimization was restarted and the optimization research on Web was started to improve the user experience of Double 11. The general project team of Double 11 proposed a nearly harsh target in terms of performance: 25% higher than the performance of the daily venue. Faced with this target, the traditional front-end optimization was no longer enough to support, so we carried out a collaborative campaign with the client, server and other BU students
Second, optimize means
In order to achieve this goal, traditional optimization methods are no longer enough to support such a huge improvement, and some basic areas of optimization have been completed by layers of framework, so a new approach is needed. Overall combing page loading process, in the existing optimization means, landing more enhancement means.
- ** Main venue: ** In order to ensure the best experience of the main venue, use the ultimate trick provided by the client – pre-rendering;
- List meeting place, Super baby, hotel meeting place, air ticket meeting place and 10,000 coupons: For the scene without asynchronous module on the first screen, SSR and data-Prefetch are used to maximize the visible page time of users;
- All sites: because the module is basically unchanged, all sites use the Snapshot scheme of HTML cache type, so that users can browse the page more quickly.
- Super Baby, list venue and My Double 11: For important venues at the bottom, the Snapshot scheme of Mtop interface cache is adopted to improve users’ browsing experience.
- All venues push offline packages and data-Prefetch through unified rendering pages.
- In order to ensure the smooth operation and switching between pages at the same time, spa-like scheme is used between the bottom Tab 5 pages to make the page switching seamless.
It can be said that in order to pursue user experience, from speed to motion sense, we have made a full range of considerations. Performance optimization is never a carnival of technology, but something that can truly bring value to the business
** The following is a brief introduction of the main optimization methods used in the venue of the Double Eleven.
A) end to side pre-rendering
If you don’t consider the Crash risk, this is probably the most improved option
In the scenario of “Double 11”, through the end control switch, the delivered configuration URL initializes the container in the way of “off-screen” and loadUrl, so as to complete the Rasterization of the page before the on-screen. When the user clicks the page entry, the client will directly push the prepared Webview to the foreground for direct display, forming almost no sense of the opening effect
Effect of contrast
| Turn on prerender | Prerendering is not enabled |
|---|---|
 |
 |
Scheme flow chart
At the client end, WebView is initialized through configuration delivery, and the stability of APP is guaranteed through memory control. At the same time, the display logic is coordinated with the front end to ensure data consistency, and finally, multiple access is managed by releasing a series of subsequent processing.
SSR (server-side render or serverless-side render)
The soldiers who cut through the thorns, returned with glory
Chinese name: Server-side rendering, as the name implies, is rendering on the server side, which has been around for a long time. It was all done before Ajax, where the server returned complete Html content to the browser, but with the advent of the traditional BFF architecture, this approach has gradually disappeared. But with the advent of Serverless tide, when Faas meets SSR, the spark burst out is fascinating. In March this year, Uncle Wolf shared an article called “New Ideas at the front end: Component is function and Serverless SSR practice. SSR is upgraded conceptually from server-side render in the traditional sense to Serverless side Render. Based on FaaS environment, Provide side to side page rendering ability but this road is also full of challenges, from the end of August began to understand Amoy department to build business SSR, flying pig side in September began to follow up the program, originally planned National Day venue into the pilot, because of a variety of reasons, only online less than a day was offline. However, the project team finally resisted the pressure and used SSR in the five key venues of double Eleven (list venue, Super baby, Wan Coupon Qifa, hotel venue and air ticket venue), with excellent results
Effect of contrast
SSR stands for visible on the first screen. Compared with CSR, it reduces module loading and page rendering, and makes the viewing time much earlier.
| Open the SSR | Did not open the SSR |
|---|---|
 |
 |
Scheme flow chart
The overall scheme ensures the advantages of performance and small transformation cost. The asynchronous SSR scheme is adopted, that is, the HTML is returned in the interface. While avoiding the influence of high and low-end machine containers, the offline and data preloading capability of the client can be reused at the same time, and the smooth switching from CSR to SSR can be ensured.
3) SnapShot
The visible time of the user’s somatosensory page continues to advance
Originally designed the SnapShot is in the scenario, on the surface of the one thousand thousand times faster access to the visible page, will be the last time the access HTML directly cached in the local, the next into the page, first display the page caching, but later discovered in the meeting this every basic variable array of scenarios, the module of cuts and the adjustment of the order, In the process of displaying the cached page to the real page, there will be inevitable flashing, and this kind of flashing is a little unacceptable, so the project team redesigned the way of Mtop interface caching to cooperate with module caching. At the same time, the project team found that the HTML caching method was not useless. Before the double 11 conference went online, Review and optimization methods were carried out for all the conferences, and it was found that there was no change in all the conferences. The HTML cache approach was so appropriate that we divided the pages using Snapshot into two categories, the best being the best, so that all pages could be rendered to the user as quickly as possible without presentation problems
Effect of contrast
After Snapshot is enabled, there is no Loading on the whole page, basically achieving the effect of direct output of the page.
| Open the Snapshot | Did not open the Snapshot |
|---|---|
 |
 |
4) SPA
Complete the “last kilometer” of user’s body sense, and realize no perception between multiple pages
Each venue need to be run separately, the build system does not support single-page split operation, through the Tab at the bottom of the package box multi-page pretended to be aggregated into a page, but the page jump caused by switching between the divided body has been criticized by people, is the feeling of the plan to upgrade finished class SPA, the Tab pages in the data request, Directly render into the real Dom, switch through the Display way, basically realize the aggregation of multiple pages into a single page on high-end computers, there is no perception between multiple pages, giving users the best experience
Effect of contrast
From the previous replace operation of multiple pages, a blank screen appeared in the page jump, to the current DOM replacement in the page, the user’s sense of motion has been greatly improved, and the feeling of page fragmentation when users click Tab has also been eliminated.
| Open the SPA | Did not open the SPA |
|---|---|
 |
 |
Scheme flow chart
The framework of the page is built with a set of rendering engine, and all modules of each page are acquired through Fetch. Each module is released independently and can be cached separately after module combo is removed, which is very suitable for SPA scheme. At the same time, the project team made different processing for high and low end computers. After requesting single Tab data on high end computers, it preloaded other Tab data and directly accessed it when switching, providing better experience.
5) Resource & data precaching
The fastest request is no request
Using the Fcache/DataPrefetch mechanism at the end of the flying pig and configuring the delivery channel at the general control of the flying pig, the static resources used in the page are proactively delivered to the client for caching, so that the user does not need to request static resources when accessing the page. In addition, the MTOP data request of the page is triggered at the end in advance when the page initiates a jump. Reduce interface request waiting time.
Fcache scheme (Resource caching)
The offline solution of the venue adopts the METHOD of URL +package. After the background is configured to input the URL, the background runs the URL through the puppeteer to cache the requested resources, including some scrolling operations to capture the lazily loaded resources, and finally matches the resource cache by reading the configuration.
DataPrefetch solution (data preloading)
Data preloading has three states: Memory, Ongoing, and Miss. We believe that putting the request on the client side will definitely reduce the real request time, so even if the real request is sent and the client has not completed the request, as long as the key matches, the client will wait for the data, rather than re-send the request.
Monitoring & Diagnosis
In addition to optimizing methods, it is also necessary to continuously monitor the performance trend of the conference page and troubleshoot abnormal cases. To this end, The project team developed real-time performance stability real-time platter (Figure 3.4.1), hour-level performance platter platform for double 11 venue (Figure 3.4.2), and unusually long slow session tracking gadget (Figure 3.4.3).
Four,
The first screen viewing time of all the venues of “Double 11” in “Flying Pig Club” reached the set target, which is less than the first screen viewing time of daily venuesA 25% reduction, compared with 618 and the first screen of National DayA 20% reduction.
If SSR is hit, the visible time of the first screen is pulled into 1s. The site with SSR enabled can also increase the second on rate again after using the Web. Based on the frequent business changes affecting the first screen module, the second on rate of the whole week is more than 60% and the second on rate of the air ticket venue is more than 75%.
5. Technical planning
There are a lot of new attempts and iterative upgrades in technology this time. After the training of Double 11, it needs to develop in the direction of easier use and universal, which is mainly divided into the following parts:
1. SSR program optimization
SSR provides a huge improvement in the end. First, we need to improve the synchronization scheme to achieve the improvement of the scene outside the end. Second, add AbTest to the existing base to support more convincing business performance comparison; Finally, the execution speed and elastic capacity of SSR in the server are optimized.
2. Client optimization
Next, we will try Tab switching of multiple WebViews and access PHA scheme. And will be more call terminal conditions included in the direction of optimization, such as cold start scene special optimization.
3. Supporting facilities
The optimization cannot be separated from the support of supporting facilities. On the existing basis, bayonet, inspection, monitoring and other functions are supported to solve performance problems in a timely manner.
Six, summarized
As a front-end development engineer, I served as the performance PM of the Double 11 conference, which was a challenge as well as an opportunity, especially when the performance level was raised again from Weex to Web this year. Ensure that users can enjoy the ultimate experience while services are not affected. From the time-consuming analysis of each stage of the page to the ability of the brother team, the whole process was carried out step by step, and finally supported the successful conclusion of the Double 11 conference. In the whole process, through the application of a large number of optimization means and innovative programs, improve the user’s second rate to help the business transformation and improvement; Pre-rendering and SSR will gradually fall into more scenes, paving the way for the overall performance improvement later; Collaborate with clients and servers to break down front-end capabilities and boundaries and explore the deep water of performance; Improve performance data While improving performance data, monitor performance data and control exceptions in real time. Finally, set a Flag for next year’s Double 11: next year no longer need to guarantee performance, but when the page is produced, is to meet the performance standards!