Kemahiran Pengoptimuman HTML yang Mesti Tahu_HTML/Xhtml_Penghasilan Halaman Web-html tutorial-php.cn

Kemahiran Pengoptimuman HTML yang Mesti Tahu_HTML/Xhtml_Penghasilan Halaman Web

WBOY

Lepaskan： 2016-05-16 16:36:06

asal

1516 orang telah melayarinya

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.

Struktur dokumen juga boleh dioptimumkan, seperti berikut:

1. Gunakan jenis dokumen HTML5, berikut ialah fail kosong:

Kod XML/HTMLSalin kandungan ke papan keratan

>
<html>
<kepala>
<tajuk>Resipi: pesto tajuk>
kepala>
<badan>
<h1>Pestoh1>
<p>Pesto sedap!p>
badan>
html>

2. Petik fail CSS pada permulaan dokumen, seperti berikut:

Kod XML/HTMLSalin kandungan ke papan keratan

<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 .

Kod XML/HTMLSalin kandungan ke papan keratan

<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:

Kod XML/HTMLSalin kandungan ke papan keratan

<kepala>
...
<skrip src="js/ local.js">
kepala>
<badan beban="init( )">
...
<butang onklik="handleFoo( )">Foobutang>
...
badan>

下面的写法比较好：

index.html:

Kod XML/HTML复制内容到剪贴板

<kepala>
...
kepala>
<badan>
...
<butang id="foo" >Foobutang>
...
<skrip src="js/ local.js">
badan>

js/local.js:

Kod JavaScript复制内容到剪贴板

init();
var fooButton =
document.querySelector('#foo');

Pengesahan

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

Ketekalan format menjadikan kod HTML mudah dibaca, difahami, dioptimumkan dan nyahpepijat.

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