10 Cadangan Penulisan dan Penggunaan yang Mempengaruhi Kelajuan Rendering CSS Halaman 1/3_Pertukaran Pengalaman

Saya jarang menulis CSS baru-baru ini, dan saya mungkin kurang menulis pada masa hadapan, jadi saya masih mahu berkongsi beberapa pengalaman saya dengan anda, dengan harapan dapat membantu anda!

Artikel ini terutamanya menulis tentang bahagian CSS yang meningkatkan kelajuan pemaparan halaman web dalam penyemak imbas pelanggan. Ia telah meringkaskan 10 item buat sementara waktu.

1. *{} #jb51 *{} Cuba elakkan

Memandangkan penyemak imbas yang berbeza mempunyai tafsiran yang berbeza bagi teg HTML, kesan halaman web terakhir mungkin berbeza dalam penyemak imbas yang berbeza Secara berbeza, mengikut susunan untuk menghapuskan risiko ini, pereka bentuk biasanya mengalih keluar semua atribut lalai semua teg pada permulaan CSS untuk mencapai kesan nilai atribut seragam untuk semua teg. Jadi terdapat * kad bebas. * akan merentasi semua tag;

*{margin:0; padding:0}

Jika ditulis seperti ini, margin semua tag di bawah ID bersamaan dengan jb51 semuanya 0; penulisan seperti ini ialah:
a .Traversal akan memakan banyak masa Jika kod HTML anda tidak ditulis dengan cara yang standard atau teg tertentu tidak semestinya sepadan, kali ini mungkin lebih lama
b. Banyak teg tidak mempunyai atribut atau atribut ini, jadi ia akan mengambil masa untuk menyediakannya semula;

Cadangan penyelesaian:

#jb51 *{margin:0; padding:0}

a sering digunakan dalam penyemak imbas yang berbeza Kesan tafsiran adalah berbeza, jadi anda harus menggunakan tag yang biasa digunakan itu sebaik mungkin; , li, p, h1 {margin:0; padding:0}

2 Jangan gunakan beberapa penapis

Sesetengah penapis IE tidak disokong dalam FIREFOX apabila menulis beberapa kesan CSS; dan penapis adalah perkara yang sangat miskin sumber; 🎜>

Penyelesaian yang dicadangkan:
a Jika anda tidak boleh menggunakannya, dalam satu pihak, terdapat banyak kesan hanya boleh digunakan dalam IE; 🎜>b. Dalam kes ini, jika anda perlu melakukan ini, Untuk kesan terbaik, disyorkan untuk menggunakan gambar sebagai latar belakang (saya hanya bercakap tentang mengoptimumkan kelajuan. Dalam aplikasi sebenar, ia masih boleh digunakan dalam bahagian kecil. Sesetengah orang mungkin mengatakan bahawa menggunakan gambar memerlukan satu lagi
permintaan HTTP, haha...)

Contoh yang sangat baik ialah semasa gempa bumi 12 Mei tahun ini, banyak laman web menjadi kelabu dalam sekelip mata. Mereka hanya menggunakan satu baris kod CSS:


Kod program

<style> 
body {margin:100px;} 
#login_b {width:200px;height:200px;background:#000;-moz-opacity:0.2; filter:alpha(opacity=20);
margin:-30px 0 0 600px; position:absolute;} 
#login_t { z-index:10;border:1px solid #006600;width:200px;height:200px;background:#FFF;
margin:-35px 0 0 595px; position:absolute;} 
#info{ background:#009900; height:155px;} 
</style> 

<div id="info"> 
<div id="login_t">test</div> 
<div id="login_b"></div> 
</div>

Walau bagaimanapun, anda akan melihat bahawa halaman web ini adalah sangat perlahan, dan CPU anda akan melonjak selepas membukanya Tidak keterlaluan untuk mengatakan bahawa jika konfigurasi komputer anda lemah, Ia bukan keterlaluan untuk membunuh anda.

3. Kurangkan penggunaan kedudukan mutlak pada halaman

Kedudukan mutlak (kedudukan:mutlak) sangat biasa digunakan dalam reka letak halaman web, terutamanya apabila membuat beberapa kesan terapung, ia juga akan menjadikan halaman kelihatan lebih baik. Walau bagaimanapun, jika anda menggunakan terlalu banyak
kedudukan mutlak dalam halaman web, halaman web anda akan menjadi sangat perlahan Dalam hal ini, prestasi FIREFOX lebih teruk daripada IE.

Contohnya:

Kod program

body{filter: gray;}

Penyelesaian yang dicadangkan:
a digunakan Tiada nilai yang sangat baik untuk menerangkan nilainya; ia juga bergantung pada kandungan tag kedudukan mutlak;
b. Jika anda boleh mencapai kesan yang sama dengan penyelesaian, gunakan penyelesaian.

4. Jubin imej latar belakang

Latar belakang sesetengah halaman web atau latar belakang bahagian tertentu halaman biasanya memerlukan jubin imej masa jubin. Masalahnya, kalau sekali pun boleh, tapi kalau berkali-kali tak guna.

Contoh mudah:

Contoh 1: Tatal halaman anda dan lihat sejauh mana kelajuannya?


Contoh 2: Kesan yang sama, cuba ini lagi!

<style>li{ position:absolute;}</style> 
<ul> 
<li style="left:10px; top:20px">001</li> 
<li style="left:30px; top:70px">001</li> 
<li style="left:40px; top:50px">001</li> 
…… 
</ul>

Arahan: Uji kedua-dua kesan di atas. Semakin teruk komputer anda, semakin jelas ia akan menjadi jika konfigurasi komputer anda sangat baik, anda boleh cuba menukar 8000px kepada 9000000px Cubalah, jika masih tidak berkesan, ubah
menjadi lebih besar, jangan tegur saya jika anda bimbang!

Amalan yang dicadangkan:
a Imej dengan sedikit warna hendaklah dijadikan imej GIF; b imej harus lebih besar. Saiz sebenar tidak akan menjadi lebih besar; kedua-dua contoh di atas membuktikannya dengan sangat baik
5. Biarkan sebanyak mungkin sifat diwarisi

Seboleh-bolehnya, biarkan beberapa sifat anak mewarisi ibu bapa dan bukannya menimpa ibu bapa; 🎜>

<style> 
a:link,a:visited{color:#0000FF} 
a:hover,a:active{color:#FF0000} 
#jb51 a:link,#jb51 a:visited{ font-weight:bold} 
#jb51 a:hover,#jb51 a:active{ font-style: italic;} 
</style> 
<div><a href="#">test</a><div> 
<div id="jb51"><a href="#">jb51</a></div>

<style> 
a:link,a:visited{color:#0000FF} 
a:hover,a:active{color:#FF0000} 
#jb51 a:link,#jb51 a:visited{ font-weight:bold} 
#jb51 a:hover,#jb51 a:active{ font-style: italic;} 
</style> 
<div><a href="#">test</a><div> 
<div id="jb51"><a href="#">jb51</a></div>

实际上我是让jb51去继承我默认设置的属性，因为那些属性已经存在了。 

另外再说几个不是特别重要的地方，平时注意一点就行了，没有上边这几个影响那么大： 

6、CSS的路径别太深； 
例如： 

程序代码 

#jb51 #info #tool #sidebar h2{ font-size:12px;}

7、能简写的一些就简写； 
例如：

#jb51{pading-top:10px; padding-right:50px; padding-left:50px; padding-bottom:4px;}

改成：

#jb51{padding:10px 50px 4px 50px}

 
这个对渲染速度没有影响；只是少几个字符； 

8、别放空的的class或没有的class在HTML代码中； 

9、float 的应用 
这个东西我的感觉是如果使用不当，百分百有性能问题，而且还非常的大，但实在不知道怎么样能弄一个例子出来；这里只能建议大家如果不是很明白float是怎么工作的，还是少使用为妙。 

10、合理的布局 
为什么这么说呢，合理的布局，可以改变CSS的写法以及渲染过程。 

其实有些不能总结为CSS部分； 

 以上就是10条影响CSS渲染速度的写法与使用建议第1/3页_经验交流的内容，更多相关内容请关注PHP中文网（www.php.cn）！