Tài nguyên đã tải trước được tải hai lần

Tôi muốn sử dụng tìm nạp trước html để tìm nạp trước một tệp phông chữ. Tôi làm theo các khuyến nghị ở đây: https://css-tricks.com/prefetching-preloading-prebrowsing/Tài nguyên đã tải trước được tải hai lần

<!doctype html> 
<html> 
<head> 
<link rel="prefetch" href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2"> 
<style> 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 

html, body { 
font-family: 'Open Sans'; 
} 
</style> 
</head> 
<body> 
Hello world 
</body> 
</html>

Tuy nhiên, các file font là thực sự tải hai lần trên Chrome. Tôi chưa thử các trình duyệt khác.

Tôi có làm điều gì đó không chính xác không?

Nguồn

2016-03-31 Joe Frambach

On tôi Chrome 49 cửa sổ vista nó chỉ tải một lần. [** Đây là ảnh chụp màn hình của nó **] (https://i.gyazo.com/26f727b39b8f57c97b57d0bb58304163.png) –

Tôi nghĩ rằng nó tải hai lần vì bạn đang tải nó một lần trong thẻ liên kết, hiển thị dưới dạng phông chữ loại/woff2 và một lần trong src phông chữ, hiển thị dưới dạng phông chữ loại. Tôi không quen với việc tìm nạp trước, nhưng chỉ có thể sử dụng phông chữ với phông chữ, nhưng không cần thẻ liên kết. Tuy nhiên, nếu tôi cố gắng chỉ sử dụng thẻ liên kết, không có phông chữ, nó đã tải phông chữ/woff2 nhưng tôi không thể sử dụng phông chữ mà không có quy tắc phông chữ. Tôi nghĩ mẹo ở đây là bạn đang tải phông chữ một lần trong thẻ liên kết và một lần trong quy tắc phông chữ, nhưng hiện tại chúng không liên quan đến – frajk

@frajk Câu trả lời là không xóa thẻ liên kết. Trong thế giới thực, css là một biểu định kiểu bên ngoài mà '@ include' một biểu định kiểu khác bao gồm khai báo phông chữ-gia đình. Nếu mỗi tệp định kiểu không có kích thước không chính xác thì việc tìm nạp trước là rất quan trọng. –

Đây là cách sử dụng không chính xác prefetch. Xem các tài nguyên: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

<link rel="prefetch"> là một chỉ thị mà nói với một trình duyệt lấy resource mà có lẽ sẽ là cần thiết cho chuyển hướng tới.

...

<link rel="subresource"> được kế hoạch ban đầu để giải quyết điều hướng hiện, nhưng nó không thể làm điều đó trong một số cách ngoạn mục.

...

Cách cơ bản bạn có thể sử dụng preload là tải nguồn lực muộn phát hiện sớm. [...] Một số các nguồn lực được ẩn trong CSS và JavaScript

Vì vậy, preload là những gì chúng ta muốn sử dụng ở đây. Nhưng, nó không được hỗ trợ, hầu như không hề.

Bài báo cũng có một số lời về tải phông chữ cụ thể:

Cái gì như:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Một điểm đáng đi qua: Bạn phải thêm một thuộc tính crossorigin khi lấy phông chữ, khi chúng được tải xuống bằng cách sử dụng chế độ ẩn danh CORS. Có, ngay cả khi phông chữ của bạn có cùng nguồn gốc với trang. Lấy làm tiếc.

Đưa rằng tất cả lại với nhau, mã tái sản xuất được cập nhật trông giống như:

style.css:

/* 2MB of random character comment fluff */ 

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 

html, body { 
font-family: 'Open Sans'; 
}

index.html:

<!doctype html> 
<html> 
<head> 
<link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2"> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
Hello world 
</body> 
</html>

Hiện tại, tính năng này chỉ hoạt động trong Chrome Canary.Tôi đang tính đến hỗ trợ trình duyệt tốt hơn sắp tới.

Chrome:

Canary:

Nguồn

2016-04-08 20:01:07

Tài nguyên đã tải trước được tải hai lần

Trả lời

Các vấn đề liên quan