Tại sao hiệu suất cuộn SVG lại tồi tệ hơn PNG?

Question

Trang web tôi đang làm việc để hiển thị số lượng lớn (> 50) hình ảnh SVG phức tạp trong cửa sổ hộp thoại cuộn. Khi xem trang web trong Chrome, hiệu suất cuộn của cửa sổ hộp thoại rất kém - đáng chú ý là độ trễ và chậm. Tuy nhiên, nếu tôi thay thế hình ảnh SVG bằng hình ảnh PNG, việc cuộn hoàn toàn trơn tru và đáp ứng.

Dưới đây là một minh chứng về sự khác biệt: https://jsfiddle.net/NathanFriend/42knwc1s/

Tại sao SVG di chuyển hiệu suất để tồi tệ hơn nhiều so với việc thực hiện di chuyển PNG? Sau khi trình duyệt hiển thị hình ảnh SVG, tôi cho rằng nó không cần phải lập lại hình ảnh cho đến khi hình ảnh được thao tác theo cách nào đó (như thay đổi kích thước). Việc cuộn một phần tử chứa hình ảnh SVG có làm cho hình ảnh được hiển thị lại cho mọi khung hình của hoạt ảnh cuộn không?

                      ` 

Answer 1

Tôi nghĩ rằng đây chỉ là một số loại lỗi Chromium, tôi đã tìm thấy vấn đề này trên SO, bởi vì tôi bắt đầu trải qua nó là tốt trên Mac. Nó hoạt động OK trên Opera chẳng hạn.

Tôi không nghĩ rằng bất cứ ai ở đây đều có thể giải thích lý do tại sao nó chậm nếu nó thực sự là một lỗi. Tôi đã tạo lỗi Chromium, vui lòng gắn dấu sao nếu bạn muốn sự cố được khắc phục sớm hoặc tìm hiểu thêm https://bugs.chromium.org/p/chromium/issues/detail?id=681611