Bố cục và kết xuất 60 khung hình/giây
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Việc đạt được 60 khung hình/giây trong các dự án của bạn có mối tương quan trực tiếp với mức độ tương tác của người dùng và rất quan trọng đối với sự thành công của dự án đó. Trong buổi nói chuyện này, Nat và Tom đã nói về quy trình kết xuất của Chrome, một số nguyên nhân phổ biến gây ra việc khung hình bị bỏ qua và cách tránh chúng.
Trang trình bày
- Một khung dài 16 mili giây. Nó chứa JavaScript, tính toán kiểu, hội hoạ và tổng hợp.
- Tranh vẽ cực kỳ tốn kém. Paint Storm là nơi bạn lặp lại công việc sơn một cách không cần thiết.
- Lớp được dùng để lưu các phần tử được vẽ vào bộ nhớ đệm.
- Trình xử lý đầu vào (trình nghe thao tác nhấn và con lăn chuột) có thể loại bỏ khả năng phản hồi; hãy tránh chúng nếu có thể. Trong trường hợp bạn không thể giữ chúng ở mức tối thiểu.
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-07-25 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-07-25 UTC."],[],["Maintaining 60fps is vital for user engagement. The rendering pipeline involves JavaScript, styling, painting, and compositing within a 16ms frame. Painting is resource-intensive, particularly in \"Paint Storms,\" where it's repeatedly done unnecessarily. Layers cache painted elements to reduce this burden. Input handlers, such as touch and mousewheel listeners, can significantly impact responsiveness; thus, their usage should be minimized.\n"]]