Rumah > Artikel > hujung hadapan web > Kemahiran Pengoptimuman HTML yang Mesti Tahu_HTML/Xhtml_Penghasilan Halaman Web
Kemahiran Pengoptimuman HTML yang Mesti Tahu_HTML/Xhtml_Penghasilan Halaman Web
- WBOYasal
- 2016-05-16 16:36:061542semak imbas
Bagaimana untuk meningkatkan prestasi halaman web, banyak pembangun bermula dari banyak aspek, seperti JavaScript, pengoptimuman imej, konfigurasi pelayan, pemampatan fail atau pelarasan CSS.
Adalah jelas bahawa HTML telah mencapai kesesakan, walaupun ia merupakan bahasa teras yang penting untuk membangunkan antara muka Web. Muatan halaman HTML juga semakin berat. Kebanyakan halaman memerlukan purata 40K ruang Contohnya, beberapa tapak web yang besar mengandungi beribu-ribu elemen HTML, dan saiz halaman akan lebih besar.
Cara mengurangkan kerumitan kod HTML dan bilangan elemen halaman dengan berkesan Artikel ini menyelesaikan masalah ini terutamanya. Ia memperkenalkan cara menulis kod HTML yang ringkas dan jelas dari banyak aspek, yang boleh membuat halaman dimuatkan dengan lebih cepat dan membolehkan Works. baik merentas berbilang peranti.
Prinsip berikut perlu dipatuhi semasa proses reka bentuk dan pembangunan:
-
Pengasingan struktur: gunakan HTML untuk menambah struktur, bukan gayakan kandungan;
Pastikan ia kemas: tambah alat pengesahan kod pada aliran kerja; Belajar bahasa baharu: Dapatkan struktur elemen dan penanda semantik.
Pastikan kebolehaksesan: Gunakan atribut ARIA, atribut Fallback, dsb.
Ujian: Jadikan tapak web berjalan dengan baik pada berbilang peranti, gunakan emulator dan alatan prestasi.
Hubungan antara HTML, CSS dan JavaScript
HTML ialah bahasa penanda yang digunakan untuk melaraskan struktur dan kandungan halaman. HTML tidak boleh digunakan untuk mengubah suai kandungan gaya, anda juga tidak boleh memasukkan kandungan teks dalam teg pengepala, menjadikan kod itu panjang dan kompleks Sebaliknya, adalah lebih sesuai untuk menggunakan CSS untuk mengubah suai elemen reka letak dan penampilan. Penampilan lalai elemen HTML ditakrifkan oleh helaian gaya lalai penyemak imbas Contohnya, dalam Chrome, elemen teg h1 akan dipaparkan ke dalam fon tebal Times 32px.Tiga peraturan reka bentuk universal:
-
Gunakan HTML untuk membina struktur halaman, CSS untuk mengubah suai pembentangan halaman dan JavaScript untuk melaksanakan fungsi halaman. CSS ZenGarden menunjukkan pemisahan tingkah laku dengan sangat baik. Gunakan kurang kod HTML jika ia boleh dilaksanakan dengan CSS atau JavaScript.
Simpan fail CSS dan JavaScript secara berasingan daripada HTML. Ini boleh membantu dengan caching dan penyahpepijatan.
1. Gunakan jenis dokumen HTML5, berikut ialah fail kosong:
- >
- <html>
- <kepala>
- <tajuk>Resipi: pesto tajuk>
- kepala>
- <badan>
- <h1>Pestoh1>
- <p>Pesto sedap!p>
- badan>
- html>
- <kepala>
- <tajuk>Resipi pesto saya tajuk>
- <pautan rel="stylesheet" href="/css/global.css">
- <pautan rel="stylesheet" href="css/local.css">
- kepala>
Menggunakan dua kaedah ini, penyemak imbas akan menyediakan maklumat CSS sebelum menghuraikan kod HTML. Ini membantu meningkatkan prestasi pemuatan halaman.
Masukkan kod JavaScript sebelum teg isi penutup di bahagian bawah halaman Ini akan membantu meningkatkan kelajuan pemuatan halaman, kerana penyemak imbas akan memuatkan halaman sebelum menghuraikan kod JavaScript akan memberi kesan positif pada elemen halaman .
- <badan>
- ...
- <skrip src="/js /global.js">
- <skrip src="js/ local.js">
- badan>
Gunakan Atribut Tangguh dan async dengan atribut async tidak dijamin untuk dilaksanakan mengikut tertib.
Pengendali boleh ditambah dalam kod JavaScript. Jangan sekali-kali menambahkannya pada kod sebaris HTML Contohnya, kod berikut boleh membawa kepada ralat dengan mudah dan sukar untuk dikekalkan:
index.html:
- <kepala>
- ...
- <skrip src="js/ local.js">
- kepala>
- <badan beban="init( )">
- ...
- <butang onklik="handleFoo( )">Foobutang>
- ...
- badan>
下面的写法比较好：
index.html:
- <kepala>
- ...
- kepala>
- <badan>
- ...
- <butang id="foo" >Foobutang>
- ...
- <skrip src="js/ local.js">
- badan>
js/local.js:
- init();
- var fooButton =
- document.querySelector('#foo'); fooButton.onclick = handleFoo();
Salah satu cara untuk mengoptimumkan halaman web anda ialah penyemak imbas anda mengendalikan kod HTML yang menyalahi undang-undang. Kod HTML yang sah mudah untuk nyahpepijat, menggunakan kurang memori, menggunakan lebih sedikit sumber, mudah dihuraikan, dipaparkan dan berjalan dengan lebih pantas. Kod HTML yang menyalahi undang-undang menjadikannya amat sukar untuk melaksanakan reka bentuk responsif.
Apabila menggunakan templat, kod HTML yang sah selalunya berlaku bahawa templat berjalan dengan baik sahaja, tetapi apabila disepadukan dengan modul lain, pelbagai ralat dilaporkan langkah berikut:
- Tambahkan fungsi pengesahan pada aliran kerja anda: Gunakan pemalam pengesahan seperti HTMLHint atau SublineLinter untuk membantu anda mengesan ralat kod. Gunakan jenis dokumen HTML5 Pastikan struktur hierarki HTML mudah diselenggara dan elakkan elemen bersarang dalam keadaan terbuka kiri.
Pastikan anda menambah teg penutup setiap elemen.
Alih keluar kod yang tidak diperlukan; tidak perlu menambah teg penutup untuk elemen penutupan sendiri;
Format kod
Teg semantik
Semantik merujuk kepada perkara yang berkaitan dengan makna HTML boleh melihat semantik daripada kandungan halaman: penamaan elemen dan atribut menyatakan peranan dan fungsi kandungan pada tahap tertentu. HTML5 memperkenalkan elemen semantik baharu seperti