hình ảnh động CSS3 Performant (Simple hoạt hình vẫn không performant trong Công cụ nhà phát triển Chrome)

Question

Tôi đang phải vật lộn với việc tìm kiếm một cách để thực hiện chuyển đổi trang CSS thực hiện tốt trong google chrome.

Trong các công cụ nhà phát triển Chrome trên timeline tôi nhận thấy một số dấu hiệu đỏ và tất cả họ đều nói cùng một điều: lần khung Long là một dấu hiệu của JANK và hiệu suất render nghèo. Đọc thêm tại hướng dẫn Cơ bản về hiệu suất hiển thị trên web.

Trên ứng dụng mà tôi đã làm việc trên dường như VN và tôi đã cố gắng để điều tra, nhưng không thể tìm nguồn.

Tôi đã làm một bản demo đơn giản hơn và tôi vẫn nhận được đánh dấu màu đỏ: http://codepen.io/anything/full/qOOpza/

.page { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#ccc; 
    &--1 { 
    background:green; 
    } 
    &--2 { 
    background: yellow; 
    } 
    &.moveToRight { 
     animation: moveToRight ease .5s; 
     animation-fill-mode: forwards; 
    } 

    &.moveToLeft { 
     animation: moveToLeft ease .5s; 
     animation-fill-mode: forwards; 
    } 
} 


@keyframes moveToRight { 
    from { } 
    to { transform: translateX(100%); } 
} 

@keyframes moveToLeft { 
    from { } 
    to { transform: translateX(0); } 
} 

Answer 1

Tôi đã được chơi đùa với bản demo ytour, và tôi thấy 2 vấn đề:

Đầu tiên, thay đổi từ dịch sang translate3d cải thiện (ít nhất là trong hệ thống của tôi) một chút hiệu suất. Vì vậy, hãy viết điều này

@keyframes moveToRight { 
    from {  transform: translate3d(0%, 0px, 0px); } 
    to {  transform: translate3d(100%, 0px, 0px); } 
} 

là tốt hơn. (Điều này đã được nói nhiều lần trước đây, nhưng nó luôn luôn là tốt để kiểm tra).

Ngoài ra, một tài sản mới sẽ giúp phần nào. thiết lập

sẽ thay đổi: chuyển đổi;

nên chuẩn bị trình duyệt cho một sự thay đổi trong tương lai tại khách sạn này. Nhưng tôi đã không thể thấy bất kỳ sự khác biệt nào.

Thứ hai, có vẻ là một vấn đề trong cách Chrome tập hợp thống kê. Bạn đã bật "Ảnh chụp màn hình". Và điều này có vẻ là nguyên nhân chính của sự chậm trễ, thời gian mà Chrome cần hiển thị và lưu trữ ảnh chụp màn hình.

Theo định nghĩa, thời gian cần thiết bởi công cụ hiệu suất để thực hiện công việc không được tính được tính toán trong phân tích. Nhưng điều này dường như không phải là trường hợp ở đây ... Tôi sẽ nói đây là một lỗi.

Ít nhất là trong trường hợp của tôi, thay đổi cả hai vấn đề làm cho các dấu hiệu màu đỏ gần như biến mất

Và, trong khung đánh dấu còn lại, dường như không có bất kỳ vấn đề hiệu suất. Chú ý trong ảnh chụp màn hình rằng thời lượng khung hình là 25,57 ms, nhưng thời gian của CPU là 1,239 ms.