Boost Frontend Performance with EdgeRoutine ESR Streaming Rendering
This article explores how leveraging Alibaba Cloud's EdgeRoutine for Edge Side Rendering (ESR) and streaming rendering can dramatically reduce first‑screen latency, improve cache hit rates, and boost page load metrics during high‑traffic events like Double‑11.
Introduction
Front‑end performance optimization is a long‑standing topic; page first‑paint and white‑screen rates affect user retention. H5 pages lag behind native, but their rapid development is valuable. Taobao has tried SSR, NSR, pre‑fetch, and other techniques to improve first‑screen performance.
Business Background
Talent homepages are a main venue for creators; slow first‑screen rendering leads to user loss and reduced creator incentives, especially during Double‑11 live events. Improving first‑screen speed is crucial for H5 pages.
Performance Metrics
The article uses First Meaningful Paint (FMP) and Time To Interactive (TTI), adding WebView startup time to both metrics.
Improvement Approach
Typical H5 request chains involve multiple HTTP calls, causing long and uncontrollable network latency. While SSR reduces one request, it still suffers from server distance. By leveraging CDN edge nodes via Alibaba Cloud EdgeRoutine (ER), we can perform early rendering at the edge, reducing latency from around 300 ms to about 100 ms. CDN nodes also allow shared caching among users, further speeding up data access.
What is ER? What is ESR?
ER (EdgeRoutine) is Alibaba Cloud's serverless JavaScript/WebAssembly environment at CDN edge. ESR (Edge Side Render) uses ER to render HTML strings on the edge, similar to SSR but executed closer to the user.
ESR Implementation
// Frontend code app.jsx
function Root(props = {}) {
const { data1 } = props;
return (
<div className="root-demo">这是页面内容：{data1}</div>
);
}
// er.js – handle request at edge
async function handleRequest() {
const data = await fetchData();
const contentElement = createElement(Root, { data });
const html = renderer.renderToString(contentElement);
const esrHtml = `
<html>
<head><title>伪代码测试</title></head>
<body>${html}</body>
</html>
`;
return new Response(esrHtml, {
status: 200,
statusText: 'OK',
headers: new Headers({
'Content-Type': 'text/html; charset=utf-8',
'Content-Encoding': 'none',
'streaming-parser': 'open'
})
});
}Streaming Rendering
Using the TransformStream API, we can stream parts of the page as they become ready. The server first sends a skeleton HTML, then streams header and feed modules separately, allowing the browser to render content incrementally and improve perceived performance.
/**
* Make a response to client
* @param {Request} request
*/
async function handleRequest(request) {
const { writable, readable } = new TransformStream();
const writer = writable.getWriter();
const modsList = ['a', 'b'];
let modsListStatus = {};
let hasClose = false;
// rewrite close
const writerClose = async () => {
if (!hasClose && writer) {
await writer.close();
}
};
const streamHandle = async (content, taskName) => {
modsListStatus[taskName] = true;
await writer.write(content);
if (Object.keys(modsListStatus).length == modsList.length && !hasClose && writer) {
await writer.close();
hasClose = true;
}
};
// first request (fast)
const a = new Promise(resolve => {
setTimeout(() => { console.log('a'); resolve(true); }, 100);
}).then(async () => { await streamHandle('aaaaa', 'a'); });
// second request (slow)
const b = new Promise(resolve => {
setTimeout(() => { resolve(true); }, 300);
}).then(async () => { await streamHandle('bbbbb', 'b'); });
// initial content
await writer.write('Hello World!');
return new Response(readable, { status: 200 });
}Cache Management
Caching static data at CDN nodes allows users served by the same edge location to share the data, dramatically increasing cache hit rates (40‑60% during peak traffic). Dynamic, personalized data is excluded from the cache to avoid low hit rates.
Results
Tests on low‑end devices (vivo Y67 for Android, iPhone 6 for iOS) show roughly a 60% reduction in First Meaningful Paint (FMP) and significant improvements in cold‑start performance, leading to a much higher perceived “instant‑open” rate.
Conclusion and Outlook
ESR streaming rendering represents a breakthrough for front‑end development, especially for pages with low data refresh rates and high traffic. Future work includes stronger CDN cache capabilities, global synchronization, and a reusable ESR framework for other services.
Taobao Frontend Technology
The frontend landscape is constantly evolving, with rapid innovations across familiar languages. Like us, your understanding of the frontend is continually refreshed. Join us on Taobao, a vibrant, all‑encompassing platform, to uncover limitless potential.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.