Pengoptimuman Prestasi Web & Lighthouse · Pelajaran

Strategi Pemuatan Skrip yang Cekap

Kuasai teknik memuatkan JavaScript secara tak segerak, menangguhkan skrip tidak kritikal dan menggunakan corak modul dengan berkesan.

Pelajaran 2 daripada 411 langkah

Strategi Pemuatan Skrip yang Cekap ialah pelajaran Pengoptimuman Prestasi Web & Lighthouse percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pengoptimuman Prestasi Web & Lighthouse, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Skrip Pantas, Halaman Pantas

JavaScript menggerakkan pengalaman web interaktif. Namun, jika tidak dimuat dengan cekap, ia boleh memperlahankan laman web anda dengan ketara.

Skrip yang lambat dimuat boleh menghalang halaman anda daripada dipaparkan, menyebabkan pengguna menunggu lebih lama untuk melihat dan berinteraksi dengan kandungan.

Dalam pelajaran ini, kita akan meneroka strategi untuk memuatkan skrip dengan bijak bagi memastikan pengguna anda mendapat pengalaman yang lancar dan pantas.

Skrip Menghalang Pemaparan

Secara lalai, apabila pelayar menemui teg <script> dalam HTML anda, pelayar menjeda penghuraian dokumen HTML.

Pelayar mendapatkan, menghuraikan dan melaksanakan skrip itu serta-merta. Hanya selepas skrip selesai, penghuraian HTML boleh disambung semula.

Ini boleh menjadi halangan besar, khususnya untuk skrip yang besar. Cuba jalankan skrip ringkas ini untuk melihat cara ia mensimulasikan operasi yang menghalang:

console.log("HTML parsing paused (simulated).");
// Simulate a computationally heavy task
let sum = 0;
for (let i = 0; i < 100000000; i++) {
  sum += i;
}
console.log("Blocking script finished. Sum:", sum);
console.log("HTML parsing resumes (simulated).");

`async`: Muatkan Secara Selari

Atribut async memberitahu pelayar supaya memuat turun skrip secara selari dengan penghuraian dokumen HTML.

Tidak menghalang: Penghuraian HTML diteruskan semasa skrip dimuat turun.
Laksanakan serta-merta: Skrip dilaksanakan sebaik sahaja selesai dimuat turun, tanpa menunggu penghuraian HTML selesai.
Susunan tidak dijamin: Skrip dengan async mungkin dilaksanakan dalam apa-apa susunan, dan berkemungkinan tidak mengikut susunan kemunculannya dalam HTML.

Gunakan async untuk skrip bebas seperti analitik atau iklan yang tidak bergantung pada skrip lain atau DOM lengkap.

`async` dalam Tindakan

Bayangkan skrip ini dimuatkan dengan <script async src="my-async-script.js"></script>.

Skrip itu dimuat turun di latar belakang dan, sebaik sahaja bersedia, terus dijalankan. Kandungan halaman lain boleh terus dimuatkan.

Perhatikan bahawa "Kandungan halaman diteruskan..." mungkin muncul sebelum "Skrip async selesai" dalam keadaan pelayar sebenar kerana skrip itu tidak menghalang.

console.log("Async script started downloading.");
// Simulate fetching data or setting up a listener
setTimeout(() => {
  console.log("Async script finished execution.");
}, 50); // Small delay to simulate download + execution
console.log("Page content continues to load in parallel.");

`defer`: Laksanakan Selepas HTML

Atribut defer juga menjadikan skrip tidak menghalang, tetapi mempunyai perbezaan utama dari segi masa pelaksanaan.

Tidak menghalang: Seperti async, skrip dimuat turun secara selari dengan penghuraian HTML.
Laksanakan selepas HTML: Skrip hanya dilaksanakan selepas dokumen HTML dihuraikan sepenuhnya.
Susunan dijamin: Skrip dengan defer dilaksanakan tepat mengikut susunan kemunculannya dalam HTML.

defer sesuai untuk skrip yang bergantung pada DOM lengkap, seperti elemen interaktif atau pengesahan borang, tetapi tidak perlu menghalang pemaparan awal.

`defer` dalam Tindakan

Skrip ini, yang dimuatkan dengan <script defer src="my-defer-script.js"></script>, akan menunggu sehingga semua HTML diproses sebelum dijalankan.

Ini sesuai untuk skrip yang perlu berinteraksi dengan elemen pada halaman tanpa menghalang pengguna daripada melihat kandungan terlebih dahulu.

console.log("Defer script started downloading.");
// Simulate DOM manipulation or event setup
setTimeout(() => {
  // In a real browser, document.getElementById would now work.
  console.log("Defer script finished execution after HTML parsed.");
}, 50); // Small delay
console.log("HTML parsing completed (simulated) before defer script runs.");

Pilih Strategi Anda

Memahami perbezaan antara async dan defer amat penting untuk prestasi optimum:

async: Untuk skrip bebas yang tidak bergantung pada kesiapsiagaan DOM atau susunan skrip lain (contohnya analitik dan widget pihak ketiga).
defer: Untuk skrip yang memerlukan DOM dihuraikan sepenuhnya atau bergantung pada susunan pelaksanaan skrip tertunda lain (contohnya interaktiviti UI dan pengesahan tersuai).
Tiada atribut: Menghalang pemaparan. Gunakan hanya untuk skrip penting yang mesti dijalankan sebelum perkara lain.

Modul ES: Penskripan Moden

Modul ES (Modul ECMAScript) menyediakan sistem piawai untuk menyusun kod JavaScript ke dalam fail berasingan yang boleh mengimport dan mengeksport kefungsian.

Apabila anda menggunakan <script type="module">, pelayar mengendalikan skrip anda secara berbeza:

Ditangguhkan secara lalai: Modul ditangguhkan secara automatik, maka tidak menghalang penghuraian HTML.
Mod Ketat: Modul berjalan dalam mod ketat secara lalai.
Dalam skop: Pemboleh ubah dan fungsi yang diisytiharkan pada aras teratas modul berada dalam skop modul itu, bukan dalam skop global.

Cara Modul Dimuatkan

Modul ES menggunakan import untuk membawa masuk kefungsian daripada fail lain dan export untuk menyediakan kefungsian.

Pelayar mengendalikan pemuatan modul dengan cekap, mendapatkan kebergantungan secara selari dan melaksanakannya mengikut susunan yang betul selepas HTML dihuraikan.

Berikut ialah contoh sintaks modul asas:

// Example: myUtils.js
export const PI = 3.14159;
export function multiply(a, b) {
  return a * b;
}

// Example: main.js (loaded with <script type="module">)
import { PI, multiply } from './myUtils.js';

console.log("Module imported successfully.");
console.log("PI value:", PI);
console.log("5 * 10 =", multiply(5, 10));

Pilihan Pemuatan Skrip

Anda sedang membina laman web dan perlu memuatkan beberapa fail JavaScript. Pernyataan manakah berikut tentang pemuatan skrip yang cekap adalah TRUE?

Jawab dalam pelajaran interaktif

Ulang Kaji: Menguasai Pemuatan

Syabas! Anda telah mempelajari cara memuatkan JavaScript dengan cekap:

Skrip lalai menghalang penghuraian, lalu memperlahankan halaman anda.
Atribut async membolehkan skrip dimuat turun secara selari dan dilaksanakan serta-merta, sesuai untuk skrip bebas.
Atribut defer juga memuat turun skrip secara selari tetapi menunggu sehingga HTML dihuraikan sepenuhnya sebelum melaksanakan skrip, sambil mengekalkan susunan.
Modul ES (<script type="module">) menawarkan cara moden dan tersusun untuk mengatur kod, serta berkelakuan seperti skrip tertunda secara lalai.

Dengan menggunakan strategi ini, anda boleh meningkatkan prestasi pemuatan laman web yang dirasakan dan yang sebenar dengan ketara!

Percuma untuk bermula

Pelajari Pengoptimuman Prestasi Web & Lighthouse dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Strategi Pemuatan Skrip yang Cekap” percuma?

Ya — teks penuh “Strategi Pemuatan Skrip yang Cekap” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pengoptimuman Prestasi Web & Lighthouse, tingkat taraf kepada CoddyKit PRO. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Strategi Pemuatan Skrip yang Cekap”?

Kuasai teknik memuatkan JavaScript secara tak segerak, menangguhkan skrip tidak kritikal dan menggunakan corak modul dengan berkesan. Anda berlatih Pengoptimuman Prestasi Web & Lighthouse menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pengoptimuman Prestasi Web & Lighthouse?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengoptimuman Prestasi Web & Lighthouse di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Strategi Pemuatan Skrip yang Cekap” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pengoptimuman Prestasi Web & Lighthouse ini?

Ya. Setiap pelajaran Pengoptimuman Prestasi Web & Lighthouse menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pengoptimuman Prestasi Web & Lighthouse