hộp đổ bóng CSS3 cực kỳ chậm trong Chrome

Question

Tôi đã phát triển một ứng dụng dành riêng cho các trình duyệt hiện đại và đã sử dụng rất nhiều tài sản bóng tối.

Cho đến gần đây, điều này đã hoàn toàn tốt trên tất cả các trình duyệt hỗ trợ. Tuy nhiên, khoảng một tháng trước khi thử nghiệm trong Chrome, tôi nhận thấy rằng việc cuộn 'chậm' rất chậm, đến mức gần như không sử dụng được.

Trong tháng vừa qua, tôi đã cố gắng trích xuất các tập lệnh/gây rối với cấu trúc html của mình, mọi thứ bạn có thể nghĩ đến cho đến cuối cùng hôm nay tôi đã tìm ra nguyên nhân.

Với hộp bóng/webkit-box-shadow bị vô hiệu hóa trên tất cả các yếu tố mà tôi đã thiết lập, sự cố sẽ biến mất.

Điều gì khiến tôi kỳ quặc là nó hoạt động tốt trong Chrome cho đến khoảng một tháng trước. Ngẫu nhiên việc di chuyển trên phiên bản cửa sổ của safari là tốt, mặc dù chậm hơn một chút so với IE/Opera và Firefox.

Đây có phải là sự cố đã biết không? Có ai có một workaround cho điều này?

Và quan trọng nhất, liệu có phương pháp sao chép cùng một hiệu ứng khác mà không sử dụng thuộc tính CSS3?

Answer 1

Có được một báo cáo lỗi mở và đóng cửa ở Webkit năm ngoái:

CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?

Dường như Chrome có một lỗi mở trên một phiên bản cũ:

http://code.google.com/p/chromium/issues/detail?id=95164

Airbnb đã thảo luận về vấn đề gần đây và thực sự đã thay đổi thiết kế cuối cùng của họ vì nó:

http://nerds.airbnb.com/box-shadows-are-expensive-to-paint

Có một nhóm người gần đây đã thu hút sự quan tâm đến hiệu suất CSS thử nghiệm theo chương trình.Dưới đây là một bookmarklet bạn có thể sử dụng để bắt đầu thử nghiệm của riêng bạn:

http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

Trong khi đó, bạn nói đúng đó hack cửa hình ảnh là một lựa chọn. Kiểm tra nó ra ở đây:

Scroll Lag with CSS3 box-shadow property?

Answer 2

Nó có thể không phải là hộp bóng đặc biệt, có thể cái gì khác trong ứng dụng của bạn chỉ tiêu thụ quá nhiều tài nguyên và hộp bóng chỉ xảy ra là anh đào trên đầu trang.

Tuy nhiên, tôi có thể xác nhận rằng hộp bóng trên các phần tử quá dài hoặc lớn gây ra các vấn đề về hiệu suất. Tôi làm việc cho một nhà xây dựng hình thức drag'n'drop nhất định và cố gắng thiết lập hộp bóng trên một 900px x 1000px div và di chuyển bắt đầu tụt hậu ngay lập tức. Của chúng tôi là một ứng dụng web rất nặng ajax, vì vậy những người khác có thể đủ khả năng để có được kết quả tốt hơn, nhưng vẫn còn, tôi nghĩ rằng đây là một ví dụ hợp lệ.

Vì vậy, tôi đã chuyển sang trường học cũ và tạo hình ảnh thay thế. Tôi nghĩ rằng cách thích hợp nhất để làm cho bóng ảnh hộp hoạt động mà không tải quá nhiều ảnh là phải có phần tử có chiều rộng cố định.

Điều tôi đã làm là ba lát hình ảnh. Một lát từ trên xuống dưới góc trên cùng, một từ dưới lên trên góc dưới cùng và một lát mỏng từ giữa mà tôi đã sử dụng trên div làm hình nền với lặp lại-y để tôi có thể tự động thay đổi thành chiều cao của div phù hợp với trang người dùng.

Bạn có thể cắt nhiều hơn để vừa với bất kỳ ô nào nhưng nó trở nên quá nhiều (ít nhất 5 hình ảnh phụ và thêm 8 div chính xác) cho một hộp đổ bóng.