From rough to polished, from simple to complex, the average size of Web apps around the world has been boosted to 1.6Mb. As the traffic pool of rich media content such as audio and video expands, users on terminal devices are particularly sensitive to the loading speed of Web pages. If the page does not open in seconds, a large number of users will choose to leave. Pay attention to and improve website performance, optimize the real-time page load time, accelerate the real-time page in the browser platform terminal state display, which can lead to website traffic growth.
This paper, from baidu Live RESEARCH and development Department, proposed a page rendering scheme with progressive front-end enhancement, namely “route separation + pre-static +WebView pre-creation”, to replace the template synchronous rendering scheme, and adopted an engineering way to package capabilities into the enabling product line.
The background,
In the scene of live broadcast business landing, build the spirit of reward service and create diversified and memorable forms of operation activities to meet the needs of target users. Effective service innovation, guarantee the service quality of H5, control the access performance, timely resolve the customer sentiment into business value, create special surprise, smooth user experience, which is conducive to win users’ respect for the platform and improve the brand temperament of the platform:
**1. Optimize access experience: ** optimize the performance of H5 first screen, innovate around improving users’ service experience and improving developers’ work efficiency, and explore the experience innovation of Web catching up with native;
**2. Accelerated demand closed-loop: ** solves the problem of coupling between H5 page routing and data interface, realizes the autonomy of H5 service, and releases the strong demand of business for Web product form;
**3. Infrastructure construction: ** uses engineering means to precipitate common front-end infrastructure, so that the front-end organization can support cross-business manpower deployment more agile, and technology can enable more product lines;
The transformation of business value centering on user-centered experience with perfect functions. Improve the service quality of H5, give full play to the potential of modern browsers, and empower the traditional Web with new solutions.
Due to historical architecture, the loading process of H5 page is that the Server injects jSON_encode interface master data into Smarty template, responds to the browser page with complete JSON data, then executes JavaScript on the browser side, and finally paints the user. The process is shown as follows:
△ Loading and rendering process before H5 optimization
△H5 first screen critical path Time-consuming disassembling
Two critical paths that affect H5 First screen content (FCP, First Contentful Paint, First content Paint) are:
**1. Network Time: ** depends on Server data query and template compilation. When data query is slow, the arrival of the First Byte (TTFB, Time To First Byte) is delayed.
**2. Kernel rendering time: ** Relies on JavaScript execution to read the page master data and generate a complete DOM structure.
Therefore, we specifically designed and implemented the scheme of “route separation + pre-static +WebView pre-creation”. The improved page loading and rendering process is shown as follows:
△H5 optimized loading and rendering process
2. Route separation
Before route separation, the URL of H5 page is allocated by the Server, and the front end is responsible for writing TPL template products. The corresponding relationship between TPL and final URL is mapped through configuration files in the Server, which increasingly exposes the problems of slow startup and development and high cost of maintenance, handover and communication in the later stage of the page.
So we want to normalize the page routing, let front-end developers control the page entry format, and let back-end developers focus more on the API data logic. Therefore, we designed a front-end route separation scheme and agreed on the mapping relationship between page URL and page source directory, as shown in the following figure:
△ Predetermined URL routing specification
NGINX responds directly to pre-static HTML files, with the first byte arriving independent of data query and template compilation.
Three, pre-static
Front-end route separation directly returns HTML files at the NGINX proxy layer, but the page does not fully render the required data. Before the AJAX request is executed and no return is made, it is necessary to avoid the white screen or global loading state of the page and advance the FCP time.
We used a pre-static page solution. Prestatic does not produce fully static HTML from instant compilation like server rendering. It only generates a few static pages at build time for a specific route. We can use the Webpack plugin to inject some specific pages into the DOM structure at compile time. First, shorten the page white screen time; second, save the resource cost of cloud infrastructure relative to server-side rendering; third, output to search engines to crawl the common content of the page.
In combination with the actual application scenarios and the mainstream prestatic methods in the market, we finally developed a Webpack plug-in based on ReactDomServer’s native server-side rendering capability to improve the performance and efficiency of prestatic.
The compilation context of each build is obtained by the Webpack plug-in system, and the bundle of the current page is obtained by the before AssetTagGeneration hook of htML-webpack-Plugin. AfterTemplateExecution Hook gets the compiled template HTML of the current page, executes the bundle to export the entire APP module of the page through Eval. The output of each route applied to a single page through ReactDomServer is APP HTML and template HTML merged into pre-static HTML.
The pre-static call sequence of H5 is as follows:
△H5 prestatic call sequence
Page entry Export APP:
Based on the Node.js environment, JSDOM instances are created to provide the browser hosting environment, and components are rendered as static HTML tags using the ReactDOMServer. Replace the HTml-webpack-plugin with a self-developed pre-static Webpack plug-in without adding a new compilation phase.
The Webpack plug-in contrasts with mainstream pre-static approaches on the market, such as headless browser-based, locally launched HTTP Server, and generic static site generation tools.
The results are as follows:
The results are as follows:
By comprehensive comparison, our pre-static speed is optimal, and the results of pre-static can be seen in real time during the development stage. What you see is what you get, which is convenient for R&D and debugging, and there is no need to add a new compilation stage.
Following the principle of making the Skeleton content of the page show the final content as much as possible, pre-static HTML files are produced. For the dynamic components that show the personalized content of the user, we still need to wait for an AJAX request time. Before executing the AJAX request, we use the component-level Skeleton scheme. To ensure that the first screen is filled with generic content + dynamic component skeleton:
1. Static component development define the public part state, fill the page public part content, code example:
2. The dynamic component responds to both the pre-static environment and the browser rendering environment according to the window.isPrerender flag. Code examples:
△ Response flow of dynamic components in both environments
The First screen content (FCP) of a pre-static page can be displayed to the user through a First rendering (FP, First Paint, First draw), independent of JS execution, and will be replaced with a fully rendered page after AJAX returns.
4. WebView pre-creation
The cache pool composed of WebViews is initialized immediately upon APP startup to ensure that the time of WebView initialization is saved when loading each URL, and the pre-static HTML cache is utilized to finally make the page free from blank screen loading state.
5. Overall income
△ Perceptive comparison of optimization effects (left new and right old)
Comparison of rendering process before and after improvement:
△ Comparison before and after improvement of rendering process
Direct benefits:
△ Direct benefits of H5 performance optimization
Pre-static revenue:
1. Release general high-performance pre-static plug-ins for the front-end;
2. Provides an engineering way to introduce Skeleton screen.
Benefits of route separation:
1. Reductive page URL path to reduce maintenance costs and communication costs at the front and back ends;
2. BrowserRouter support, for SPA (Single Page Application) Page scenario, support BrowserRouter access mode based on history API;
3. Delete template configuration management steps, and students can focus more on data logic for back-end.
Six, engineering
The front-end organization has developed from small workshop to big front-end era, and the development mode of front-end engineering has faced new challenges such as modularization, componentization, standardization and automation.
Front-end engineering is essentially a kind of software engineering. Software engineering is concerned with performance, stability, availability, maintainability and other aspects, focusing on the basic development efficiency, operation efficiency at the same time, thinking about maintenance efficiency. Manage all aspects of front-end engineering with an engineering mindset, turn challenges into opportunities, create a development flow that supports multi-team collaboration, and build a solid industrial front-end infrastructure.
Seven,
Web H5 performance optimization is no longer a pursuit of one or two page load speed indicators, but a test of the comprehensive ability of a front-end team:
1. Top-level design ability
In the design of the layout in advance, looking for pain points in one hit, and according to the actual situation of continuous maintenance, adjustment, optimization, to ensure the effectiveness of the specification;
2. Project management ability
Use more effective working methods and means to optimize global practices, save costs and improve r&d efficiency;
3. Cultural innovation ability
Continuous learning is the best way to innovate and keep pace with The Times. Every opportunity may lead to a successful innovation and create unique value.
Web ecosystem technology is changing with each passing day, performance is increasingly standardized in the field, such as PWA/ fast application/small program, standardization is a good way to completely solve frequent problems and improve the quality of work.
The resources
| github.com/stereoboost… snap/blob/master/doc/alternatives.md
The original link: mp.weixin.qq.com/s/PkMvl2FIE…
* Baidu Architect *
Baidu official technology public number online!
Technical dry goods, industry information, online salon, industry conference
Recruitment information · Internal push information · technical books · Baidu surrounding
Welcome students to pay attention to!