Về hiệu suất của React Native Weex - quay hu

Lý do chính để sử dụng React Native thay vì WebView là nhằm đạt được tốc độ 60 khung hình mỗi giây, đảm bảo giao diện về mặt thị giác và trải nghiệm người dùng không khác gì so với ứng dụng gốc.

Những điều cần biết về frames

Số lượng khung hình hiển thị trong một giây quyết định mức độ mượt mà của giao diện. Thiết bị iOS hiển thị 60 khung hình mỗi giây, có nghĩa là bạn và hệ thống giao diện chỉ có 16,67ms để hoàn thành tất cả công việc cần thiết để tạo ra một khung hình tĩnh. Nếu vượt quá thời gian này, sẽ xảy ra hiện tượng mất khung hình (dropped frames), khiến người dùng cảm thấy giao diện không phản hồi kịp thời.

Tốc độ khung hình JS (JavaScript thread)

Đối với hầu hết các ứng dụng React Native, logic kinh doanh của bạn sẽ chạy trên luồng JavaScript. Ví dụ, nếu bạn gọi this.setState trong thành phần gốc của một ứng dụng phức tạp, điều này có thể dẫn đến việc tái render hàng loạt các thành phần con, có thể tiêu tốn tới 200ms, dẫn đến mất đi 12 khung hình. Trong khoảng thời gian đó, bất kỳ hoạt ảnh nào được kiểm soát bởi JavaScript đều sẽ bị đóng băng. Khi vượt quá 100ms, người dùng có thể nhận thấy sự chậm trễ.

Tình trạng này thường xảy ra trong các hoạt ảnh chuyển cảnh của Navigator: khi bạn push một route mới, luồng JavaScript cần phải render quay hu tất cả các thành phần cần thiết trước khi truyền chúng cho phần bản địa để tạo view. Công việc này có thể kéo dài qua vài khung hình, dẫn đến hiện tượng giật lag, đặc biệt khi hoạt ảnh chuyển cảnh được kiểm soát bởi luồng JavaScript. Thỉnh thoảng, các thành phần cũng có thể thực hiện thêm công việc trong phương thức componentDidMount, làm tăng khả năng xuất hiện tình trạng lag.

Một ví dụ khác là sự kiện VSBET click: giả sử luồng JavaScript đang bận rộn, lúc này sự kiện click của bạn sẽ không được phản choi game ban ca hồi kịp thời.

Các vấn đề hiệu suất phổ biến:

Sử dụng console.log

Không cần phải nói nhiều về vấn đề này, việc sử dụng console.log quá nhiều có thể gây ra chậm trễ đáng kể trong luồng JavaScript.

Nhật ký Debug

Khi kiểm tra hiệu suất, hãy chắc chắn rằng bạn đang sử dụng gói release hoặc tắt tất cả nhật ký debug. Một bài học xương máu từ dự án Weex: trang chủ có bốn tabbar, phiên bản debug trên một số điện thoại gặp hiện tượng giật lag khi chuyển đổi tab, nhưng lại rất mượt trên một số điện thoại cấu hình thấp hơn (CPU yếu hơn, bộ nhớ nhỏ hơn). Tuy nhiên, khi sử dụng phiên bản release (không có nhật ký debug), mọi thứ đều trở nên mượt mà. Điều này chứng tỏ rằng hiệu suất IO giữa các loại điện thoại khác nhau chênh lệch rất lớn, và nhật ký debug có thể tác động mạnh mẽ đến hiệu suất IO.

Sử dụng công cụ phân tích Systrace

cd ./Library/Android/sdk/platform-tools/systrace
python --time=10 -o trace.html sched gfx view -a <com.sunzhongwei.app>
error: more than one device/emulator

Hãy tắt trình mô phỏng để tránh xung đột. Tuy nhiên, tôi thực sự khó hiểu khi đọc các biểu đồ phân tích được tạo ra bởi công cụ này...