Search

Suggested keywords:

Load page nhanh hơn với kỹ thuật preload

Posted By: Ethan

1761835855000
post-title
Table of content

    Vấn Đề

    Khi lập trình frontend/ui các bạn thường gặp phải tình trạng là các assets (css, js, fonts, imgs) tải lại mỗi khi ta chuyển trang. Điều này gây nên hiện tượng nháy (flash), khá khó chịu.

    Vậy để giảm hay giải quyết nó thế nào, hôm nay chúng ta cùng xem qua bài viết này nhé.

    Preload

    Đây là kỹ thuật đánh dấu cho trình duyệt biết, với cái resource này nó quan trọng và nên được load trước tiên nhất

    Cách sử dụng

    Ta chỉ cần thêm attribute như thế này lên loại resource:

    <link rel="preload" href="URL-tài-nguyên" as="type" …>

    Đây là hint (gợi ý) tuy nhiên với rel="preload" thì hầu như trình duyệt bắt buộc thực hiện tải tài nguyên đó ngay lập tức khi thấy nó. 
    Mục đích: “Cho trình duyệt biết trước” rằng “tài nguyên này rất quan trọng, sẽ được sử dụng sớm trong trang này”, để trình duyệt ưu tiên tải sớm hơn so với việc phát hiện nó theo luồng bình thường. 
    Phân biệt với các hint khác: 

    • preconnect: chỉ thiết lập kết nối DNS/TCP/TLS sớm. 
    • prefetch: dành cho tài nguyên sẽ cần cho lần điều hướng tiếp theo (future navigation) – ưu tiên thấp hơn. 

    Ví dụ:

    <head>
  <link rel="preload" as="style" href="style.css">
  <link rel="preload" as="script" href="main.js">
  ...
</head>

    Những thuộc tính quan trọng:

    • as="…", để cho biết loại tài nguyên: script, style, font, image, fetch …
    • crossorigin nếu tài nguyên từ domain khác, nhất là với font.
    • type="mime/type" có thể dùng để cho biết rõ định dạng (font/woff2)

    Ví dụ với ảnh:

     <link rel="preload"
      as="image"
      href="wolf.jpg"
      imagesrcset="wolf_400.jpg 400w, wolf_800.jpg 800w, wolf_1600.jpg 1600w"
      imagesizes="50vw">

     

    Ví dụ trong EzyPlatform:

    Trong ezyplatform thì mặc định sử dụng font awesome cho icon, mỗi lần load lại, hay navigate page nó phải load lại font.

    Đây là css được include mặc định trước khi sử dụng kỹ thuật preload:

    <link rel="stylesheet" ezy:vhref="/css/all.min.css">

     

     

    Và sau khi sử dụng preload, ta thay thế dòng include style ở trên bằng bên dưới, như sau:

    <link rel="preload" href="/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
<!-- Font Awesome Icons -->
<link rel="preload" href="/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

     

    Ở đây, vì file all.min.css sử dụng 3 files fonts như trên, nên mình đã preload chúng trước, vì vậy khi all.min.css sử dụng chúng, lúc này nó đã hoàn toàn ở trên DOM, sẵn sàng được sử dụng.

     

    Và đây là thành quả, thanh sidebar đã mất đi hiện tượng flick r phải k nào ? Nếu ta áp dụng thêm cho một số thành phần khác thì sẽ có tác dụng tương tự.

     

    Hy vọng các bạn áp dụng và thành công với kỹ thuật này. Cheer! 😁😁😁

    Table of content