First of all, you need to know two things:
1. Specific projects, specific analysis, it is meaningless to look at optimization out of context
2. We do software development, software is a tool, a tool for business services, and what business pursues is profit, what is profit, and income minus cost, so we can't pursue the ultimate optimization and waste a lot of time
But you must also understand optimization, the following summarizes 10 optimization methods
1. Use the Key value
The list generated by looping should give each list item a stable and unique key value. The purpose of this is to delete, add, and change elements as little as possible when the data changes, because the diff algorithm is passed key value to compare
2. Use frozen objects
Frozen objects will not be responsive Object.freeze is generally used in scenarios where data is only displayed and does not change.
3. Use functional components
Sometimes, a component of ours just needs to accept some prop data without changing anything. At this time, we can use functional components. Functional components can reduce a certain amount of script running time and memory usage when rendering.
4. Use computed properties
If a certain data in the template is used multiple times and the data is calculated, use computed properties to cache them. (Defects cannot pass parameters)
5. Non-real-time bound form items
Little knowledge: The design idea of vue is to focus on the data rather than the interface. The maintainability and readability of the code are also very important. The js execution thread and the browser rendering thread are mutually exclusive, so executing the jS thread animation when running the animation will Stuck and stopped
When using v-modle to bind a form item, when the user changes the state of the form item, the data will also be changed accordingly, which will cause Vue to re-render, which will bring performance overhead
Especially when the form item is changed, the page has an animation being executed. Since the js thread and the browser thread are mutually exclusive, it will eventually cause the animation to freeze.
You can use v-model.lazy (when the focus is lost), or not use v-model, but this may cause the value of the data and form items to be different within a certain period of time.
6. Keep object references stable
For example, when I add a comment list, after adding a piece of data, we usually call the interface to get the data again. After getting the data, we get the json object. However, this object is two different data from the original one. Then it will re-render, but a lot of the data is the same, there is no need to re-render. So we can directly add this new data to the original data after adding a new data, without calling the excuse to get all the data. The problem is that if someone else adds data during the period, then the page displayed It may not be real-time (new additions by others cannot be displayed), but we do not stipulate that the data must be displayed in real time, because as long as it is refreshed, it will be fine.
It can also be seen from this that the benefits of component subdivision can avoid redundant rendering.
7. Use v-show instead of v-if
For elements that are frequently switched, using v-show can ensure the stability of the virtual dom number and avoid frequent addition and deletion of elements, especially for those nodes that contain a large number of dom elements, which is extremely important.
Keywords: frequent switching, internal replacement of a large number of dom elements
8. Delay loading defer
Solve the white screen problem on the home page In fact, sometimes the user experience is not just about the waiting time. If there is a progress bar during the waiting time, or a child is running, this problem can also be alleviated.
Package size too large {
Optimize CDN
Start modern mode
Page subcontracting (routing lazy loading)
}
Too much content to render immediately
Delayed loading defer is an idea mainly to use the requestAnimationFrame rendering needle to achieve sequential rendering
There are various implementations, such as loading components in batches and loading data in batches
9.keep-alive
It is used to cache internal component instances, which have include and exclude attributes, and max sets the maximum number of caches. After exceeding, the oldest unused ones will be automatically deleted.
Affected by keep-alive, its internal components have two life cycles, activated and deactivated, which are triggered when the component is activated and deactivated respectively. The first activated is after mounted.
Generally used in scenarios that require frequent operations on multiple pages (navigation bar)
10. Long list optimization
It is generally used when the app side pulls down, or when the list is very long, it is solved by a fixed-size rendering pool. Through some operations such as scroll bars, reduce the page rendering market, there is a ready-made library, vue-virtual-scroller
https://github.com/Akryum/vue-virtual-scroller
Plus:
11. Create a low-overhead static component through v-once, and it will be cached after rendering once. Unless you pay great attention to the rendering speed, it is best not to use it, because some developers do not know this attribute or overlook it, and then spend Been looking for hours why the templates are not updating correctly.
