cái gì -webkit-biến đổi: translate3d (0,0,0); chính xác làm gì? Áp dụng cho cơ thể?

những gì -webkit-transform: translate3d(0,0,0); làm chính xác? Nó có bất kỳ vấn đề hiệu suất nào không? Tôi chỉ nên áp dụng nó cho cơ thể hoặc các yếu tố riêng lẻ? Nó dường như cải thiện đáng kể các sự kiện cuộn.

Cảm ơn vì bài học!

-webkit-transform: translate3d(0,0,0); làm cho một số thiết bị chạy tăng tốc phần cứng của chúng.

Một bài đọc hay được tìm thấy Tại đây

Các ứng dụng gốc có thể truy cập đơn vị xử lý đồ họa (GPU) của thiết bị để làm cho pixel bay. Mặt khác, các ứng dụng web chạy trong ngữ cảnh của trình duyệt, cho phép phần mềm thực hiện hầu hết (nếu không phải tất cả) việc hiển thị, dẫn đến ít mã lực hơn cho quá trình chuyển đổi. Nhưng Web đã bắt kịp và hầu hết các nhà cung cấp trình duyệt hiện cung cấp khả năng tăng tốc phần cứng đồ họa bằng các quy tắc CSS cụ thể.

Việc sử dụng -webkit-transform: translate3d(0,0,0);sẽ thúc đẩy GPU hoạt động cho các chuyển đổi CSS, làm cho chúng mượt mà hơn (FPS cao hơn).

Lưu ý: translate3d(0,0,0) không làm gì về những gì bạn thấy. nó di chuyển đối tượng 0px theo trục x, y và z. Nó chỉ là một kỹ thuật để buộc tăng tốc phần cứng.

Một thay thế là -webkit-transform: translateZ(0). Và Nếu có nhấp nháy trên Chrome và Safari do chuyển đổi, hãy thử -webkit-backface-visibility: hiddenvà -webkit-perspective: 1000. Để biết thêm thông tin, hãy tham khảo bài viết này .

Tôi không thấy câu trả lời ở đây giải thích điều này. Rất nhiều phép biến đổi có thể được thực hiện bằng cách tính toán từng divvà các tùy chọn của nó bằng cách sử dụng một bộ xác nhận phức tạp. Tuy nhiên, nếu bạn sử dụng chức năng 3D, mỗi phần tử 2D mà bạn có được coi là phần tử 3D và chúng tôi có thể thực hiện chuyển đổi ma trận trên các phần tử này một cách nhanh chóng. Tuy nhiên, hầu hết các yếu tố "về mặt kỹ thuật" đều đã được tăng tốc phần cứng vì chúng đều sử dụng GPU. Tuy nhiên, các phép biến đổi 3D hoạt động trực tiếp trên các phiên bản được lưu trong bộ nhớ cache của mỗi kết xuất 2D này (hoặc các phiên bản được lưu trong bộ nhớ cache của div) và trực tiếp sử dụng phép biến đổi ma trận trên chúng (được vector hóa và song song hóa toán FP).

Điều quan trọng cần lưu ý là các phép biến đổi 3D CHỈ thực hiện các thay đổi đối với các tính năng trên div 2D được lưu trong bộ nhớ cache (nói cách khác, div đã là một hình ảnh được kết xuất). Vì vậy, những thứ như thay đổi chiều rộng đường viền và màu sắc không còn là "3D" để nói một cách mơ hồ. Nếu bạn nghĩ về điều đó, việc thay đổi độ rộng đường viền yêu cầu bạn phải kết xuất divbởi vì và lưu trữ lại nó để các biến đổi 3D có thể được áp dụng.

Hy vọng điều này có ý nghĩa và cho tôi biết nếu bạn có thêm bất kỳ câu hỏi nào.

Để trả lời câu hỏi của bạn, translate3d: 0x 0y 0zsẽ không làm gì cả vì các phép biến đổi hoạt động trực tiếp trên kết cấu được hình thành bằng cách chạy các đỉnh của nó divvào bộ đổ bóng GPU. Tài nguyên đổ bóng này hiện đã được lưu vào bộ nhớ đệm và một ma trận sẽ được áp dụng khi vẽ lên bộ đệm khung. Vì vậy, về cơ bản không có lợi ích từ việc làm đó.

Đây là cách trình duyệt hoạt động nội bộ.

Bước 1: Phân tích cú pháp đầu vào

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

Bước 2: Phát triển lớp hỗn hợp

CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.

Bước 3: Kết xuất lớp hỗn hợp

for (CompositeLayer compLayer : allCompositeLayers){

     // Create and set cacheTexture as active target
     Texture2D cacheTexture = new Texture2D();
     cacheTexture.setActive();

     // Draw to cachedTexture
     Pipeline.renderVertices(compLayer.getVertices());
     Pipeline.setTexture(compLayer.getBackground());
     Pipeline.drawIndexed(compLayer.getVertexCount());

     // Set the framebuffer as active target
     frameBuffer.setActive();

     // Render to framebuffer from texture and **applying transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}

Có một lỗi với việc cuộn trong MobileSafary (iOS 5), dẫn đến việc xuất hiện các phần mềm tạo tác dưới dạng bản sao của các phần tử đầu vào trong vùng chứa cuộn.

Sử dụng translate3d cho mỗi phần tử con có thể sửa lỗi kỳ lạ đó. Đây là một ví dụ về CSS đã tiết kiệm một ngày cho tôi.

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

Translate3D buộc tăng tốc phần cứng . Hoạt ảnh, chuyển đổi và chuyển tiếpCSS không tự động là GPU củaCSS tăng tốc và thay vào đó thực thi từ công cụ kết xuất phần mềm chậm hơn của trình duyệt. Để sử dụng GPU, chúng tôi sử dụng translate3d

Hiện tại, các trình duyệt như Chrome, FireFox, Safari, IE9 + và phiên bản Opera mới nhất đều đi kèm với tính năng tăng tốc phần cứng, chúng chỉ sử dụng nó khi có dấu hiệu rằng phần tử DOM sẽ được hưởng lợi từ nó.

Hãy lưu ý rằng nó tạo ra một bối cảnh xếp chồng (cộng với những gì các câu trả lời khác đã nói), vì vậy nó có khả năng ảnh hưởng đến những gì bạn thấy, ví dụ: làm cho một thứ gì đó xuất hiện trên một lớp phủ khi nó không được phép.