Rumah hujung hadapan web html tutorial Bezakan antara import dan pautan

Bezakan antara import dan pautan

Feb 24, 2024 am 08:36 AM
Pautan perbezaannya Pemuatan tak segerak import Malas memuatkan

Bezakan antara import dan pautan

Tajuk: Apakah perbezaan antara import dan pautan, contoh kod khusus diperlukan

Teks:
Apabila menulis halaman web atau program, kami sering menggunakan fail atau perpustakaan luaran untuk melaksanakan fungsi atau gaya tertentu. Apabila memperkenalkan fail luaran, kami sering menghadapi dua kaedah biasa: import dan pautan. Terdapat beberapa perbezaan dalam penggunaan antara kedua-dua kaedah ini Mari kita bincangkan perbezaan dan contoh kodnya secara terperinci.

  1. import
    Import ialah cara untuk memperkenalkan fail luaran dalam JavaScript, terutamanya digunakan untuk memperkenalkan fail JavaScript. Ia boleh digunakan dalam dua cara: async dan defer.

Kaedah async ialah kaedah pemuatan tak segerak Apabila penyemak imbas menghuraikan pernyataan import, ia tidak akan menunggu untuk memuat turun dan melaksanakan fail luaran, tetapi akan terus menghuraikan dan melaksanakan kod berikutnya. Kaedah ini sesuai untuk kod yang tidak bergantung pada fail luaran untuk pelaksanaan dan boleh mempercepatkan pemuatan halaman.

Contoh kod:

<script async src="main.js"></script>
Salin selepas log masuk

Kaedah penangguhan adalah kaedah pemuatan malas Berbeza dengan async, ia akan menunggu dokumen halaman dimuatkan sebelum melaksanakan. Ini memastikan bahawa fail luaran boleh mendapatkan elemen yang berkaitan pada halaman dan mengelakkan ralat.

Contoh kod:

<script defer src="main.js"></script>
Salin selepas log masuk

Perlu diingatkan bahawa kaedah import hanya sesuai untuk memperkenalkan fail JavaScript Ia tidak menyokong pengenalan fail CSS Ia mesti diimport menggunakan tag pautan sahaja.

  1. pautan
    pautan ialah cara untuk memperkenalkan fail luaran dalam HTML, terutamanya digunakan untuk memperkenalkan fail CSS. Ia mempunyai ciri-ciri berikut:

pautan boleh memperkenalkan fail CSS luaran untuk menggunakan gaya pada dokumen HTML. Ia boleh menentukan laluan fail CSS yang diimport melalui atribut href.

Contoh kod:

<link rel="stylesheet" href="style.css" />
Salin selepas log masuk

pautan juga menyokong penentuan ikon web, iaitu favicon. Laluan ke fail ikon boleh ditentukan melalui atribut rel="icon" dan href.

Contoh kod:

<link rel="icon" href="favicon.ico" />
Salin selepas log masuk

Selain itu, tag pautan boleh menentukan syarat yang berkenaan bagi fail gaya melalui atribut media. Sebagai contoh, kita boleh menghantar media="screen" untuk menentukan bahawa fail gaya hanya digunakan apabila skrin dipaparkan.

Contoh kod:

<link rel="stylesheet" href="style.css" media="screen" />
Salin selepas log masuk

Perlu diingatkan bahawa cara pautan memperkenalkan fail luaran dimuatkan secara serentak, iaitu penyemak imbas akan memuat turun dan melaksanakan fail luaran serta-merta apabila tag pautan dihuraikan. Ini boleh menyebabkan halaman dimuatkan dengan lebih perlahan, jadi berhati-hati apabila menggunakan pautan.

Ringkasan:
import dan pautan ialah dua cara yang biasa digunakan untuk memperkenalkan fail luaran, dan terdapat beberapa perbezaan dalam penggunaannya. Import digunakan terutamanya untuk memperkenalkan fail JavaScript, menyokong pemuatan asynchronous dan malas manakala pautan digunakan terutamanya untuk memperkenalkan fail CSS, menyokong definisi keadaan gaya dan ikon web. Dalam pembangunan sebenar, adalah sangat penting untuk memilih kaedah pengenalan yang sesuai mengikut keperluan dan senario anda sendiri.

Atas ialah kandungan terperinci Bezakan antara import dan pautan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Perbezaan antara program H5 dan mini dan aplikasi Perbezaan antara program H5 dan mini dan aplikasi Apr 06, 2025 am 10:42 AM

H5. Perbezaan utama antara program mini dan aplikasi ialah: Senibina Teknikal: H5 adalah berdasarkan teknologi web, dan program mini dan aplikasi adalah aplikasi bebas. Pengalaman dan Fungsi: H5 adalah ringan dan mudah digunakan, dengan fungsi terhad; Program mini adalah ringan dan mempunyai interaktif yang baik; Aplikasi berkuasa dan mempunyai pengalaman yang lancar. Keserasian: H5 adalah serasi, aplikasinya dan aplikasinya yang serasi dengan platform. Kos Pembangunan: H5 mempunyai kos pembangunan yang rendah, program mini sederhana, dan aplikasi tertinggi. Senario yang berkenaan: H5 sesuai untuk paparan maklumat, applet sesuai untuk aplikasi ringan, dan aplikasi sesuai untuk fungsi kompleks.

Bagaimana cara menggunakan XPath untuk mencari dari nod DOM yang ditentukan di JavaScript? Bagaimana cara menggunakan XPath untuk mencari dari nod DOM yang ditentukan di JavaScript? Apr 04, 2025 pm 11:15 PM

Penjelasan terperinci mengenai kaedah carian XPath di bawah nod Dom dalam JavaScript, kita sering perlu mencari nod tertentu dari pokok Dom berdasarkan ekspresi XPath. Sekiranya anda perlu ...

Cara menetapkan perlindungan kata laluan untuk pdf eksport di ps Cara menetapkan perlindungan kata laluan untuk pdf eksport di ps Apr 06, 2025 pm 04:45 PM

Eksport PDF yang dilindungi kata laluan di Photoshop: Buka fail imej. Klik "Fail" & gt; "Eksport" & gt; "Eksport sebagai PDF". Tetapkan pilihan "Keselamatan" dan masukkan kata laluan yang sama dua kali. Klik "Eksport" untuk menghasilkan fail PDF.

Mengapa anda perlu memanggil vue.use (vuerouter) dalam fail index.js di bawah folder penghala? Mengapa anda perlu memanggil vue.use (vuerouter) dalam fail index.js di bawah folder penghala? Apr 05, 2025 pm 01:03 PM

Keperluan mendaftarkan vuerouter dalam fail index.js di bawah folder penghala apabila membangunkan aplikasi VUE, anda sering menghadapi masalah dengan konfigurasi penghalaan. Khas ...

Perbezaan hasil output Console.log: Mengapa pembolehubah yang sama mempunyai kaedah percetakan yang berbeza tetapi hasil yang berbeza? Perbezaan hasil output Console.log: Mengapa pembolehubah yang sama mempunyai kaedah percetakan yang berbeza tetapi hasil yang berbeza? Apr 04, 2025 am 11:48 AM

Perbincangan mendalam tentang perbezaan dalam konsol.log output dalam artikel ini akan menganalisis sebab-sebab mengapa hasil output fungsi Console.log dalam sekeping kod adalah berbeza. Coretan kod melibatkan resolusi parameter URL ...

Cara mendaftarkan komponen yang dieksport oleh lalai eksport di Vue Cara mendaftarkan komponen yang dieksport oleh lalai eksport di Vue Apr 07, 2025 pm 06:24 PM

Soalan: Bagaimana untuk mendaftarkan komponen VUE yang dieksport melalui lalai eksport? Jawapan: Terdapat tiga kaedah pendaftaran: Pendaftaran Global: Gunakan kaedah vue.component () untuk mendaftar sebagai komponen global. Pendaftaran Tempatan: Daftar dalam pilihan Komponen, hanya terdapat dalam komponen semasa dan subkomponennya. Pendaftaran Dinamik: Gunakan kaedah vue.component () untuk mendaftar selepas komponen dimuatkan.

Cara mengoptimumkan prestasi pengeluaran halaman H5 Cara mengoptimumkan prestasi pengeluaran halaman H5 Apr 06, 2025 am 06:24 AM

Melalui permintaan rangkaian, pemuatan sumber, pelaksanaan JavaScript dan pengoptimuman rendering, prestasi halaman H5 dapat diperbaiki dan halaman yang lancar dan efisien dapat dibuat: Pengoptimuman sumber: imej termampat (seperti menggunakan TinyPng), kod yang dipermudahkan, dan membolehkan penyemak imbas. Pengoptimuman Permintaan Rangkaian: Gabungkan fail, gunakan CDN, dan beban secara asynchronously. Pengoptimuman JavaScript: Mengurangkan operasi DOM, Gunakan RequestAnimationFrame, dan memanfaatkan DOM maya yang baik. Kemahiran Lanjutan: Segmentasi kod, penyampaian sisi pelayan.

Cara Melaksanakan Vue dan Element-UI Cascade Selector Cara Melaksanakan Vue dan Element-UI Cascade Selector Apr 07, 2025 pm 08:18 PM

Pemilih Cascade Vue dan Element-UI boleh menggunakan komponen El-Cascader secara langsung dalam senario mudah, tetapi untuk menulis kod yang lebih elegan, cekap dan mantap, anda perlu memberi perhatian kepada butiran berikut: Pengoptimuman Struktur Sumber Data: meratakan data dan menggunakan ID dan parentid untuk mewakili hubungan ibu bapa. Pemprosesan Data Memuatkan Asynchronous: Mengendalikan status pemuatan, arahan ralat dan pengalaman pengguna. Pengoptimuman Prestasi: Pertimbangkan pemuatan atas permintaan atau teknologi menatal maya. Kod Pembacaan dan Penyelenggaraan: Tulis komen, gunakan nama pembolehubah yang bermakna, dan ikuti spesifikasi kod.

See all articles