This topic describes how to use EdgeRoutine (ER) in frontend optimization of Taobao Mobile and mini programs.
Background information
ER is a computing service that runs on Alibaba Cloud CDN points of presence (POPs). After you upload and deploy JavaScript code to ER, you can run the code on the POPs around the world. This way, you have a large number of micro-servers worldwide that can serve users in close proximity.
Traditional CDN services only deliver cached static files to nearby clients. Alibaba Cloud CDN allows you to deploy backend computing services on POPs. This way, computing services are closer to clients and latency is lower. A CDN is a large elastic network. You do not need to purchase servers or scale computing resources. Alibaba Cloud CDN supports auto scaling to help you handle workload spikes.
Benefits
ER provides the following benefits:
E-commerce websites and mini programs usually use CDNs to accelerate content delivery. With ER, you can add logical operations on data that passes through Alibaba Cloud CDN at low costs without affecting your business. This reduces the number of back-to-origin requests and prevents potential latency risks due to the requests.
ER runs on Alibaba Cloud CDN POPs and can use all features of Alibaba Cloud CDN. For example, a request can be redirected to the optimal POP that is closest to the client for processing. In addition, if request spikes occur in a region, the requests are automatically redirected to POPs that are distant but have available computing resources.
This automatic routing mechanism allows you to respond to traffic spikes without the need to reserve redundant resources. Resource distribution and scaling are handled by the intelligent routing system of Alibaba Cloud CDN.
Application of ER in frontend optimization of Taobao Mobile
Characteristics of frontend rendering
Taobao Mobile includes hundreds of millions of e-commerce webpages and receives a large number of requests. Most content on e-commerce webpages is static and does not frequently change. In this case, a CDN must be used to accelerate the delivery of e-commerce webpages. The cache and distribution capabilities of the CDN can reduce loads on origin servers.
The webpages contain a large number of elements, including images and text, which are rendered and displayed on mobile phones.
Analysis of frontend rendering
The efficiency of frontend rendering is positively correlated with customer retention and transactions. In most cases, the following common rendering techniques are used:
Client side rendering (CSR): The client initiates an asynchronous request to retrieve dynamic and static resources, and renders the resources into an HTML file.
CSR causes high client loads and high latency during request spikes.
Server side rendering (SSR): When a client initiates a request, the server retrieves and renders dynamic and static resources, and then returns the rendered HTML file to the client. The client loads the HTML file.
To use SSR, you need to deploy a dedicated server cluster for rendering. This results in high costs. Servers need to respond to a large number of rendering requests from clients. In addition, the clients must wait until rendered pages are returned, which affects user experience. E-commerce apps are sensitive to the latency of page loading. A fast loading speed means that customers can browse more products and are more likely to make purchases. On the contrary, a slow loading speed may cause customer churn.
Alibaba Cloud CDN allows you to run computing on POPs. This way, you can use edge side rendering (ESR) to render frontend pages on POPs near users. ESR does not consume the computing resources of clients or servers.
Practices for frontend rendering of Taobao Mobile
A webpage that contains images and text is available for rendering. Code for page rendering is deployed to ER. After a client request is sent to ER, ER generates a document object model (DOM) and retrieves source data for rendering. Most of the source data is static files, such as images. The static files are cached on POPs and can be read directly without the need to initiate requests. Only a small amount of data, such as the number of followers and product prices on the page, needs to be retrieved from origin servers in real time.
After the page is rendered, an HTML file is returned to the client. The client needs to only load the HTML file. In addition, the rendered HTML file can also be cached on POPs and used in subsequent requests within a specific period of time. This reduces unnecessary repeated rendering and shortens the waiting time of customers.
Application results
During Double 11 Shopping Festival in 2020, Taobao Mobile rendered streamer details pages by using ER of Alibaba Cloud CDN for the first time. Requested pages were rendered on POPs without the need for origin fetch, which reduced the overall page loading time by 60%.
The resulting webpages rendered by the ER engine were also cached on POPs, which reduced repeated computing operations on servers. The overall reuse rate reached 40% to 60%. This reduced client latency, provided a smoother shopping experience, and saved the computing power of origin servers.
Application of ER in mini programs
Characteristics of mini programs
Mini programs are lightweight apps that have become popular in recent years. Compared with native apps, mini programs are cross-platform supported, download-free, out-of-the-box, and small in size. These advantages are suitable for small services. Mini programs are widely used in Taobao and Alipay.
Mini programs contain modules and plug-ins. A mini program consists of multiple JSON modules, including template information, version information, canary configurations, client information, signature verification information, and security policies. Most of the modules are static and not frequently updated. A small number of modules or custom plug-ins need to be retrieved from origin servers in real time.
Practices of mini programs
In this example, the mini program of an e-commerce store is used. The left side of the figure shows the architecture of a common mini program. After the central server receives a request from a client, the central server assembles modules into a mini program of an e-commerce store and returns it to the client. The modules can be split into general templates that are static and infrequently updated and custom modules that require high timeliness.
You can distinguish modules at the edge based on the user information that is included in requests. Then, static files are retrieved from the Alibaba Cloud CDN cache, and a small number of custom modules, security policies, and other modules that require high timeliness are asynchronously retrieved from origin servers. This reduces the number of back-to-origin requests. After Alibaba Cloud CDN returns the assembled e-commerce store templates to clients, the assembled store template file can also be cached on POPs for similar requests within a specific period of time. This reduces repeated assembly and accelerates the loading of mini programs.
References