PRELOAD LÀ GÌ

     

Khi bạn mở một trang web, trình thông qua sẽ gửi những yêu ước tài liệu HTML đến sever (server), phân tích câu chữ của nó, và gửi những yêu mong riêng cho bất kỳ nguồn tài nguyên nào được tham chiếu đến (referenced resource).

Là tín đồ lập trình, bạn nên biết về tất cả các nguồn tài nguyên nhưng trang của chúng ta cần và dòng nào trong những đó là đặc biệt nhất (most important). Bạn có thể sử dụng gọi biết đó nhằm yêu cầu các tài nguyên quan trọng đặc biệt (critical resources) trước và thông qua đó giúp tăng tốc quá trình tải. Bài viết này đang giải thích cách để làm điều đó với thẻ .

Bạn đang xem: Preload là gì


Mục lục


Các áp dụng thực tếCách tiến hành rel=preload

Cách preload làm cho việc

Preload cân xứng nhất với các kiểu tài nguyên đặc biệt quan trọng nhưng lại thường xuyên được trình phê duyệt phát hiện muộn.


*
Trong lấy ví dụ như này, fonts Pacifico được quan niệm trong CSS với nguyên tắc
font-face. Vì vậy, thông thường trình chú ý chỉ mua được file font sau khi nó đã cài và phân tích hoàn thành CSS

Bằng biện pháp preload một tài nguyên tốt nhất định, chúng ta nói với trình chăm chú rằng bạn muốn tìm hấp thụ nó sớm rộng so với nhằm trình coi sóc tự phát chỉ ra tài nguyên đấy theo khoác định thông thường, chính vì bạn chắc chắn rằng rằng nó đặc trưng cho trang hiện đang rất được duyệt.


*
Trong lấy ví dụ này, phông Pacifico được preload (tải trước), vì vậy việc cài font diễn ra song tuy vậy (parallel) với thiết lập CSS (stylesheet). Font thiết lập được tải trước giúp tránh hiện tượng lạ FOIT, để đảm bảo văn bạn dạng vẫn hiển thị trong khi font download về

Chuỗi yêu thương cầu đặc biệt quan trọng thể hiện đồ vật tự của các tài nguyên được trình phê duyệt ưu tiên cùng tìm nạp. Lighthouse khẳng định các tài nguyên ở lever thứ ba của chuỗi này là được phát hiện tại muộn. Bạn có thể sử dụng trình khám nghiệm Preload key requests để xác minh tài nguyên nào cần preload.

*

Bạn rất có thể preload những tài nguyên bằng phương pháp thêm thẻ kèm theo rel=’preload’ vào phần của tư liệu HTML, ví dụ:

Trình xem xét sẽ cache những tài nguyên đã có được preload, chính vì như thế chúng có chức năng được hỗ trợ ngay mau chóng khi trình duyệt đề xuất đến (nói biện pháp khác, nó chỉ download xuống, cùng vẫn chưa thực hiện mã JS hoặc vận dụng CSS sau khoản thời gian tải xong, vấn đề đó rất quan trọng đặc biệt để bảo vệ website chuyển động đúng như hy vọng muốn).

Sau khi thực hiện preload, nhiều trang, bao gồm Shopfy, Finacial Time và Treebo nhận ra trang của họ cải thiện 1s bên dưới khía cạnh những chỉ số tốc độ tập trung vào người dùng cuối, ví dụ điển hình như thời gian tương tác (Time khổng lồ Interactive) và thời gian thấy nội dung trước tiên trên trang (First Contentful Paint).

Các lưu ý tài nguyên khác, ví dụ như preconnect và prefetch được thực thi lúc trình lưu ý thấy phù hợp. Ngược lại preload là chỉ thị bắt buộc (mandatory) so với trình duyệt. Những trình duyệt tân tiến thực hiện nay khá xuất sắc nhiệm vụ ưu tiên các tài nguyên, đó là lý do vì sao các bạn phải thực hiện preload rất là thận trọng, chỉ yêu cầu preload những tài nguyên đặc trưng nhất nhưng thôi.

Các tài nguyên được preload tuy thế lại ko được thực hiện sẽ nhờ cất hộ đi chú ý trong Chrome, khoảng thời gian để nó xét tài nguyên có được dùng hay không là khoảng tầm 3 giây sau khi sự khiếu nại load được kích hoạt.

*
Thông báo làm việc trên nói rằng: tài nguyên 1tcvlsq đã được gắn trực thuộc tính preload tuy thế lại không được thực hiện vài giây sau khoản thời gian nó được kích hoạt thiết lập xuống. Hãy bảo đảm là bạn không preload những tài nguyên ko được dùng.

Lưu ý: Preload được hỗ trợ trên toàn bộ các trình chăm chút hiện đại, xung quanh FireFox.

Các vận dụng thực tế

Preload các tài nguyên được định nghĩa phía bên trong CSS

Các phông được định nghĩa bằng quy tắc
font-face
hoặc các ảnh nền (background) được khái niệm trong tệp tin CSS sẽ không được trình chăm chút biết tới cho đến khi trình duyệt cài và phân tích xong các file CSS. Preload những tài nguyên này bảo đảm an toàn chúng được tra cứu nạp trước khi các file CSS download xong.

Preload những file CSS

Nếu bạn đang vận dụng cách tiếp cận dùng critical CSS, có nghĩa là bạn phân tách CSS của trang thành hai phần. Critical CSS được dùng làm render văn bản thuộc về màn hình đầu tiên, nó được inline (nội tuyến) vào trong thẻ của tài liệu, còn non-critical CSS thường xuyên được lazy-load bởi JavaScript. Việc phải đợi JavaScript thực thi trước lúc tải về CSS không quan trọng đặc biệt (non-critical) hoàn toàn có thể là lý do gây trì hoãn bài toán render khi người dùng cuộn chuột, vì vậy ý tưởng xuất sắc là áp dụng để cài đặt nó xuống sớm hơn.

Xem thêm: Thủ Thuật Khoá Màn Hình Iphone Nhanh, Không Cần Sử Dụng Phím Cứng

*
Một tệp tin CSS trên loài kiến càng được preload

Preload những file JavaScript

Do các trình chăm bẵm không thực thi những tệp được preload (nó chỉ sở hữu trước về và đưa vào vào cache), nên preload rất hữu ích trong vấn đề tách tra cứu nạp thoát khỏi thực thi, điều này còn có thể nâng cấp các số liệu như Time to Interactive (Thời gian chất nhận được tương tác). Preload chuyển động tốt nhất khi bạn chia JavaScript thành nhiều tệp, và chỉ preload các tệp quan lại trọng.

Cách thực hiện rel=preload

Cách đơn giản và dễ dàng nhất để triển khai preload là thêm thẻ vào phần của tài liệu:

Việc cung ứng thêm trực thuộc tính as góp trình duyệt cấu hình thiết lập ưu tiên mang đến tài nguyên được tìm nạp dựa trên kiểu của nó, tùy chỉnh thiết lập đúng các header, cùng phát hiện liệu tài nguyên này đã có sẵn trong cache giỏi là chưa? những giá trị được đồng ý cho nằm trong tính này bao gồm: script, style, font, image, và một vài cái khác.

Bạn có thể tham khảo tài liệu về ưu tiên và lên lịch các nguồn khoáng sản trong Chrome để biết phương pháp trình duyệt thiết lập cấu hình ưu tiên cho các kiểu tài nguyên khác nhau như nuốm nào.

Lưu ý: bài toán bỏ qua nằm trong tính as, hoặc có mức giá trị không hợp lệ tương đương với yêu mong XHR, tạo nên trình duyệt lần khần nội dung gì được tra cứu nạp, vì vậy nó ko thể xác minh mức độ ưu tiên đúng chuẩn được. Nó cũng rất có thể là nguyên nhân khiến cho một số tài nguyên, chẳng hạn như script bị tra cứu nạp mang đến hai lần.

Một số kiểu tài nguyên, chẳng hạn như font, được mua trong chế độ anonymous (vô danh). Với đông đảo kiểu khoáng sản như vậy, chúng ta phải tùy chỉnh cấu hình thuộc tính crossorigin hẳn nhiên preload:

Chú ý: Preload font nếu không tồn tại thuộc tính crossorigin sẽ đề xuất tìm nạp hai lần!

Phần tử cũng gật đầu thuộc tính type, cái bao gồm MIME type của khoáng sản được liên kết. Các trình duyệt áp dụng giá trị của trực thuộc tính type để đảm bảo rằng những tài nguyên được preload chỉ khi giao diện file của bọn chúng được hỗ trợ. Nếu trình coi sóc không cung cấp một dạng hình tài nguyên ví dụ nào đó, nó sẽ bỏ lỡ thẻ .

Bạn cũng có thể preload bất cứ kiểu khoáng sản nào thông qua Link HTTP header:

Link: ; rel="preload"; as="style"Một điểm mạnh của việc chỉ định preload trải qua HTTP Header là trình duyệt không cần phải phân tích tư liệu để tìm hiểu ra nó, điều đó hoàn toàn có thể giúp bạn đã đạt được cải thiện bé dại trong một số trong những trường hợp.

Preload module JavaScript bằng webpack

Nếu bạn áp dụng module bundler cho việc xây dựng các tệp của ứng dụng, bạn phải kiểm tra xem nó có hỗ trợ tính năng injection của thẻ preload tuyệt không. Cùng với webpack từ bỏ phiên bạn dạng 4.6.0 trở đi, preload được hỗ trợ thông qua sử dụng magic comments phía bên trong import():

import(_/* webpackPreload: true */_ "CriticalChunk")Nếu bạn áp dụng phiên phiên bản webpack cũ hơn, bạn cần sử dụng plugin của mặt thứ ba có tên preload-webpack-plugin.

Kết luận

Để nâng cao tốc độ cài đặt trang, chúng ta nên preload những tài nguyên đặc biệt mà ví như theo cách thông thường nó sẽ ảnh hưởng phát hiện tại muộn vào trình ưng chuẩn (có thể vày nó ẩn trong số file CSS, hoặc nó có vị trí phải chăng trong file HTML, vân vân). Preload hồ hết thứ đang phản tính năng do vậy bạn phải dùng preload một cách cẩn trọng và đo đạc ảnh hưởng của nó trong quả đât thực (real-world).

Ví dụ demo

Phần này tôi (người dịch) sản xuất để họ dễ hiểu, với dễ bình chọn hơn. Tôi sinh sản 2 trang tất cả nội dung giống hệt nhau, chỉ khác là 1 trong những trang tất cả preload, còn một trang thì không.

Mô hình cầm này: tôi chế tạo trang với hai font tùy chỉnh và một ảnh nền làm cho background, trong số đó cả nhì tài nguyên này đều bên trong CSS. Điều đó có nghĩa là, theo khoác định, trình thông qua sẽ đề xuất tải CSS với phân tích cú pháp hoàn thành thì bắt đầu tải font tùy chỉnh và ảnh background được. Trang thông thường sẽ lưu lại nguyên cấu trúc như vừa tế bào tả, còn cùng với trang tất cả preload, tôi dữ thế chủ động preload cả cha tài nguyên (gồm hai font với một ảnh) để thấy sự khác biệt giữa chúng như vậy nào.

Trang mua theo khoác định: https://static.chimcat.net/2020/normal-font-bg.html

Trang preload trước tài nguyên: https://static.chimcat.net/2020/preload-font-bg.html

Đoạn mã mẫu preload (khi thực hiện bạn nên suy xét tất cả các thuộc tính là rel, href, as, type với crossorigin):

Kết quả đánh giá với DevTools (Lighthouse) trên Chrome:

*
Trên trang cài đặt thông thường, chúng ta có thể thấy file CSS buộc phải tải với phân tích xong thì hai phông và hình ảnh nền bắt đầu tải về
*
Trên trang gồm preload, chúng ta thấy cả 4 tài nguyên là nhị font, css và hình ảnh nền cùng tải về cùng một lúc

Vì 2 trang tương tự y nhau (ngoại trừ biệt lập về preload) nên con số request (6), dung tích tải về (180/240) phần đa giống nhau. Điểm biệt lập dễ thấy là thời gian tải về (Finish) của trang có preload ít hơn (nghĩa là tốt hơn, chỉ 1,80s đối với 2,24s, mỗi lần kiểm tra số lượng này sẽ đổi khác do nó còn phụ thuộc vào đk kết nối mạng, nhưng nhìn tổng thể trang có preload sẽ sở hữu nhanh hơn).

Xem thêm: Hướng Dẫn 4 Cách Viết Số 0 Ở Đầu Trong Excel Cực Kỳ Đơn Giản

Tại sao trang gồm preload mua nhanh hơn: Hãy tưởng tượng biện pháp tải website y như xây 1 căn nhà, CSS chính phiên bản thiết kế bạn thuê phong cách thiết kế sư vẽ. Còn ảnh, font y như nguyên vật liệu xây buộc phải căn nhà. Rất phù hợp khi bọn họ cần có bạn dạng thiết kế vào tay thì mới có thể biết đề xuất mua nguyên liệu nào, con số bao nhiêu, cơ mà thường chúng ta đã cầm rõ những vật liệu căn bạn dạng cần xây tòa nhà rồi. Do vậy sẽ cấp tốc hơn nếu đồng thời, vào khoảng thời gian chờ đợi phiên bản thiết kế được gửi từ thành phố sài gòn về hà thành (hỏa tốc thì cũng yêu cầu mất 1 ngày), thì khi đó bạn cũng nhập luôn luôn vật liệu cần thiết như xi măng, đá, mạt, cát, fe thép. Thời hạn tiết kiệm được là nhờ bạn không phải chờ đợi bản thiết kế về rồi mới mua vật liệu (mất thêm ít nhất một ngày). Khi vật tư có sẵn, và bản thiết kế về, chúng ta bắt tay vào xây nhà luôn.

Có thể có một không đúng lầm nhỏ tuổi trong vật dụng tự preload, ban đầu nó gắng này:

*
file CSS được tôi để tại dưới cùng

Theo thiết kế của trang thì phông thu-phap.ttf và ảnh background ở trong screen đầu tiên, trong những khi font tap-viet.ttf cần sử dụng trong màn hình hiển thị thứ hai, bắt buộc đáng ra tap-viet.ttf sẽ đề xuất ở dưới cùng. Ngoài ra, tôi thử nhằm file CSS lên trên thuộc xem trang bị tự tải có biến đổi gì không, mã chuyển đổi như sau:

Trang demo: https://static.chimcat.net/2020/thu-tu-preload1.html

Kết trái là lắp thêm tự download về khoáng sản đã biến hóa theo chỉ dẫn, tuy thế file CSS vẫn download về sau cùng (điều này làm bọn họ nhớ lại rằng thông tư preload là thông tư bắt buộc, cùng trình duyệt tuân thủ điều này bằng phương pháp tải các tài nguyên preload trước ngay cả khi CSS được đặt tại trên thuộc trong tài liệu HTML):