Sử dụng tải trước và tìm nạp trước trong HTML của bạn để tải nội dung
Tải nội dung trên một trang là một trong những phần quan trọng nhất cần thực hiện đúng để đạt được tốc độ nhanh chóng đầu tiên có ý nghĩa. Thông thường, các ứng dụng trong thế giới thực tải nhiều file CSS, phông chữ, JavaScript và hình ảnh và các nội dung này bị chặn hiển thị theo mặc định, điều này làm giảm hiệu suất tải.Trong bài đăng này, ta sẽ khám phá một tính năng mới được gọi là gợi ý tài nguyên cho phép tải trước hoặc tìm nạp trước nội dung và tránh bản chất chặn hiển thị của tài nguyên.
Bạn có ý nghĩa gì khi kết xuất chặn?
Khi một yêu cầu tới một tài nguyên bị chặn, điều đó nghĩa là sự kiện window.onload sẽ không được kích hoạt cho đến khi yêu cầu đó kết thúc. Trong các ứng dụng trang đơn hiện đại, hầu hết các khuôn khổ dựa vào sự kiện này để bắt đầu hoạt động. Điều đó nghĩa là các phần của giao diện user sẽ không bắt đầu hiển thị cho đến khi tải xong các yêu cầu chặn hiển thị.
Hãy xem xét ví dụ sau:
<html> <head> <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'> <style> html { font-family: Roboto; } </style> </head> <body> Hello <script> window.onload = function () { console.log('Loaded'); } </script> </body> </html> Bạn có thể phải thay đổi giá trị của thuộc tính href của <link> ở giữa các lần kiểm tra để tránh nó được lưu vào bộ nhớ đệm. Bạn có thể thay đổi một phần với Roboto:400,600 thành bất kỳ thứ gì khác như Roboto:300,400,600 .
Bạn có thể tìm thấy mã trong JS Fiddle này . Vui lòng tiếp tục và mở nó trong Chrome. Sau đó:
- Mở devtools bằng tab Mạng và console
- Điều chỉnh kết nối với 3G chậm
- Chạy mã và chú ý đến thời điểm văn bản đã tải được ghi
Đã tải phải được đăng nhập vào console ngay sau khi file CSS được tải, như hình ảnh tiếp theo hiển thị:
Tải trước
Giá trị thuộc tính rel="preload" có thể được áp dụng cho một số định dạng file , bao gồm CSS, JS, phông chữ, hình ảnh và hơn thế nữa. Bạn nên đặt thuộc tính as tương ứng tùy thuộc vào loại file . Đối với CSS, giá trị phải as="style" và đối với JavaScript as="script" .
Hãy thay đổi dòng <link> trước đó thành:
<link rel="preload" as="style" href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'> Sau đó, nếu bạn chạy nó như trước và chú ý kỹ, bạn sẽ thấy rằng log đã tải xuất hiện ngay trước khi yêu cầu CSS bắt đầu, như hình ảnh sau đây cho thấy:
Tuy nhiên, bạn có thể nhận thấy rằng kiểu CSS chưa được áp dụng cho văn bản. Đó là bởi vì sử dụng tải trước hoặc tìm nạp trước chỉ tìm nạp tài nguyên, nhưng nó không áp dụng nó . Thay vào đó, nó giữ nó trong bộ nhớ và do bạn quyết định khi nào tải nó.
Đối với trường hợp tải trước, bạn cần áp dụng nó ngay sau khi tải. Vì vậy, bạn có thể thay đổi nó thành:
<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'> Bằng cách đặt thuộc tính rel thành biểu stylesheet , trình duyệt được yêu cầu sử dụng tài nguyên. Nhưng vì nó đã được download trong bộ nhớ nên nó không download lại.
Bạn có thể dùng thử trong JS Fiddle này .
Vì giải pháp dựa trên JavaScript, bạn có thể thêm <noscript> thẻ dự phòng khi JavaScript bị tắt hoặc không tải được:
<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'> <noscript> <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'> </noscript> Tìm nạp trước
Tìm nạp trước hoạt động tương tự như tải trước, với sự khác biệt là trình duyệt coi tài nguyên là ưu tiên thấp. Đó là lý do tại sao nó thường được sử dụng trong các tài nguyên không được yêu cầu ban đầu, nhưng lại được sử dụng sau đó.
Bạn có thể thay đổi ví dụ trước đó để sử dụng tìm nạp trước:
<link rel="prefetch" as="style" onload="this.rel = 'stylesheet'" href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'> Sự khác biệt là bạn có thể sẽ thấy nó tải muộn hơn một chút với mức độ ưu tiên thấp.
Tải trước JavaScript
Ví dụ này, được lấy từ bài viết này của Google Developers về tải trước , cho thấy rằng việc áp dụng tài nguyên JavaScript được tải trước được thực hiện hơi khác một chút: bạn phải đặt thuộc tính src của file và chèn nó vào DOM:
<link rel="preload" href="used-later.js" as="script"> <!-- ... --> <script> var usedLaterScript = document.createElement('script'); usedLaterScript.src = 'used-later.js'; document.body.appendChild(usedLaterScript); </script> * Đoạn mã được sao chép từ tác phẩm do Google tạo và chia sẻ và được cấp phép theo Giấy phép Apache 2.0 .
Kết thúc
Tải trước và tìm nạp trước cung cấp cho ta nhiều sức mạnh hơn về cách tải tài nguyên, tăng hiệu suất web và cho phép các Ứng dụng web tiến bộ nhanh hơn. Lúc đầu, tôi không biết tại sao chúng không hoạt động, cho đến khi tôi nhận ra rằng chúng chỉ lấy tài nguyên mà không áp dụng nó… thở dài 😌.
Lưu ý gợi ý tài nguyên không được hỗ trợ trong tất cả các trình duyệt chỉ dành cho bạn và bạn có thể cần sử dụng polyfill trong production . Nếu bạn chỉ quan tâm đến việc tải trước các tài nguyên CSS, thì polyfill này từ Filament Group là một giải pháp phổ biến.
Giữ bình tĩnh 🦄
Các tin liên quan
Cách chọn các phần tử HTML để tạo kiểu với CSS2020-10-20
Cách tạo chân trang tĩnh bằng HTML và CSS (Phần 7)
2020-10-14
Tổng quan về Trang web HTML và CSS Trình diễn của Chúng tôi
2020-10-12
Cách tạo kiểu cho HTML phần tử div với CSS
2020-10-12
Cách tạo bảng trong HTML
2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS
2020-10-12
Cách sử dụng thuộc tính Rel cho thẻ neo trong HTML
2020-10-12
Cách thêm các thực thể HTML trong Thuộc tính nội dung CSS
2020-10-12
Tham chiếu cú pháp thẻ liên kết HTML cho tệp CSS bên ngoài
2020-10-12
Cách tạo nhận xét HTML
2020-10-12
