why

The project needs to use the rotation chart and the electron + Vue technology stack. Once the project application is started, it will continue to run for 24 hours, and the machine performance is poor, so we pay attention to two points

  1. A memory leak
  2. performance

At present, most of the community’s multicast components are only suitable for conventional Web applications. After internal testing, they cannot meet the requirements of memory and performance. Therefore, we need to implement the multicast components ourselves

Train of thought

At first, I found this article, which explained the traditional rotation map implementation ideas and the author’s original rotation ideas, and gave the original scheme with high performance at the end of the article.

The performance of the author’s original scheme is very high, but I noticed that every time the rotation is performed, a DOM node needs to be moved, which will trigger the rearrangement and redrawing of the browser. The performance is still not high enough and can be further optimized.

First order properties of the thought of flex layout: https://developer.mozilla.org/zh-CN/docs/Web/CSS/order

compatibility

  • caniuse.com
  • MDN

You can see that only modern browsers support this, if you want to compatible with older browsers do not consider this solution, my environment is Electron 2.0, integrated chrome 61, can be used.

Implementation scheme

This article only records the implementation scheme and pseudocode, will not give demo.

Basic function realization

HTML structure

<div class="carousel">
  <div class="carousel-container" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
    <! -- Multicast list element -->
    <div class="carousel-item" style="order: 0;"></div>
    <div class="carousel-item" style="order: 1;"></div>
    <div class="carousel-item" style="order: 2;"></div>
    <div class="carousel-item" style="order: 3;"></div>
    <div class="carousel-item" style="order: 4;"></div>
  </div>
</div>
<style>
  .carousel {
    width: 100%;
  }
  .carousel-container {
    width: 100%;
    display: flex;
    transition-property: transform;
  }
  .carousel-item {
    width: 100%;
  }
</style>
Copy the code

Start with the inside elements

  1. The parent sets display: flex, and the children can be sorted using the order property, which still causes reordering and redrawing, but is less expensive
  2. For the outer layer element, transition is used for animation, and translate3D of Transform is used for hardware acceleration and display range. In the non-animated state, the x-position is always 0, and in the animated state, the x-position is assigned, so the whole component is really doing two things: sequence and x-position (i.e. animation).
  3. Order: The X-axis of the non-animation state needs to be 0 all the time, so it is necessary to ensure that the order value of the current rotation element to be displayed is the minimum. I temporarily agreed that the minimum value is 0, because the animation involves the next slide, so the order of the current rotation is 0, the next slide is 1, and the rest should be greater than 1.
  4. Animation, if the requirement is to switch without animation, then the guarantee order has already been rotated, but the requirement usually requires animation. The realization of animation consists of three parts: start state, end state and reset state
  5. Initial state: when the animation starts, it is to start at the current rotation element. The corresponding X-axis is 0, so the starting and ending state does not need to be set. The default state is used, so usually there is no need to deal with the actual state
  6. End state: The end state is when the next wheel element is fully displayed, that is, X increases the width of the wheel element by one. Animation timetransition-durationThe assignment500ms, you can achieve animation.
  7. Reset state: After the animation is complete, the order value of each element is recalculated, and the X-axis is reset to 0 and the animation time is reset to 0

This completes the basic function of the round – cast component

Function extension

Automatically round

Start by implementing a function called the next() method, which is called periodically

Drag the scroll

  1. Record the X-axis of the mouse position at the beginning of the drag
  2. Get the X-axis of the mouse position during the movement, subtract the X-axis position at the beginning of the drag, get the X-axis moving distance, and then assign the distance totranslate3dThe X axis

Reverse animation with drag

Usually the rotation is from right to left, but sometimes need to compatibility from left to right, implementation scheme:

The non-animated state does not need to be adjusted, focusing on the animated state.

  1. Sort: To sort in reverse, order is 0 for the current display, -1 for the next display, and less than -1 for the rest
  2. Different states of the animation need to be adjusted
  3. Initial state: X-axis position:-1 * (Number of slots in rotation -1) * rotation width
  4. End Status: X-axis position:-1 * (Number of rounds - number of previous intervals) * Width of rounds
  5. Reset status: X position: 0, sort reset to forward

Reverse drag. If the drag distance is a positive number, the update sequence is reversed immediately. If it is a negative number, the update sequence is forward immediately

conclusion

The performance of this scheme is very high, but the compatibility is not good. And in the implementation process, the sorting calculation of elements will be more complicated if it involves reverse animation