vấn đề hiệu suất nội tuyến SVG so với nhúng hoặc iframe

Tôi có hai hình ảnh SVG, cả hai đều có khoảng 8000 dòng và bao gồm một số hình dạng có độ dốc. Không có mẫu, bộ lọc, văn bản, chỉ các yếu tố đồ họa cơ bản với nét, điền đơn giản hoặc tô màu.vấn đề hiệu suất nội tuyến SVG so với nhúng hoặc iframe

Hiện tại, chúng được chèn nội dòng vào HTML trong khi nó được tạo, vì vậy mã nguồn trở nên yên tĩnh lớn. Điều này có làm giảm hiệu suất hoạt ảnh hay không, sao cho tốt hơn nên nhúng svg khác nhau?

Có quy tắc chung nào cần thực hiện khi nhúng svg không?

Greetings Philipp

Nguồn

2012-05-15 philipp

Tất cả mọi thứ sử dụng DOM rất nhiều với kết xuất chậm của trang web như vậy sẽ là một SVG lớn. Ngay cả khi bạn sử dụng iframe hoặc phương pháp nhúng khác, bạn không biết tại thời điểm trình duyệt tải và hiển thị nó ... ngoại trừ bạn sử dụng Javascript để đảm bảo rằng nó chỉ được tải sau khi trang được hiển thị. Có thể bạn sẽ hiển thị một trình giữ chỗ trước. – codingjoe

@ John là một điểm tốt, cảm ơn – philipp

Nếu bạn sử dụng thẻ HTML5 SVG để nhúng inline SVG mà sẽ không chỉ làm tăng kích thước tập tin html mà còn giữ DOM bận rộn và các trình duyệt của bạn renderer.

Nếu bạn sử dụng iframe bạn thực sự không biết khi nào nó được tải hoặc hiển thị, ít nhất không phải cho tất cả các trình duyệt.

HTML5 cung cấp cho bạn JavaScript và đó có thể là giải pháp. Chỉ cần đợi cho cơ thể load và sau đó tiêm SVG.

Bạn có thể sử dụng body-onLoad hoặc jQueries ready()-funktion

Dưới đây là làm thế nào nó được thực hiện trong jQuery:

<!DOCTYPE html> 
<html> 
<body> 
<div id="svg-01" class="placeholder"></div> 
<script src="path/to/jQuery.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#svg-01").replaceWith('<svg><!--// some svg //--></svg>'); 
    }); 
</script> 
</body> 
</html>

Tôi thậm chí sẽ đi một bước xa hơn và thay vì sử dụng thay thế nó bằng một khung nội tuyến và gziped SVG as described here.

Nguồn

2013-05-02 14:23:52 codingjoe

vấn đề hiệu suất nội tuyến SVG so với nhúng hoặc iframe

Trả lời

Các vấn đề liên quan