Asked Mar 13th, 2020 3:23 AM 192 0 1
  • 192 0 1
0

Nuxtjs - API tải khá là chậm

Share
  • 192 0 1

Chào các bạn.

Mình làm 1 website với frontend bằng Nuxt js , có 1 vấn đề xin các bạn giúp đỡ:

  • Các page có dùng API để lấy dữ liệu từ databse của mình (sản phẩm, tin tức )khi load khá là chậm, dù mình test link API riêng chạy nhanh và số record cũng chỉ mới Vài chục.
  • Khi mình click để chuyển sang các trang này thường mất 2-3s để tải. Dùng laravel code thì nháy mắt là tải trang dc
	async asyncData ({ params }) {

			const a = await axios.get('https://c888888888888e=9');
			let hoidap=[];
		
			hoidap[0]={};
			hoidap[0]['888']=a.data;
			hoidap[0]['888888']={};
			hoidap[0]['88888']=info;



		return {
			data:{
				'hoidap': hoidap ,
			}
  • data dc lấy ra thì truyền xuống component con để xử lý

Bạn nào biết nguyên do chỉ giúp mình với . Xin cảm ơn

Avatar Quiet @simple1805
Mar 13th, 2020 4:13 AM

Bạn phải xem thời gian của api trả về có mất vài giây không, chứ đừng nhìn mỗi tốc độ tải trang mà đổ lỗi cho API. Tức là API vẫn trả về khá nhanh nhưng do load js hoặc gì đó. Tốc độ tải không chỉ phụ thuộc vào api trả về mà còn phụ thuộc vào tốc độ load js, image bla bla.

+1
| Reply
Share
Avatar Lê Tuấn Anh @tuananhbfs
Mar 13th, 2020 7:56 AM

@huusu1996 thời gian trả về của API chỉ khoảng 200 300 ms

0
| Reply
Share
Avatar Quiet @simple1805
Mar 13th, 2020 8:12 AM

@tuananhbfs Vậy là lỗi không phải do axios call api rồi, F12 lên reload page xem file js nào chạy mất thời gian rồi refactor thôi bạn. Tham khảo cách debug: https://thinhdora.me/development/do-luong-rendering-performance-su-dung-chrome-dev-tools

+1
| Reply
Share

1 ANSWERS


Answered Mar 15th, 2020 2:41 PM
0

Mình nghĩ nếu như số bản ghi chỉ vài chục thì không có lí gì lại load chậm cả.

Bạn có thể inspect lên rồi check xem thời gian load chi tiết của từng request xem cái nào load lâu nhất, mình nghĩ chậm là do load ảnh với js ấy

Share
Viblo
Let's register a Viblo Account to get more interesting posts.