React Native Performance - Cải thiện hiệu năng sử dụng trên ứng dụng React native

Để tối ưu được performance, cải thiện tốc độ ứng dụng xây dựng bằng React Native, đảm bảo được trải nghiệm mượt mà cho người dùng thì bài viết dưới đây sẽ nêu lên một số vấn đề và cách cải thiện những vấn đề đó.

Sử dụng FlatList cho danh sách

Mọi ứng dụng sẽ có một vài màn hình chứa danh sách thông tin, có thể là sản phẩm, địa chỉ, ghi chú,… 

Nếu danh sách chỉ có vài chục hoặc tới vài trăm dòng thì với ScrollView của React Native đã làm đủ tốt để performance được mượt nhất mỗi lần hiển thị. Tuy nhiên đối với lượng dữ liệu lớn, cuộn vô hạn thì cần tới FlatList. FlatList là một thành phần chuyên dụng trong React Native để hiển thị và làm việc với các cấu trúc dữ liệu như thế này.

Hình ảnh minh họa cho cấu trúc dữ liệu

Trong ví dụ trên, với item giả định lên tới 5000 items, thì với ScrollView, thậm chí không thể cuộn trơn tru so với dùng FlatList. 

Mấu chốt tạo nên sự khác nhau đó nằm ở logic được trừu tượng hoá bên dưới phần xử lý của FlatList. Nó chứa rất nhiều heuristics và các tính toán JavaScript nâng cao để giảm lượng kết xuất không liên quan xảy ra khi hiển thị dữ liệu trên màn hình và để làm trải nghiệm cuộn luôn chạy ở 60 FPS.

Bên cạnh đó nếu chỉ dùng FlatList như vậy thì với lượng dữ liệu tăng lên, performance vẫn chưa thể đảm bảo được. Do vậy, FlatList có cung cấp một số các props để có thể tối ưu tốt hơn, một số props hữu ích dưới đây:

• RemoveClippedSubviews: Khi sử dụng props này, FlatList có thể loại bỏ các thành phần không nằm trong tầm nhìn, nghĩa là các item mà không nằm trong vùng nhìn scroll đã bị xoá đi.

=> Ưu điểm: Thân thiện với bộ nhớ, vì sẽ luôn có một lượng nhỏ các mục được hiển thị thay vì toàn bộ danh sách.

=> Nhược điểm: Có thể lỗi nếu nội dung thiếu.

• MaxToRenderPerBatch: Đây là props có thể kiểm soát số lượng mục được hiển thị mỗi đợt, mặc định là 10.

=> Ưu điểm: Nếu truyền vào props này số lượng lớn hơn có nghĩa là các blank area trực quan ít hơn khi cuộn (tỷ lệ lấp đầy tốt hơn).

=> Nhược điểm: Nhiều mục hơn mỗi đợt. Nghĩa là performance javascript ít hơn, và responsiveness phản hồi kém hơn, nếu muốn sử dụng props này thì nên chọn các list không có sự tương tác.

• UpdateCellsBatchingPeriod: Props này sẽ nói với VirtualizedList của React Native về độ trễ giữa các lần hiển thị hàng loạt, tính bằng mili giây. Nói cách khác, nó xác định tần suất thành phần sẽ hiển thị. Mặc định là 50.

=> Ưu điểm: Có thể kết hợp với maxToRenderPerBatch để mang lại một sự hoàn hảo.

=> Nhược điểm: Batches ít thường xuyên hơn có thể gây ra các khu vực trống. Batches thường xuyên hơn có thể gây ra phản ứng và giảm hiệu suất.

• InitialNumToRender: Số lượng ban đầu của các mục được hiển thị. Mặc định là 10

=> Lưu ý: Nên cân nhắc để chọn cho hợp lý đảm bảo hiển thị ra tốt nhất.

Cân nhắc trước khi chọn một thư viện bên ngoài

Thư viện bên ngoài tương tác với React Native

Không như một ứng dụng gốc hoàn toàn, một ứng dụng React Native chứa một gói JavaScript cần được tải vào bộ nhớ. Sau đó, nó được phân tích cú pháp và thực thi bởi JavaScript VM. Kích thước tổng thể của mã JavaScript là một yếu tố quan trọng.

Phương pháp cài đặt thông thường

Trong khi điều đó xảy ra, ứng dụng vẫn ở trạng thái tải. Quá trình này là TTI - time to interactive. Đó là khoảng thời gian được biểu thị bằng mili giây từ khi chọn icon ứng dụng tới khi hiển thị đầy đủ ứng dụng để tương tác. Có nghĩa là tất cả mã mà kéo từ ‘npm' và nhập vào dự án của bạn sẽ có trong gói sản xuất, được tải vào bộ nhớ và được phân tích cú pháp.

Điều đó ảnh hưởng tiêu cực tới tổng thời gian khởi động ứng dụng.

Giải pháp cho vấn đề này là hãy chọn lọc và sử dụng các thư viện chuyên biệt, dung lượng nhỏ hơn mà vẫn đảm bảo sử dụng.

Nếu bạn chuẩn bị kéo một thư viện phức tạp, có dung lượng tầm trung tới lớn, hãy kiểm tra xem có các lựa chọn thay thế nhỏ hơn mà có chức năng bạn đang tìm kiếm không.

Đây là một ví dụ, một trong những thao tác phổ biến nhất là thao tác với ngày tháng. Hãy tưởng tượng bạn sắp tính toán thời gian đã trôi qua (có thể xem thêm trong phần để xử lý lấy bước chân đi bộ - link bài viết a Trà). Thay vì kéo toàn bộ thư viện moment.js xuống (72,3 Kb) để phân tích cú pháp:

Ta có thể sử dụng day.js (chỉ 2 Kb) nhỏ hơn đáng kể và chỉ cung cấp chức năng mà ta đang tìm kiếm

Nếu không có lựa chọn thay thế, nguyên tắc chung là kiểm tra xem có thể nhập một phần nhỏ hơn của thư viện hay không. Ví dụ, nhiều thư viện như lodash đã tự phân chia thành các bộ tiện ích nhỏ hơn và các môi trường hỗ trợ mà loại bỏ mã chết không khả dụng.

Giả sử bạn muốn sử dụng bản đồ Lodash, thay vì nhập toàn bộ thư viện, bạn chỉ cần nhập 1 gói duy nhất.

Có thể hưởng lợi từ các tiện ích là một phần của gói Lodash mà không cần kéo tất cả vào gói ứng dụng. Mặc dù điều này chỉ tiết kiệm được vài mili giây, nhưng khi gộp tất cả lại sẽ thành lợi nhuận đáng kể, giúp trải nghiệm mượt mà hơn, performance cũng được tối ưu hơn

Sử dụng Animate ở 60FPS không có vấn đề gì

Số lượng hình ảnh kết xuất mỗi giây 

Trong thế giới ứng dụng ngày nay, việc cung cấp giao diện người dùng mượt, tối ưu hóa tương tác và trải nghiệm đối với ứng dụng là cách duy nhất để có thể thu hút khách hàng. Người dùng di động thích các giao diện trông đẹp mắt nhất và đảm bảo các hình ảnh động luôn chạy trơn tru.

Đối với animation chỉ chạy một lần: 

Bật trình điều khiển gốc (native driver) là cách dễ nhất để cải thiện performance của màn hình sử dụng animation đó.

Để có thể bật trình điều khiển gốc, thêm thuộc tính useNativeDriver: true như trên.

Ngoài ra có thể sử dụng thư viện React Native Reanimated. Nó có những API tương thích với thư viện Animated, cùng với một tập hợp các hàm để kiểm soát tốt nhất những animation.

Đối với những animation được chạy bằng sự tác động của người dùng 

Kết quả mong muốn nhất có thể đạt được với animation là có thể điều khiển các animation bằng cử chỉ. Đối với khách hàng, đây là phần thú vị nhất của giao diện.

Đối với các trường hợp sử dụng phức tạp, có một thư viện tuyệt vời - React Native Gesture Handler - cho phép xử lý các cử chỉ khác nhau một cách nguyên bản và nội suy các cử chỉ đó thành hình ảnh động. Bạn có thể tạo một phần tử có thể vuốt đơn giản bằng cách kết hợp với Animated. Tuy nhiên, nó vẫn sẽ yêu cầu các lệnh gọi lại JavaScript, nhưng có một giải pháp cho điều đó!

Bộ đôi công cụ mạnh mẽ nhất cho animation theo hướng cử chỉ là việc sử dụng Gesture Handler kết hợp với Reanimated. Chúng được thiết kế để làm việc cùng nhau và cung cấp khả năng xây dựng các hoạt ảnh theo hướng cử chỉ phức tạp được tính toán đầy đủ. 

Hạn chế duy nhất ở đây là imagination của bạn (và coding skills, vì API cấp thấp của Reanimated không đơn giản như vậy).

Không có một cách nào đúng để thực hiện animation trong React Native. Hệ sinh thái có đầy đủ các thư viện và cách tiếp cận khác nhau để xử lý các tương tác. 

Những ý tưởng được đề xuất trong phần này chỉ là những khuyến nghị để khuyến khích bạn không nên coi giao diện mượt mà là điều hiển nhiên. Điều quan trọng nhất là chọn cách xử lý chúng phù hợp. 

Có những trường hợp animation hướng JavaScript sẽ hoạt động tốt. Đồng thời, có những tương tác trong đó animation gốc sẽ là cách duy nhất để bạn làm cho nó trở nên mượt mà. Với cách tiếp cận như vậy, ứng dụng bạn tạo ra sẽ mượt mà và linh hoạt hơn.

Trên đây là một vài cách để giúp lập trình viên có thể tối ưu thêm một chút để có thể giúp cho người dùng có thể có những trải nghiệm tốt hơn, performance của ứng dụng cải thiện hơn. Tuy đây chỉ mới giới thiệu chưa sâu nhưng bạn có thể bắt đầu từ đây để tìm hiểu sâu hơn và giải quyết các vấn đề một cách hiệu quả nhất.

Nếu bạn đang tìm đối tác phát triển ứng dụng sử dụng React Native, hãy Liên hệ với Rabiloo. Với 5+ năm kinh nghiệm thiết kế ứng dụng cho doanh nghiệp lớn tại Nhật Bản, chúng tôi tự tin đáp ứng được mong muốn của bạn.