Xác định nguyên nhân của các khung hình thả xuống sử dụng hoạt ảnh CSS3

Question

Tôi đang cố gắng xác định nguyên nhân gây chậm hoạt động cực độ trong hoạt ảnh. Như bạn có thể thấy (bên dưới) thời gian sơn đôi khi tăng đột biến và khiến tốc độ khung hình giảm xuống còn < 15 khung hình/giây.

Tôi không thể hiển thị trang web, nhưng tôi có thể cho bạn biết rằng đó là không trọng lượng nhẹ ở mặt trước, đó là một trang web giới thiệu thiết kế, vì vậy có rất nhiều hình ảnh động lớn từ bên ngoài chế độ xem- Hải cảng. Tôi cần phải thiết lập cho dù đây chỉ là một cái gì đó họ sẽ phải đối phó với hoặc nếu bất cứ điều gì có thể được thực hiện để giảm thời gian sơn.

Tất cả hoạt ảnh được thực hiện bằng cách sử dụng các chức năng translate(). CSS cho tập hợp hoạt ảnh cụ thể này theo:

.page { 
    height: 100%; 
    position: absolute !important; 

    -webkit-transform: translateY(100%); 
    transform: translateY(100%); 

    /** 
    * Override ng-animate-block-transition on this element. Has an important declaration. 
    */ 
    -webkit-transition: transform ease-in-out 0.5s !important; 
    transition: transform ease-in-out 0.5s !important; 
} 

.page.ng-show { 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
} 

.animate-in-enter-complete .page-peak .page.ng-show { 
    -webkit-transform: translateY(-3%); 
    transform: translateY(-3%); 
} 

.animate-in-enter-complete .page-peak .page.page-next { 
    -webkit-transform: translateY(95%); 
    transform: translateY(95%); 
} 

Và đây là tiểu sử mà tôi đã làm cho hoạt ảnh cụ thể này. Các lớp gốc là #document, tôi là loại mới cho những công cụ này, nhưng điều đó có nghĩa là nó lại vẽ toàn bộ cây DOM?

Làm cách nào để tìm hiểu nguyên nhân gây ra điều đó?

Answer 1

Tối ưu hóa chỉ là đoán mà không có một trang để xem xét, nhưng tôi có thể cung cấp cho bạn một vài suy nghĩ rằng có thể có ích.

Thuộc tính CSS transform và opacity không kích hoạt bố cục hoặc sơn. Việc hoạt ảnh được JavaScript hoặc CSS xử lý không quan trọng. Một cái gì đó khác hơn là transform phải gây ra nó. Danh sách đầy đủ công việc được kích hoạt bởi các thuộc tính CSS riêng lẻ có thể được tìm thấy tại CSS Triggers và bạn có thể tìm thấy hướng dẫn đầy đủ về cách tạo High Performance Animations trên Đá HTML5. Tôi đoán là bạn có thể làm được rất nhiều việc làm cho cây, bố trí và tối ưu hóa sơn.

Sử dụng will-change để đảm bảo rằng trình duyệt biết bạn dự định tạo hoạt ảnh gì. Thuộc tính sẽ thay đổi cho phép bạn thông báo trước cho trình duyệt về những loại thay đổi bạn có thể thực hiện đối với một phần tử, để nó có thể thiết lập các tối ưu hóa thích hợp trước khi chúng cần thiết. Các yếu tố có thể được thay đổi và hiển thị nhanh hơn, mang lại trải nghiệm mượt mà hơn. Trong trường hợp của mẫu của bạn, thêm ý chí thay đổi cho biến đổi trông như thế này:

.page { 
    will-change: transform; 
} 

Lưu ý: Không sử dụng will-change vào quá nhiều yếu tố, nó sẽ gây ra điều ngược lại. Hiện tại Chrome, Firefox và Opera hỗ trợ tính năng này. Dường như nhận được hỗ trợ từ tất cả các trình duyệt hiện đại in the future.

Answer 2

Một số tính năng CSS3 mới có thể được thực sự nặng:

• box-shadow kết hợp với border-radius
• filter (màu xám, mờ, độ tương phản, ...)
• transform
• ...

Bằng cách bật lại liên tục, bạn có thể xem quy tắc là gì sử dụng tải này khi vô hiệu hóa nó.Xem this post

Nếu bạn thấy rằng đó là chuyển đổi đang gây ra tải này, có thể là do tăng tốc phần cứng không được trình duyệt sử dụng. Bạn có thể ép buộc bằng cách sử dụng hiển thị 3D sẽ không ảnh hưởng đến quá trình chuyển đổi của bạn. Một trong các quy tắc này có thể thực hiện thủ thuật:

transform: translateZ(0); 
/* or */ 
transform: translate3d(0,0,0); 
/* or */ 
perspective: 1000; 
backface-visibility: hidden; 

Nếu không, bạn có thể suy nghĩ lại về việc tích hợp bằng cách tự hỏi nguyên tắc tải có thực sự cần thiết hay không.

Answer 3

23 giây để vẽ một hình ảnh hơi quá nhiều. Họ không cần phải "đối phó với nó", chỉ để tìm lỗi. Bởi vì có một lỗi, trong mã, trong thiết kế (2337 hình ảnh trong một trang, chẳng hạn), hoặc ở một nơi khác.

Nếu không thể xem trang web, cũng không phải là một fiddle ẩn danh sao chép hành vi của nó, thậm chí cả HTML (!) Và không biết số lượng hình ảnh, kích thước của chúng, v.v ...