Liên kết tìm nạp trước hoạt động trên các tên miền phụ?

Tôi đã cố gắng sử dụng một cái gì đó như thế này để tăng hiệu suất khi nhấp từ trang đích đơn giản đến ứng dụng trang đơn hạng nặng:

<link rel="prefetch" href="https://example.com" as="document" />
<link rel="prefetch" href="https://example.com/app.js" as="script" />
<link rel="prefetch" href="https://example.com/app.css" as="style" />

Nó dường như không có hiệu suất tăng đáng chú ý khi trang đích của tôi nằm trên một tên miền phụ. Say, https://subdomain.example.com.

Khi tôi nhấp vào liên kết để truy cập https://example.com, tôi vẫn thấy một độ trễ dài trong tab mạng Chrome như app.jsvà app.cssđược tải:

Đây là tài nguyên tương tự với tính năng tìm nạp trước bị vô hiệu hóa:

Nó mất khoảng cùng một lượng thời gian trong tổng số.

Yêu cầu các tiêu đề cho một trong những tài sản được tải với bộ đệm tìm nạp trước:

Chung:

Request URL: https://example.com/css/app.bffe365a.css
Request Method: GET
Status Code: 200  (from prefetch cache)
Remote Address: 13.226.219.19:443
Referrer Policy: no-referrer-when-downgrade

Phản ứng:

accept-ranges: bytes
cache-control: max-age=31536000
content-encoding: gzip
content-length: 39682
content-type: text/css
date: Mon, 06 Jan 2020 21:42:53 GMT
etag: "d6f5135674904979a2dfa9dab1d2c440"
last-modified: Mon, 06 Jan 2020 20:46:46 GMT
server: AmazonS3
status: 200
via: 1.1 example.cloudfront.net (CloudFront)
x-amz-cf-id: dO3yiCoPErExrE2BLYbUJaVye32FIJXXxMdI4neDGzGX9a6gcCDumg==
x-amz-cf-pop: LAX50-C1
x-amz-id-2: 1O0LmihxpHIywEaMQWX7G3FDAzxtH9tZq1T/jeVLMzifFSJSIIJSS6+175H61kKdAq6iEbwfs2I=
x-amz-request-id: AF35C178092B65D4
x-cache: Hit from cloudfront

Yêu cầu:

DNT: 1
Referer: https://example.com/auth/join
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36

Câu hỏi của tôi là: Nếu Chrome chỉ ra rằng bộ đệm tìm nạp trước được sử dụng thì tại sao lại có thời gian tải xuống nội dung đáng kể?

Dường như Chrome có các loại bộ đệm khác nhau: bộ đệm tìm nạp trước, bộ đệm đĩa và bộ nhớ cache. Bộ nhớ cache trên đĩa và bộ nhớ cache rất nhanh (thời gian tải 5ms và 0ms). Tuy nhiên, bộ đệm tìm nạp trước khá vô dụng với thời gian tải xuống 300ms đôi khi. Tôi có thể có được một lời giải thích kỹ thuật về lý do tại sao điều này xảy ra? Đây có phải là một lỗi với Chrome không? Tôi đang sử dụng Chrome 79.0.3945.117.

Thêm <link rel=prefetch>vào một trang web sẽ cho trình duyệt tải xuống toàn bộ trang hoặc một số tài nguyên (như tập lệnh hoặc tệp CSS) mà người dùng có thể cần trong tương lai. Điều này có thể cải thiện các số liệu như Sơn nội dung đầu tiên và Thời gian để tương tác và thường có thể làm cho các điều hướng tiếp theo xuất hiện để tải ngay lập tức.

Gợi ý tìm nạp trước tiêu tốn thêm byte cho các tài nguyên không cần ngay lập tức, vì vậy kỹ thuật này cần được áp dụng chu đáo; chỉ tìm nạp tài nguyên khi bạn tự tin rằng người dùng sẽ cần chúng. Xem xét không tìm nạp trước khi người dùng đang kết nối chậm. Bạn có thể phát hiện điều đó với API thông tin mạng.

Có nhiều cách khác nhau để xác định liên kết nào để tìm nạp trước. Cách đơn giản nhất là tìm nạp trước liên kết đầu tiên hoặc một vài liên kết đầu tiên trên trang hiện tại. Ngoài ra còn có các thư viện sử dụng các cách tiếp cận tinh vi hơn, được giải thích sau trong bài đăng này- https://web.dev/link-prefetch/ .

Tôi chỉ có thể đoán. Câu trả lời tự tin có lẽ chỉ có thể được tìm thấy bởi bạn, thông qua thử nghiệm. Có quá nhiều biến số để giải thích. Nhưng ở đây một số ý tưởng:

1. prefetchlà một gợi ý cho một trình duyệt. Trình duyệt có thể bỏ qua nó vì một số lý do tùy ý. Hơn thế nó có mức độ ưu tiên thấp nhất.
2. Ví dụ, chỉ trong trường hợp, xin vui lòng, kiểm tra cài đặt trình duyệt của bạn:
   Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
   (hoặc một cái gì đó tương tự).
3. Nếu có bất kỳ cơ hội nào bạn đang sử dụng internet di động thì đó cũng có thể là một vấn đề.
   https://www.technipages.com/google-chrom-prefetch
4. Làm thế nào nhanh chóng bạn điều hướng từ trang đích của bạn đến example.com?
5. Kiểm tra nhật ký máy chủ của bạn để xem nếu nó nhận được prefetchyêu cầu.

6. Kiểm tra xem máy chủ của bạn có đặt một số tiêu đề lạ để đáp ứng prefetchyêu cầu không. Ví dụ Cache-Control: no-cache. Vâng, tôi thấy rằng bạn có cache-control: max-age=31536000, vì vậy sẽ rất lạ, nếu máy chủ sẽ gửi các tiêu đề khác nhau cho cùng một yêu cầu (cũng ... gần như giống nhau , ít nhất là bạn đã không nói rằng chúng là như vậy, và ít nhất có thể được một số tiêu đề chỉ ra rằng đó là một prefetchyêu cầu), nhưng những điều kỳ lạ xảy ra.

7. Bạn có lẽ nên cố gắng thêm crossoriginthuộc tính. Ví dụ

   <link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />

   Tại đây https://www.w3.org/TR/resource-hints/ bạn có thể tìm thấy ví dụ này

   <link rel="preconnect" href="//example.com">
   <link rel="preconnect" href="//cdn.example.com" crossorigin>

   khá liên quan đến trường hợp của bạn, nhưng thật không may, không có lời giải thích.

8. Trong phiên bản gốc của câu hỏi của bạn, bạn đã đề cập đến nhân viên dịch vụ ... Nếu họ tải xuống một cái gì đó, hoặc thậm chí chính bạn tải xuống một cách thủ công, đó cũng có thể là vấn đề. Vì ưu tiên thấp nhất củaprefetch

   https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ#What_if_I.27m_doading_s Something_in_the_background.3F_Will_link_prefetching_compete_for_bandband.3

   Nếu bạn đang tải xuống một cái gì đó bằng Mozilla, việc tìm nạp trước liên kết sẽ bị trì hoãn cho đến khi mọi tải xuống nền hoàn tất

   Tôi nghĩ Chrome cũng vậy.

9. Bạn đã cố gắng di chuyển trang đích của mình đến tên miền gốc chưa? Nếu, có, và prefetchhoạt động như mong đợi, thì có - tên miền phụ là nguyên nhân của vấn đề. Và tin nhắn GUI Status Code: 200 (from prefetch cache)có lẽ chỉ là một trục trặc. Bởi vì gần đây một số thứ bắt đầu thay đổi prefetchhành vi trong Chrome. Và tôi không biết nếu mọi thứ đã ổn định. Về cơ bản, vâng, có một xác suất nhất định rằng bạn prefetchchỉ có thể từ cùng một nguồn gốc.

   https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit

bạn nên thêm mã dưới đây trong trường hợp bạn không phải là tên miền phụ và bạn muốn tài nguyên từ tên miền

<link rel="preconnect" href="https://example.com">