Cara menggunakan Modernizr secara bertanggungjawab

Gunakan Modernizr secara bertanggungjawab: Strategi untuk meningkatkan prestasi laman web

Modernizr, perpustakaan JavaScript yang dapat mengesan sama ada penyemak imbas menyokong ciri -ciri tertentu. Walau bagaimanapun, untuk mengelakkan melambatkan laman web, pastikan anda menggunakannya dengan berhati -hati. Artikel ini meneroka cara menggunakan Modernizr secara bertanggungjawab, serta perpustakaan lain yang serupa seperti jQuery.

Mengapa memberi perhatian kepada bagaimana beban modenizr?

Soalan utama: Adakah anda bersedia menunggu beberapa saat untuk mengakses laman web? Sekiranya jawapannya tidak, begitu juga pelawat anda. Masa pemuatan yang panjang akan secara langsung menjejaskan pengalaman pengguna dan menyebabkan kehilangan pelawat. Oleh itu, walaupun anda meneruskan ciri -ciri yang sejuk, anda mesti mengambil kira prestasi laman web.

Kunci ialah cara memuatkan. Banyak fail JavaScript dilaksanakan selepas halaman dimuatkan, dan meletakkannya dalam tidak bermakna, dan akan menyekat rendering halaman. Skrip besar diletakkan di , dan pelawat mesti menunggu skrip dimuat sebelum mereka dapat melihat kandungan halaman.

Modernizr digunakan untuk mengesan ciri -ciri moden seperti peralihan dan transformasi CSS. Kecuali untuk keadaan khas, ciri -ciri ini tidak perlu untuk memaparkan kandungan halaman. Kebanyakan masa, Modernizr boleh dimuatkan pada akhir bukannya .

Pengoptimuman

bukan sahaja untuk sumber tunggal

Jika laman web yang menggunakan Modernizr memuat perlahan -lahan, hanya memuatkan perpustakaan secara bertanggungjawab mungkin tidak mencukupi untuk menyelesaikan masalah prestasi. Pendekatan yang bertanggungjawab bermaksud pertimbangan yang teliti setiap kali anda memasukkan fail JavaScript atau sumber besar yang lain. Mengoptimumkan sumber tunggal mungkin tidak jelas, tetapi mengoptimumkan semua sumber dapat meningkatkan prestasi dengan ketara.

Jelaskan keperluan

Pastikan untuk menjelaskan keperluan sebelum menggunakan Modernizr. Modernizr menawarkan banyak ujian, tetapi tidak semua ujian berguna untuk projek anda. Laman web rasmi ModernIZR menyediakan alat binaan tersuai, anda hanya boleh memilih ujian yang diperlukan untuk menghasilkan versi tersuai yang lebih kecil, dengan itu mengurangkan masa muat turun.

Adalah disyorkan untuk menggunakan versi penuh ModernIZR semasa peringkat pembangunan projek dan menjana semula versi tersuai apabila ia dikeluarkan. Pendekatan yang lebih baik adalah menggunakan alat automasi seperti Grunt-Modernizr, yang mengimbas fail CSS dan JavaScript anda, mengetahui semua ciri yang digunakan, dan menghasilkan binaan modenzr yang sesuai.

tidak semua ujian diperlukan

Sebagai contoh, ModernIZR boleh menguji sama ada penyemak imbas menyokong atribut CSS

. Jika tidak disokong, harta ini akan diabaikan dan tidak akan menyebabkan laman web itu terhempas. Oleh itu, melainkan jika text-shadow adalah penting untuk laman web anda (contohnya, untuk meningkatkan kebolehbacaan teks), ujian mungkin tidak diperlukan. text-shadow

Untuk situasi di mana skema sandaran diperlukan, anda masih perlu mengujinya, tetapi tidak semua skim sandaran memerlukan Modernizr. Sesetengah skim sandaran CSS tidak memerlukan ujian sendiri.

html5shiv Digunakan untuk menyokong elemen HTML5 dalam versi lama Internet Explorer. Modernizr boleh memasukkannya, tetapi anda tidak memerlukannya jika anda tidak serasi dengan IE yang lebih tua. Adalah disyorkan untuk menggunakan html5shiv, tetapi ia tidak perlu dimuatkan melalui Modernizr.

Beberapa fungsi boleh melambatkan pemuatan

Ciri -ciri Modernizr Kebanyakan boleh ditangguhkan memuat ke bahagian bawah halaman. Ini tidak menghalang pengguna melihat kandungan halaman, tetapi sebaliknya memaparkan kandungan asas terlebih dahulu dan kemudian memuatkan pengalaman yang dipertingkatkan.

Walau bagaimanapun, ciri -ciri tertentu, seperti

, mesti diletakkan dalam html5shiv untuk dimuatkan sebelum memberikan elemen HTML5. Tetapi anda boleh mengoptimumkan bagaimana ia dimuatkan melalui komen bersyarat atau skrip sebaris untuk mengurangkan permintaan HTTP.

Memutuskan sama ada untuk meletakkan Modernizr dalam

bergantung kepada struktur dan fungsi halaman anda. Jika keputusan ujian tidak menjejaskan susun atur halaman, anda boleh melambatkan beban.

Pertimbangan kecekapan

Semasa meletakkan Modernizr di bahagian bawah halaman dapat meningkatkan masa pemuatan, Paul Irish menunjukkan bahawa banyak ujian modenzr (terutama ujian CSS) dapat menyebabkan reflows, menyebabkan penyemak imbas untuk mengira semula gaya, yang dapat mengimbangi manfaat kelewatan beban beban pemuatan .

Ia bergantung kepada kerumitan pokok Dom anda. Dalam kes pokok DOM yang lebih mudah, pelaksanaan ujian lebih cepat. Adalah disyorkan untuk menjalankan ujian untuk menilai masa pelaksanaan di bawah pelayar dan versi yang berbeza. Pembentukan adat dapat mengurangkan ujian yang tidak perlu dan meningkatkan kecekapan.

Ringkasan

Artikel ini meneroka cara menggunakan Modernizr secara bertanggungjawab dan bagaimana memilih lokasi pemuatan yang betul dalam situasi yang berbeza. Tidak kira kaedah mana yang anda pilih, muat turun sumber yang tidak perlu diminimumkan untuk memberi pengguna pengalaman yang baik, terutamanya apabila sambungan rangkaian perlahan. Pendekatan pembangunan yang bertanggungjawab ini bukan sahaja untuk Modernizr, tetapi juga untuk perpustakaan lain seperti jQuery. Mengelakkan memuat turun data yang tidak berguna adalah prinsip yang harus diikuti oleh setiap pemaju.

Atas ialah kandungan terperinci Cara menggunakan Modernizr secara bertanggungjawab. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!