0
Trang quá lag khi thực hiện action vì render quá nhiều DOM
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
Thêm một bình luận
2 CÂU TRẢ LỜI
+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
+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
