Kurangi Jumlah DOM Elements

Advertisement
Kurangi Jumlah DOM Elements

Halaman kompleks berarti lebih byte untuk men-download dan itu juga berarti akses DOM lambat dalam JavaScript. Itu membuat perbedaan jika Anda loop melalui 500 atau 5000 elemen DOM pada halaman bila Anda ingin menambahkan event handler misalnya.

Sejumlah tinggi elemen DOM dapat merupakan gejala bahwa ada sesuatu yang harus diperbaiki dengan markup halaman tanpa harus menghapus konten. Apakah Anda menggunakan tabel bersarang untuk keperluan tata letak? Apakah Anda melemparkan lebih <div> s hanya untuk memperbaiki masalah tata letak? Mungkin ada cara yang lebih baik dan lebih semantik benar untuk melakukan markup Anda.
Sebuah membantu dengan layout adalah utilitas YUI CSS : grids.css dapat membantu Anda dengan tata letak keseluruhan, fonts.css dan reset.css dapat membantu Anda mengupas format default browser. Ini adalah kesempatan untuk memulai segar dan berpikir tentang markup Anda, misalnya menggunakan <div> s hanya ketika masuk akal semantis, dan bukan karena membuat baris baru.

Jumlah elemen DOM mudah untuk menguji, ketik saja konsol Firebug: document.getElementsByTagName ('*') panjang.
Dan berapa banyak elemen DOM terlalu banyak? Periksa halaman serupa lainnya yang memiliki markup yang baik. Misalnya Yahoo! Halaman adalah halaman cukup sibuk dan masih di bawah 700 elemen (tag HTML).

Komponen Berpisah Di Domain

Memisahkan komponen memungkinkan Anda untuk memaksimalkan paralel download. Pastikan Anda menggunakan tidak lebih dari 2-4 domain karena hukuman lookup DNS. Misalnya, Anda dapat meng-host HTML dan konten dinamis pada www.example.org dan membagi komponen statis antara static1.example.org dan static2.example.org
Untuk informasi lebih lanjut memeriksa " Memaksimalkan Paralel Download di Carpool Lane "oleh Tenni Theurer dan Patty Chi.

Minimalkan Jumlah iframe

Iframe memungkinkan dokumen HTML yang akan dimasukkan dalam dokumen induk. Sangat penting untuk memahami bagaimana iframe bekerja sehingga mereka dapat digunakan secara efektif.
<iframe> Pro:
Membantu dengan konten pihak ketiga lambat seperti lencana dan iklan
Keamanan sandbox
Download script secara paralel
<iframe> kontra:
Mahal bahkan jika kosong
Halaman Blok onload
Non-semantik

Tidak ada 404s

Permintaan HTTP mahal jadi membuat permintaan HTTP dan mendapatkan respon yang tidak berguna (yaitu 404 Not Found) sama sekali tidak perlu dan akan memperlambat pengalaman pengguna tanpa imbalan apapun.
Beberapa situs memiliki 404s bermanfaat "Did you mean X?", Yang sangat bagus untuk pengalaman pengguna tetapi juga limbah sumber daya server (seperti basis data, dll). Terutama buruk adalah ketika link ke JavaScript eksternal yang salah dan hasilnya adalah 404. Pertama, unduhan ini akan memblokir paralel download. Selanjutnya browser mungkin mencoba untuk mengurai tubuh 404 respon seolah-olah kode JavaScript, mencoba untuk menemukan sesuatu yang dapat digunakan di dalamnya.