In January 2022, JD.com became the exclusive interactive partner of CCTV's 2022 Spring Festival Gala, and the two sides carried out all-round and in-depth cooperation in red envelope interaction and e-commerce. On Chinese New Year's Eve, 69.1 billion interactions were generated, and 1.5 billion yuan of red packets were sent.
How to ensure the stability and performance of the system and provide users with a stable and smooth interactive experience in this large-scale and high-concurrency scenario has become an urgent problem to be solved.
Next, we will introduce the efforts and innovations made by the front-end team in detail from the aspects of static resource optimization, caching, fault tolerance, and engineering.
After the host of the Spring Festival Gala broadcast, a large number of users will concentrate on the interactive page for a period of time, which will lead to a spike in traffic. In order to reduce the number of requests and the size of resources when the page is opened, we divide the required resources into three categories according to the page interaction: above the fold, secondary, and after operation.
Above-the-fold resources mainly include: HTML documents, j**ascript, css, and styles**. Since this is a single-page application, we can package JS and CSS through regular techniques. For styles, we can significantly reduce the size of above-the-fold assets by loading them on demand.
The page contains two floors, the interactive floor on the first screen and the 10,000 coupon distribution floor on the second screen. There are two rows of coupons displayed above the fold, so we need to load the style of this coupon floor on the fold. The interactive main gameplay mainly includes ** pop-ups, inviting pop-ups and drumming games. Through split optimization, the size of the above the-fold style** is reduced by about 41%. Coupled with CDN degradation and optimization of WebP parameters, the volume of style ** can be reduced to 178KB.
At the same time, we've stripped the drumming game sprite animations that need to be loaded separately from the above-the-fold loading manifest, reducing the number of top-the-fold style loads from 2 to 1. As a result, the number of requests and the size of resources required to open a page are significantly reduced, which in turn improves the user experience.
Animations are a major part of page resource consumption. In the Spring Festival Gala page, we need to balance user interaction experience and resource optimization. After many discussions with the design and CDN teams, we decided to use technology to reduce resource consumption while ensuring user experience.
The first is to determine the technical solution. The design team initially proposed a 3D model, which would need to be rendered with the help of WebGL. However, there are two problems: one is that the resource consumption is large, the 3D model usually contains 3 or 4 files, and the number of above-the-fold loading requests increases; The second is compatibility issues, WebGL does not perform well on low-end models. Considering the wide range of audiences, we decided to go with a more compatible solution.
After a technical investigation, we settled on a frame animation solution: the design team converted the 3D animation into a sprite and extracted the unchanged parts, such as the drum rack, separately. Sprites only contain the movement part (such as the drum face percussion animation), which effectively reduces resource consumption.
After deciding on the proposal, the design team exported the first version of the asset file. However, the sprite size is 1236kb, and the main light effect is also 400kb, which is still a bit short of our goal. After repeated attempts by both sides, we reduced the drumming sprite from 24 frames to 4 frames and the size from 1236kb to 265kb by drawing frames. Combined with the degradation parameters and the WebP format, the final size is only 78KB, a 93% reduction. In addition, we replaced the main light effect with a double magnification map, and achieved magnification through the CSS attribute SCALE, which further saves resources.
The element background image uses the sprite map mode, which is the basic optimization method of the front-end, which can significantly reduce the number of requests. In the case of splitting the above-the-fold assets, we can merge the 18 style background images into one. Compared with the conventional scheme, the Spring Festival Gala red envelope has also expanded 2 functions:
1. CSS Sprite adds CDN degradation parameters and WebP format conversion parameters (someimage.) to **URL at runtimepng!q70.webp) to reduce CDN bandwidth to the limit. We have extended and developed an automatic sprite script that can support the automatic generation of 2 sets of background-image styles, corresponding to ordinary URLs and bands! q70.URL of the webp. The background-image attribute of the corresponding descendant selector is taken effect by checking the webp support feature at runtime and toggling the class name on the html tag. For the technical solution of webp feature detection, we have considered the following two solutions:
A. Judging by the version, from the perspective of Caniuse, it can be judged according to the fact that only iOS14 and below do not support WebP.
b. By creating an image object with src as a base64-based webp**, determine whether webp is supported according to whether the load is successful or not.
Comparing these two schemes, the advantage of scheme A is that the system version is executed synchronously through UA, and the class attribute of the HTML tag can be executed and modified anywhere before the rendered page is called. Make sure that the correct background image CSS takes effect after the content is rendered. There will be no intrusive changes to the original rendering logic. The advantage of scheme B is that after large-scale practice, the reliability of the judgment logic is high, and the disadvantage is that the original rendering logic needs to be modified because of the asynchronous logic. Since we need to support hundreds of millions of users across the country this time, in order to ensure stability and reliability, we finally chose option B.
The background image style in the CSS file is requested when the corresponding DOM is rendered, and since the React rendering is synchronous, we need to adjust the timing of the render execution to ensure that the HTML class attribute is set before the page content is rendered, so as to avoid requesting it twice.
2. Dynamic Sprite map. The first screen of the 10,000 coupon floor reveals 2 rows of 8 pits, corresponding to 8 logo** requests, because the data of the coupon and logo is issued through the interface, so the sprite map scheme cannot be used at compile time. In order to reduce the number of requests to 1, we designed a set of multi-team collaboration solutions after communicating with the back-end, visual, and product departments. Design students can merge the logo image into a sprite image according to the coupon location confirmed in advance by the product, and upload it to the cloud storage. The display is as follows:
After the specifications of the sprite image are determined, the dynamic sprite image can be realized by fixing the background-position attribute and dynamically setting the classname and background image of the logo element.
As mentioned above, the runtime determines whether to use the webp background image, then the corresponding css ** needs two sets, and the postcss plug-in can be used to automatically generate the webp background image ** based on the original background image style ** at the time of compilation, so as to avoid errors and omissions in the intense development process. By using the Walkdecls method of the CSS object in the PostCSS plugin, we can iterate over all the background-image properties. Then, use regular expressions to match the corresponding styles, and generate a set when compiling and packaging. webp .origin-class selector. At runtime, if the HTML tag has a webp attribute, the system overwrites the style of the descendant selector with the original style.
In addition to the img tag, we have also optimized the background image for webp, so that the whole site ** by 9024kb down to 5126kb, which has performed well after a variety of traffic and compatibility tests. It can be seen that when ** is used in a large number of projects, the WebP format has become a key to performance optimization that cannot be ignored.
The Spring Festival Gala event is a typical spike business scenario: with the order of the host of the Spring Festival Gala, audiences across the country will pour into the event page at the same time, bringing ultra-high traffic pressure to the interface. The following describes how the front-end cooperates with the back-end to deal with such high-concurrency scenarios from two aspects: traffic peak shaving and downgrade processing.
In high-concurrency scenarios, traffic peak shaving helps the system survive traffic peaks. In this activity, the initialization interface and the drumming ** interface have the largest traffic, so we mainly focus on these two interfaces.
1.Initialization interface: Before the page loads, that is, the resource bit entry, configure a "loading" page link. This page loads randomly for 1-3 seconds and then redirects to the active page. When the traffic exceeds the carrying capacity of the system, enable the grayscale switch, and some users enter this page, and then wait a few seconds to enter the active page.
2.Drumming** interface: The core gameplay interface of this event. Simply delaying a request for a few seconds at random can greatly affect the user experience. We take a more granular approach. It is known that the drumming interaction triggers the ** interface at the end of the user's full number of hits or the countdown, so the number of drumming is randomly set to scatter the requests that were originally concentrated in 1-2 seconds to the 10-second range, and the user is almost imperceptible.
In order to save the user's coupon claim status, a variety of factors were weighed, such as the scale of the campaign, the pressure on the server side, and the duration of the campaign. In the end, we decided to use the front-end local cache to store the user's coupon status to improve performance and optimize the user experience.
We compared the local storage mechanisms commonly used on the frontend, such as cookies, localstorage, and sessionstorage. However, each of these mechanisms has its own advantages and disadvantages:
1.The cookie storage space is small (4K) and occupies the request header when communicating with the server, which may cause the request header to be too large and exceed the maximum value set by the server, which in turn causes errors and increases unnecessary network consumption.
2.SessionStorage has a short lifespan and only applies to the duration of the session.
After all considerations, we chose localstorage as the optimization solution. It has a long life cycle and a large storage space (25m-4m), which can meet business needs. Using localstorage to cache data can not only simplify the call link, reduce risks, and save costs, but also directly read the coupon claim status from the local area, avoiding long response times caused by network delays, and improving user experience.
In order to enable business developers to focus more on their own business development, we have unified general solutions such as mobile phone compatibility, device classification, environmental judgment, automatic synthesis of sprite maps, self-compression, automatic upload to cloud storage, and merging files into the engineering level.
Through engineering, productivity and creativity can be unleashed to the maximum. The above-mentioned various front-end optimization solutions are inseparable from the help of engineering, and at the same time ensure the efficiency and stability of rapid development and delivery.
We built a realistic mock environment to simulate the desired scenario in a short period of time, ensuring friendly interaction in any scenario. This environment restores the mock environment of the server 1:1, which can quickly simulate normal data, and can also simulate scenarios such as request timeout, HTTP status code exception, data structure exception, and unconventional business exception code. In the AJAX module, we adopt a transparent method to reduce the cost of creating mock data for business development students and avoid mock data from entering the production environment. As shown in the figure, comparing the mock development environment with the joint debugging development environment, it can be seen that the mock environment is transparent and free for business development, and at the same time, it can quickly mock data.
There are a wide variety of devices for users participating in the Spring Festival Gala, and we need to achieve the ultimate experience on different devices, while reducing the pressure of excessive CDN QPS. To this end, we work with the client team to provide multiple environments such as built-in packages, offline packages, and online CDN packages according to different versions of different devices. Combined with multiple rounds of internal testing and public testing, more than 10 environments need to be deployed in just 27 days. The deployment of the online environment is complex, including resource collection and size calculation. If manual methods are used, it is easy to misoperate and bring adverse consequences. Fortunately, environment variables were introduced early in the project to address the differences between different environments. In addition, a series of scripts are added before and after compilation to replace manual copy upload, resource collection, size calculation, etc., to avoid manual operation errors, improve stability, and ensure stable deployment in each environment.
The goal of engineering has always been to improve development efficiency, reduce development difficulty, and separate concerns, so that business R&D students can focus more on the development of their own business.
As a global live broadcast program, various situations will inevitably occur on the scene, and various emergency plans need to be prepared. Downgrade processing is divided into two categories: active downgrade and passive downgrade
1.Active downgrade: Add a downgrade switch to each resource bit and interaction button, and you can quickly turn on the downgrade switch by configuring the CMS in case of an emergency on the upstream interface or downstream page.
2.Passive downgrade: Distinguish various interface exception codes and system environments through different styles and text prompts to quickly locate the cause of the problem. In this way, the customer service students can reassure the customer in the first time and provide corresponding treatment plans.
The 2022 CCTV Spring Festival Gala interactive project is a large-scale, high-concurrency challenge, and the front-end team ensures the stability and performance of the system through efforts and innovations in static resource optimization, caching, fault tolerance, and engineering, providing users with a stable and smooth interactive experience. In terms of static resource optimization, the team significantly reduced resource consumption and the number of requests through technical means such as above-the-fold asset splitting, frame animation scheme instead of 3D model, dynamic sprite map, and WebP format optimization. In terms of reducing server costs and risks, localstorage is selected as an unconventional optimization solution to improve user experience. In terms of fault tolerance, traffic peak shaving and downgrading are handled to ensure the stable operation of the system. In terms of engineering, we unify the processing of common solutions, provide realistic mock environments, and write stable and efficient release scripts to reduce the difficulty of development and ensure the stable deployment of each environment. Through these technical means and innovations, the front-end team successfully coped with the technical problems brought about by the Spring Festival Gala interactive project, providing users with a stable and smooth interactive experience.
Author: JD Retail Zhao Yue.
*:JD Cloud Developer Community**Please indicate**.