Authors: Xiao Fei, Ya Song, Zi Lun
Hungry? End 618, National Day, double, double 12 promote basically at the bottom of the logo with the venue such as navigation, navigation is at the bottom of the front end in the ordinary H5 container before implementation, each click TAB at the bottom of the navigation, the venue will restart a activities covered in the above page, even before the opening of the TAB also need to create and load, poor experience, Moreover, H5 can not well combine Native capabilities for further experience and performance optimization.
After investigation, it is found that the hand-washing PHA framework can solve the above pain points. The TabBar at the bottom of the PHA container is Native rendering, and the bottom bar will not be rebuilt when TAB is clicked. The WebView corresponding to TAB can also smoothly transition and seamless switch in the whole PHA container, without the need for another container. In addition, the loaded TAB active page Webview will be resident in memory, and will be directly switched to the foreground when accessed again, which is closer to native experience.
Last year, during the promotion of June 18, National Day, Double 11 and Double 12, we successively implemented some special optimization measures based on the business characteristics of Ele. me, bringing better performance experience and business results.
Double 11 online effect
The effect video view please click: Ele. me Double 11 PHA venue practice
Compare old containers with PHA containers. The left is the old container venue, and the right is the PHA container venue.
Introduction of PHA
What is PHA? PHA stands for Progressive Hybrid App, which is a new framework to improve Hybrid experience. It provides some Native components and Progressive enhancement strategies to create Hybrid App applications. Make these apps have the same user experience as Native.
- PHA uses and extends the configuration from the Web Application Manifest
- Each PHA App starts an App Worker, which is a JS script running in the client independently of the current page. The business logic can be customized in the Worker, such as the list of data displayed based on the Tab at the bottom of the LBS request
- There can be multiple pages under an application, and the default rendering engine for each page is a WebView
- The PHA provides UI capabilities like pull-down refresh and page level on each page, all of which can be customized in the Manifest
- The PHA also provides UI capabilities such as Tab container, Swiper container, and startup screen, and performance optimization capabilities such as pre-request and offline cache, which can be configured in the Manifest
Pha architecture diagram
Ele. me access scheme
The main difference between local life and Taobao and other businesses is that the former strongly relies on LBS attributes, including the recall of bottom Tab, goods, brands and other data. Therefore, it is necessary to dynamically assemble corresponding manifest.json data to render PHA when the user opens the PHA framework, after positioning and loading corresponding bottom Tab and top slider data. The overall architecture diagram is as follows:
Architecture diagram
B end link
Moidou platform relies on Tianma source page service to create the venue framework, using moidou data to configure the bottom Tab and top Swiper data, to achieve the decision, the main process is as follows:
Note: “Modou” is a module building platform, “Tianma” can provide basic building services.
Data structures,
Data construction is the multi-schedule scheduling capability provided by the ink bucket. After the configuration and publication, the unique resource bit ID of the current configuration can be obtained. Services can obtain configuration data through the asynchronous interface.
Conference frame tool
Added the conference framework tool, which provides the ability to create, publish and edit the conference framework. After creating and publishing the framework, you can get the link to place the framework.
C end link
The C-end link is realized by the client and the front end, which mainly consists of the following three parts:
1. Client PHA framework: it integrates the core capabilities of the framework such as Tabs container, Swiper container, startup screen, Appworker and preloading
2. Source code template page: as the entrance of PHA framework, it provides PHA normal loading entrance (native. XTPL) and degraded entrance (web.xtpl).
3. AppWorker service: it can have the opportunity to customize manifest according to business demands before frame rendering, including UI customization of head slider container, event processing, burying point, etc
Load the link diagram as a whole
Client access modification
The routing layer
Transform ele. me routing layer, add PHA entrance, and add native demotion strategy, gray control and other logic at the entrance.
Adapter: Native navigation header adaptor
Due to the stripping of the UI library of Handtao, Ele. me needs to realize the navigation bar by itself: show, hide, various themes, rolling discoloration, title setting, logo setting, event callback, degraded jump, etc. In addition, the dual end also provides some navigation headers, status bar and other private JSAPI for the front end to call.
The corresponding method was realized by PHANavigationBarProtocol on the iOS end, and the TranslucentToolbar of Ele. me was customized based on the System Toolbar on the Android end, which was embedded into the PHA container Activity in the form of Fragment.
The following figure shows the native navigation head. Title supports setting text and loading pictures, and the navigation bar theme supports transparent and white:
Text & image navigation bar
Here are the light and Dark style status bars:
Light&dark status bar
Adapter: Image loading adaptor
As ele. me iOS maintains its own picture library, it needs to adapt image loading and implement PHAImageLoaderProtocol and its image loading related methods.
Amoy depends on stripping
Ele. me has strict control over package size and strict audit of newly introduced two or three libraries. Ele. me app was connected to PHA earlier, and there were extra hand-shopping dependencies in the early version, and some functions were not used by Ele. me temporarily, or similar implementation schemes have been implemented, so it is necessary to strip part of hand-shopping dependencies and cut out unnecessary functions.
There are about 20 directly dependent libraries stripped by Android, such as: live streaming library, public resource library, UI library, Compat library, startup framework library, Atlas, etc., with a total size of about 7.2m + and the number of file changes involved: 100+
Note: The latest official Version of Android 2.0 has been stripped of these dependencies, great! When the iOS terminal is connected to phA, the dependency has been basically removed, and there is no need for major transformation.
Front-end access modification
Framework for service
1, source template: as the entrance of the PHA framework, provide PHA normal loading entrance (native. XTPL) and degraded entrance (web.xtpl)
- Normal entry: Generate the manifest semi-finished product based on the data input when creating the venue framework on the platform, and the result contains the AppWorker address, configuration information when creating the framework, etc. After the client executes the AppWorker file, it starts PHA frame rendering
- Degrade entrance: Provides unified degrade processing for early versions that do not support PHA or when PHA creation fails. Use common H5 containers to open downgradeUrl in the link to degrade and ensure service availability
2. AppWorker service: it can have the opportunity to customize manifest according to business demands before frame rendering, mainly providing the following capabilities
- Locate and request bottom bar and top swiper data
- Head slide container UI customization, event handling
- And PHA event and message processing
- Build the final manifest file
- Start frame rendering
- Buried point etc.
The meeting link
1. Transformation of page solution, basic util and Componet
2. Transformation of multiple modules
- Transparent head module: Transparent head was implemented by H5 combined with Native before, and the business customization ability is relatively weak. In order to solve this problem, pure H5 transparent head module is implemented for PHA container
- Bottom navigation module, search module, share module: compatible with PHA and non-PHA containers
Bury point
The PHA framework provides a set of buried point APIS. The client and front end must be adapted and modified according to their own buried point solutions. The statistics and reporting caliber should be consistent with that of the buried point under non-PHA scenarios.
- PV must be reported every time the page is switched, including the page that has been browsed. For example, when Tab A is switched from Tab B to Tab A, the PV must be reported on the last Tab A page
- The bottom Tab or top Swiper container will report the buried point when switching different items
Performance optimization
The loading process of ELE. me terminal PHA container is mainly divided into four stages as shown in the following figure. Corresponding performance optimization measures can be carried out for different stages.
- Pha container stage: the semi-finished manifest and worker can be prefetched or cache optimized; In the complete MANIFEST data request assembly stage, latitude and longitude prefetch and interface prerequest can be carried out.
- Webview stage: WebView can be pre-initialized, and the main document loading can be optimized by template;
- Service phase: Offline and caching of JS and CSS resources, and built-in of common JS resources; The business interface data can be pre-requested; Preheat and prerender.
Official PHA framework optimization means
Pha framework itself provides manifest pre-request and caching, HTML templating, offline resource access, built-in Js pre-rendering and other optimization methods.
Take the event of Double 11 on iOS as an example, use manifest and worker prefetching to optimize the container creation time of more than 200ms.
Ele. me end feature performance optimization
PHA webview preheating
When opening the phA first screen and switching tabs, container creation and main document loading are required, resulting in a long blank screen and poor experience. Pre-rendering page is undoubtedly the best means of performance effect, but on the one hand, it will cause a waste of resources, on the other hand, it will also bring a lot of memory pressure, can not be abused at will, if it can be better combined with end intelligence may better play its value.
Ele. me uses a preheating scheme (configurable maximum number of preheating pages) for tabs outside the first screen to eliminate the blank screen time during TAB switching. The difference between preheating and prerendering is that preheating does not initiate the first-screen interface request after getting the master document in the off-screen stage. After the rendering of the first screen page is completed, the remaining webviews corresponding to the bottom and top items are preheated and cached. When the user clicks the corresponding TAB, the webView is consumed for on-screen operation. Specifically, the phA/Preload sub-module link is reused and some modifications are made, referring to the pre-rendering logic of TSchedule. The main process is shown in the figure below:
Link comparison before and after optimization:
The specific preheating effect is shown below (the left side is not preheating, and the right side is preheating) :
The effect video please click to view: Ele. me Double 11 PHA venue practice
Service interfaces are preloaded
The front-screen interface of the conference page takes a long time, or more than 2 seconds in some cases. To shorten the page loading time, pre-request the front-screen interface. Considering that Ele. me terminal has previously supported the ability of interface pre-request and packet size through TSchedule, it decided not to introduce the prefetch module of PHA, but to carry out data Prefetch adaptation transformation of PHA with the help of ele. me existing ability.
Orange (switch configuration publishing platform) pre-request configuration is released by the client in advance. Interface pre-request is triggered in advance in phA venue when routing on the first screen, TAB switching at the bottom and PageHeader switching at the top are switched, and JSAPI is also provided for the front end to call pre-request by itself. The optimization effect is obvious. At present, it is already a necessary optimization item for ele. me terminal venue business.
(1) Network data asynchronous pre-request before loading the first-screen WebView
(2) Network data asynchronous pre-request in routing stage before startup
(3) Network data asynchronous pre-request before TAB switch webView loading
(4) Network data asynchronous pre-request before webView loading through JsBridge
Complete MANIFEST data request optimization
Most local life businesses are strongly dependent on positioning. For venue business, only semi-finished manifest file can be returned at present. After jSAPI on the calling end of worker gets the longitude and latitude, interface request is launched to obtain the complete MANIFEST data for assembly. For non-conference single-page services, the interface request also requires latitude and longitude information.
Latitude and longitude prefetch
Method 1: Inject latitude and longitude information into the semi-finished manifest (for business scenarios that require PHa worker to process the semi-finished manifest file)
In the manifest semi-finished JSON sent back to the front end, add the longitude and latitude data cached on the home page, saving the time of a Jsbridge call. The process pairs before and after optimization are shown in the following figure:
Append latitude and longitude information template:
Method 2: Pass in latitude and longitude at the entry link (for scenarios without pha worker)
Most single-page businesses can obtain complete manifest data at the very beginning, without the worker’s extra processing, so they cannot directly obtain the injected longitude and latitude information through mode 1. Therefore, we adopt another scheme to splicing longitude and latitude parameters for PHA entry link (MANIFEST URL). And concatenate it to H5 inner page links through phA parameter passthrough capability. The specific process is as follows:
Complete MANIFEST data interface prerequest
After the worker obtains the longitude and latitude, it will initiate an interface request using the page ID, resource ID and longitude and latitude to obtain the data required by the complete MANIFEST (Pages, TAB, etc.). After the data is returned, it will splicing the data into the complete MANIFEST data, and then call JSAPI to notify the terminal to update the MANIFEST. The interface takes about 200ms to load tabs and pages.
The interface is pre-requested in the routing stage to optimize. Because the page ID and resource ID required by the interface basically do not change during the launching of the same conference, the pre-loading configuration published in advance directly sets the two ids to fixed values, while the longitude and latitude are dynamically obtained when the pre-request is initiated.
After the launch of this function, the overall time of the first screen is reduced by about 150ms after the comparison between the two versions.
The stability of
demotion
Any error in PHA frame rendering may lead to frame initialization failure. In order to achieve the same link to be put into the new and old versions of Ele. me and ensure the service available in various abnormal scenarios, it is necessary to seamlessly downgrade to H5 container, and the process is as follows:
plan
Before the start of the 11th National Congress of the CPC, we recorded and rehearsed all kinds of abnormal situations that might occur in the PHA conference, such as: The venue was degraded, closed by preheating, closed by interface preloading, closed by MANIFEST preloading, etc. Under the joint support of the security team and the test team, the PHA container venue ran stably during the promotion period without any major failure.
Monitoring and reporting
On dP2 monitoring platform, related reports such as manifest hit ratio monitoring, offline resource hit ratio monitoring, degradation monitoring, performance monitoring, warm-up hit ratio monitoring, first-screen time monitoring, in-container WebView loading time monitoring, and white screen monitoring are constructed.
In addition, Mobile is currently building a container market, and the ios terminal has been initially connected. We are looking forward to the follow-up construction of the market, such as alarm and two-way business data display.
Summary and Outlook
Through the access of PHA framework and a series of optimization means, the time of dual-end optimization of the first screen is reduced by about 650ms, eliminating the white screen time when switching TAB, improving the user experience of ele. me terminal in promoting the conference, and promoting the improvement of business data.
According to the statistics from the operation side, the exposure click rate of the navigation Tab at the bottom of the main venue of the Double Eleven last year increased by more than 50% compared with the official period of the National Day promotion. Since the launch of the official pilot PHA on 618, the click-through rate of the new bottom navigation continues to increase.
In the future, the front end needs to solve the problem of linking as a normal product capability to support the use of various business scenarios. The end side will also further explore other optimization schemes, such as Tabbar direct rendering, PHA container Fragment, quickJS introduction, etc. In addition to venue business, part of ele. me Terminal super Club business also launched PHA, and achieved some performance benefits.
We hope that the optimization points made by Ele. me in the future can give you some inspiration and thinking, so as to serve more appropriate businesses and further improve user experience.
Pay attention to [Alibaba mobile technology] wechat public number, every week 3 mobile technology practice & dry goods to give you thinking!