cari

Rumah >hujung hadapan web >html tutorial >Beberapa cadangan untuk menulis aplikasi HTML berprestasi tinggi_HTML/Xhtml_Pengeluaran halaman web

Beberapa cadangan untuk menulis aplikasi HTML berprestasi tinggi_HTML/Xhtml_Pengeluaran halaman web

WBOY
WBOYasal
2016-05-16 16:36:281104semak imbas

Bagaimana anda boleh meningkatkan prestasi halaman web?

Kebanyakan pembangun akan mengoptimumkan melalui JavaScript dan imej, melalui konfigurasi pelayan, memampatkan fail dan menggabungkan fail - malah melaraskan CSS (menggabungkan imej kecil).

HTML yang lemah sentiasa diabaikan, walaupun ia sentiasa menjadi bahasa teras Internet.

HTML semakin besar dan lebih besar. Kebanyakan halaman HTML dari 100 tapak web teratas adalah sekitar 40K. Amazon dan Yahoo menggunakan beribu-ribu halaman HTML. Pada halaman utama youtube.com, terdapat sebanyak 3,500 elemen HTML.

Mengurangkan kerumitan HTML dan bilangan elemen pada halaman tidak meningkatkan masa penghuraian dengan ketara - tetapi HTML ialah faktor kritikal dalam membina halaman web yang sangat pantas, menyesuaikan diri dengan peranti yang berbeza dan menjejaskan kejayaan.
Dalam artikel ini, anda akan belajar cara menulis HTML yang ringkas dan bersih, membolehkan anda membuat tapak web yang dimuatkan dengan cepat dan menyokong berbilang peranti, serta mudah untuk nyahpepijat dan diselenggara.

Tiada satu cara untuk menulis kod - terutamanya HTML. Ini hanyalah pengalaman umum, tetapi ia bukan satu-satunya pilihan yang tepat.
HTML, CSS dan JavaScript

HTML ialah bahasa penanda yang digunakan untuk mewakili struktur dan kandungan.

HTML tidak boleh digunakan untuk memaparkan gaya dan gaya. Jangan letakkan teks dalam teg tajuk (h1~h6) untuk kelihatan "lebih besar" atau gunakan elemen petikan blok hanya untuk lekukan. Sebaliknya, gunakan CSS untuk menukar rupa dan susun atur elemen.

Penampilan lalai unsur HTML dicapai melalui gaya lalai penyemak imbas: Firefox, Internet Explorer dan Opera semuanya berbeza. Sebagai contoh, dalam Chrome elemen h1 diberikan kepada saiz 32px secara lalai.

Tiga prinsip asas:

Gunakan HTML untuk menyatakan struktur, dan CSS untuk menyatakan gaya dan tema yang berbeza. JavaScript untuk bertindak balas terhadap tindakan pengguna.

Gunakan HTML, CSS apabila perlu dan JavaScript apabila perlu. Contohnya: Dalam kebanyakan kes, anda mungkin menggunakan borang HTML untuk pengesahan dan CSS atau SVG untuk animasi.

Asingkan CSS dan JavaScript daripada kod HTML anda. Menjadikannya boleh dicache menjadikan kod lebih mudah untuk nyahpepijat. Dalam pengeluaran, CSS dan JavaScript boleh dikecilkan dan digabungkan dan harus disertakan sebagai sebahagian daripada sistem Bina anda. Nota* Lihat Pertandingan Sistem Pembinaan (Kompilasi) JavaScript
Struktur Dokumen Dokumen

Gunakan jenis dokumen HTML5:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
  2. <html>
  3. <kepala>
  4. <tajuk>Resipi: pesto tajuk>
  5. kepala>
  6. <badan>
  8. <h1>Pestoh1>
  9. <p>Pesto sedap!p>
  11. badan>
  12. html>

Petik fail CSS di bahagian atas halaman, seperti dalam elemen kepala:

Kod CSSSalin kandungan ke papan keratan
  2. Resipi pesto saya
    3. "/css/global.css"> "css/local.css"
  3. > Dengan cara ini, penyemak imbas boleh pramuat gaya sebelum menghuraikan HTML tanpa memberikan reka letak halaman yang mengelirukan.
  4. Letakkan JavaScript di bahagian paling bawah halaman, sebelum isinya ditutup. Ini akan meningkatkan masa pemaparan halaman kerana penyemak imbas boleh memaparkan halaman sebelum JavaScript dimuatkan:
Kod JavaScript

Salin kandungan ke papan keratan

    ...
    2. "/js/global.js"
  2. >
    3. "js/local.js">
  3. Tambahkan pengendalian acara dalam JavaScript. Jangan tambahkannya dalam HTML. Ini sangat sukar untuk dikekalkan, seperti:
  4. Kod XML/HTML
    5. Salin kandungan ke papan keratan
index.html:

    <
  1. kepala>
    3. ...
  3. <skrip
    4. src
  4. =
    5. "js/ local.js"
  5. > kepala>
  7. <badan
    8. beban
  8. =
    9. "init( )"
  9. >  ... <butang
    10. onklik
  10. =
    11. "handleFoo( )"
  11. >Foobutang> ... badan>
  13. Ini lebih baik: Kod JavaScriptSalin kandungan ke papan keratan
    1.   
    2.   ...   
    3.   
    4.   
    5.   
    6.   ...   
    7.   "foo">Foo   
    8.   ...   
    9.   "js/local.js">   
    10.   
    11.   
    12. 　　js/local.js:   
    13.   
    14. init();   
    15. var fooButton =   
    16.     document.querySelector('#foo');   
    17. fooButton.onclick = handleFoo();  

　合法的HTML

　　Web网页成功的一个主要因素就是浏览器可以处理无效的HTML。浏览器还作有器还住代码的标准化规则。

　　但是，这不你放任的理由。有效的HTML更容易调试，往往文件更小，速度更快，度更忔为它们渲染更快。无效的HTML让响应式设计难以实施。

　　使用模板的时候写有效的HTML是特别重要的。

　　在你的BUILD系统中验证HTML：使用验证插件，如HTMLHint和SublimeLinter来检查你HTML的语法>。　　使用HTML5文档类型。

　　请务必保持HTML的层次：正确嵌套元素，确保没有任何未关闭的元素。它可住注释。

Kod XML/HTML复制内容到剪贴板
  1. <div id="foobar" >  
  2. ...   
  3. div> 
  4. <video src="foo. webm" />
  7. <video src="foo. webm"> 
  8. <p>Elemen video tidak disokong.p> 
  9. video>

Sebaliknya, halaman HTML akan menjadi lebih bersih dengan mengalih keluar kod yang tidak diperlukan

Tidak perlu menambah "/" pada elemen penutup diri, seperti img, dll.

Tetapan atribut tidak mempunyai nilai, jika tiada atribut ditambahkan (dalam kes ini, ia tidak akan dimainkan secara automatik dan tiada kawalan kawalan),

Video, ia tidak mempunyai sebarang atribut

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <video src="foo.webm"> 

Dua berikut adalah lebih baik

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <video src="foo.webm" automain="false" kawalan="palsu">
  2. <video src="foo. webm" automain="benar" kawalan ="benar">

Ini lebih mudah dibaca

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <video src="foo.webm" kawalan automain>

Teg gaya dan skrip tidak memerlukan atribut jenis; lalai ialah css dan javascript

Adalah lebih baik untuk mengoptimumkan alamat protokol (alih keluar http atau https, ia akan dikonfigurasikan secara automatik mengikut protokol semasa)

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <a href="//ms.wikipedia .org/wiki/Tag_soup">Sup tega>

Tingkatkan kebolehbacaan, contohnya, ia kelihatan seperti tajuk pada pandangan pertama

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <h2><a href="/contact">Hubungia><h2> 

Dan yang ini seperti pautan

Hubungi

Hendaklah menggunakan huruf kecil

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <A HREF="/" >RumahA>

Campuran huruf besar dan huruf kecil kelihatan lebih menjijikkan

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <H2>Pestoh2> 

Teg semantik

“Semantik” bermaksud berkaitan dengan makna

HTML harus menandakan kandungan yang bermakna: elemen dan perihalan yang sepadan dengan kandungan.

HTML5 memperkenalkan beberapa 'elemen semantik' baharu seperti

,
dan
Kenyataan：
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
Artikel sebelumnya：Analisis atribut rel dalam pengeluaran halaman HTML_HTML/Xhtml_WebArtikel seterusnya：Analisis atribut rel dalam pengeluaran halaman HTML_HTML/Xhtml_Web

Artikel berkaitan

Lihat lagi

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved