Compress CSS dan JavaScript Menggunakan PNG dan Kanvas

3 Ini adalah helah yang licik. Ia dirancang oleh Jacob Seidelin di nihilogic.dk dan telah digunakan oleh beberapa peserta dalam pertandingan 10k sebuah acara selain , walaupun terdapat beberapa pertengkaran sama ada ia selaras dengan semangat acara itu. Yang berkata, menarik untuk melihat bagaimana ia dilakukan, jadi mari kita lihat. Berikut adalah langkah -langkah: 1. Kurangkan permohonan anda Langkah pertama adalah untuk memerah CSS dan JavaScript terakhir anda ke saiz yang paling kecil menggunakan alat pemampatan yang baik. 2. Satat CSS dan JavaScript anda sebagai grafik Ini adalah bahagian yang rumit. Anda perlu menukar fail CSS dan JavaScript ASCI-Encoded anda ke dalam imej binari tunggal. Format PNG adalah yang terbaik kerana ia kehilangan (kod anda dipelihara), menggunakan mampatan ZLIB, dan disokong oleh semua pelayar. Pemaju Web Cal Henderson telah menerbitkan penyelidikan dan kod PHP/Perl yang menukar kod ke imej menggunakan pelbagai format seperti 1-bit, 8-bit, 24-bit, dan sebagainya. Anda boleh melihat perpustakaan jQuery sebagai persegi 1-bit di sini . PNG boleh dikurangkan dalam saiz selanjutnya menggunakan alat seperti SMUSH.IT dan PNGOUT. 3. Ekstrak kod dari gambar Sekarang kita perlu memuatkan imej dan menukarnya kembali ke kod yang boleh dilaksanakan. Ini boleh dicapai dengan memuatkan imej ke dalam elemen kanvas menggunakan kaedah DrawImage (). Piksel individu kemudian dibaca menggunakan getimagedata () , dan ditukar kepada rentetan yang boleh diluluskan ke eval () atau tertanam ke dalam DOM. Keputusan berbeza -beza, tetapi penjimatan saiz fail sebanyak 75% dapat dicapai. Dalam beberapa kes, format imej boleh mengalahkan fail yang dimampatkan dengan GZIP. Jadi anda boleh memasuki pertandingan 10K dengan kod 40kb!

Adakah ini mempunyai penggunaan dunia nyata? Oleh itu, selain menipu pada pertandingan, adakah teknik ini mempunyai aplikasi dunia nyata? Ia adalah hack yang menarik, tetapi fail sumber Gzipping pada pelayan biasanya akan menghasilkan mampatan yang lebih baik dan jauh lebih mudah untuk dilaksanakan. Walau bagaimanapun, saya dapat melihat teknik yang digunakan untuk steganografi, atau untuk menyulitkan kod sensitif dari penggodam pemula. Sangat sejuk, tetapi adakah anda menggunakannya?

soalan yang sering ditanya mengenai CSS, JavaScript, dan PNG pada kanvas

Bagaimanakah pemampatan CSS, JavaScript, dan PNG pada kanvas meningkatkan prestasi laman web? Ini menghasilkan masa beban yang lebih cepat, yang dapat meningkatkan pengalaman pengguna dan berpotensi meningkatkan ranking enjin carian tapak anda. Mampatan berfungsi dengan mengeluarkan watak dan ruang yang tidak perlu, dan dalam hal imej, mengurangkan kualiti mereka ke tahap yang masih boleh diterima tetapi memerlukan kurang data.

Alat apa yang boleh saya gunakan untuk memampatkan fail CSS, JavaScript, dan PNG? Untuk CSS dan JavaScript, anda boleh menggunakan minifier dalam talian seperti CSSMinifier dan JavaScript Minifier. Untuk fail PNG, anda boleh menggunakan alat pemampatan imej seperti TINYPNG atau ImageOptim. Alat ini mudah digunakan dan dapat mengurangkan saiz fail anda dengan ketara. Ini boleh dilakukan menggunakan API Kanvas HTML5, yang membolehkan anda melukis imej ke kanvas dan kemudian mengeksportnya sebagai URL data dalam format termampat. Walau bagaimanapun, kaedah ini boleh menjadi kompleks dan mungkin tidak memberikan tahap pemampatan yang sama seperti alat pemampatan imej yang berdedikasi. Untuk menggunakannya, anda perlu memasangnya melalui npm. Kemudian, anda boleh menggunakan fungsi kompresnya, yang mengambil fail imej dan objek pilihan sebagai parameter. Objek Opsyen membolehkan anda menentukan format output dan tahap kualiti yang dikehendaki.

Apakah beberapa teknik pemampatan imej yang berkesan dalam JavaScript? Salah satu kaedah yang paling biasa ialah menggunakan API kanvas HTML5 untuk menarik imej ke kanvas dan kemudian mengeksportnya dalam format termampat. Kaedah lain ialah menggunakan perpustakaan JavaScript seperti pemampatan imej penyemak imbas, yang menyediakan API yang mudah untuk imej yang memampatkan. Cukup tampal kod CSS anda ke dalam medan input dan klik butang 'Minify'. Alat ini kemudiannya akan menghapuskan semua aksara dan ruang yang tidak perlu, menghasilkan fail CSS yang lebih kecil dan lebih cekap. Minifying melibatkan menghapuskan aksara dan ruang yang tidak perlu dari fail, sementara memampatkan melibatkan pengekodan data fail dengan cara yang memerlukan ruang yang kurang. Kedua -dua teknik ini dapat mengurangkan saiz fail dengan ketara, tetapi biasanya digunakan dalam konteks yang berbeza. Minifikasi biasanya digunakan untuk fail CSS dan JavaScript, sementara memampatkan sering digunakan untuk imej dan data binari lain. Apabila anda memampatkan imej, anda pada dasarnya mengurangkan datanya, yang boleh mengakibatkan kehilangan kualiti. Walau bagaimanapun, banyak alat pemampatan imej membolehkan anda mengawal tahap mampatan, jadi anda boleh mengimbangi antara saiz fail dan kualiti imej.

Adakah perlu untuk memampatkan semua imej di laman web saya?

Walaupun ia tidak diperlukan untuk memampatkan semua imej di laman web anda, berbuat demikian dapat meningkatkan masa beban tapak anda dengan ketara. Fail imej besar boleh melambatkan laman web anda, terutamanya untuk pengguna dengan sambungan internet yang lebih perlahan. Dengan memampatkan imej anda, anda dapat memastikan bahawa laman web anda memuat dengan cepat untuk semua pengguna. Banyak alat pemampatan imej membolehkan anda menyesuaikan tahap mampatan, jadi anda boleh memilih tahap yang mengurangkan saiz fail tanpa mempengaruhi kualiti imej. Di samping itu, sentiasa pratonton imej termampat anda sebelum menerbitkannya untuk memastikan mereka masih kelihatan baik.

Atas ialah kandungan terperinci Compress CSS dan JavaScript Menggunakan PNG dan Kanvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!