With regard to the bidirectional binding of img tags to Vue v-bind, a sharp decline in performance will occur when the number of json is large. V-once has no effect.

problem description

Vue developed a picture website, and the online address bz.zzzmh.cn
found a performance problem after development
. To put it simply, the url of
images exists in a json array
binds to img"s src with v-bind
and then just add or change any piece of data in the json array
will trigger vue"s two-way binding. Causes all pictures on the entire page to refresh
very stuttered
calculation does not change json
pictures to a certain number and is also very stuck

the environmental background of the problems and what methods you have tried

because I am a rookie at the front end.
after searching for a long time, only v-once will refresh all img tags when json is changed.

what result do you expect? What is the error message actually seen?

I just don"t understand one thing right now.
there is a way for vue to render only once. I used it incorrectly. Can I optimize it?
or the data structure I designed in the first place is wrong. Should it be rendered in another way?
for example,
is placed in a json in the first place without changing the json?
or do you render this large amount of data with native json?

add the picture I just tested

I just found that chrome has this function in Baidu how to test the performance of the front-end page. I"m still learning how to use
to attach a screenshot. I don"t know if I can see the problem
Performance

.
Vue.js
Jul.07,2022

depends on how your changes are written. If your array is push, it won't lead to a full refresh.

experienced your website, I'll give you some ideas:
1, lazy loading (the first screen only shows so many pictures, the first screen loads well in advance-later drop-down or other triggers to load again)
2, batch preload (now there is real-time to% loding, but too slow. The practice of Baidu pictures is to load a batch of pictures in advance)
3. Preloading only loads low-definition resources, except for case

which must be loaded in high definition. I'm sorry I didn't know Baidu before I asked. Now know that you can use performance analysis to know how to find problems.
it turns out that I abused vue's computed
such as picture information and whether pictures are collected
. I used computed to judge
results found that every time stutter seems to cycle the whole page in the dynamic judgment
is actually a lot of repetition
I still have to first re-study the principle of vue's computed.
was written with the attitude of realizing the function before, without in-depth study

.

Previous: When AuthorizationInfo authorization is performed in Shiro in SpringBoot, it will be executed repeatedly. What is the reason?

Next: Why is it that vue and springboot are deployed separately on different ports of the same server, and vue cannot access the interface provided by springboot?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b38c45-2c11f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b38c45-2c11f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?