Alimei’s Guide:The “metabolism” of front-end technology is obvious to all. The continuous development of new technology also promotes the expansion of front-end application scenarios, from web, weex to node.js to FAAS. We see the unchangeable part in the development, only the pursuit of better user experience is the unchangeable responsibility in the sustainable development of end technology. In Alibaba, the complexity and universality of the double 11 is the most direct and effective way to test a technology in all aspects. This year’s double 11 is a year to fully use the open-source rax from Alibaba. This article will introduce the direction that rax strives to explore in user experience.
What does lighter weight mean? The parsing and compiling time of JS engine will be directly reduced. In our historical tests, on some Android devices with low performance, the overall time of the initial JS bundle needs 300ms or even more, which is a very large proportion of the time that affects the experience. Therefore, under the premise of the same function, lightweight is one of the most effective means for business optimization experience.
Image source: https://v8.dev/blog/backgroun
At the beginning of the year, we launched the plan of rax 1.0, which supports hooks in terms of capability. By using the writing method of hooks function component, we can make the business code less. At the same time, compared with the core code of 0.6 version of rax, the new rax 1.0 has dropped from 57K to 17k, which is lighter and faster.
2. Adaptive hydraulic rendering
The biggest feature of rax’s hydration rendering is its adaptability. What is adaptive ability? Compared with react’s hydration mechanism, we can generate HTML in advance on the server side, and then execute hydrate to bind events on the existing DOM structure. In the process, if the existing DOM structure is inconsistent with the current JS bundle output structure, react can correct the difference of text content, but it can’t guarantee to adjust the property difference in case of mismatch. Moreover, when the DOM structure does not match, react may render twice, which makes the rendering slower.
In the scheme design of rax hydration, we take compatibility and ease of use as an important design goal, so rax will reuse existing nodes as much as possible and correct any differences. There are several kinds of fix for rax: text fix, attribute fix and node fix. In the process of node fix, if there are no existing nodes, they will also be deleted to ensure the correctness of rendering results.
3. Snapshot rendering
Snapshot rendering is not a new concept on the terminal. For example, there is a snapshot mechanism on the home page of manual search. Each time you enter manual search, the last page will be displayed first. Rax snapshot rendering combines with adaptive composite rendering, which makes the experience of snapshot rendering faster and more natural.
Rax snapshot technology also needs to have a previous historical state. When using snapshot technology, we can store the page state at any time as a snapshot, and then load the previous page snapshot from the local storage first when the next page is loaded. After loading the snapshot, we need to update it to the latest state. In the previous technical scheme, when the new page is completed, first leave it blank to experience the current snapshot page set, and then set the latest page, which may trigger the flash of the page. However, this problem can be avoided by updating the snapshot to the latest state through rax adaptive composite rendering, which is also the benefit of rax hydraulic’s taking compatibility as an important design goal.
4. Server side rendering
SSR is the ability we are very interested in under the current cloud + end trend. So the server-side rendering of rax has made many attempts and breakthroughs this year, such as trying to achieve a complete server-side rendering through C + +, the efficiency of type conversion between JS and C + + results in the performance is not as good as that of pure JS, and we have also considered whether we can use C + + to realize some functions of pure character string operation, which are not in line with our expectations.
Finally, we found a solution in the project. We did calculation and string splicing in advance at compile time. From the following test data, we learned that the SSR performance of rax is 8 times that of react, even more than xtpl. This also gave us the opportunity to replace xtpl with JSX in the appropriate scenario.
-----------compare renderToString---------- React(16.12.0)#renderToString x 1,664 ops/sec ±1.40% (84 runs sampled) Rax(1.0.13)#renderToString x 13,411 ops/sec ±1.05% (85 runs sampled) Preact(10.0.5)#renderToString x 1,237 ops/sec ±2.18% (84 runs sampled) Xtpl(3.4.2)#renderFile x 11,335 ops/sec ±8.17% (69 runs sampled) The benchmark was run on: PLATFORM: darwin 17.5.0 CPU: Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz SYSTEM MEMORY: 16GB NODE VERSION: v10.11.0
5. Native side rendering
The working principle of NSR and SSR is very similar. The biggest difference is that NSR places the execution process of SSR on the client, and can enjoy the experience of SSR without the need of server. NSR vs. CSR rendering:
6. Personalized rendering
Why is there personalized rendering? No matter CSR, SSR, NSR and Sr have their own applicable scenes, when the user’s network is good enough, it can be imagined that no matter which rendering method experience is good, but what is the actual situation? We can see from the experience data of double 11 terminals this time. Less than 50% of users can interact in 3S on the first screen, 90% in 0-7s, and 10% in 7S:
We need to pay attention to both low-end and weak network users, and the coincidence rate of low-end and weak network may be very high. Therefore, it is necessary to choose a suitable rendering scheme in different scenes. For example, if the network is not good and the NSR mode is selected for rendering at the end, the network is not good but the SSR mode is selected for rendering at the end. If the device performance is not good, no matter whether the SSR mode is selected at the end or at the end, we think that the future rendering mode should be personalized, not everyone is the same strategy.
It is expected that the double 11 in 2020 will make more people experience in 3S through our efforts, and fewer people will not average in 7S.
Author: Yuan Yan
Read the original text
This article is from alicloud partner “alitech”. If you need to reprint it, please contact the original author.