Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve long list performance optimization in vue, which is very detailed and has a certain reference value. Friends who are interested must read it!

Long list performance optimization 1. Don't be responsive.

For example, member lists, product lists, and so on, are only pure data display, and there is no need to respond to the data without any dynamic changes, which can greatly improve the rendering speed.

For example, using Object.freeze () to freeze an object, MDN describes that the object frozen by this method cannot be modified; that is, new properties cannot be added to the object, existing properties cannot be deleted, enumerable, configurable, writable, and the prototype of the object cannot be modified.

Export default {data: () = > ({userList: []}), async created () {const users = await axios.get ("/ api/users"); this.userList = Object.freeze (users);}}

The responsive source address of Vue2: line src/core/observer/index.js-144looks like this

Export function defineReactive (...) {const property = Object.getOwnPropertyDescriptor (obj, key) if (property & & property.configurable = false) {return}...}

You can see that the direct return that judged configurable as false from the very beginning does not do responsive processing.

A configurable of false means that this property cannot be modified, and the configurable of a frozen object is false.

Responsive flag is added to Vue3 to mark the target object type.

two。 Virtual scrolling

If it is big data's long list, creating too many DOM at one time will be very stuck if you render all of them. At this time, you can use virtual scrolling to render only a small part of the content of the area (including the visual area), and then when scrolling, constantly replace the contents of the visual area to simulate the effect of scrolling.

The principle is to listen for scrolling events, dynamically update the DOM that needs to be displayed, and calculate the displacement in the view, which also means that the scrolling process needs to be calculated in real time, and there is a certain cost, so if the amount of data is not very large, just use ordinary scrolling.

These are all the contents of the article "how to optimize the performance of long lists in vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.