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
Các tin cũ hơn:
GalaxyCloud hợp tác với Học viên ngoại giao phân tích dữ liệu Biển đông 2021-10-25Hệ thống Theo dõi lộ trình và Quản lý Camera xe Toàn quốc, theo chuẩn 2021 Bộ giao thông 2021-10-20
Xem NVME kioxia fl6 series enterprise nvme gen 4 ssd slc 2021-09-25
Tạo Chứng chỉ Self-signed SSL certificate với nginx trên ubuntu 20.04.1 2021-09-23
Cài đặt SSH Key trên Server Rocky linux 8 2021-09-17
Cài đặt bảo mật cơ bản cho Server Rocky linux 8 2021-09-17
Cách cài Etherpad collaborative web editor trên ubuntu 20.04 2021-09-14
Cài đặt NodeJS trên Ubuntu 20.04 2021-08-09
Các Xu Hướng Công Nghệ Ngành F&B Bùng Nổ Trong Thời Gian Tới 2021-07-13
CẢNH BÁO NGUY CƠ TẤN CÔNG MẠNG VÌ LỖ HỔNG WINDOW TẠI VIỆT NAM 2021-06-29
