Cách tăng tốc trang web với thẻ

"Nhìn thấy trước"trình duyệt là tương lai của lướt Internet tốc độ cao nhất, mang lại cho chúng tôi tài nguyên mà chúng tôi muốn ngay cả trước khi chúng ta biết chúng ta muốn họ. Hôm nay trình duyệt đã có chế tạo một số dự đoán bây giờ và sau đó để tăng tốc độ tìm nạp và kết xuất tài liệu. Để thực hiện bước này, chúng tôi không tìm ai khác ngoài nhà phát triển web.

Nhà phát triển có một ý tưởng khá tốt của trang web của họ được điều hướng như thế nào, và cái nào tài nguyên được yêu cầu thường xuyên nhất và do đó, họ có thể dự đoán một số trình duyệt hoạt động trong tương lai nên làm cho các trang web. Tất cả những gì cần thiết bây giờ là cho các nhà phát triển tìm cách để chuyển tiếp những dự đoán đến trình duyệt và đưa chúng vào sử dụng tốt. Đây là nơi mà một số "liên kết HTML" đặc biệt xuất hiện.

Giới thiệu lại các yêu cầu HTTP

Trước khi xem các liên kết này, đã đến lúc làm mới bộ nhớ của chúng tôi về cách hoạt động tìm nạp tệp được yêu cầu HTTP điển hình xảy ra. Giả sử ai đó tên Joe muốn truy cập một trang web.

Đây là những gì xảy ra tiếp theo:

1. Joe gõ địa chỉ có thể nhớ lại của trang web vào thanh địa chỉ của trình duyệt và nhấn "Enter".
2. Khi nhận được địa chỉ đó, trình duyệt sẽ yêu cầu máy chủ DNS (lời khen của ISP) cho địa chỉ IP của địa chỉ do Joe cung cấp.
3. Máy chủ DNS bắt buộc.
4. Bây giờ trình duyệt đã biết địa chỉ IP, nó sẽ gửi một tin nhắn (theo phương ngữ TCP) đến máy chủ của trang web, yêu cầu kết nối.
5. Nếu máy chủ vẫn hoạt động tốt, nó sẽ gửi phản hồi xác nhận yêu cầu của trình duyệt và trình duyệt sẽ phản hồi và xác nhận thông báo của máy chủ. (chú thích: Có, đây là phiên bản bắt tay cực kỳ nhỏ của bắt tay TCP giữa máy khách và máy chủ.)
6. Khi bắt tay kết thúc, một kết nối được thiết lập giữa hai.
7. Bây giờ, trình duyệt thay đổi kiểu phương ngữ thành HTTP và yêu cầu máy chủ cho trang web.
8. Máy chủ, biết trang chủ của trang web sẽ trả về điều đó, được trình duyệt nhận và hiển thị cho Joe, người đang chờ đợi rất kiên nhẫn trước máy tính.

Một yêu cầu HTTP thông thường đi qua tất cả các rằng (và hơn thế nữa) để lấy tài liệu qua Internet. Vì vậy, nếu bất kỳ quá trình này có thể được khởi động khi có thể, chúng ta có thể giảm thời gian chúng tôi phải chờ phân phối tài nguyên mà chúng tôi muốn.

Mối quan hệ liên kết HTML

W3C chỉ định 4 mối quan hệ liên kết HTML (quan hệ cho mối quan hệ) được đặt tên dns-prefetch, kết nối, tìm nạp trước, và prerender. Họ cùng nhau được gọi (bởi W3C)Gợi ý tài nguyên". Bây giờ, chúng ta sẽ thấy Họ có thể làm gì và nơi chúng có thể được sử dụng.

1. Tìm nạp trước DNS

Trong tìm nạp trước DNS, giải quyết tên miền (còn gọi là nhận địa chỉ IP phù hợp từ máy chủ DNS) được thực hiện trước thời hạn.

Giả sử có một trang tham chiếu trong một trang web có nhiều liên kết tham chiếu đến trang web chị em của nó. Khi người dùng truy cập trang tham chiếu, có một xác suất cao người dùng sẽ điều hướng đến trang web chị em. Vì vậy, một tra cứu DNS sớm đối với trang web chị em có thể giảm thời gian mở trang web (từ đó cải thiện trải nghiệm người dùng).

Điều này giảm độ trễ thông qua tìm nạp trước DNS có thể được thực hiện bằng cách thêm mã này vào trang tham chiếu.

Khi trình duyệt xử lý mã này trong trang tham chiếu, nó sẽ thêm tra cứu DNS của trang web chị em vào hàng đợi nhiệm vụ của nó và khi nó không có các tác vụ ưu tiên cao khác trong hàng đợi, nó sẽ bắt đầu phân giải DNS của trang web chị.

Vì vậy, khi người dùng cuối cùng nhấp vào một trong các liên kết đưa họ đến trang web chị em, độ phân giải DNS của trang web đó có thể đã được hoàn thành và trình duyệt có thể ngay lập tức bắt đầu thiết lập kết nối TCP máy chủ-máy khách với trang web chị em máy chủ, làm cho trang đó tải nhanh hơn.

Tính năng này có sẵn trong hầu hết tất cả các trình duyệt hiện đại trừ Safari kể từ tháng 3 năm 2016.

2. Kết nối trước

Kết nối trước là một bước xa hơn từ tìm nạp trước DNS, nó thiết lập kết nối đến máy chủ mà có thể có một yêu cầu được gửi sau này trong tương lai.

W3C liệt kê một trường hợp sử dụng lý tưởng cho kết nối trước: chuyển hướng. Các nhà phát triển sử dụng chuyển hướng vì một số lý do.

Trong trường hợp này, yêu cầu tiếp theo của trình duyệt (trang web được chuyển hướng) là Dự đoán 100%, và có thể được kết nối với, đến giảm độ trễ điều hướng.

Hãy tưởng tượng có một trang web trung gian chuyển hướng đến "xyzsite", Liên kết HTML sau đây sẽ khiến trình duyệt kết nối với máy chủ xyzsite, khi nó đến trang trung gian đó.

Kể từ tháng 3 năm 2016, tính năng này có sẵn trong Chrome, Opera và Firefox.

3. Tải trước

Với tìm nạp trước, cho một tài nguyên, trình duyệt bắt đầu triển khai độ phân giải DNS của tên miền của tài nguyên, sau đó thực hiện kết nối TCP với máy chủ của tài nguyên, thực hiện yêu cầu HTTP và cuối cùng tìm nạp và lưu trữ tài nguyên đã tìm nạp trong bộ đệm của trình duyệt.

Nếu bạn chắc chắn về tài nguyên nào sẽ cần sau này, thì đó là tài nguyên cần tìm trước; trong đó nằm ở chỗ bắt. Tìm nạp trước sẽ phỏng đoán, và nếu bạn đoán sai, bạn thực sự có thể chậm lại thay vì tăng tốc trang web của bạn.

Đối với sách trực tuyến, phòng trưng bày hoặc danh mục đầu tư, nếu người dùng có khả năng duyệt đến trang tiếp theo, hãy tìm nạp trước các tài nguyên như hình ảnh, có thể tăng tốc mọi thứ lên đáng kể. Đây là mã để làm điều đó.

Tìm nạp trước được hỗ trợ trong Chrome, Firefox và Opera.

4. Tiên quyết

Chỉ cho các trang HTML có thể được thực hiện trước. Một trang HTML đã được đăng ký trước là kết xuất ngoại tuyến, và được vẽ lên màn hình khi người dùng thực sự cần thiết. Kết xuất chi phí cho một công việc tính toán và tài nguyên bộ nhớ cao hơn; Ngoài ra, để hiển thị trang, trình duyệt có thể cần thêm tài nguyên (như hình ảnh được thêm vào trang) sẽ dẫn đến yêu cầu nhiều hơn bằng trình duyệt.

Vì thế, prerender phải là thận trọng, và không được sử dụng quá mức. Thêm mã sau đây sẽ hiển thị trước trang "Giới thiệu".

Prerender đã có sẵn trong Chrome, IE và Opera kể từ tháng 3 năm 2016.

Một vài điều cần lưu ý

(1) Không có gợi ý tài nguyên nào được đề cập ở trên đảm bảo việc thực hiện và hoàn thành các giai đoạn yêu cầu khác nhau được thực hiện vì khi trình duyệt đang bận xử lý các yêu cầu cần thiết cho hoạt động của trang hiện tại mà người dùng đang thực hiện, thực hiện các tối ưu hóa này có thể cản trở các nhiệm vụ hiện tại của người dùng.

Vì vậy, mọi thứ là xếp hàng và thực thi khi trình duyệt cảm thấy đủ tự do để làm như vậy.

Những gợi ý tài nguyên này không nhất thiết phải có trong trang ngay cả trước khi tải trang. Họ có thể được thêm vào sau bởi JavaScript, và các gợi ý tài nguyên sẽ làm công việc của họ như bình thường.

(2) W3C chỉ định một Thuộc tính liên kết HTML gọi là gợi ý xác suất, pr (với giá trị 0 đến 1) cho các gợi ý tài nguyên này, có thể được sử dụng để cung cấp xác suất của các yêu cầu sẽ được thực hiện trong tương lai. Tôi chưa thấy thuộc tính này được thực hiện bởi bất kỳ trình duyệt nào. Ví dụ: đoạn mã sau tuyên bố rằng xyzsite có 80% cơ hội sẽ được yêu cầu trong tương lai và 30% cho trang về.

Chúng tôi cũng có thể thêm thuộc tính crossorigin tùy chọn vào gợi ý tài nguyên để thông báo cho trình duyệt về thông tin xác thực CORS của yêu cầu được liên kết.