Tối ưu render React Component với React-lazyload

react-lazyload react-lazyload

  Giả sử tại một trang, bạn render ra danh sách 100 items trong khi màn hình của user chỉ hiển thị được tối đa 3 items thôi, việc này sẽ làm giảm lãng phí thời gian render và xử lý 97 component chưa thực sự hữu dụng, giảm performance của React.

Thay vào đó chúng ta chỉ cần render ra 3 items đầu ( hero component) sau đó sử dụng react-lazyload để render ra component còn lại khi user scroll.

Hero Component là những Components cần được render ra sớm nhất có thể để xoa dịu thời gian chờ đợi tải trang của người dùng. ( user-centric performance metrics )

Render khi không có Lazy

render react without lazyloadrender react without lazyload

Mỗi component article của mình chứa rất nhiều elements con, chưa kể còn có hình ảnh nữa, ở ngoài browser thì chỉ hiện thị được 3 components có ý nghĩa với người dùng thôi, còn lại coi như bỏ.

Việc render ra hết một list mấy chục item + tải resource (ảnh,gif, video....) sẽ làm giảm performance , tăng thời gian render lúc đầu và Time To Interract. 

Nói qua cũng nói lại, nếu bạn render tất cả lúc đầu, khi user scroll thì sẽ không cần phải đợi nữa vì tất cả đã được tải xuống và render ra lúc đầu. Đúng nhưng đây là bước cuối cùng trong vòng đời của một ứng dụng React, mình luôn làm mọi cách để tối ưu thời gian tải trang, làm sao để trang web có thể hiển thị nội dung sớm nhất có thể.

Một khi Hero Component đã render, user sẽ đỡ cảm thấy bực bội vì phải chờ lâu, lúc này khi scroll để tải tiếp những nội dung khác cũng chẳng đáng là bao.

Render với React-lazyload

render react with lazyloadrender react with lazyload

Khi loazyload component, mình sử dụng 2 component đầu tiền làm Hero Component, còn lại mình sẽ lazyload và render khi user scroll xuống.

Như bạn thấy trong hình thì những component được wrap bởi lazyload chỉ render ra thẻ <div className="lazyload-placeholder"> và không có bất kì childNodes nào được render bên trong, khi bạn scroll xuống thì react-lazyload mới bắt đầu render ra component được wrap bên trong.

react-lazyloadreact-lazyload

Install React-lazyload

Benchmark performance 

Mình đặt hàm checktime để kiểm trả xem React mất bao lâu để render ra một list khi có lazyload và không có lazyload.

🎄🎁🎄🎁🎄🎁🎄🎁🎄

Không có react-lazyload:

benchmark render without react-lazyloadbenchmark render without react-lazyload

Thiếu vắng React-lazyload ứng dụng của mình mất 120ms để render toàn bộ danh sách bài viết.

Render với react-lazyload:

benchmark render with react-lazyloadbenchmark render with react-lazyload

React-lazyload đã đến và tối ưu thời gian render danh sách xuống còn 51ms.

Trong trường hợp component của bạn chứa nhiều component con, hình ảnh, logic thì lazyload sẽ improve thời gian nhiều hơn nữa.

Kết bài

Đây chỉ là một trong những cách để tối ưu render một ứng dụng React, React cung cấp API cho việc tối ưu render như React.memo để ngăn chặn việc re-render không cần thiết.

Đăng kí vào codefun và theo dõi mình để đón xem những bài viết tiếp theo cũng mình nha.

Tham khảo

  • react
  • lazyload
  • javascript
Loading
Đăng nhập để bình luận