Bagaimana Anda Boleh Memuatkan Fail CSS yang Besar Selepas Halaman Dimuatkan?

Mengoptimumkan Penghantaran CSS: Memahami Teknik Pemuatan CSS Tertunda

Untuk meningkatkan prestasi tapak web, pembangun sering mengoptimumkan penghantaran CSS. Satu strategi yang disebut dalam dokumentasi Google Developers melibatkan menyelaraskan CSS kritikal dalam bahagian sambil menangguhkan pemuatan fail CSS asal sehingga selepas halaman dimuatkan. Pendekatan ini mengoptimumkan pemaparan dengan mengutamakan paparan penggayaan penting pada mulanya.

Walau bagaimanapun, ini memberikan kita persoalan: bagaimanakah kita boleh memuatkan fail CSS yang besar selepas halaman dimuatkan?

Penyelesaian: Menangguhkan Pemuatan Fail CSS Yang Besar

Untuk menangguhkan pemuatan fail CSS yang besar, kami boleh menggunakan coretan kod jQuery yang mudah:

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

Dengan memanggil ini dalam fungsi $(document).ready() atau window.onload, kami boleh memuatkan fail CSS secara dinamik selepas halaman selesai dimuatkan.

Pengesahan Kaedah

Untuk mengesahkan bahawa kaedah ini berfungsi, cuba lumpuhkan JavaScript dalam penyemak imbas anda dan kemudian muat semula halaman. Jika halaman masih dimuatkan dengan betul dengan helaian gaya yang digunakan, ia menunjukkan penangguhan pemuatan CSS yang berjaya.

Kaedah Alternatif

Terdapat kaedah alternatif untuk menangguhkan pemuatan CSS, seperti seperti menggunakan

Atas ialah kandungan terperinci Bagaimana Anda Boleh Memuatkan Fail CSS yang Besar Selepas Halaman Dimuatkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!