HTML Optimasi mempercepat halaman web

Kunci untuk mengurangi waktu pengunduhan halaman web adalah mencoba mengurangi ukuran file. Ketika beberapa halaman berbagi beberapa konten bahan, Anda dapat mempertimbangkan untuk memisahkan bagian -bagian umum ini secara terpisah. Misalnya: kita dapat menulis skrip yang digunakan oleh beberapa halaman HTML ke dalam file .js independen, dan kemudian menyebutnya di halaman sebagai berikut:

<ScriptSrc = myfile.js> </script>

Dengan cara ini, file publik hanya perlu diunduh sekali dan kemudian memasuki buffer. Lain kali saya menelepon halaman HTML yang berisi file publik lagi, waktu pengunduhan akan dikurangi secara signifikan.

CSS adalah dress-up HTML, dan halaman web yang indah tidak bisa tanpa itu. Ada banyak cara untuk merujuk ke CSS di halaman HTML, dan efisiensi metode yang berbeda berbeda. Biasanya, kita dapat mengekstrak kode kontrol gaya yang ditentukan antara <tyle> </tyle>, simpan ke file .css yang terpisah, dan kemudian referensi di halaman html di tag <link> atau tag @import:

<tyle>

@Importurl (mysheet1.css);

</tyle>

Harap dicatat 2 poin: 1. Tag <tyle> tidak perlu dimasukkan dalam file .css; 2. @Import dan tag tautan harus ditentukan di bagian kepala halaman HTML.

Meminimalkan ruang memori yang ditempati oleh halaman HTML adalah cara yang efektif untuk mempercepat unduhan halaman. Dalam hal ini, ada dua masalah yang harus diperhatikan:

Halaman HTML tidak dapat dipisahkan dari dukungan program skrip. Kami sering menyematkan beberapa bahasa skrip ke dalam halaman, seperti JavaScript dan VBScript. Namun, saya tidak tahu apakah Anda memperhatikan: campuran seperti itu memperlambat kecepatan akses halaman. Alasannya adalah bahwa untuk menafsirkan dan menjalankan beberapa kode skrip, beberapa mesin skrip harus dimuat dalam memori. Jadi, coba tulis kode dalam bahasa skrip yang sama di halaman.

Sudahkah Anda menggunakan tag <frame>? Ini adalah fitur yang sangat indah. Jika Anda ingin memasukkan konten halaman kedua dalam dokumen HTML, cara yang biasa adalah menggunakan tag <fameset>. Tetapi dengan <Frame>, semuanya menjadi sederhana. Misalnya, untuk mengembangkan halaman pratinjau dokumen, Anda dapat menempatkan serangkaian topik di sebelah kiri dan iframe di sebelah kanan, yang berisi dokumen yang akan dipratinjau; Ketika mouse melewati setiap tautan topik di sebelah kiri, buat iframe baru di sebelah kanan untuk melihat pratinjau dokumen. Dengan melakukan hal itu, efisiensi kode tidak diragukan lagi efisien, tetapi pada saat yang sama itu mengarah pada pemrosesan yang berat dan pada akhirnya kecepatan lambat.

Gunakan hanya satu iframe. Ketika mouse menunjuk ke topik baru, Anda hanya perlu memodifikasi atribut SRC dari elemen iframe. Dengan cara ini, hanya satu dokumen pratinjau yang akan tetap dalam memori kapan saja.

Saat Anda menelusuri halaman secara online setiap hari, Anda pasti akan melihat banyak efek animasi. Misalnya, kelinci kecil yang lucu sedang berjalan bolak -balik di halaman ... Teknologi inti untuk mencapai efek ini adalah penentuan posisi CCS. Biasanya, kami menggunakan element.style.left dan element.style.top untuk mencapai tujuan penentuan posisi grafis. Namun, melakukan ini menciptakan beberapa masalah: properti kiri mengembalikan string dan berisi unit pengukuran (seperti 100px). Oleh karena itu, untuk mengatur koordinat posisi baru, Anda harus terlebih dahulu memproses nilai pengembalian string sebelum Anda dapat menetapkan nilai, sebagai berikut:

Dimstringleft, Intleft

stringleft = element.style.left

Intleft = parseInt (StringLeft)

Intleft = Intleft 10

element.style.left = intleft;

Anda pasti akan merasa bahwa Anda harus menulis kode rumit seperti itu untuk melakukan hal seperti itu. Apakah ada cara yang lebih ringkas? Lihatlah 4 properti ini: Posleft, Postop, Poswidth dan Posheight, yang sesuai dengan jumlah titik dari nilai pengembalian string yang sesuai. OK, gunakan properti ini untuk menulis ulang kode untuk mengimplementasikan fungsi yang diterapkan oleh kode di atas:

element.style.posleft = 10

Kode lebih pendek, tapi lebih cepat!

Ketika datang ke efek animasi, tentu saja, penggunaan timer tidak dapat dipisahkan. Metode yang biasa adalah menggunakan window.settimeout untuk terus menemukan elemen pada halaman. Namun, jika ada beberapa animasi pada halaman yang akan ditampilkan, apakah Anda perlu mengatur beberapa timer? Jawabannya adalah tidak! Alasannya sederhana: Fungsi timer akan mengkonsumsi banyak sumber daya sistem yang berharga. Tapi kami masih dapat mengontrol beberapa animasi di halaman, dan triknya adalah menggunakan loop. Dalam loop, kontrol posisi animasi yang sesuai sesuai dengan nilai variabel yang berbeda, hanya satu window.setTimeout () panggilan fungsi yang digunakan di seluruh loop.

Biarkan gambar muncul dan muncul sesekali membuat efek menarik. Ada dua cara untuk mencapai ini: Gunakan atribut visibilitas atau atribut CSS. Untuk elemen posisi absolut, diplay dan visibilitas memiliki efek yang sama. Perbedaan antara keduanya adalah bahwa elemen yang diatur untuk ditampilkan: tidak ada yang tidak akan lagi menempati ruang aliran dokumen, sedangkan elemen yang diatur ke visibilitas: tersembunyi masih akan tetap berada di posisi semula.

Tetapi jika Anda ingin berurusan dengan elemen dalam posisi absolut, menggunakan visibilitas akan lebih cepat.

Kiat penting untuk menulis halaman web DHTML adalah: Mulai dari yang kecil. Saat menulis halaman DHTML untuk pertama kalinya, pastikan untuk tidak mencoba menggunakan semua fitur DHTML yang Anda ketahui di halaman. Hanya satu fitur baru yang dapat digunakan pada suatu waktu dan perubahan yang dihasilkan dapat diamati dengan cermat. Jika Anda menemukan bahwa kinerja telah menurun, Anda dapat dengan cepat menemukan alasannya.

Defer adalah pahlawan tanpa tanda jasa di antara fungsi -fungsi kuat dari program skrip. Anda mungkin tidak pernah menggunakannya, tetapi setelah membaca pengantar di sini, saya yakin Anda tidak bisa hidup tanpanya. Ini memberi tahu browser bahwa segmen skrip berisi kode yang tidak perlu dieksekusi segera, dan, bersama dengan atribut SRC, itu juga dapat memungkinkan skrip ini untuk diunduh di latar belakang, dan konten latar depan ditampilkan kepada pengguna secara normal.

1. Jangan panggil perintah dokumen. Perintahwrite di blok skrip tipe tunduk, karena Document.Write akan menghasilkan efek output langsung.

2. Selain itu, tidak termasuk variabel atau fungsi global yang akan digunakan untuk menjalankan skrip segera di blok skrip tundukan.

Kita semua tahu bahwa server UNIX sensitif, tetapi apakah Anda tahu bahwa buffer Internet Explorer juga memperlakukan string kasus secara berbeda. Oleh karena itu, sebagai pengembang web, Anda harus ingat untuk menjaga konsistensi kasus string URL dari tautan yang sama di lokasi yang berbeda. Jika tidak, cadangan file yang berbeda di lokasi yang sama akan disimpan dalam buffer browser, yang juga akan meningkatkan jumlah permintaan untuk mengunduh konten di lokasi yang sama. Semua ini tidak diragukan lagi mengurangi efisiensi akses web. Jadi harap diingat: URL di lokasi yang sama, harap simpan konsistensi kasus string URL di berbagai halaman.

Saat menulis atau melihat kode HTML orang lain sendirian, kita harus mengalami situasi di mana tanda -tanda itu tidak ada habisnya. Misalnya:

<p> Contoh dengan kepala dan tanpa tanda ekor

<ul>

<li> Yang pertama

<li> Yang kedua

<li> yang ketiga

</ul>

Jelas, ada tiga tag akhir </li> yang hilang dalam kode di atas. Tapi ini tidak mencegahnya dieksekusi dengan benar. Di HTML, ada beberapa tag seperti itu, seperti Frame, IMG, dan P.

Tapi tolong jangan malas. Harap tulis tanda akhir utuh. Ini tidak hanya membuat standar format kode HTML, tetapi juga mempercepat kecepatan tampilan halaman. Karena Internet Explorer tidak akan menghabiskan waktu menilai dan menghitung di mana paragraf atau daftar item berakhir.

<p> Contoh dengan tanda kepala dan ekor </p>

<ul>

<li> Pertama </li>

<li> Kedua </li>

<li> Ketiga </li>

</ul>

OK, di atas mencantumkan 10 teknik pemrosesan untuk mempercepat halaman HTML. Sederhana untuk menggambarkan ini, tetapi hanya dengan benar -benar memahami dan menguasai esensi dan belajar dari satu contoh atau yang lain dapat Anda tulis dengan lebih cepat dan lebih baik.