Bagaimana Menangguhkan Pemuatan Fail CSS Besar untuk Prestasi Laman Web yang Diperbaiki?

Mengoptimumkan Penghantaran CSS: Menangguhkan Pemuatan Fail CSS Besar

Dalam usaha mengoptimumkan prestasi tapak web, satu teknik biasa melibatkan penangguhan pemuatan besar Fail CSS sehingga selepas kandungan awal halaman dimuatkan. Strategi ini membantu mengurangkan masa pemaparan halaman dan meningkatkan prestasi yang dilihat.

Pemuatan Tertunda dengan jQuery

Jika anda selesa menggunakan jQuery, anda boleh melaksanakan pemuatan CSS tertunda menggunakan coretan kod berikut:

<code class="javascript">function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};</code>

Panggil sahaja fungsi ini dalam pengendali acara $(document).ready() anda untuk menangguhkan pemuatan fail CSS.

Kaedah Alternatif

Sebagai alternatif, jika anda lebih suka mengelak daripada menggunakan jQuery, anda boleh mencipta elemen pautan secara manual dan menambahkannya pada kepala dokumen. Berikut ialah contoh:

var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "large.css";
document.head.appendChild(link);

Tiada Javascript

Perhatikan bahawa memuatkan fail CSS selepas pemuatan halaman memerlukan pengubahsuaian pada kod HTML. Jika JavaScript dilumpuhkan dalam penyemak imbas, fail CSS tertunda tidak akan dimuatkan. Oleh itu, adalah penting untuk menyelaraskan CSS kritikal dalam HTML atau mempertimbangkan teknik pengoptimuman alternatif.

Atas ialah kandungan terperinci Bagaimana Menangguhkan Pemuatan Fail CSS Besar untuk Prestasi Laman Web yang Diperbaiki?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!