Asked Oct 5th, 2018 4:30 AM 139 0 2
  • 139 0 2
0

Trang quá lag khi thực hiện action vì render quá nhiều DOM

Share
  • 139 0 2

Chào mọi người, hiện tại mình đang làm dự án dùng VueJS. Vì yêu cầu nghiệp vụ của dự án nên trong cùng một trang có rất nhiều component, rất nhiều dữ liệu, không thể dùng load more được. Việc render quá nhiều DOM trong một trang khiến cho trang rất lag. Mọi người cho mình hỏi là trong trường hợp của mình thì có giải pháp nào không ạ. Cảm ơn mọi người nhiều

2 ANSWERS


Answered Oct 5th, 2018 6:03 AM
+1

Mình chưa hiểu lắm chỗ không thể dùng load more được. Theo mình thì việc render dom 1 lần thì không làm broswer có thể lag ngay được. Trước mình có thể render 1000 row ra thì mọi thứ vẫn đều rất nhanh chóng. Nguyên nhân có thể là từ việc các dom này được update nhiều lần liên tục nên có thể khiễn việc dom được re render thường xuyên và gây lag. Trong trường hợp 1 page có nhiều component thì để tránh việc phải load hẳn 1 cục js và làm đơ brower tại lúc đó thì có thể dùng async component, nếu bạn dùng webpack thì có page đó sẽ đc bundle thành các trunk là load lần lượt và update lên page

Share
Answered Oct 5th, 2018 6:37 AM
+1

Nếu các component trong list của bạn có chiều cao bằng nhau (kiểu table chẳng hạn) thì bạn có thể dùng virtual list rendering, chỉ render những component nào mà bạn đang thấy.

Nếu đang dùng Vue thì bạn thử package này xem https://github.com/Akryum/vue-virtual-scroller

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