Rendering with axios in vue is extremely slow

when using axios to request data, the data is returned very slowly, even if it is just fetching the data without rendering the home page, it will take a long time to load.

excuse me, this is the problem of axios itself

clipboard.png

network as shown in the picture, the content is not big, but sometimes it will go to 3s, and sometimes even 7-8s, with an average of 2s

.
Mar.06,2021

network axios doesn't matter.

  1. response speed of backend service
  2. Network problems
< H2 > add notes on Network < / H2 >

seeing that the problem is still under discussion, it may be necessary to add.

  1. as mentioned downstairs, the problem here is that content download takes too long, most likely because xhr returns 304K data. If you don't need so much data, please do paging. If you need so much data, consider slicing the data and get it through Promise.all .
  2. the original answer lists more common questions (it is not common to return data larger than a picture, to be honest), with other links that affect time.

learn about Resource Timing


how slow? open network to see


has nothing to do with axios, and see if there is something wrong with your network speed and background


axios encapsulates the ability of XMLHttpRequest, browsers to expose js to make ajax requests.
rendering: refers to the process in which browsers parse html, style sheet, layout & render-> composition, and then draw.
axios has nothing to do with rendering, nor does it have anything to do with the timeline you see in network. Axios is only responsible for the request & response to the IO that receives the data.
access time: the length of time is mainly related to these factors:
is stalled,
three-way handshake in the queue? Initialization connection time initial connect,
Server processing waiting time for data waiting,
data download content download


is that the backend return interface is too slow.


content download takes too long, and the response time is not good. It may be that your server bandwidth is too small or the distance is too far.


axios has anything to do with rendering.

Menu