前端笔记-前端优化简要大总结_html/css_WEB-ITnose

Pemuatan malas asli adalah fungsi penyemak imbas terbina dalam yang membolehkan pemuatan gambar malas dengan menambah atribut pemuatan = "malas" ke tag. 1. Ia tidak memerlukan JavaScript atau perpustakaan pihak ketiga, dan digunakan secara langsung dalam HTML; 2. Ia sesuai untuk gambar yang tidak dipaparkan pada skrin pertama di bawah halaman, galeri gambar menatal tambahan dan sumber gambar yang besar; 3. Ia tidak sesuai untuk gambar dengan skrin pertama atau paparan: Tiada; 4. Apabila menggunakannya, pemegang tempat yang sesuai harus ditetapkan untuk mengelakkan susun atur susun atur; 5. Ia harus mengoptimumkan pemuatan imej responsif dalam kombinasi dengan atribut srcset dan saiz; 6. Isu keserasian perlu dipertimbangkan. Sesetengah pelayar lama tidak menyokongnya. Mereka boleh digunakan melalui pengesanan ciri dan digabungkan dengan penyelesaian JavaScript.

SRCSET dan saiz adalah sifat utama untuk pelaksanaan imej responsif HTML. SRCSET menyediakan pelbagai sumber imej dan kepadatan lebar atau piksel mereka, seperti 400W dan 800W, dan penyemak imbas memilih imej yang sesuai dengan sewajarnya; Saiz mentakrifkan lebar paparan imej di bawah lebar skrin yang berbeza, seperti (maksimum lebar: 600px) 100VW, 50VW, supaya penyemak imbas dapat lebih tepat sesuai dengan saiz imej. Dalam penggunaan sebenar, anda perlu menyediakan gambar pelbagai saiz, dengan jelas dinamakan, susun atur reka bentuk mengikut pertanyaan media, dan menguji prestasi peralatan untuk mengelakkan mengabaikan saiz atau kesilapan unit, dengan itu menjimatkan lebar jalur dan meningkatkan prestasi.

Perbezaan utama ialah TextArea menyokong pelbagai baris input teks, manakala inputText hanya tersedia dalam satu baris. 1. Gunakan inputType = "teks" sesuai untuk input pengguna pendek dan satu baris, seperti nama pengguna, alamat e-mel, dan lain-lain, dan boleh menetapkan maxLength untuk mengehadkan bilangan aksara. Penyemak imbas menyediakan fungsi pengisian automatik, menjadikannya lebih mudah untuk gaya seragam di seluruh pelayar; 2. Gunakan Textarea untuk senario yang memerlukan pelbagai baris input, seperti kotak komen, borang maklum balas, pemecahan garis sokongan dan perenggan, dan boleh mengawal saiz melalui CSS atau melumpuhkan fungsi pelarasan. Kedua -dua ciri -ciri bentuk sokongan seperti ruang letak dan mengisi yang diperlukan, tetapi Textarea mentakrifkan saiz melalui baris dan col, dan input menggunakan atribut saiz.

Ia adalah elemen peringkat blok, digunakan untuk membahagikan kawasan kandungan blok besar; Ia adalah elemen sebaris, sesuai untuk membungkus segmen kecil teks atau serpihan kandungan. Perbezaan khusus adalah seperti berikut: 1. Secara eksklusif menduduki baris, lebar dan ketinggian, margin dalaman dan luaran boleh ditetapkan, yang sering digunakan dalam struktur susun atur seperti tajuk, sidebars, dan lain -lain; 2. Jangan bungkus garisan, hanya menduduki lebar kandungan, dan digunakan untuk kawalan gaya tempatan seperti perubahan warna, berani, dan lain -lain; 3. Dari segi senario penggunaan, ia sesuai untuk susun atur dan struktur struktur kawasan keseluruhan, dan digunakan untuk pelarasan gaya berskala kecil yang tidak menjejaskan susun atur keseluruhan; 4. Apabila bersarang, ia boleh mengandungi sebarang elemen, dan unsur-unsur peringkat blok tidak boleh bersarang di dalamnya.

Untuk mencapai kesan pop-up asas, anda perlu mengikuti langkah-langkah berikut: 1. Struktur: Gunakan HTML untuk membuat butang pencetus, lapisan topeng dan kawasan kandungan pop timbul; 2. Gaya: Tetapkan susun atur yang tersembunyi, berpusat, latar belakang topeng dan gaya butang tutup melalui CSS; 3. Interaksi: Gunakan JavaScript untuk mengikat acara klik untuk mengawal paparan pop-up dan menyembunyikan, dan boleh mengembangkan fungsi penutupan ESC; 4. Pengoptimuman: Tambah animasi CSS untuk meningkatkan pengalaman pengguna. Seluruh proses tidak memerlukan perpustakaan pihak ketiga, yang sesuai untuk dengan cepat merealisasikan fungsi pop-up asas.

WebWorkers adalah benang bebas yang berjalan di latar belakang penyemak imbas, digunakan untuk melaksanakan tugas yang memakan masa tanpa menyekat antara muka pengguna. Mereka dilaksanakan melalui fail JavaScript dan dimulakan dengan skrip di halaman HTML, tetapi sekali berlari, mereka dipisahkan dari benang utama. 1. WebWorkers tidak boleh mengakses DOM secara langsung untuk memastikan kestabilan halaman; 2. Mereka menyedari komunikasi yang selamat dengan benang utama melalui postmessage () dan onmessage; 3. Ia sesuai untuk memproses tugas-tugas intensif CPU seperti imej, pengkomputeran kompleks, analisis data; 4. Ia menyokong beberapa API seperti SetTimeout, Fetch dan IndexedDB; 5. Apabila menggunakannya, anda perlu memberi perhatian kepada kesukaran debug, penggunaan memori, sekatan silang domain dan isu-isu lain.

Untuk memulakan dengan HTML dengan cepat, anda hanya perlu menguasai beberapa tag asas untuk membina rangka web. 1. Struktur halaman adalah penting, dan, yang merupakan elemen akar, mengandungi maklumat meta, dan merupakan kawasan paparan kandungan. 2. Gunakan tajuk. Semakin tinggi tahap, semakin kecil nombor. Gunakan tag untuk segmen teks untuk mengelakkan melangkau tahap. 3. Pautan menggunakan tag dan sepadan dengan atribut HREF, dan imej menggunakan tag dan mengandungi atribut SRC dan ALT. 4. Senarai ini dibahagikan kepada senarai yang tidak teratur dan senarai yang diperintahkan. Setiap entri diwakili dan mesti bersarang dalam senarai. 5. Pemula tidak perlu memaksa menghafal semua tag. Lebih cekap untuk menulis dan memeriksa mereka semasa anda menulis. Menguasai struktur, teks, pautan, gambar dan senarai untuk membuat laman web asas.

Shadowdom adalah teknologi yang digunakan dalam teknologi komponen web untuk membuat subtrees DOM terpencil. 1. Ia membolehkan gunung struktur DOM bebas pada elemen HTML biasa, dengan gaya dan tingkah laku sendiri, dan tidak menjejaskan dokumen utama; 2. Dibuat melalui JavaScript, seperti menggunakan kaedah lampiran dan menetapkan mod untuk dibuka; 3. Apabila digunakan dalam kombinasi dengan HTML, ia mempunyai tiga ciri utama: struktur yang jelas, pengasingan gaya dan unjuran kandungan (slot); 4. Nota termasuk debugging kompleks, kawalan skop gaya, overhead prestasi dan masalah keserasian rangka kerja. Singkatnya, Shadowdom menyediakan keupayaan enkapsulasi asli untuk membina komponen UI yang boleh diguna semula dan tidak mencemarkan.