hujung hadapan web
Tutorial H5
Bagaimana untuk menangguhkan CSS tidak kritikal dalam halaman HTML5?
Bagaimana untuk menangguhkan CSS tidak kritikal dalam halaman HTML5?
Untuk meningkatkan prestasi pemuatan halaman dengan berkesan, anda perlu menyamakan CSS kritikal terlebih dahulu dan memuatkan CSS yang tidak kritikal secara asynchronously; 1. Gunakan alat atau secara manual mengenal pasti CSS kritikal dan selaras dengan
; 2. Gunakan Rel = "Preload" untuk menggabungkan Onload, JavaScript Dynamic Loading atau RequestIdLecallback Asynchronously; 3. Gunakan atribut media untuk menangguhkan memuatkan gaya bersyarat seperti cetakan atau topik; 4. menggabungkan dan memampatkan CSS bukan kritikal untuk mengurangkan permintaan; Anda boleh menggunakan teknik media = "cetak" untuk mencapai pemuatan asynchronous bebas JavaScript, dengan itu mengoptimumkan kelajuan rendering skrin pertama.
Menangguhkan CSS yang tidak kritikal dalam halaman HTML5 membantu meningkatkan prestasi beban halaman dengan memastikan hanya CSS yang diperlukan untuk kandungan di atas kali ganda dimuatkan pada mulanya. Gaya selebihnya-tidak kritikal-dimuatkan kemudian, tanpa menyekat rendering.
Inilah cara melakukannya dengan berkesan:
1. Kenal pasti CSS kritikal dan tidak kritikal
CSS kritikal adalah set minimum gaya yang diperlukan untuk menjadikan bahagian yang kelihatan dari halaman anda (di atas folder). Segala-galanya tidak kritikal.
- Gunakan alat seperti penthouse , kritikal , atau penjana dalam talian untuk mengekstrak CSS kritikal secara automatik.
- Secara manual semak halaman anda dan mengasingkan gaya untuk tajuk, bahagian wira, dan komponen penanaman awal.
Setelah dikenal pasti, selaras CSS kritikal secara langsung di :
<head>
<yaya>
/ * CSS kritikal yang digariskan */
H1 {font-size: 2rem; Warna: #333; }
.hero {margin: 0; Padding: 20px; }
/ * ... */
</gaya>
</head>2. Muatkan CSS tidak kritikal secara asynchronously
Standard <link rel="stylesheet"> tag rendering blok. Untuk menangguhkan CSS yang tidak kritikal, muatkannya secara asynchronously menggunakan JavaScript atau helah HTML.
Pilihan A: Gunakan rel="preload" dengan onload
Pramuat fail CSS dan tukar rel ke stylesheet sekali dimuatkan:
<link rel = "preload" href = "non-critical.css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet'"> <noscript> <link rel = "stylesheet" href = "non-critical.css"> </noscript>
Sertakan skrip kecil untuk mengendalikan sandaran jika JavaScript dilumpuhkan:
<script>
// Pilihan: Pastikan pencetus acara onload
fungsi loadcss (href) {
var link = document.createElement ('link');
link.rel = 'Stylesheet';
link.href = href;
document.head.appendchild (pautan);
}
// loadcss call ('non-critical.css') selepas halaman terbiar
</script>Pilihan B: Memuatkan Dinamik dengan JavaScript
Muatkan CSS yang tidak kritikal selepas halaman telah diberikan:
<script>
window.addeventListener ('beban', fungsi () {
var link = document.createElement ('link');
link.rel = 'Stylesheet';
link.href = 'non-critical.css';
document.head.appendchild (pautan);
});
</script> Atau gunakan requestIdleCallback untuk prestasi yang lebih baik:
<script>
jika (window.requestidlecallback) {
requestIdLeCallback (fungsi () {
loadcss ('non-kritikal.css');
});
} else {
// Acara Muat semula ke Load
window.addeventListener ('beban', fungsi () {
loadcss ('non-kritikal.css');
});
}
fungsi loadcss (href) {
var link = document.createElement ('link');
link.rel = 'Stylesheet';
link.href = href;
document.head.appendchild (pautan);
}
</script>3. Gunakan atribut media untuk menangguhkan gaya cetak atau bersyarat
Gaya Gaya yang tidak diperlukan dengan serta -merta (seperti cetakan atau gaya tema) menggunakan atribut media :
<link rel = "stylesheet" href = "print.css" media = "print"> <link rel = "stylesheet" href = "gelap-theme.css" media = "lebih suka-warna-skema: gelap">
Ini masih dimuatkan, tetapi dengan keutamaan yang lebih rendah, membantu mengurangkan kesan menyekat.
4. Minify dan menggabungkan fail bukan kritikal
Kurangkan permintaan HTTP dengan menggabungkan semua CSS yang tidak kritikal ke dalam satu fail minified sebelum menangguhkannya. Alat seperti Webpack, Parcel, atau Build Script (misalnya, dengan cssnano ) dapat membantu.
Bonus: Gunakan media="print" Trik untuk Penangguhan Segera
Trik pintar untuk memuatkan CSS secara tidak segerak tanpa JavaScript:
<link rel = "stylesheet" href = "non-critical.css" media = "print" onload = "this.media = 'all'">
Penyemak imbas memuat turun fail dengan cepat (kerana print adalah keutamaan yang rendah), dan sekali dimuatkan, onload menukarnya kepada all , memohon gaya.
Pada asasnya, menangguhkan CSS yang tidak kritikal dengan merenung apa yang penting dan memuatkan selebihnya dengan preload , JavaScript, atau helah media pintar. Ia tidak sukar, tetapi ia membuat perbezaan yang nyata dalam prestasi yang dirasakan.
Atas ialah kandungan terperinci Bagaimana untuk menangguhkan CSS tidak kritikal dalam halaman HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Cara membuat laman web HTML5 yang mudah
Aug 12, 2025 am 11:51 AM
Untuk membuat laman web HTML5 yang mudah, anda perlu terlebih dahulu menggunakan jenis dokumen pengisytiharan, dan kemudian membina struktur asas yang mengandungi, dan, yang menetapkan pengekodan aksara, viewport dan tajuk, menambah kandungan yang kelihatan seperti tajuk, perenggan, pautan, gambar dan senarai. Simpan sebagai fail .html dan buka secara langsung dalam penyemak imbas untuk dilihat, tanpa sokongan pelayan. Ini adalah asas halaman HTML5 yang lengkap dan berkesan.
Apakah elemen selain untuk HTML5?
Aug 12, 2025 pm 04:37 PM
Theelementshouldbeusedforcontenttanglylyrelatedtothemaincontent, suchassidebars, pullquotes, definisi, iklan, orrelatedlinks; 2.itcanbeplacedinsideoroutsideanarticledependingoncontext; 3.IisaseManticeLementThanceSaccessabilityandscessibilityandscessibilityandscessabilityandscessibilityandscessibilityandscessibilityandscessibilityandscessabilityandscess
Cara membuat sempadan bertitik di CSS
Aug 15, 2025 am 04:56 AM
Gunakan CSS untuk membuat sempadan bertitik, hanya tetapkan atribut sempadan untuk bertitik. Sebagai contoh, "Sempadan: 3PXDotted#000" boleh menambah sempadan titik hitam 3-pixel ke elemen. Dengan menyesuaikan lebar sempadan, saiz titik boleh diubah. Sempadan yang lebih luas menghasilkan mata yang lebih besar. Anda boleh menetapkan sempadan bertitik untuk sisi tertentu, seperti "Border-top: 2PxDotteded". Sempadan bertitik sesuai untuk elemen peringkat blok seperti div dan input. Mereka sering digunakan dalam keadaan fokus atau kawasan yang boleh diedit untuk meningkatkan kebolehcapaian. Perhatikan kontras warna. Pada masa yang sama, berbeza dengan gaya garis pendek Dashed, bertitik membentangkan bentuk titik bulat. Ciri ini digunakan secara meluas dalam semua pelayar arus perdana.
Cara membuat gelangsar testimoni responsif dengan CSS
Aug 12, 2025 am 09:42 AM
Adalah mungkin untuk membuat slider karusel automatik yang responsif dengan CSS tulen, hanya menggabungkan struktur HTML, susun atur flexbox, dan animasi CSS. 2. Pertama membina bekas HTML semantik yang mengandungi pelbagai syarat cadangan, setiap .Item mengandungi kandungan rujukan dan maklumat pengarang. 3. Gunakan bekas induk untuk menetapkan paparan: flex, lebar: 300% (tiga slaid) dan gunakan limpahan: tersembunyi untuk mencapai susunan mendatar. 4. Gunakan @KeyFrames untuk menentukan transformasi translatex dari 0% hingga -100%, dan menggabungkan animasi: scroll15slinearinfinite untuk mencapai tatal automatik lancar. 5. Tambah media
Apakah atribut draggable dalam html5
Aug 12, 2025 am 09:50 AM
TheDragGableatTributeInhtml5specifiesWheTherAnelementCanBedragged, withValues "true", "false", OranEmptyString (Samaeas "true"). 2.SttingDragGable = "true" enablesdrag-and-dropforanyelement
Cara Menggunakan Harta Aliran Grid-Auto di CSS
Aug 14, 2025 pm 09:26 PM
Nilai lalai aliran grid-auto adalah berturut-turut, yang bermaksud untuk diatur dalam urutan baris, dan membuat baris baru apabila baris penuh; 2. Apabila ditetapkan ke lajur, mengutamakan lajur. Buat lajur baru selepas lajur penuh, dan ia perlu digunakan dengan grid-auto-lajur; 3. Menambah kata kunci kepadatan boleh membolehkan susunan yang ketat, cuba mengisi jurang di depan, tetapi ia boleh menjejaskan kebolehcapaian; Harta ini hanya mempengaruhi item grid yang tidak diposisikan secara eksplisit, dan harus digunakan dalam kombinasi dengan grid-auto-baris atau grid-auto-lajur untuk mengawal saiz trek tersirat, dan sesuai untuk susunan automatik dalam susun atur dinamik atau responsif.
Cara Menggunakan Tag NAV untuk Pautan Navigasi di HTML5
Aug 15, 2025 am 05:55 AM
Thetaginhtml5isusedtodefineasectionofmajornavigationLinks, providingsemanticstructureandImprovingAccessabilityandseo; itshouldwrapprimarynavigationelementelementelemenuslesortablesofcontents, noteveryLinkonapage, andcanbeenhanceRabelsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssshconapage, noteverylinkonapage
Cara Menggunakan :: Sebelum dan :: Selepas Pseudo-Elements di CSS
Aug 14, 2025 pm 08:25 PM
:: Sebelum dan :: Selepas unsur-unsur pseudo mesti memasukkan kandungan melalui atribut kandungan, dan walaupun mereka kosong, mereka mesti ditakrifkan; 2. Mereka sering digunakan untuk menambah ikon hiasan, petua, atau terapung yang jelas, dan menghasilkan kesan visual melalui CSS; 3. Posisi dan kawalan gaya boleh digabungkan dengan atribut seperti kedudukan dan paparan, dan menyokong animasi dan transformasi; 4. Ia harus dielakkan untuk digunakan secara langsung pada unsur -unsur kosong seperti IMG atau input, dan kandungan yang dihasilkan tidak boleh dipilih atau dibaca oleh pembaca skrin, jadi ia tidak digunakan untuk memaparkan maklumat utama.
