Bagaimana untuk mengalih keluar gaya CSS yang berlebihan

CSS ialah bahagian penting dalam pembangunan web. Walau bagaimanapun, disebabkan pengubahsuaian dan kemas kini kod yang berterusan, kami pasti akan meninggalkan beberapa kod gaya berlebihan dalam fail CSS. Walaupun kod ini mungkin kelihatan tidak berbahaya, ia sebenarnya mempengaruhi prestasi dan kelajuan pemuatan halaman web anda. Oleh itu, mengalih keluar CSS berlebihan adalah tugas yang sangat penting.

1. Kesan mengosongkan CSS berlebihan pada prestasi halaman web

1. Kelajuan pemuatan yang lebih perlahan

Kod CSS yang berlebihan akan menjadikan jumlah kod web halaman lebih besar Besar, yang mengakibatkan pemuatan halaman web yang lebih perlahan. Apabila penyemak imbas memuat turun HTML, CSS, JavaScript dan fail lain, mereka melakukannya mengikut tertib. Jika saiz fail CSS terlalu besar, ia akan menghalang fail lain daripada memuat turun, sekali gus memperlahankan kelajuan memuatkan halaman web.

2. Kelajuan pemaparan menjadi perlahan

Memandangkan halaman web terus berkembang, penyemak imbas perlu bekerja lebih keras untuk memaparkan kandungan yang sepadan. Jika terdapat terlalu banyak kod CSS, penyemak imbas akan mengambil masa yang lebih lama untuk memprosesnya, yang akan memperlahankan kelajuan pemaparan halaman web. Inilah sebabnya kadangkala mengambil masa yang lama untuk membuka halaman web yang mudah.

3. Pengendalian penyemak imbas terhadap CSS berlebihan

Pelayar akan mengesan kehadiran CSS berlebihan dalam kod, tetapi ia masih akan dihuraikan. Ini kerana pelayar hanya tahu cara menghuraikan HTML, CSS dan JavaScript. Jadi, walaupun anda mempunyai 50 CSS berlebihan pada permulaan halaman web, anda perlu menunggu sehingga semuanya dimuat turun dan dihuraikan sebelum pemaparan boleh dimulakan. Ini akan memperlahankan kelajuan pemuatan halaman web dengan ketara.

2. Cara mengosongkan CSS berlebihan

Idea teras mengosongkan CSS berlebihan adalah untuk mengurangkan jumlah kod pada halaman web. Berikut ialah beberapa cara untuk mengalih keluar CSS berlebihan:

1. Alih keluar CSS berlebihan secara manual

Mengalih keluar CSS berlebihan secara manual ialah kaedah paling asas. Kita boleh membaca kod baris demi baris dalam fail CSS dan menganalisis sama ada setiap kelas diperlukan. Jika kelas tidak digunakan, ia boleh dipadamkan.

2. Gunakan alatan dalam talian untuk memadamkan CSS berlebihan

Terdapat beberapa alatan dalam talian yang boleh memadamkan kelas yang tidak digunakan dalam fail CSS. Alat ini menghuraikan fail CSS melalui penghurai CSS dan mencari kelas yang tidak digunakan dalam fail. Kami boleh memadamkan kelas yang tidak digunakan dengan menyeret fail CSS ke dalam alatan ini dan mengklik butang padam.

3. Gunakan alat binaan untuk mengalih keluar CSS berlebihan

Dengan menggunakan alatan binaan, kami boleh mengalih keluar kelas yang tidak digunakan secara automatik. Alat bina menyusun kod sumber tapak web ke dalam versi mini. Semasa proses penyusunan, alat binaan akan menghuraikan fail CSS melalui penghurai CSS dan mencari kelas yang tidak digunakan. Ini secara automatik akan memadamkan kelas yang tidak digunakan, sekali gus mengurangkan jumlah kod.

3. Kes mudah

Katakan terdapat fail CSS yang mengandungi kelas berikut:

.page-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
}

.content-main {
    font-size: 16px;
    color: #666;
}

.content-sidebar {
    font-size: 14px;
    color: #999;
}

.footer {
    font-size: 12px;
    color: #999;
}

Jika kita hanya menggunakan kelas .page-title dan .content-main , maka dua kelas yang lain adalah berlebihan. Kami boleh mengeluarkannya secara manual daripada fail CSS atau kami boleh menggunakan alatan dalam talian atau membina alatan untuk mengalih keluarnya secara automatik.

4. Kesimpulan

Adalah sangat penting untuk mengosongkan CSS yang berlebihan, yang boleh meningkatkan kelajuan pemuatan dan pemaparan halaman web. Kami boleh mengurangkan saiz fail CSS dan memastikan kod itu ringkas dan boleh dibaca dengan mengalih keluar manual, menggunakan alat dalam talian atau alat binaan. Apabila mengekod CSS, pastikan anda memberi perhatian kepada kelas mana yang perlu dan mana yang berlebihan, dan elakkan menulis kod CSS secara berlebihan.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar gaya CSS yang berlebihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!