Advertisement
Hindari Expressions CSS
Ekspresi CSS adalah kuat (dan berbahaya) cara untuk mengatur properti CSS dinamis. Mereka didukung di Internet Explorer dimulai dengan versi 5, tetapi usang dimulai dengan IE8 . Sebagai contoh, warna latar belakang dapat diatur untuk bergantian setiap jam menggunakan ekspresi CSS:
background-color: ekspresi (. (new Date ()) getHours ()% 2 "# B8D4FF":? "# F08A00");
Seperti ditunjukkan di sini, ekspresi metode menerima ekspresi JavaScript. Properti CSS diatur dengan hasil evaluasi ekspresi JavaScript. The ekspresi Metode diabaikan oleh browser lain, sehingga sangat berguna untuk pengaturan properti di Internet Explorer diperlukan untuk menciptakan pengalaman yang konsisten di seluruh browser.
Masalah dengan ekspresi adalah bahwa mereka dievaluasi lebih sering daripada kebanyakan orang harapkan. Bukan saja mereka dievaluasi saat halaman diberikan dan ukurannya, tetapi juga saat halaman menggulir dan bahkan ketika pengguna menggerakkan mouse di atas halaman. Menambahkan counter untuk ekspresi CSS memungkinkan kita untuk melacak kapan dan seberapa sering ekspresi CSS dievaluasi. Menggerakkan mouse di sekitar halaman dengan mudah dapat menghasilkan lebih dari 10.000 evaluasi.
Salah satu cara untuk mengurangi jumlah kali ekspresi CSS Anda dievaluasi adalah dengan menggunakan ekspresi satu kali, dimana pertama kalinya ekspresi dievaluasi set properti gaya ke nilai eksplisit, yang menggantikan ekspresi CSS. Jika properti gaya harus diatur secara dinamis sepanjang hidup halaman, menggunakan event handler bukan ekspresi CSS adalah sebuah pendekatan alternatif. Jika Anda harus menggunakan ekspresi CSS, ingat bahwa mereka dapat dievaluasi ribuan kali dan bisa mempengaruhi kinerja halaman Anda.
Membuat JavaScript dan CSS External
Banyak aturan kinerja ini berurusan dengan bagaimana komponen eksternal dikelola. Namun, sebelum pertimbangan ini muncul Anda harus mengajukan pertanyaan yang lebih mendasar: Haruskah JavaScript dan CSS terkandung dalam file eksternal, atau inline dalam halaman itu sendiri?
Menggunakan file eksternal di dunia nyata umumnya menghasilkan halaman dengan lebih cepat karena file-file JavaScript dan CSS cache oleh browser. JavaScript dan CSS yang inline dalam dokumen HTML mendapatkan download setiap kali dokumen HTML diminta. Hal ini akan mengurangi jumlah permintaan HTTP yang diperlukan, tetapi meningkatkan ukuran dokumen HTML. Di sisi lain, jika JavaScript dan CSS dalam file eksternal cache oleh browser, ukuran dokumen HTML berkurang tanpa meningkatkan jumlah permintaan HTTP.
Faktor kunci, kemudian, adalah frekuensi yang JavaScript eksternal dan komponen CSS cache relatif terhadap jumlah dokumen HTML yang diminta. Faktor ini, meskipun sulit untuk mengukur, dapat diukur dengan menggunakan berbagai metrik. Jika pengguna di situs Anda memiliki beberapa tampilan halaman per sesi dan banyak halaman Anda kembali menggunakan script dan stylesheet yang sama, ada potensi manfaat lebih besar dari file eksternal cache.
Banyak situs web jatuh di tengah metrik ini. Untuk situs-situs tersebut, solusi terbaik umumnya adalah untuk menyebarkan JavaScript dan CSS sebagai file eksternal. Satu-satunya pengecualian di mana inlining lebih baik adalah dengan halaman rumah, seperti halaman depan Yahoo! 's dan My Yahoo! . Halaman rumah yang memiliki sedikit (mungkin hanya satu) tampilan halaman per sesi mungkin menemukan bahwa inlining JavaScript dan CSS hasil dalam waktu respon end-user lebih cepat.
Untuk halaman depan yang biasanya yang pertama dari banyak tampilan halaman, ada teknik yang memanfaatkan pengurangan permintaan HTTP yang menyediakan inlining, serta manfaat caching dicapai melalui menggunakan file eksternal. Salah satu teknik tersebut adalah untuk inline JavaScript dan CSS di halaman depan, tapi secara dinamis men-download file eksternal setelah halaman selesai loading. Halaman berikutnya akan referensi file eksternal yang harus berada dalam cache browser.
Mengecilkan JavaScript dan CSS
Minification adalah praktek menghapus karakter yang tidak perlu dari kode untuk mengurangi ukuran demikian meningkatkan beban kali nya. Ketika kode minified semua komentar dihapus, serta karakter spasi yang tidak diperlukan (spasi, baris baru, dan tab). Dalam kasus JavaScript, ini meningkatkan kinerja waktu respon karena ukuran file yang didownload berkurang. Dua alat yang populer untuk minifying kode JavaScript yang JSMin dan YUI Compressor . The YUI kompresor juga dapat mengecilkan CSS.
Kebingungan optimasi alternatif yang dapat diterapkan pada kode sumber. Ini lebih kompleks daripada minification dan dengan demikian lebih mungkin untuk menghasilkan bug sebagai akibat dari kebingungan langkah sendiri. Dalam sebuah survei dari sepuluh situs web top AS, minification mencapai pengurangan ukuran 21% versus 25% untuk kebingungan. Meskipun kebingungan memiliki pengurangan ukuran yang lebih tinggi, minifying JavaScript kurang berisiko.
Selain minifying skrip eksternal dan gaya, inline <script> dan <style> blok dapat dan juga harus minified. Bahkan jika Anda gzip script Anda dan gaya, minifying mereka masih akan mengurangi ukuran sebesar 5% atau lebih. Seperti penggunaan dan ukuran JavaScript dan CSS meningkat, sehingga akan penghematan yang diperoleh dengan minifying kode Anda.
Ekspresi CSS adalah kuat (dan berbahaya) cara untuk mengatur properti CSS dinamis. Mereka didukung di Internet Explorer dimulai dengan versi 5, tetapi usang dimulai dengan IE8 . Sebagai contoh, warna latar belakang dapat diatur untuk bergantian setiap jam menggunakan ekspresi CSS:
background-color: ekspresi (. (new Date ()) getHours ()% 2 "# B8D4FF":? "# F08A00");
Seperti ditunjukkan di sini, ekspresi metode menerima ekspresi JavaScript. Properti CSS diatur dengan hasil evaluasi ekspresi JavaScript. The ekspresi Metode diabaikan oleh browser lain, sehingga sangat berguna untuk pengaturan properti di Internet Explorer diperlukan untuk menciptakan pengalaman yang konsisten di seluruh browser.
Masalah dengan ekspresi adalah bahwa mereka dievaluasi lebih sering daripada kebanyakan orang harapkan. Bukan saja mereka dievaluasi saat halaman diberikan dan ukurannya, tetapi juga saat halaman menggulir dan bahkan ketika pengguna menggerakkan mouse di atas halaman. Menambahkan counter untuk ekspresi CSS memungkinkan kita untuk melacak kapan dan seberapa sering ekspresi CSS dievaluasi. Menggerakkan mouse di sekitar halaman dengan mudah dapat menghasilkan lebih dari 10.000 evaluasi.
Salah satu cara untuk mengurangi jumlah kali ekspresi CSS Anda dievaluasi adalah dengan menggunakan ekspresi satu kali, dimana pertama kalinya ekspresi dievaluasi set properti gaya ke nilai eksplisit, yang menggantikan ekspresi CSS. Jika properti gaya harus diatur secara dinamis sepanjang hidup halaman, menggunakan event handler bukan ekspresi CSS adalah sebuah pendekatan alternatif. Jika Anda harus menggunakan ekspresi CSS, ingat bahwa mereka dapat dievaluasi ribuan kali dan bisa mempengaruhi kinerja halaman Anda.
Membuat JavaScript dan CSS External
Banyak aturan kinerja ini berurusan dengan bagaimana komponen eksternal dikelola. Namun, sebelum pertimbangan ini muncul Anda harus mengajukan pertanyaan yang lebih mendasar: Haruskah JavaScript dan CSS terkandung dalam file eksternal, atau inline dalam halaman itu sendiri?
Menggunakan file eksternal di dunia nyata umumnya menghasilkan halaman dengan lebih cepat karena file-file JavaScript dan CSS cache oleh browser. JavaScript dan CSS yang inline dalam dokumen HTML mendapatkan download setiap kali dokumen HTML diminta. Hal ini akan mengurangi jumlah permintaan HTTP yang diperlukan, tetapi meningkatkan ukuran dokumen HTML. Di sisi lain, jika JavaScript dan CSS dalam file eksternal cache oleh browser, ukuran dokumen HTML berkurang tanpa meningkatkan jumlah permintaan HTTP.
Faktor kunci, kemudian, adalah frekuensi yang JavaScript eksternal dan komponen CSS cache relatif terhadap jumlah dokumen HTML yang diminta. Faktor ini, meskipun sulit untuk mengukur, dapat diukur dengan menggunakan berbagai metrik. Jika pengguna di situs Anda memiliki beberapa tampilan halaman per sesi dan banyak halaman Anda kembali menggunakan script dan stylesheet yang sama, ada potensi manfaat lebih besar dari file eksternal cache.
Banyak situs web jatuh di tengah metrik ini. Untuk situs-situs tersebut, solusi terbaik umumnya adalah untuk menyebarkan JavaScript dan CSS sebagai file eksternal. Satu-satunya pengecualian di mana inlining lebih baik adalah dengan halaman rumah, seperti halaman depan Yahoo! 's dan My Yahoo! . Halaman rumah yang memiliki sedikit (mungkin hanya satu) tampilan halaman per sesi mungkin menemukan bahwa inlining JavaScript dan CSS hasil dalam waktu respon end-user lebih cepat.
Untuk halaman depan yang biasanya yang pertama dari banyak tampilan halaman, ada teknik yang memanfaatkan pengurangan permintaan HTTP yang menyediakan inlining, serta manfaat caching dicapai melalui menggunakan file eksternal. Salah satu teknik tersebut adalah untuk inline JavaScript dan CSS di halaman depan, tapi secara dinamis men-download file eksternal setelah halaman selesai loading. Halaman berikutnya akan referensi file eksternal yang harus berada dalam cache browser.
Mengecilkan JavaScript dan CSS
Minification adalah praktek menghapus karakter yang tidak perlu dari kode untuk mengurangi ukuran demikian meningkatkan beban kali nya. Ketika kode minified semua komentar dihapus, serta karakter spasi yang tidak diperlukan (spasi, baris baru, dan tab). Dalam kasus JavaScript, ini meningkatkan kinerja waktu respon karena ukuran file yang didownload berkurang. Dua alat yang populer untuk minifying kode JavaScript yang JSMin dan YUI Compressor . The YUI kompresor juga dapat mengecilkan CSS.
Kebingungan optimasi alternatif yang dapat diterapkan pada kode sumber. Ini lebih kompleks daripada minification dan dengan demikian lebih mungkin untuk menghasilkan bug sebagai akibat dari kebingungan langkah sendiri. Dalam sebuah survei dari sepuluh situs web top AS, minification mencapai pengurangan ukuran 21% versus 25% untuk kebingungan. Meskipun kebingungan memiliki pengurangan ukuran yang lebih tinggi, minifying JavaScript kurang berisiko.
Selain minifying skrip eksternal dan gaya, inline <script> dan <style> blok dapat dan juga harus minified. Bahkan jika Anda gzip script Anda dan gaya, minifying mereka masih akan mengurangi ukuran sebesar 5% atau lebih. Seperti penggunaan dan ukuran JavaScript dan CSS meningkat, sehingga akan penghematan yang diperoleh dengan minifying kode Anda.
