Tối ưu render Component React với React-lazyload
reactjs
48
performance
7
lazy
2
White

Lý Thành Nhân viết ngày 30/10/2019

https://codefun.dev/mrfrenkyztiny/toi-uu-render-component-react-voi-reactlazyload-2033931367

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

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

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.

Install React-lazyload

npm install react-lazyload --save

// import và sử dụng 

import Lazy from "react-lazyload"

// Render component

<Lazy>
     <YourComponent/>
</Lazy>

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:

const RenderPost = ({data = [], start = 0, history, offset = 1}: any) => {
  console.time('renderTime');
  React.useEffect(() => {
    console.timeEnd('renderTime');
  }, []);
}
  return (
    <PostCol>
      {data.map((item: IPostItem) => {
        return (
            <PostImage
              {...post}
              key={post.title_id}
            />
        )
      })}
    </PostCol>
  );
};


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:

const RenderPost = ({data = [], start = 0, history, offset = 1}: any) => {
  console.time('renderTime');
  React.useEffect(() => {
    console.timeEnd('renderTime');
  }, []);
}
  return (
    <PostCol>
      {data.map((item: IPostItem) => {
        return (
          <Lazy offset={[-50, 0]} height={200} once={true}>
            <PostImage
              {...post}
              key={post.title_id}
            />
          </Lazy>
        );
      })}
    </PostCol>
  );
};

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.

Tham khảo

https://codefun.dev/@mrfrenkyztiny/toi-uu-render-react-component-voi-reactlazyload-2033931367

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Lý Thành Nhân

5 bài viết.
26 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
19 7
Từ Visual Studio Code đến NeoVim Chắc hẳn các bạn đã nghe qua Vim hay từng sử dụng Vim, NeoVim chính là phiên bản cải tiến của Vim. Vim hay NeoVim...
Lý Thành Nhân viết 4 tháng trước
19 7
White
5 2
Ở bài trước mình đã nói về quá trình mình chuyển từ Visual Studio Code sang NeoVim và những lợi ích của NeoVim (Link) .Hôm nay mình sẽ hướng dẫn cá...
Lý Thành Nhân viết 4 tháng trước
5 2
White
5 2
Để tối ưu ứng dụng web một cách hiệu quả, các bạn cần nắm được vòng đời của một ứng dụng, từ lúc request được gửi đi từ browser cho đến khi browser...
Lý Thành Nhân viết 1 tháng trước
5 2
Bài viết liên quan
White
0 0
Performance regression in ActiveRecord model instance creation in Rails 4.1.x When you guys met the performance issue in Rails 4.1.x. And after be...
Luu Nguyen viết hơn 3 năm trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
26 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!