- vừa được xem lúc

Tìm hiểu về Virtual Scroll

0 0 11

Người đăng: Pham Duc Viet

Theo Viblo Asia

Nay mình giới thiệu cho mọi người một kỹ thuật làm website của chúng ta mượt lên trông thấy, giúp cải thiện đáng kể hiệu xuất website của mình. Đó là Virtual Scroll
Đầu tiên chúng ta hãy cùng xem một ví dụ về Virutal Scroll rồi mới vào phần chính nhé.
Xem tại đây: link

Virtual Scroll là gì

Như trong ví dụ ở trên, khi F12 lên các bạn có thể thấy sơ qua cách thức hoạt động của Virtual Scroll rồi phải không.

Virtual Scroll hiển thị một danh sách ảo, "vô hạn". Một mảng bản ghi được chuyển tới cuộn ảo chứa dữ liệu để tạo mẫu cho. Mẫu được tạo cho mỗi bản ghi, được gọi là ô, có thể bao gồm các mục, đầu trang và chân trang.

Vì lý do hiệu suất, Virtual Scroll sẽ chỉ tạo các phần tử DOM hiển thị cho người dùng. Khi người dùng cuộn lên hoặc cuộn ngược lại, nó sẽ tự động thêm và hủy các phần tử, dẫn đến chỉ tạo ra các phần tử DOM hiển thị cho người dùng. Điều này chắc chắn sẽ cải thiện hiệu suất trang web của bạn tăng lên đáng kể.

Bài toán thực tế

Như chúng ta đã biết thì nếu website càng nhiều thẻ HTML thì trình duyệt sẽ render càng chậm. Điều này đặc biệt rõ ràng nếu bạn dùng các thiết bị như điện thoại hay máy tính cấu hình yếu để truy cập.

Điều này rõ ràng là không ổn nếu như chúng ta có 50, 100 hay thậm chí là 1000 item chẳng hạn. Vậy nên Virtual Scroll sinh ra để giải quyết vấn đề đó.

Vậy Virtual Scroll làm việc như thế nào?


Bạn có thể hình dung chúng ta có một vùng chứa chứa các nội dung bên trong Chúng ta có thể cuộn vùng chứa để di chuyển nội dung lên xuống. Giả sử chúng ta có 1 list chứa 100 item cần hiển thị ra trinh duyệt, để tránh việc hiển thị 100 item cùng 1 lúc thì chúng ta có thể dùng Lazy load, nhưng khuyết điểm của Lazy load là khi bạn scroll càng về cuối danh sách thì sẽ càng lag vì lúc này cây DOM đã trở nên lớn hơn rất nhiều.

Virtual Scroll cho phép chúng ta chỉ hiển thị một vài item trên cây DOM dù cho bạn có scroll đến đâu đi chăng nữa. Việc bạn nhìn thấy thanh scroll trên trình duyệt là do Javascript đã xử lý và tạo ra thanh scroll ảo cho bạn, scroll đến đâu thì các item sẽ được render lại đến đó.

Rất hữu ích phải không nào

Hạn chế của Vitual Scroll

  • Thay đổi kích thước cột, đặt chiều rộng cho các cột riêng lẻ, điều này ảnh hưởng đến phép tính được sử dụng để chọn đúng trang khi cuộn.
  • Phân nhóm, mất thêm thời gian để tách các mục thô thành định dạng được cung cấp.
  • Định dạng ngày, cần thêm thời gian để chuyển đổi định dạng ngày.
  • Định dạng ngày với sắp xếp, ở đây, định dạng ngày giờ đầy đủ bổ sung nên được đóng khung để thực hiện sắp xếp cùng với định dạng ngày được cung cấp làm chậm hiệu suất.

Áp dụng

Để áp dụng Virutal Scroll thì chúng ta thường dùng thư viện.Angular có thể tham khảo Angular Material, Vue thì Vuetify, React có React Virutalized.
Đây là các thư viện nổi bật hỗ trợ rất tốt cho Virtual Scroll.

Tạm kết

Qua bài viết này, hi vọng mọi người nắm được vai trò cũng như lợi ích của Virual Scroll để áp dụng vào trang web của mình sau này.

Bình luận

Bài viết tương tự

- vừa được xem lúc

MOSH: Kẻ hủy diệt SSH

Lời nói đầu. Lời đầu tiên xin được xin chào cả nhà, đã lâu lắm rồi mình không viết blog nay May Fest mà người iu mình thích cái áo viblo quá nên xin phép nổ phát súng trên Viblo về Mosh - thứ khá hay

0 0 138

- vừa được xem lúc

Vòng đời và trạng thái của Thread

A. Giới thiệu.

0 0 137

- vừa được xem lúc

Giải quyết vấn đề N+1 trong quan hệ cha - con vô tận bằng Eager Loading

Vấn đề. Trong khi phát triển ứng dụng, chắc hẳn các bạn đã gặp phải trường hợp đệ quy cha-con trong khi phát triển các dự án, ví dụ như cây thư mục như sau:.

0 0 182

- vừa được xem lúc

Bạn tổ chức thư mục views cho các dự án Laravel như thế nào?

Hầu hết các ứng dụng Laravel có rất nhiều views. Một ứng dụng nhỏ sẽ không xảy ra vấn đề gì cả, tuy nhiều nếu dự án lớn dần theo thời gian, chúng ta sẽ gặp bế tắc trong việc tổ chức và sắp xếp các vie

0 0 202

- vừa được xem lúc

Sự khác nhau giữa những điều tưởng giống nhau - Phần 3

Hôm nay, để tiếp tục cho series so sánh, hãy cùng mình khám phá thêm 2 địa danh mới khá nổi tiếng của Việt Nam mình đó là Cù Lao Chàm và đảo Lý Sơn. .

0 0 112

- vừa được xem lúc

Một số thuật toán sắp xếp

Chắc hẳn ngồi trên ghế giảng đường đại học thì ai cũng sẽ được làm quen với thuật toán. Nghe thì thật là trừu tượng và mơ hồ, nhưng để tối ưu hóa những bài toán đặt ra thì bắt buộc các bạn phải học đế

0 0 175