SSR-based Optimization of Double 11 Virtual Venue — A More Complex Rendering Architecture

Preface

  • Practices and methodology of the frontend for solving engineering and business effect evaluation problems.
  • Practices and methodology on the server side for solving execution, isolation, and performance optimization problems on the server of front-end module code.

Core Metrics of Page Experience Evaluation

Evaluation System of the Virtual Venue

Current Situation of the Venue

  1. Clients, including Mobile Taobao and other Alibaba’s apps
  2. Document service for responding to HTML requests of the page main document.
  3. Data service for responding to data requests of the page.

How to Implement SSR?

Core Concerns

  1. How to smoothly switch between CSR and SSR?
  2. How to develop code that can trigger SSR?
  3. How to handle with uncontrollable risks of frontend-oriented code execution on the server?
  4. How to solve the loading problem of floor module code on the server in low-code construction scenarios?
  5. How to solve performance problems on the server?
  6. How to evaluate the optimization value?

How to smoothly switch between CSR/SSR?

  1. If Data SSR is disabled on the page, the rendering process is the same as that of CSR rendering. Our rendering solution loads and renders modules based on the module list in the data.
  2. If the page has enabled Data SSR and SSR HTML is included in the returned data, the SSR HTML is put into the root container. Then, modules are loaded and then processed through hydrate based on the module list in the data.

How to develop code that can trigger SSR?

How to handle uncontrollable risks of frontend-oriented code execution on the server?

  1. Developers use global variables as caches, causing memory leaks.
  2. Wrong end conditional statements lead to endless loops.
  3. Modules that do not support SSR exist in unknown pages.

How to solve the loading problem of floor module code on the server in low-code construction scenarios?

/**
An example of CMD-based explicit dependency (seed).
**/
{
"packages": {
"@ali/pcom-alienv": {
"path": "//g.alicdn.com/code/npm/@ali/pcom-alienv/1.0.2/",
"version": "1.0.2"
},
"modules": {
"./index": [
"@ali/pcom-alienv/index"
]
}
}

How to Solve Performance Problems on the Server?

  1. Mechanism problems
  2. Code problems
  1. The parsing of the code is long and unstable.
  2. JIT compilation is difficult to be triggered in the case of low traffic.
  1. Cache vm.Script instances to avoid repeated parsing.
  2. Try consistent Hashing or auto-scaling (not implemented this time).

How to evaluate the value of optimization?

Final Effect

Qualcomm Snapdragon 820 in Xiaomi 5

Will the Future Rendering Architecture be More Complex?

Unified definition of e-commerce experience metrics

There are still more things to do in the engineering

ServiceWorker Cache for offline cache snapshot

Performance optimization and security of SSR

Coverage of external implementation scenarios

  1. The static and dynamic data separation and disaster recovery can be achieved by using the edge computing capability of CDN.
  2. Centralized SSR functions can be used to separate SSR instability from CDN reliability. Thus, the reliability of the near-side procedures can be ensured, and non-recovery problems caused by the direct unavailability of the near-side procedures can be avoided.

Summary

Original Source:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com