From the rough to the sophisticated, from the simple to the complex, the average size of Web apps around the world has increased to 1.6 MB. As the 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 cannot be opened in seconds, there will be a large number of users choose to leave. Focus on and improve website performance, optimize real-time web page loading time, accelerate real-time web page display in the browser platform terminal state, thus can bring the growth of website traffic.
This paper is from the R&D Department of Baidu Live, and proposes a front-end progressive enhanced page rendering scheme, namely “routing separation + pre-static +WebView pre-creation” scheme, to replace the template synchronous rendering scheme, and adopts an engineering way to package the capabilities into the enabling product line.
The background,
In the scene when the live broadcast business is launched, we should build the spirit of reward service and create diversified and memorable operational activities to meet the needs of target users. To carry out effective service innovation, guarantee H5 service quality, control access performance, timely dissolve the emotion of donors into commercial value, create special surprise and smooth user experience, which is conducive to win users’ respect for the platform and improve the brand quality of the platform:
**1. Optimized access experience: ** Optimized the performance of the first screen of H5, innovated around improving users’ service experience and improving developers’ work efficiency, and explored the experience innovation of catching up with native Web;
**2. Accelerated demand closed-loop: ** Solve the coupling problem of H5 page routing and data interface, realize the autonomy of H5 service, and release the strong demand of business for Web product form;
**3. Infrastructure construction: ** uses engineering means to settle common front-end infrastructure, so that front-end organizations can support cross-business manpower deployment more quickly, and technology can enable more product lines;
The transformation of business value around user-centered functional experience and customer-centered business value. Enhance the quality of H5 services, unleash the potential of modern browsers, and enable new solutions for the traditional Web.
The loading process of H5 page is that the Server inputs the interface master data into the Smarty template after JSON \ _ENCODE, responds to the page with the complete JSON data of the page to the browser, then executes JavaScript on the browser side, and finally gives the user Paint. The process is as follows:
△H5 loading and rendering process before optimization
△H5 first screen critical path time-consuming disassembly
The two critical paths that affect the H5 First screen content (FCP, First Contentful Paint, First Content Paint) are:
- Network Time: Depends on Server side data query and template compilation. When data query is slow, the First Byte is delayed (TTFB, Time To First Byte, Time To First Byte).
- Kernel rendering time: Relies on JavaScript execution to read the page master data and generate the full DOM structure.
Therefore, we specifically designed and implemented the scheme of “routing separation + pre-static + pre-creation of WebView”. The improved page loading and rendering process is shown as follows:
△H5 optimized loading and rendering process
Second, routing separation
Before routing separation, the URL of H5 page was allocated by Server, and the front-end was responsible for writing TPL template products. The corresponding relationship between TPL and the final URL was mapped in Server through configuration files, which increasingly exposed the problems of slow startup and development and high cost of maintenance and communication in the later stage of the page.
Therefore, we hope to standardize page routing, let front-end developers control the page entry format independently, and let back-end developers focus more on API interface data logic. Therefore, we designed the front-end routing separation scheme and agreed on the mapping relationship between page URL and page source code directory. The rules are as follows:
△ Predetermined URL Routing Specification
Nginx responds directly to pre-static HTML files, with the first byte arriving independently of data query and template compilation.
Three, pre-static
The front-end routing decoupling returns the HTML file directly to the Nginx proxy layer, but does not have the data required for the page to render completely. It is necessary to avoid the page remaining in the blank screen or loading state globally until the Ajax request returns, and advance the FCP time.
We used a solution of pre-static pages. Unlike server rendering, which produces completely static HTML compiled on the fly, pre-statics only generate a few static pages at build time for a specific route. We can use the Webpack plugin to inject certain pages into the DOM structure at compile time. This has several advantages: The first is to shorten the blank screen time of the page, the second is to save the cost of cloud infrastructure resources relative to the server-side rendering, and the third is to output to the search engine to crawl the common content of the page.
Combined with practical application scenarios and mainstream pre-static methods in the market, we finally developed a Webpack plug-in based on the native server-side rendering ability of ReactDomServer to improve the performance and efficiency of pre-static.
Get the compilation context of each build through the webpack plug-in system, and get the bundle of the current page through the HTML-webpack-plugin’s before AssetTagGeneration hook. AfterTemplateExecution Hook retrieves the compiled template HTML of the current page and executes the entire APP module exported by the bundle via eval. Each route of a single page application is produced by ReactDomServer and the APP HTML is merged with the template HTML and then dropped to pre-static HTML.
H5 pre-static invocation sequence is as follows:
△H5 pre-static call sequence
Export App:
Based on the Node.js environment, the JSDOM instance is created to provide the browser-hosting environment and the components are rendered as static HTML tags using ReactDomServer. Replace the HTMl-webpack-plugin with a self-developed pre-static webpack plug-in, without adding a new compile phase.
Compare the Webpack plug-in with the leading pre-static approaches on the market, such as headless browser-based, locally launched HTTP Server based, and general static site generation tools. The results are as follows:
The results are as follows:
By comprehensive comparison, our pre-static speed is the best, and we can see the results of pre-static in real time during the development stage. WYSIWYG is what you see, which is convenient for R&D and debugging, and there is no need to add a new compilation stage.
Following the principle of having the Skeleton content of the page display the final content as much as possible, and producing pre-static HTML files, we still need to wait for an Ajax request for the dynamic components that display the user’s personalized content. For this part of the components, before the Ajax request does not return, we adopted a component-level Skeleton scheme. To ensure that the first screen is filled with generic content + dynamic component skeleton:
- Define the public part state during static component development, and populate the content of the public part of the page. Code example:
- The dynamic component responds to both the pre-static environment and the browser rendering environment based on the window. isPreRender flag. Code example:
△ Response flow of dynamic components in both environments
After the pre-static page First screen content (FCP) does not depend on the completion of JS execution, through a First rendering (FP, First Paint, First Paint) can show the user the page public content, after Ajax return to replace the fully rendered page.
Four, WebView pre-create
The cache pool composed of WebView is initialized immediately when the APP is started to ensure that the time of WebView initialization is saved when loading each URL, and the pre-static HTML cache is used to make the page without white screen loading state finally.
5. Overall income
△ Optimization effect can be perceived contrast (left new right old)
Render process before and after improvement:
△ Rendering process before and after improvement
Direct Benefits:
△H5 performance optimization direct benefit
Pre-static income:
- Release the front-end universal high-performance pre-static plug-in;
- Provides a way to engineer the introduction of a Skeleton screen.
Routing separation benefits:
- Approximate type of page URL path, reduce maintenance costs, reduce the cost of front and back end communication;
- BrowserRouter support. For SPA (Single Page Application) Page scenarios, BrowserRouter access mode based on History API is supported.
- Removing the template configuration management step allows you to focus more on data logic for back-end students.
Sixth, engineering
Front-end organization has developed from small workshop to large front-end era, and front-end engineering development mode has been challenged by new challenges, such as modularization, componentization, standardization, automation, etc.
Front-end engineering is essentially a kind of software engineering. Software engineering is concerned with performance, stability, availability, maintainability and other aspects, pay attention to the basic development efficiency, operational efficiency, while thinking about maintenance efficiency. Adoption of engineering thinking to manage all aspects of the front-end engineering category, transform challenges into opportunities, create a development flow that supports multi-team collaboration, and establish a solid industrial front-end infrastructure.
Seven,
Web H5 performance optimization is no longer only the pursuit of one or two page load speed indicators, but also 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 that hit, and according to the actual situation of continuous maintenance, adjustment, optimization, to ensure the effectiveness of the specification;
2. Project management ability
Optimize global practice with more effective working methods and means, save costs and improve R&D efficiency;
3. Cultural innovation ability
Continuous learning is the best way to innovate. We always keep the basic value of keeping pace with The Times. Every opportunity may lead to a successful innovation and create unique value.
Web ecology technology changes rapidly, performance is increasingly standardized in the field, such as PWA/ fast applications/small programs, standardization is a good way to completely solve the frequent problems and improve the quality of work.
The resources
| https://github.com/stereobooster/react- snap/blob/master/doc/alternatives.md
The original link: https://mp.weixin.qq.com/s/Pk… \_3PAIzU4kEz5w
-
- –
Architect of Baidu
Baidu’s official technical public account has been launched!
Technology dry goods, industry information, online salon, industry conference
Recruitment information, internal information, technical books, Baidu surrounding
Welcome to your attention!
