Tôi đang xây dựng một ứng dụng web dựa trên rất nhiều svg. Để tham khảo, tôi đang sử dụng thư viện raphael js để giải quyết tất cả.Tốc độ phần tử văn bản SVG
Trong trường hợp cụ thể này, tôi đã thực hiện một cái gì đó bắt chước một thanh cuộn và di chuyển bó các tính năng svg (~ 500 phần tử) trên màn hình. Một phần của các tính năng đó là các yếu tố <text> (~ 100). Các yếu tố khác bao gồm các yếu tố <rect>, <image> và <path>.
Vì vậy, tôi nhận thấy rằng ứng dụng của tôi không thực sự rất linh hoạt trên máy tính xách tay của tôi, và là xuống phải gây phiền nhiễu để đối phó với trên một ipad, do tốc độ. Tuy nhiên, bất cứ khi nào các phần tử văn bản bị xóa hoặc bỏ qua trong khi di chuyển, nó ngay lập tức được tăng tốc.
Tôi đã thử làm một số xét nghiệm tốc độ (những người rất thô, sử dụng new Date().getTime()) và phát hiện ra rằng phải mất ~ 10 ms để di chuyển tất cả các yếu tố ngoại trừ <text> yếu tố, tuy nhiên phải mất ~ 120 ms khi <text> yếu tố được đưa vào. Tôi tin rằng điều này xảy ra vì mỗi chữ cái được hiển thị dưới dạng hình dạng vectơ và phải mất nhiều công suất xử lý để tính toán chính xác những gì bị che khuất bởi cấu trúc phức tạp như vậy.
Có thể chỉ nhúng văn bản để văn bản được hiển thị dưới dạng hình ảnh raster chứ không phải dưới dạng hình dạng không? Hoặc cải thiện hiệu suất hiển thị văn bản theo bất kỳ cách nào khác?
Tôi không cần độ trong suốt nền và tôi không sử dụng bất kỳ phông chữ lạ mắt nào.
Bạn đang sử dụng 'paper.print()' hoặc 'paper.text()' để tạo thành phần văn bản của mình. Ngoài ra một fiddle có thể là tốt. – Bruno
Bạn có đang nhắm mục tiêu một bộ trình duyệt cụ thể không? Hiệu suất khác nhau đáng kể giữa các trình duyệt. – Sebastian
@Bruno Tôi đang sử dụng paper.text(), vẫn còn khá chậm. – gintas