foreword
After the project goes online, its excellent overall performance is the focus of both users and R&D personnel. Project optimization is very important, every bit of improvement is responsible to users. Therefore, we should pay attention to details in development, and the optimization work starts from daily development. This article will share some optimization methods at the code level in daily development .
Develop common optimization methods
1. Prioritize the use of v-if
Both v-if and v-show can control the display and hiding of an element. The difference is: v-if is to create/destroy DOM to achieve the effect; v-show is operated through the display style of CSS, which will pre-render DOM. In development, except when pre-rendering is required or the display state needs to be switched frequently, try to use v-if in other cases .
2. Do not use v-for and v-if together
The priority of v-for is higher than that of v-if in vue2, so when two instructions appear on a DOM in a vue2 project, a v-if judgment needs to be made every time the list is rendered through v-for. If the list data is too much, it will cause a certain performance loss.
solution:
① If it is necessary to judge whether to render the list, then we can make the judgment first by wrapping a template in the outer layer of the loop. The code example is as follows:
② If v-if is to filter the data that needs to be traversed, then we can do the logic of filtering data in the calculated property, return a qualified list data, and use this data directly in the DOM. The code example is as follows:
3. Long list optimization
In project development, list display is often required, and the number of data items can reach thousands or even tens of thousands.
If the data volume is large, the one-time query will be particularly slow, which will affect the user experience. The current solution is to query by paging. First query nearly 20 pieces of data, and monitor the position of the scroll bar at the same time. When the scroll bar scrolls to the bottom of the list, continue Request the backend interface to get the next 20 pieces of data.
This solution can solve the problem of slow query at present, but there is still room for optimization. With continuous scrolling, more and more data will be generated. The existence of a large amount of DOM will inevitably cause certain pressure on the client. At this time, the virtual list can be considered Realize the plan.
4. Release component resources in time
Timely release of unnecessary resources is also a common optimization method. When we use the timer setInterval in a component, a resource space will be opened up for the timer to use. If the space is not manually released when the component is destroyed, then the component will still occupy part of the resource after it is destroyed. This leads to an unnecessary waste of resources, especially if there are multiple instances of this phenomenon throughout the project. So when a component is destroyed, try to destroy the resource blocks we have developed .
5. Lazy loading of images
When there are a lot of pictures on the page, it is urgent to optimize the pictures, which can greatly improve the user experience. Vue provides the vue-lazyload plug-in for us to use directly, which is very convenient to use.
at last
There are many performance optimization methods, and tools can be used to optimize targeted optimization based on actual conditions. This article lists some commonly used optimization methods in development for your reference. As developers, we should develop good coding habits in daily projects, high cohesion and low coupling, and avoid useless code. These are more substantial than any later work.