Gunakan JavaScript untuk meningkatkan laman web anda secara visual?

Dalam artikel ini, anda akan belajar tentang pelbagai teknik yang boleh menjadikan laman web anda menarik dan pantas. Ini akan meningkatkan penglibatan pengguna dan menjadikan tapak web anda lebih produktif.

Mari kita fahami JavaScript dahulu.

Apakah itu JavaScript?

JavaScript ialah salah satu bahasa pembangunan web yang digunakan untuk menambah fungsi pada tapak web. Ia menjadikan tapak web interaktif, teguh, lebih pantas dan lebih cantik. Ia adalah skrip, bahasa yang ditafsirkan yang menyusun terus dalam pelayar web seperti C atau CPP ia tidak memerlukan pengkompil untuk menyusun. Inilah sebabnya mengapa ia adalah bahasa yang paling popular dalam industri perisian moden.

Untuk membangunkan tapak web, kami memerlukan tiga bahasa asas HTML, CSS dan JavaScript.

• HTML digunakan untuk menambah kandungan pada tapak web seperti imej, teks, butang, dll.

• CSS memainkan peranan penting dalam bahagian penggayaan, yang bermaksud menerapkan gaya pada semua kandungan di tapak web.

• JavaScript digunakan untuk menjadikan tapak web interaktif, yang bermaksud menjadikan elemen responsif, seperti apabila anda menekan butang, warna tapak web berubah. HTML dan CSS hanya menyediakan struktur tapak web, mereka tidak melakukan sebarang tindakan di tapak web, manakala JavaScript melakukan aktiviti dinamik di tapak web.

Peranan pengoptimuman dalam laman web

Apabila membangunkan aplikasi web moden, adalah sangat penting untuk menganalisis prestasi laman web, seperti responsif laman web. Prestasi tapak web ialah salah satu faktor terpenting dalam kejayaan tapak web, kerana pengguna lebih cenderung untuk melibatkan diri dan melawat tapak web berprestasi tinggi berbanding tapak web berprestasi rendah.

Perkara yang perlu diingat:

• Semakin rendah kelajuan tapak web anda, semakin rendah penglibatan dan trafik, dan menurut laporan, tapak berprestasi rendah mempunyai 15% kurang pengguna berbanding tapak berprestasi tinggi.

• Antara muka pengguna yang kurang menarik juga boleh memberi kesan kepada penglibatan. Laman web yang menawarkan reka bentuk yang menarik dan masa memuatkan yang cepat akan menarik pengguna dan peluang mereka kembali akan meningkat.

• Kandungan Flash yang berlebihan juga tidak bagus dari segi daya tarikan. Pengguna kebanyakannya menyukai reka bentuk yang ringkas.

Untuk mengukur prestasi tapak web, Google menyediakan model RAIL -

Mockup menyediakan struktur bagaimana tapak web akan kelihatan dan bagaimana ia akan mempengaruhi perhatian pengguna. Di sini RAIL bermaksud responsif, animasi, terbiar dan dimuatkan.

Tanda tapak web yang tidak dioptimumkan ialah apabila halaman dimuatkan, anda mungkin melihat skrin putih selama beberapa saat dan kemudian tiba-tiba seluruh halaman dimuatkan. Walaupun tapak web yang dioptimumkan tidak melakukan apa-apa seperti ini, ia membentangkan kandungan secara langkah demi langkah di mana anda akan melihat beberapa kandungan muncul dan kemudian elemen/kandungan lain akan muncul.

Mari kita fahami cara kependaman prestasi mempengaruhi perhatian pengguna daripada model RAIL.

• 0 hingga 16ms - Pengguna tidak menyukai tapak apabila satu bingkai berlaku pada 16ms.

• 0 hingga 100ms - Pengguna akan berpuas hati dengan prestasi apabila hasil yang diinginkan muncul dalam tempoh masa ini.

• 100 hingga 100ms - Dalam julat ini, pengguna akan mengalami sedikit kelewatan, tetapi ia boleh diterima.

• 1000ms atau lebih - Apabila masa berada dalam julat ini (1 saat), pengguna hilang fokus pada tugas yang mereka lakukan.

• 10000ms atau lebih - Julat masa ini ialah apabila pengguna menjadi kecewa dengan prestasi tapak dan ada kemungkinan mereka tidak akan kembali ke tapak.

Selain itu, disebabkan kelajuan rangkaian dan perkakasan, terdapat juga kelewatan tertentu. Seperti tapak web, kelajuan pantas pada mesin berkuasa akan lebih pantas daripada sambungan perlahan pada peranti perlahan.

Bagaimana untuk meningkatkan prestasi laman web?

Gunakan faktor berikut untuk meningkatkan prestasi tapak web anda, sambil mengambil kira faktor ini semasa peringkat pembangunan atau penyelenggaraan tapak web anda.

1. Kurangkan kod JavaScript yang tidak digunakan

Menulis kod yang lebih panjang memerlukan lebih banyak masa untuk memuatkan halaman web, jadi adalah penting untuk mengoptimumkan kod semasa membangunkan aplikasi web. Anda boleh mengambil bantuan Google Closure Compiler atau Uglify JS Code Optimizer yang akan menunjukkan kepada anda fungsi, kod atau ciri yang tidak digunakan yang tidak lagi digunakan.

Contoh

Sebelum mengalih keluar kod yang tidak digunakan:

function test(){ 
   var p=10, s="stringName";
   console.log("Output here");
   alert("This is sample alert");
   return;
   console.log("This is an unused message");
   for(var i=0;i<10;i++){
      console.log(i);
   }
}
test();

Selepas mengalih keluar kod yang tidak digunakan:

function test(){
   console.log("Output here"); 
   alert("This is sample alert") 
} 
test();

Di sini anda boleh perhatikan bahawa sebelum mengalih keluar kod yang tidak digunakan, kami sedang menulis pernyataan konsol dan menjalankan gelung selepas pernyataan pulangan yang tidak berguna kerana ia tidak akan melakukan apa-apa dan kami tidak menggunakan pembolehubah, jadi ia juga boleh dipadamkan.

2. Kecilkan saiz kod

Minifikasi boleh dilakukan dalam JavaScript untuk menjadikan kod lebih kecil, ia membantu mengurangkan saiz fail kod dan dengan itu masa memuatkan laman web.

Contoh: Rehat, ruang tambahan, ulasan, dll. boleh meningkatkan saiz fail kod. Walaupun pengguna akan mengalami sedikit kesukaran membaca kod, komputer akan mempunyai kelajuan pemprosesan yang cekap.

3. Penggunaan protokol HTTP/2

Protokol HTTP direka untuk melaksanakan fungsi komunikasi data lanjutan antara pelanggan dan pelayan. Pada tahun 2015, versi utama kedua protokol aplikasi telah dibangunkan. Matlamat keluaran ini adalah untuk meningkatkan pengalaman Internet dengan menyampaikan kesederhanaan, prestasi berkelajuan tinggi dan keteguhan.

Protokol ini menambah baik kod JavaScript supaya ia boleh mengendalikan berbilang permintaan serentak, yang membantu memperbaik masa muat laman web.

4. Penggunaan JavaScript CDN

CDN bermaksud Rangkaian Penghantaran Kandungan. Kami memautkan tapak web kami dengan kandungan statik ke rangkaian perkhidmatan lanjutan di seluruh dunia. Ia menyimpan kandungan laman web dan menyajikan kandungan kepada pelawat dari pelayan terdekat. Melalui CDN, fail akan dimampatkan dan dioptimumkan secara automatik, supaya kadar penggunaan sumber menjadi rendah, yang bermanfaat untuk meningkatkan kelajuan laman web.

5. Kebocoran memori

Kebocoran memori berlaku apabila fungsi atau aplikasi menggunakan memori untuk melengkapkan pelaksanaannya, tetapi ia tidak membebaskan memori supaya aplikasi lain mungkin menunggu memori. Untuk setiap objek baharu, anda menggunakan memori tetapi tidak membebaskannya, kemudian JavaScript akan berfikir bahawa program itu mungkin memerlukan memori. Untuk mengelakkan kebocoran memori, pembangun harus mengambil kira perkara ini dan mengurus skop program mereka dengan betul.

Dan lakukan perkara berikut:

• Tugaskan null kepada pembolehubah global dan tetapkan semula selepas digunakan.

• Elakkan daripada menangkap pembolehubah fungsi luaran ke dalam penutupan.

• Kendalikan rujukan DOM dengan berhati-hati.

Bagaimana untuk menambah baik visual tapak web untuk antara muka pengguna yang lebih baik?

1. Warna

Apabila pengguna melawat tapak web, perkara pertama yang mereka perhatikan ialah warnanya. Apabila membangunkan laman web, pereka bentuk memilih skema warna, iaitu satu set warna yang akan digunakan di seluruh antara muka. Apabila anda tidak membuat keputusan tentang skema warna, tapak web anda akan kelihatan sangat tidak konsisten, menyebabkan pengguna hilang tumpuan dan mereka mungkin meninggalkan tapak anda. Ia juga mentakrifkan identiti jenama, dengan mengambil tapak web tutorialspoint sebagai contoh, anda boleh perhatikan bahawa hijau dan hitam disertakan dalam kebanyakan warna.

2. Fail dimampatkan

Anda mungkin telah melihat bahawa tapak web dengan banyak halaman dan animasi serta reka bentuk yang kompleks mengambil masa yang lebih lama untuk dimuatkan. Untuk meningkatkan kelajuan dan responsif laman web, kaedah pemampatan untuk fail dan imej yang besar harus dipertimbangkan.

3. Gunakan imej responsif

Gambar adalah bahagian penting dalam laman web. Gambar menduduki lebih daripada 50% laman web dan boleh menyebabkan laman web menjadi perlahan. Jadi, untuk meningkatkan kelajuan, gunakan imej jenis web yang 30% lebih kecil daripada JPEG atau PNG.

4. Kumpulan fail CSS dan pemilih

Seperti yang anda tahu, CSS. Ia menggunakan kesan dan bertanggungjawab ke atas sifat tapak web yang boleh dilihat. Mencipta banyak halaman helaian gaya juga boleh membawa kepada prestasi tapak web yang lebih perlahan, jadi gabungkan semua fail CSS ke dalam satu halaman XHTML dan anda akan melihat kelajuan dan prestasi tapak web yang lebih baik sebelum dan selepas penggabungan.

5. Caching

Caching ialah teknik untuk menyimpan subset data. Ia digunakan untuk meningkatkan akses data kerana ia menyimpan salinan data yang diminta oleh pengguna dan mengembalikan salinan cache apabila pengguna memintanya semula pada masa hadapan dan bukannya mencari dan memulangkan fail asal.

Terdapat banyak jenis caching yang boleh membantu meningkatkan kelajuan penghantaran kandungan.

• Cache Memori - Dalam jenis cache ini, data cache disimpan dalam RAM, yang meningkatkan kelajuan proses pemindahan data dalam aplikasi.

• Web Caching - Terdapat dua istilah untuk teknologi caching ini.

  Cache klien web: Jenis cache ini juga dikenali sebagai cache pelayar web. Ia disimpan di sebelah pelanggan. Apabila halaman web dimuatkan ke dalam penyemak imbas buat kali pertama, ia menyimpan sumber halaman seperti teks, skrip, imej dan media lain supaya pada kali berikutnya halaman yang sama diakses, penyemak imbas tidak memuatkannya dari pelayan. tetapi sebaliknya Muatkan mereka. Lihat kedai cache dan dapatkannya daripada komputer pelanggan.

  Caching Pelayan Web - Dalam mekanisme ini, kami bertujuan untuk menyimpan sumber pada pelayan, bukan pada mesin klien. Mekanisme ini membantu dalam menjana data secara dinamik di tapak web dan memuatkannya selepas beberapa ketika. Kaedah ini tidak berguna dalam kes kandungan statik, caching sedemikian membantu mengurangkan beban berlebihan pada pelayan.

• CDN Caching- CDN bermaksud Rangkaian Penghantaran Kandungan. Cache ini menyimpan sumber seperti halaman web, skrip, fail media dan helaian gaya dalam pelayan proksi. Apabila pengguna meminta sumber, pelayan proksi menyemak sama ada salinan sumber itu tersedia. Jika replika tersedia, ia menghantar sumber kepada pengguna yang meminta, jika tidak permintaan itu dimajukan ke pelayan yang berkaitan. Ini membantu mengurangkan kependaman rangkaian jika pengguna yang meminta dihalakan ke pelayan tersedia yang terdekat.

• Cache Cakera- Ia adalah mekanisme yang serupa dengan cache memori. Cache cakera menyimpan data supaya ia boleh diakses dengan lebih pantas dalam aplikasi.

Oleh itu, teknik ini akan menjadikan laman web sangat dioptimumkan dari segi keterlihatan dan prestasi.

Atas ialah kandungan terperinci Gunakan JavaScript untuk meningkatkan laman web anda secara visual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!