Về hiệu năng của React Native / Weex
Ngày cập nhật: 2017-11-03 Số lần đọc: 15288 Chủ đề: weex
Tìm kiếm
Hầu hết nội dung được dịch từ
Lý do quan trọng khiến chúng ta chọn React Native thay vì WebView là để đạt được tốc độ 60 khung hình/giây, đảm bảo giao diện vừa mượt mà vừa mang lại trải nghiệm không khác biệt so với ứng dụng gốc.
Số lượng khung hình hiển thị trên giây (FPS) quyết định độ mượt mà của giao diện. Thiết bị iOS thường chạy ở 60 FPS, nghĩa là bạn và hệ thống UI chỉ có 16.67ms để hoàn tất mọi công việc 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 giật hình (dropped frame), khiến người dùng cảm giác giao diện phản hồi chậm trễ.
Tốc độ khung hình JS (Luồng JavaScript)
Đối với đa số ứng dụng React Native, các logic nghiệp vụ sẽ chạy trên luồng JavaScript.
Ví dụ, khi bạn gọi this.setState trong component gốc của một ứng dụng phức tạp, điều này có thể kích hoạt việc render lại hàng loạt component con. Nếu quá trình này mất khoảng 200ms sẽ khiến mất 12 khung hình. Trong khoảng thời gian đó, mọi animation do JavaScript điều khiển sẽ bị đóng băng. Thậm chí chỉ cần chậm hơn 100ms người dùng cũng đã cảm nhận được độ trễ.
Hiện tượng này thường xảy ra với animation chuyển cảnh trong Navigator: Khi bạn push một route mới, luồng JS cần render toàn bộ component cần thiết để gửi sang Native tạo View. Các công việc này có thể kéo dài qua vài khung hình, gây giật lag trong khi animation chuyển cảnh đang chạy. Đôi khi component còn thực hiện thêm công việc phụ trong componentDidMount khiến tình trạng trở nên nghiêm trọng hơn.
Một ví dụ khác là sự kiện nhấn (press event) - nếu luồng JS đang bận rộn, sự kiện nhấn sẽ không được phản hồi kịp thời.
Những vấn đề hiệu năng thường gặp
console.log
Không cần nói nhiều về vấn đề này.
Nhật ký ghi lỗi (Debug logs)
Khi kiểm tra hiệu năng, bắt buộc phải sử dụng bản release hoặc tắt toàn bộ log debug.
Có một bài học đắt giá khi làm với Weex: Trang chủ ứng dụng có 4 tabbar, bản debug chạy rất giật lag trên một số điện thoại, nhưng lại mượt mà trên những thiết bị yếu hơn (CPU yếu hơn, RAM ít hơn). Tuy nhiên khi dùng bản release (không log debug), mọi thiết bị đều hoạt động mượt mà. Điều này cho thấy sự khác biệt lớn về hiệu năng I/O giữa các thiết bị, đồng thời cảnh báo rằng log debug ảnh hưởng nghiêm trọng đến hiệu năng I/O.
Sử dụng công cụ phân tích systrace
|
|
Cách khắc phục: Tắt máy ảo giả lập (emulator).
Tuy nhiên mình thực sự không hiểu nổi bản phân tích được sinh ra trông như thế nào…