Tìm hiểu Data URIs ?

URI, không phải URL

URL là viết tắt của bộ định vị tài nguyên thống nhất, là sự kết hợp giữa giao thức (cách truy xuất dữ liệu) và địa chỉ nơi tồn tại một tài nguyên nhất định. Mọi tài nguyên có thể truy cập công khai, chẳng hạn như hình ảnh, tệp JavaScript, tệp HTML hoặc biểu định kiểu, đều có một URL cho trình duyệt biết nơi tải tệp xuống. Sau đó, trình duyệt tạo kết nối và bắt đầu tải xuống và/hoặc thực thi tệp.

Mỗi URL cũng là một URI, viết tắt của mã định danh tài nguyên thống nhất. URI chỉ ra một giao thức để truy xuất thông tin cũng như thông tin bổ sung về tài nguyên. Thông tin bổ sung đó có thể là địa chỉ hoặc không (nếu có thì URI là URL) nhưng nó luôn liên quan đến giao thức được chỉ định. Do đó, URI dữ liệu không phải là URL vì chúng không chứa thông tin địa chỉ.

Định dạng URI ngày

Định dạng URI dữ liệu khá đơn giản và được đánh vần trong RFC 2397 (thực tế là đủ ngắn để bạn có thể đọc hết). Định dạng cơ bản như sau:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Ở định dạng này, data:là giao thức của URI, cho biết đây là URI dữ liệu. Phần thứ hai, kiểu MIME, cho biết kiểu dữ liệu được biểu diễn. Ví dụ: đối với hình ảnh PNG, đây sẽ là image/png. Khi không được chỉ định, loại MIME mặc định là text/plain. Thông thường, bộ ký tự có thể được bỏ qua một cách an toàn và hoàn toàn không được sử dụng cho hình ảnh. Phần tiếp theo cho biết mã hóa được sử dụng. Trái ngược với niềm tin phổ biến, bạn không phải sử dụng mã hóa cơ sở 64. Nếu nội dung không được mã hóa theo cơ sở 64 thì dữ liệu được mã hóa bằng mã hóa URL tiêu chuẩn (các ký tự ASCII an toàn cho URL được biểu thị dưới dạng chính chúng, tất cả các ký tự khác được biểu thị dưới dạng mã hóa hex ở định dạng ) %xx. Dữ liệu được mã hóa có thể chứa khoảng trắng, không được coi là đáng kể.

Mã hóa cơ sở 64

Mã hóa cơ sở 64 là một hệ thống mã hóa theo đó dữ liệu được chuyển đổi thành bit và sau đó được nhóm theo số thành một bộ gồm 64 chữ số cơ sở. Cơ sở 64 chữ số bao gồm từ A đến Z, cả chữ hoa và chữ thường, số và dấu cộng (+) và dấu gạch chéo (/). Dấu bằng (=) được sử dụng để cho biết việc đệm đã xảy ra (vui lòng đọc bài viết trên Wikipedia để biết thêm thông tin về điều này). Tất cả những gì bạn thực sự cần hiểu là mã hóa cơ sở 64 làm cho dữ liệu được mã hóa nhỏ hơn nhiều.

Đây là một ví dụ về hình ảnh GIF dưới dạng URI dữ liệu được mã hóa 64 cơ sở ( nguồn ):

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge

8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h

LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g

77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

Hình ảnh tương tự có thể được biểu diễn mà không cần mã hóa cơ số 64 như sau:

data:image/gif,GIF89a%22%00%1B%00%F7%00%00lll%D6%D6%D6%FF%EB%85

%FF%E0%7B%FF%F7%91%FF%D4o%DF%DF%DF%F6%F6%F6%87%87%87%FE

%CBf%FF%F4%8E%E6%B3NKKK%C5%92-%FF%FF%99%FF%FF%FF%00%00%00

%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00

%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00

Người chiến thắng rõ ràng về kích thước là phiên bản hình ảnh được mã hóa 64 cơ sở, nhỏ hơn đáng kể.

**Lưu ý: **Mã hóa cơ sở 64 thực sự làm cho hình ảnh lớn hơn. Tuy nhiên, nếu bạn đang sử dụng nén HTTP, bạn có thể sẽ không nhận thấy sự khác biệt vì dữ liệu được mã hóa cơ sở 64 nén rất tốt. Nếu vì lý do nào đó mà bạn không thể sử dụng tính năng nén HTTP, bạn có thể muốn kiểm tra xem mình đang gửi bao nhiêu byte để xác định xem sự đánh đổi có xứng đáng hay không.

Không chỉ cho hình ảnh

Mặc dù hầu hết mọi người nói về URI dữ liệu như một cách để nhúng hình ảnh bên trong tệp HTML hoặc CSS, không có gì ở đây dành riêng cho hình ảnh. Bạn có thể mã hóa và nhúng bất kỳ loại tệp nào, ngay cả bản thân HTML. Ian Hickson, nổi tiếng về HTML 5 (hoặc khét tiếng, tùy thuộc vào vị trí của bạn), có một công cụ cho phép bạn chơi với các URI dữ liệu. Ví dụ mặc định là một tệp HTML có thể được chuyển thành URI dữ liệu có hoặc không có mã hóa cơ sở 64. Chơi xung quanh với trình tạo URI dữ liệu này trong một thời gian thực sự giúp củng cố các khái niệm cốt lõi.

Lưu ý: Internet Explorer 8 có các giới hạn bảo mật đối với URI dữ liệu khiến chúng ít hữu ích hơn đối với dữ liệu không phải hình ảnh.

Ý nghĩa hiệu suất

Phần thú vị nhất của câu chuyện về URI dữ liệu là nó cung cấp cho bạn khả năng nhúng các tệp vào bên trong các tệp khác. Hầu hết các bài viết tập trung vào việc nhúng URI dữ liệu vào tệp CSS như một cách để cải thiện hiệu suất. Thật vậy, đã có rất nhiều nghiên cứu chỉ ra rằng các yêu cầu HTTP là một trong những lỗ hổng hiệu suất chính đối với các trang web và việc giảm số lượng yêu cầu dẫn đến hiệu suất trang tốt hơn. “Giảm thiểu các yêu cầu HTTP” thực sự là quy tắc đầu tiên của Yahoo! Các phương pháp hay nhất về hiệu suất vượt trội và nó đề cập cụ thể đến các URI dữ liệu:

Hình ảnh nội tuyến sử dụng lược đồ data: URI để nhúng dữ liệu hình ảnh vào trang thực tế. Điều này có thể tăng kích thước tài liệu HTML của bạn. Kết hợp hình ảnh nội tuyến vào biểu định kiểu (được lưu trong bộ nhớ cache) của bạn là một cách để giảm yêu cầu HTTP và tránh tăng kích thước trang của bạn. Hình ảnh nội tuyến chưa được hỗ trợ trên tất cả các trình duyệt chính.

Đây là lời khuyên tốt cho việc sử dụng URI dữ liệu: bạn muốn sử dụng chúng ở nơi chúng sẽ được lưu vào bộ đệm ẩn thường xuyên nhất. Hình ảnh thông thường được tải xuống qua HTTP được lưu trong bộ nhớ đệm theo tiêu đề và/hoặc cài đặt dành riêng cho trình duyệt để chúng không cần phải tải xuống lại mọi lúc. URI dữ liệu được coi là một phần của tệp chứa chúng, vì vậy chúng là một phần của tệp HTML hoặc CSS mà nó được nhúng vào. Điều này có nghĩa là URI dữ liệu không có chính sách kiểm soát bộ nhớ cache độc ​​lập. Nhúng URI dữ liệu vào tệp của bạn làm cho tệp lớn hơn và nếu tệp thay đổi thường xuyên (chẳng hạn như trang chủ của blog), thì tệp lớn hơn phải được tải xuống thường xuyên. Điều này làm chậm trang web của bạn.

Cách sử dụng đơn giản nhất là nhúng các URI dữ liệu vào biểu định kiểu bên ngoài được lưu trữ tích cực vào bộ đệm. Bằng cách đó, trải nghiệm bộ nhớ cache trống sẽ nhanh hơn (do có ít yêu cầu tổng thể hơn) và trải nghiệm bộ nhớ cache chuẩn là như nhau.

hỗ trợ trình duyệt

Hầu hết các trình duyệt hiện đại đều hỗ trợ URI dữ liệu:

• Firefox 2+
• Opera 7.2+ – URI dữ liệu không được dài hơn 4100 ký tự
• Chrome (tất cả các phiên bản)
• Safari (tất cả các phiên bản)

Nguồn dịch từ: https://humanwhocodes.com/blog/2009/10/27/data-uris-explained/