This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

RAIL is a user-centered performance model that provides a methodology for thinking about performance issues. The model breaks down the user experience into modules based on key actions such as response, animation, scrolling, loading, etc., helping developers define performance goals for each of their modules

What is RAIL?

RAIL represents four different aspects of the Web application life cycle: response, animation, idle, and load. Users have different performance expectations. Define performance goals and user experience based on context. How do users perceive latency

  • response
    • The response time the page gives the user when interacting with the page
    • Processing events should be completed within 50ms
  • animation
    • One frame is generated every 10ms
  • idle
    • Increase your free time as much as possible
  • load
    • Content is loaded and interactive within 3s

Response

When users operate and interact on the page, the page needs to respond quickly to the user. Otherwise, too long a page response time will lead to poor user experience and serious loss of users

For example, when the user clicks a button for interaction, but no response result is given after 50ms, a loading state can be given to the user to respond, informing the user that the page is processing the current interaction at this time, instead of the page showing where the page is still

The user opens a bomb box, for example, playing the inside of the box data need to render the request data is completed, the front is not guarantee whether the user’s network is good, out of the behavior should be the first to show bounced to inform users of your operation is effective, in the box to give a loading state at this time, prompt the user is loading the data at this time, please wait patiently

Animation

Animation effects are very common and basic in modern browser pages, and can greatly enhance the user experience

Whether we render the long list, JS, operate the DOM or CSS control animation, will be referred to the concept of 60 frame, also is the time of each frame control in about 16.66 ms, so we can ensure our animation effects may follow the browser’s rendering frequency, but in every browser rendering process not only have to deal with the animation work, There will be a lot of other work involved, such as repaint, reflow, etc., so in order to ensure the effect of the animation, please try to control the animation time within 10ms, to ensure that there is enough time for the browser to do other things

Pursue visual smoothness. Users notice when the frame rate is different

Idle

During the design process of the program, the idle time should be increased and utilized to the maximum, and the response time to user input should be controlled within 50ms

Use idle time to complete delayed work. For example, for the initial page load, load as little data as possible, and then use idle time to load

The working time is controlled within 50ms. If it exceeds 50ms, the feedback speed of responding to user input will be affected and the interactive experience will be affected

For example, when the user enters a page, the resource of the current page is loaded first, and the next operation path of the user can be judged by means such as burying point. At this time, the idle time can be used to load resources

Load

Delivering content and interaction takes less than three seconds, and if the page loads slowly, the user’s attention is distracted and the user’s perception of the task is broken.

Optimized for fast loading performance relative to the user’s device and network functions. Currently, a good target for loading loading pages first is to interact in 5 seconds or less on mid-range and slow 3g connected mobile devices

For subsequent loads, a good goal is to load the page in 2 seconds