Pengalaman dalam optimasi front-end WEB

Dengan dimulainya era WEB2.0, perkembangan yang belum pernah terjadi sebelumnya telah terjadi pada jaringan. Pengalaman pengguna front-end menjadi semakin penting untuk menutupi beberapa kekurangan dari interaksi pengguna yang buruk dalam struktur B/S. Namun, hal ini akan menimbulkan masalah, yaitu akan meningkatkan tekanan pada klien Misalnya, menggunakan kode JS dalam jumlah besar, semua orang akan Mengetahui bahwa kode JS yang berjalan di klien akan memengaruhi efisiensi penguraian seluruh halaman web di browser, yang mungkin juga berarti peningkatan lalu lintas klien, jadi apakah itu benar? dari perspektif beban server atau perspektif pengguna, karena sangat penting untuk mengoptimalkan kode klien! Artikel ini terutama menjelaskan metode optimasi front-end WEB baik dari aspek internal maupun eksternal. Semoga dapat memberikan pengalaman dan inspirasi bagi pembaca.

Pertama, mari kita lihat data lalu lintas http http://yahoo.com melalui grafik statistik Yahoo:

Kita dapat menemukan bahwa dari permintaan server pertama hingga halaman dimuat sepenuhnya di klien, membaca kode HTML hanya menyumbang 5% dari keseluruhan waktu respons. Hasil ini berlaku untuk sebagian besar situs web di Amerika Serikat yang dijadikan sampel dari sepuluh situs web teratas, hanya satu yang memiliki lebih dari 5% tetapi kurang dari 20%. Sisanya 80% digunakan untuk membaca konten lain di halaman web, yaitu front-end (teks asli ada di depan). -end, maksudnya tidak termasuk html. Selebihnya kodenya bisa berupa gambar, script, flash, video, macam-macam). Inilah alasan utama mengapa kita harus fokus pada hal-hal ini untuk meningkatkan kecepatan tampilan.

Ada tiga alasan utama mengapa Anda harus memulai dengan front end :

1. Ada potensi perbaikan dan perbaikan di sini. Jika volumenya bisa dikurangi setengahnya, waktu respon bisa dikurangi 40%.
2. Memperbaiki bagian depan membutuhkan lebih sedikit waktu dan sumber daya dibandingkan memperbaiki bagian belakang. (Meningkatkan backend melibatkan mendesain ulang rencana aplikasi, kode, menemukan cara untuk mengoptimalkan kode, menambah atau mengubah konfigurasi perangkat keras, database terdistribusi, dll.)
3. Aturan emas kami adalah: optimalkan kinerja front-end terlebih dahulu, hal ini menghabiskan 80% waktu respons sisi pengguna.

1. Di luar kode, kami memiliki tiga metode berikut:

1. Gunakan teknologi CDN

Untuk metode spesifiknya bisa di Google. (Prinsip umumnya adalah menentukan lokasi pengunjung dan konten yang diakses untuk memilih server terdekat untuk menangani permintaan pengguna)

2. Tambahkan header yang sudah lama kadaluarsa

Kedaluwarsa: Kam, 15 Apr 2010 20:00:00 GMT

Browser akan menggunakan caching untuk mengurangi jumlah permintaan http untuk mempercepat waktu pemuatan halaman. Jika waktu kedaluwarsa yang lama ditambahkan ke header halaman, browser akan selalu menyimpan elemen-elemen di halaman dalam cache.
Namun hal ini akan menimbulkan masalah, yaitu jika hal-hal pada halaman berubah maka namanya harus diubah, jika tidak klien tidak akan aktif melakukan refresh. Di grup kerja Yahoo, nomor versi yang digunakan, seperti yahoo_2. 0.6.js

3. Kompresi Gzip

Gzip adalah metode kompresi paling populer dan efektif saat ini. Ini dikembangkan oleh GNU dan distandarisasi oleh RFC1952.
(Gzip mengompresi gambar, css, skrip, dll. di sisi server, lalu mengirimkannya ke browser klien untuk mendekompresinya. Hal ini dapat meningkatkan kecepatan transmisi, tetapi tekanan pada server akan meningkat. Umumnya, ini lebih tepat untuk mengompresi beberapa elemen.