1 Preconnect
Các gợi ý nguồn thức chúng tôi muốn nói đến là preconnect. Kết nối trước cho phép trình duyệt thiết lập kết nối sớm trước khi yêu cầu HTTP thực sự được gửi đến máy chủ. Điều này bao gồm tra cứu DNS, đàm phán TLS, bắt tay TCP. Điều này sẽ giúp loại bỏ độ trễ của vòng và tiết kiệm thời gian cho người dùng.
2 Prefetch
Prefetch là một gợi ý tài nguyên ưu tiên thấp cho phép trình duyệt để lấy nguồn lực trong nền (thời gian nhàn rỗi) mà có thể là cần thiết sau, và lưu trữ chúng trong bộ nhớ cache của trình duyệt. Khi trang đã tải xong, nó bắt đầu tải xuống các tài nguyên bổ sung và nếu người dùng nhấp vào liên kết được tìm nạp trước, trang sẽ tải nội dung ngay lập tức.
2.1 Liên kết Prefetching
Liên kết nạp trước cho phép trình duyệt để lấy tài nguyên, lưu trữ chúng trong bộ nhớ cache, giả định rằng người dùng sẽ yêu cầu họ. Trình duyệt tìm kiếm tìm nạp trước trong HTML hoặc Liên kết tiêu đề HTTP.
2.2 DNS Prefetching
tìm nạp trước DNS cho phép trình duyệt hoạt động tra cứu DNS trên một trang ở chế độ nền trong khi người dùng đang duyệt. Điều này giảm thiểu độ trễ khi tra cứu DNS đã diễn ra khi người dùng nhấp vào một liên kết. Tìm nạp trước DNS có thể được thêm vào một url cụ thể bằng cách thêm thẻ rel = "dns-prefetch" vào thuộc tính liên kết. Chúng tôi khuyên bạn nên sử dụng điều này trên những thứ như phông chữ của Google, Google Analytics và CDN của bạn.
2.3 Hiển thị trước
Hiển thị trước rất giống với tìm nạp trước ở chỗ nó tập hợp nguồn lực mà người dùng có thể điều hướng đến tiếp theo. Sự khác biệt là việc hiển thị trước thực sự hiển thị toàn bộ trang trong nền, tất cả nội dung của tài liệu.
Thông tin chi tiết: https://www.keycdn.com/blog/resource-hints/
Kết luận
khác biệt chính giữa dns-prefetch & preconnect
Sự khác biệt giữa dns-prefetch và preconnect là dns-prefetch sẽ chỉ làm DNS tra cứu, trong khi kết nối trước sẽ thực hiện tra cứu DNS, đàm phán TLS và bắt tay TCP.Điều này có nghĩa là nó tránh thêm 2 RTT khi tài nguyên đã sẵn sàng để tải xuống.
Một khía cạnh quan trọng là hỗ trợ cho tìm nạp trước dns lớn hơn nhiều so với hỗ trợ kết nối trước.
Bạn có thể tìm thấy một số ví dụ cụ thể ở đây: https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/
Cảm ơn cho câu trả lời, tuy nhiên, tôi không nghĩ rằng thực sự trả lời cho câu hỏi khi nào bạn muốn sử dụng dns-prefetch qua preconnect, thậm chí nếu cả hai đều được hỗ trợ . –
Tôi có cùng một câu hỏi. Tôi muốn loại bỏ các thanh màu cam và màu tím trong tab Mạng của Chrome DevTool và có vẻ như kết nối trước là một công cụ thích hợp để thực hiện điều đó. Theo tôi hiểu, dns-prefetch chỉ là một phần của tác phẩm này, vì vậy tôi xem nó chỉ là một tùy chọn dự phòng cho kết nối trước (bây giờ tôi đang cố gắng tìm hiểu xem có nên chèn cả hai cùng một lúc). –
Một ý tưởng hay là cố gắng chèn cả hai cùng một lúc. Bạn có thể chia sẻ kết quả với chúng tôi (hãy làm điều đó). – Pascut