Time slicing

Even before The release of React16, there was a lot of buzz about something new: time sharding. But what exactly is this towering thing? Then we analyze the ~ on the analysis of time slicing before, we need to throw three questions: 1. Why time sharding? 2. How is time sharding implemented? 3. What is the so-called time fragmentation? Next we can take the above three questions together to study the time sharding this woman ~

1. Why time sharding?

Answer: because cow force! In fact, every new feature must be created to solve some application scenario that may have problems, otherwise it is silly. So time sharding must also address some of the problems in Act15. Try it out for yourself. Use React15 to render 1 animation + 10,000 nodes, and then update those 100,000 nodes to see if your browser can handle it. I’ve prepared a demo here that you can put in your browser and run. Once there are too many nodes, the program gets stuck, which is why React15 was a bad bug until now. And that’s when Time Split came along! So the question is, when there are too many nodes on the page, can time sharding prevent stalling? The answer is no. Using time sharding does not prevent page lag, not so much prevent lag, but rather “reduce the lag time of higher-priority things in your application (such as CSS animations).” This sentence may not be very easy to understand at present, but let’s go down the analysis, will be clear in a moment, we first remember, the function of time sharding is simply the above sentence ~

2. How is time sharding implemented?

Before we talk about time sharding, we need to understand the concept of “frames” in the browser. First of all, what is a frame? Sliding block in our web page will slide down right, or CSS 3 out often can see in the website after some very cool animation ah, in fact, we can see the page, from beginning to end are static, but can see page smoothly slipping or feel the root cause of the animation to run smoothly, In fact, the browser is constantly refreshing the page, the browser by refreshing the page at a high frequency to keep the page constantly changing, so that we can feel the page running smoothly. As a rule of thumb, a page refresh of around 33 times per second would allow us to see smooth animation, meaning that the page would need to be refreshed every (1000ms / 33)33ms. So sometimes we use setInterval to write animations, and if the second parameter is larger than 33ms it might feel a bit awkward. You’ve heard of Flash animation a long time ago, 20 frames per second if I remember correctly, so the flash experience was not very good, and now it is gradually phased out. We now know that the browser will constantly refresh the page (Google in the console can call out a small window display refresh rate), and in general every 33 ms refresh can ensure smooth (not absolute is 33 ms, like Google sometimes may be 16 ms refresh time, vr is like 1 seconds 90, 3 d is like 120 times, For the rest of this article we will assume that the browser refresh rate is 33ms), within which the page is actually static. So what is the browser doing in each frame? Let’s take a look at the following image:

What exactly is time sharding?