Vấn đề hiệu năng khi render file SVG bằng Javascript

#1

Chào các bạn !
hiện tại mình đang gặp 1 vấn đề về hiệu năng khi render 1 file svg lớn. Ở đây mình dùng RaphaelJs để render SVG.

Nói qua về yêu cầu và mục đích của webapp 1 tí:

  1. Ở đây mình có dữ liệu của các tấm Wafer (cái này để sản xuất
    mấy con chip, cpu …)
  2. Vấn đề là trong mỗi Wafer này sẽ có các lỗi (defect) mỗi lỗi đc đánh
    dấu bằng 1 defect_id. Và khi render ra SVG nó là 1 hình vuông <rect></rect>

Bây giờ nhà máy yêu cầu render tấm wafer và lỗi của nó ra 1 file SVG image. Để kỹ sư có thể thao tác với tấm wafer đó (như là phóng to, thu nhỏ, chọn các lỗi để hiển thị).

Vấn đề đặt ra là có những tấm wafer có đến hàng chục k defects. Nên khi render và thao tác sau khi render xong bị chậm và không mượt.

Mình post lên đây xem có ai có thể tư vấn cho mình cách gì khả quan không.

Đây là link demo. mình có comment bằng tiếng việt trong code. Bạn nào bớt chút time đọc qua review giúp mình.

Mình xin chân thành cảm ơn! Và rất vui khi đc giao lưu cùng mọi người.

1 Like
#2

Với số lượng các thẻ HTML được sinh ra như thế này dẫn đến việc browser bi đơ khi thao tác là điều không tránh khỏi.

Để giảm bớt tình trạng này thì theo mình:

  1. Bạn làm cách nào đó để có thể hạn chế render ra cùng một lúc các tấm Wafer như vậy.
    (VD: hãy cho user 1 select chọn item nào thì load item đó ra, …)

  2. Cách này mình nghĩ sẽ hiệu quả hơn đó là bạn chuyển qua dùng Canvas vì thẻ này chuyên hơn cho việc render hình ảnh và nếu dùng cách này thì bạn sử dụng plugin này nhé http://fabricjs.com/ (đây là gợi ý của mình bạn có thể dùng thư viện khác)

#3

Thank bạn đã reply.

  1. Vấn đề thứ 1 thì do yêu cầu là phải render cũng lúc để kỹ sư có cái nhìn tổng quát về các lỗi trong cùng 1 dây chuyền nên không tách riêng để render dc. Thực chất như thế này là đã chia nhỏ theo từng phần rồi nếu mà cả có khi lên đến hàng trăm tấm Wafer 1 lúc :(.
  2. Mình có thử bên canvas rồi có nhanh hơn thật

H mình đang cố xem cách gì cân bằng giữa hiệu năng và trai nghiệm người dùng. Có nghĩa là không cần phải load thật nhanh. chậm 1 tí tầm 5-7s ko sao. Nhưng bên cạnh đó các thao tác phải mượt hơn 1 chút. Cũng thử mấy cách mà ko khả quan lắm. Thấy bọn Highchart nhiều khi nó render cả mấy k elements mà vẫn mượt ko hiểu kiểu gì.

#5

Bạn đã tìm đc giải pháp cho vđề chưa? Mình cũng đang gặp vấn đề này.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?