2008 15 Mei 2008

Praktik Terbaik: Bekerja dengan itu JavaScript

Sertakan itu JavaScript di Bawah Dokumen HTML

Jika Anda tidak memiliki document.write (atau generasi dinamis dari isi halaman dengan menggunakan javascripts) untuk memasukkan bagian dari konten halaman di script Anda, pindahkan script termasuk pernyataan ke bagian bawah halaman, sebelum akhir dari tag BODY.
Spesifikasi HTTP/1.1 menunjukkan bahwa browser men-download tidak lebih dari dua komponen secara paralel per nama host. Jika Anda melayani gambar Anda dari beberapa hostname, Anda bisa mendapatkan lebih dari dua download terjadi secara paralel. Sementara naskah adalah men-download, bagaimanapun, browser tidak akan memulai setiap download lainnya, bahkan pada nama host yang berbeda.
Ada juga cara untuk secara dinamis membuat node SCRIPT dan memuat script remote setelah halaman dibuka menggunakan AJAX.

Externalise Anda di JavaScript

Menggunakan file eksternal JavaScript akan mengakibatkan loading lebih cepat dari halaman karena file-file JavaScript di-cache oleh browser. 'Inline JavaScript dalam dokumen HTML bisa didownload setiap kali dokumen HTML yang diminta. Ini sebenarnya bisa mengurangi jumlah permintaan HTTP yang dibuat tetapi kemudian meningkatkan ukuran dokumen HTML. Eksternal JavaScript di-cache oleh browser, ukuran dokumen HTML berkurang tanpa meningkatkan jumlah permintaan HTTP.
Harap dicatat bahwa, jika pengguna di situs Anda memiliki pandangan beberapa halaman per sesi dan banyak dari halaman Anda kembali menggunakan script yang sama dan stylesheet, ada potensi manfaat yang lebih besar dari file eksternal cache.

Pack Anda File Javascript

Dalam kasus javascripts, tidak seperti CSS, file bisa berderak menggunakan beberapa algoritma standar yang akan memberikan ukuran file yang berkurang dari sekedar menghapus spasi atau tab. Contoh javascript pembungkus dapat ditemukan di sini http://dean.edwards.name/packer/

Menyingkirkan setiap Script Duplikat

Hal ini sangat tidak biasa yang seluruh script mungkin diduplikasi, tapi review dari sepuluh situs web AS menunjukkan bahwa dua dari mereka mengandung script diduplikasi. Gandakan script tapi jelas mengurangi kinerja dengan menciptakan permintaan yang tidak perlu HTTP dan terbuang eksekusi JavaScript.
Juga, dalam banyak kasus, meskipun nama-nama skrip yang berbeda, ada kemungkinan script duplikat dari halaman yang sama karena ukuran tim dan jumlah script.

Minimalkan mengakses elemen DOM di mana mungkin

Mengakses elemen DOM dengan JavaScript lambat sehingga untuk memiliki halaman lebih responsif, Anda harus:
• Cache referensi ke elemen diakses
• Perbarui node "offline" dan kemudian menambahkannya ke pohon
• Hindari memperbaiki tata letak dengan JavaScript

Pisahkan Perilaku dari Konten dan Presentasi

Sama seperti kita Presentasi terpisah (CSS / XSLT) dari Konten (XHTML / XML), kita juga harus memisahkan Perilaku (Javascript). Ini disebut Javascript tidak mengganggu. Sama seperti kita membuat link ke file CSS eksternal, kita harus link ke file javascript eksternal.

Alih-alih perilaku coding keras ke konten (misalnya onmouseover, onclick, dll), perilaku harus dinamis ditambahkan ke elemen, kelas, dan elemen unik (ID) menggunakan DOM. Dokumen dasar, isi, harus berisi hanya valid XHTML / XML dan javascript tidak.
Javascript harus menambah konten dengan menambahkan perilaku. Konten tersebut harus tetap berguna dan dapat digunakan tanpa javascript (atau tanpa dukungan javascript penuh).


2008 7 Mei 2008

Best Practices: Perhatikan berat halaman

Saya telah menyimpan ini usia Artikel kembali, sehingga Sorry! Saya tidak ingat sumbernya ... tapi sepertinya bermanfaat, bagi kita yang harus sadar tentang audiens untuk siapa kita mengembangkan situs untuk ... jadi di sini i adalah

Halaman berat dapat digunakan untuk menentukan waktu download untuk halaman yang diberikan pada berbagai kecepatan koneksi internet. Dengan cara contoh, tabel berikut menunjukkan waktu download selama tiga halaman yang berbeda di sejumlah kecepatan koneksi populer.

Unduh Berat laman Times

Kecepatan Koneksi

20 Kb Halaman

40 Kb Halaman

100 Kb Halaman

14,4 Kbps

12 detik

25 detik

62 detik

28,8 Kbps

6 detik

12 detik

31 detik

33,3 Kbps

5 detik

10 detik

26 detik

56 Kbps (V.90)

2 detik

5 detik

13 detik

64 Kbps (ISDN)

2 detik

4 detik

12 detik

128 Kbps (DSL / kabel)

1 detik

2 detik

6 detik

256 Kbps (DSL / kabel)

<1 detik

1 detik

3 DETIK

Manfaat mengurangi berat badan halaman?

Dampak positif dari halaman mengurangi manfaat berat badan pemilik situs web baik dan konsumen. Manfaat potensial termasuk:

  1. Halaman memuat lebih cepat. Dampak yang paling jelas untuk mengurangi berat badan halaman adalah bahwa halaman situs Web Anda akan memuat lebih cepat bagi pengunjung, tanpa kecepatan koneksi mereka.
  2. Kali halaman yang lebih rendah beban membuat pengunjung lebih nyaman. Pengunjung cenderung menjadi frustasi dan pergi ke tempat lain jika halaman Anda muncul dengan cepat. Di sisi lain, lambat-loading halaman adalah salah satu cara paling pasti untuk kehilangan pengunjung dan pelanggan potensial.
  3. Lebih cepat load-kali akan memberikan kontribusi untuk konversi meningkat. Lebih banyak pengunjung akan tinggal lebih lama di situs Anda. Lebih dari mereka akan berakhir melakukan pembelian, mendaftar untuk newsletter Anda, atau buku-menandai situs Anda.
  4. Persepsi merek Anda akan ditingkatkan. Pelanggan kembali dan pertama kali pengunjung sama akan lebih cenderung untuk menggambarkan situs Anda (dan bisnis) sebagai "profesional" jika halaman Anda muncul dengan cepat.
  5. Halaman dengan bersih, kode padat sering akan diindeks lebih efektif oleh mesin pencari alam.
  6. Halaman dioptimalkan untuk berat badan sebenarnya dapat menghemat biaya bandwidth di situs lalu lintas tinggi. 100.000 halaman setiap 150 Kb berat akan membutuhkan bandwidth dua kali lebih banyak dari ISP dari 100.000 halaman masing-masing berat 75 Kb. Untuk ISP yang biaya untuk bandwidth yang digunakan atau untuk overages, pengurangan ini dapat membuat penghematan yang signifikan pada biaya bandwidth.

Perhatikan data berikut, yang diterbitkan dalam sebuah laporan

Pengunjung Pasrah

Page Load Time

Persen Pengguna
Melanjutkan untuk Tunggu

10 detik

84%

15 detik

51%

20 detik

26%

30 detik

5%


2008 24 April 2008

Praktik Terbaik: Bekerja dengan CSS

Masukan stylesheet di Puncak

Jika Anda ingin halaman untuk memuat secara progresif; yaitu, kita menginginkan browser untuk menampilkan konten apapun itu secepat mungkin, menempatkan CSS di bagian atas halaman dalam HEAD dokumen. Hal ini membuat halaman muncul untuk memuat lebih cepat, karena hal ini memfasilitasi render progresif halaman. Hal ini sangat penting untuk halaman dengan banyak konten dan bagi pengguna koneksi internet lambat.

Ini adalah fakta yang terdokumentasi untuk meningkatkan pengalaman pengguna secara keseluruhan, penting untuk memberikan indikator kemajuan dan masukan visual. Untuk menghindari harus redraw elemen halaman, dalam kasus jika gaya perubahan mereka, beberapa browser, termasuk IE, blok rendering dari halaman sampai CSS diberi beban penuh. Karena itu, pengguna mendapat untuk melihat halaman putih kosong.

The W3 HTML Spesifikasi 'juga menyatakan bahwa CSS harus saya masukkan dalam bagian HEAD halaman HTML. at the bottom of the page, so it's best not to use it. Perlu diketahui juga bahwa, Dalam IE @import berperilaku sama dengan menggunakan <link> di bagian bawah halaman, jadi yang terbaik untuk tidak menggunakannya.

Hindari Menggunakan fitur Browser Tertentu

Filter: Gunakan filter meningkatkan konsumsi memori dan diterapkan secara per elemen, bukan per gambar, sehingga masalah dikalikan. Juga, Filter adalah IE Proprietary, maka tidak akan bekerja sebagaimana dimaksud pada browser lainnya. Jika Anda ingin latar belakang transparan atau gradien, gunakan 1Pixel dengan gambar.
Ekspresi: ekspresi CSS adalah fitur baik untuk memiliki dalam CSS, tapi masih adalah fitur spesifik IE. Juga, penting untuk dicatat bahwa, ungkapan-ungkapan yang dievaluasi saat halaman dirender dan diubah ukurannya, menggulir dan bahkan ketika pengguna bergerak mouse ke halaman. Tak perlu dikatakan ini dapat mempengaruhi kinerja dari halaman Anda. Oleh karena itu dalam kata-kata sederhana, Hindari menggunakan ekspresi CSS, kecuali jika Anda merasa kelebihan 'berat lebih dari kontra perusahaan

Externalise Anda CSS

Menggunakan CSS eksternal akan mengakibatkan loading lebih cepat dari halaman karena file-file JavaScript dan CSS cache oleh browser. Inline CSS pada dokumen HTML bisa didownload setiap kali dokumen HTML yang diminta. Ini sebenarnya bisa mengurangi jumlah permintaan HTTP yang dibuat tetapi kemudian meningkatkan ukuran dokumen HTML. Eksternal CSS cache oleh browser, ukuran dokumen HTML berkurang tanpa meningkatkan jumlah permintaan HTTP.

Harap dicatat bahwa, jika pengguna di situs Anda memiliki pandangan beberapa halaman per sesi dan banyak dari halaman Anda kembali menggunakan script yang sama dan stylesheet, ada potensi manfaat yang lebih besar dari file eksternal cache.

Pack Anda File CSS

Packing atau berderak CSS Anda adalah praktek menghapus karakter yang tidak perlu dari kode untuk mengurangi ukurannya dengan demikian meningkatkan beban kali.

CSS dapat saya berderak dengan menghapus semua komentar dan karakter yang tidak diinginkan seperti ruang putih, baris baru dll


2008 14 Maret 2008

Praktik Terbaik untuk Pengembang UI

Untuk usia, saya berpikir untuk mengkonsolidasikan semua Praktek TERBAIK, Saya telah membaca setiap sekarang dan kemudian. Akhirnya! Aku turun untuk meletakkannya untuk pena. Saya menyadari bahwa ini akan menjadi tugas raksasa menciptakan dokumen ini raksasa, jadi saya memutuskan untuk mendedikasikan seluruh kategori untuk itu, sehingga saya bisa terus menambahkan hal tentang praktek-praktek terbaik sebagai dan ketika saya bertemu dengan mereka ...

Nah! isi di sini akan menjadi penggabungan Praktek pribadi saya UI pengembangan Terbaik dengan yang ditulis oleh para pengembang standar seperti Yahoo, Google dll

Lihat saja nanti dan menjaga browing di Kategori Best Practices


2007 15 September 2007

Apa DOCTYPES? Apa BROWSER quirks mode & HUKUM?

Wikipedia berbahasa (bagi yang pernah mendengar tentang DOCTYPE sebelum hari ini)! DOCTYPE adalah pernyataan dalam dokumen HTML yang datang sebelum tag <HTML>, yang terlihat seperti ini (disisipkan dari sumber halaman ini sangat)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Mengapa menggunakan doctype?
Semuanya dimulai ketika standar browser yang diperkenalkan oleh W3C. Para pengembang web sebelumnya dilaksanakan CSS sesuai dengan keinginan dari browser, untuk memiliki halaman diberikan dengan benar di dalam mereka dan yang paling memiliki website CSS yang tidak cukup cocok spesifikasi / standar.

Oleh karena itu solusi untuk masalah ini adalah untuk

  • memungkinkan pengembang web yang tahu standar mereka untuk memilih modus yang akan digunakan.
  • terus menampilkan halaman lama sesuai dengan (kebiasaan) aturan lama.

Dan DOCTYPE lahir.

Jadi, berdasarkan apakah Anda halaman dirancang dengan standar atau tidak, Anda memilih DOCTYPE yang tepat.


Hubungan antara mode DOCTYPE & Browser
DOCTYPE adalah pernyataan yang memberitahu browser Anda apa modus harus membuat halaman HTML atau lebih tepatnya untuk lebih tepatnya bagaimana seharusnya browser menginterpretasikan CSS di; quirks Mode atau modus ketat.

Halaman lama ditulis sebelum standar ini diperkenalkan tidak memiliki sebuah DOCTYPE. Oleh karena itu ketika ada DOCTYPE tidak dalam HTML Anda maka browser ini dalam mode quirks.
Tetapi jika DOCTYPE didefinisikan sebagai salah satu dari berikut ini, maka browser tersebut akan dikatakan dalam Mode MENYELURUH.

<DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">


NDK rumah | Mengekspresikan TI | Langit-langit Mulut Mengekspresikan | Penmenship Mengekspresikan | Awe Mengekspresikan | Mengekspresikan Diriku