Sử dụng CSS background thay thế cho liên kết SVG trực tiếp để giảm kích thước DOM

Sử dụng CSS background thay thế cho liên kết SVG trực tiếp để giảm kích thước DOM

Các trang web hiện nay đa số đều sử dụng biểu tượng bằng SVG vì nó hiển thị tốt với HTML5 lại không cần sử dụng đến webfont icon. Tuy nhiên nếu bạn đang lạm dụng bằng cách chèn liên kết SVG trực tiếp quá nhiều dẫn đến kích thước DOM của trang tăng lên làm cho trang tải chậm hơn, hiệu suất giảm đi. Khi nào nên sử dụng CSS background thay thế cho liên kết SVG trực tiếp? Khi liên kết SVG được đặt trong vòng lặp b:loop của bài đăng tại các trang chỉ mục. Hãy thử hình dung trang chủ blog hiển thị 10 bài đăng mới nhất => có 10 liên kết SVG vì mỗi bài đăng có 1 liên kết => kích thước trang tăng lên => trang tải chậm hơn Nhược điểm khi sử dụngCSS background Tăng số request vì đã chuyển liên kết SVG sang định dạng ảnh thay thế, tuy nhiên so với mức tăng 1 request mà giảm tải được kích thước DOM vẫn có tác dụng hơn rất nhiều so với chèn SVG trực tiếp Cách chuyển đổi liên kết SVG sang ảnh Các bạn có thể tìm kiếm chọn các biểu tượng SVG tại một số trang như https://materialdesignicons.com hoặc…