西西软件园多重安全检测下载网站、值得信赖的软件下载站!
软件
软件
文章
搜索
鐢熸椿鏈嶅姟
鏀粯瀹濋挶鍖�(Alipay)V10.2.53.7000 瀹夊崜鐗�鏀粯瀹濋挶鍖�(Alipay)V10.2.53.7000 瀹夊崜鐗�
鐧惧害鍦板浘瀵艰埅2022V15.12.10 瀹夊崜鎵嬫満鐗�鐧惧害鍦板浘瀵艰埅2022V15.12.10 瀹夊崜鎵嬫満鐗�
鎵嬫満娣樺疂瀹㈡埛绔痸10.8.40瀹樻柟鏈€鏂扮増鎵嬫満娣樺疂瀹㈡埛绔痸10.8.40瀹樻柟鏈€鏂扮増
鐣呴€旂綉鎵嬫満瀹㈡埛绔痸5.6.9 瀹樻柟鏈€鏂扮増鐣呴€旂綉鎵嬫満瀹㈡埛绔痸5.6.9 瀹樻柟鏈€鏂扮増
鍗冭亰鐭ヨ瘑鏈嶅姟appv4.5.1瀹樻柟鐗�鍗冭亰鐭ヨ瘑鏈嶅姟appv4.5.1瀹樻柟鐗�
褰遍煶鎾斁
p2psearcher瀹夊崜鐗�7.3  鎵嬫満鐗�p2psearcher瀹夊崜鐗�7.3 鎵嬫満鐗�
閰风嫍闊充箰2022瀹樻柟鐗圴11.0.8 瀹樻柟瀹夊崜鐗�閰风嫍闊充箰2022瀹樻柟鐗圴11.0.8 瀹樻柟瀹夊崜鐗�
鐖卞鑹烘墜鏈虹増v13.1.0鐖卞鑹烘墜鏈虹増v13.1.0
鐧惧害褰遍煶7.13.0 瀹樻柟鏈€鏂扮増鐧惧害褰遍煶7.13.0 瀹樻柟鏈€鏂扮増
褰遍煶鍏堥攱v6.9.0 瀹夊崜鎵嬫満鐗�褰遍煶鍏堥攱v6.9.0 瀹夊崜鎵嬫満鐗�
闃呰宸ュ叿
鑵捐鍔ㄦ极V9.11.5 瀹夊崜鐗�鑵捐鍔ㄦ极V9.11.5 瀹夊崜鐗�
涔︽棗灏忚鍏嶈垂鐗堟湰v11.5.5.153 瀹樻柟鏈€鏂扮増涔︽棗灏忚鍏嶈垂鐗堟湰v11.5.5.153 瀹樻柟鏈€鏂扮増
QQ闃呰鍣╝ppV7.7.1.910 瀹樻柟鏈€鏂扮増QQ闃呰鍣╝ppV7.7.1.910 瀹樻柟鏈€鏂扮増
鎳掍汉鐣呭惉鍚功appv7.1.5 瀹樻柟瀹夊崜鐗�鎳掍汉鐣呭惉鍚功appv7.1.5 瀹樻柟瀹夊崜鐗�
璧风偣璇讳功app鏂扮増鏈�20227.9.186 瀹夊崜鐗�璧风偣璇讳功app鏂扮増鏈�20227.9.186 瀹夊崜鐗�
閲戣瀺鐞嗚储
骞冲畨璇佸埜瀹塭鐞嗚储V9.1.0.1 瀹樻柟瀹夊崜鐗�骞冲畨璇佸埜瀹塭鐞嗚储V9.1.0.1 瀹樻柟瀹夊崜鐗�
娴烽€氳瘉鍒告墜鏈虹増(e娴烽€氳储)8.71 瀹樻柟瀹夊崜鐗�娴烽€氳瘉鍒告墜鏈虹増(e娴烽€氳储)8.71 瀹樻柟瀹夊崜鐗�
涓滄捣璇佸埜涓滄捣鐞嗚储4.0.5 瀹夊崜鐗�涓滄捣璇佸埜涓滄捣鐞嗚储4.0.5 瀹夊崜鐗�
涓摱璇佸埜绉诲姩鐞嗚储杞欢6.02.010 瀹樻柟瀹夊崜鐗�涓摱璇佸埜绉诲姩鐞嗚储杞欢6.02.010 瀹樻柟瀹夊崜鐗�
鍗庨緳璇佸埜灏忛噾鎵嬫満鐞嗚储杞欢3.2.4 瀹夊崜鐗�鍗庨緳璇佸埜灏忛噾鎵嬫満鐞嗚储杞欢3.2.4 瀹夊崜鐗�
鎵嬫満閾惰
绂忓缓鍐滄潙淇$敤绀炬墜鏈洪摱琛屽鎴风2.3.4 瀹夊崜鐗�绂忓缓鍐滄潙淇$敤绀炬墜鏈洪摱琛屽鎴风2.3.4 瀹夊崜鐗�
鏄撳埗浣滆棰戝壀杈慳pp4.1.16瀹夊崜鐗�鏄撳埗浣滆棰戝壀杈慳pp4.1.16瀹夊崜鐗�
鏀粯瀹濋挶鍖�(Alipay)V10.2.53.7000 瀹夊崜鐗�鏀粯瀹濋挶鍖�(Alipay)V10.2.53.7000 瀹夊崜鐗�
涓浗宸ュ晢閾惰鎵嬫満閾惰appV7.0.1.2.5 瀹夊崜鐗�涓浗宸ュ晢閾惰鎵嬫満閾惰appV7.0.1.2.5 瀹夊崜鐗�
涓浗閾惰鎵嬫満閾惰瀹㈡埛绔�7.2.5 瀹樻柟瀹夊崜鐗�涓浗閾惰鎵嬫満閾惰瀹㈡埛绔�7.2.5 瀹樻柟瀹夊崜鐗�
浼戦棽鐩婃櫤
鑵捐鐚庨奔杈句汉鎵嬫満鐗圴2.3.0.0 瀹樻柟瀹夊崜鐗�鑵捐鐚庨奔杈句汉鎵嬫満鐗圴2.3.0.0 瀹樻柟瀹夊崜鐗�
鍔茶垶鍥㈠畼鏂规鐗堟墜娓竩1.2.1瀹樻柟鐗�鍔茶垶鍥㈠畼鏂规鐗堟墜娓竩1.2.1瀹樻柟鐗�
楗ラタ椴ㄩ奔杩涘寲鏃犻檺閽荤煶鐗坴7.8.0.0瀹夊崜鐗�楗ラタ椴ㄩ奔杩涘寲鏃犻檺閽荤煶鐗坴7.8.0.0瀹夊崜鐗�
妞嶇墿澶ф垬鍍靛案鍏ㄦ槑鏄�1.0.91 瀹夊崜鐗�妞嶇墿澶ф垬鍍靛案鍏ㄦ槑鏄�1.0.91 瀹夊崜鐗�
鍔ㄤ綔灏勫嚮
鍦颁笅鍩庣獊鍑昏€卋t鐗�1.6.3 瀹樻柟鐗�鍦颁笅鍩庣獊鍑昏€卋t鐗�1.6.3 瀹樻柟鐗�
瑁呯敳鑱旂洘1.325.157 瀹夊崜鐗�瑁呯敳鑱旂洘1.325.157 瀹夊崜鐗�
鍦f枟澹槦鐭㈤泦缁搗4.2.1 瀹夊崜鐗�鍦f枟澹槦鐭㈤泦缁搗4.2.1 瀹夊崜鐗�
閬ぉ3D鎵嬫父1.0.9瀹夊崜鐗�閬ぉ3D鎵嬫父1.0.9瀹夊崜鐗�
濉旈槻娓告垙
瀹夊崜妞嶇墿澶ф垬鍍靛案2榛戞殫鏃朵唬淇敼鐗圴1.9.5 鏈€鏂扮増瀹夊崜妞嶇墿澶ф垬鍍靛案2榛戞殫鏃朵唬淇敼鐗圴1.9.5 鏈€鏂扮増
涔辨枟瑗挎父2v1.0.150瀹夊崜鐗�涔辨枟瑗挎父2v1.0.150瀹夊崜鐗�
淇濆崼钀濆崪3鏃犻檺閽荤煶鏈€鏂扮増v2.0.0.1 瀹夊崜鐗�淇濆崼钀濆崪3鏃犻檺閽荤煶鏈€鏂扮増v2.0.0.1 瀹夊崜鐗�
鍙h鑻遍泟鍗曟満鐗�1.2.0 瀹夊崜鐗�鍙h鑻遍泟鍗曟満鐗�1.2.0 瀹夊崜鐗�
灏忓皬鍐涘洟瀹夊崜鐗�2.7.4 鏃犻檺閲戝竵淇敼鐗�灏忓皬鍐涘洟瀹夊崜鐗�2.7.4 鏃犻檺閲戝竵淇敼鐗�
璧涜溅绔炴妧
鐧诲北璧涜溅2鎵嬫父1.47.1  瀹夊崜鐗�鐧诲北璧涜溅2鎵嬫父1.47.1 瀹夊崜鐗�
涓€璧锋潵椋炶溅瀹夊崜鐗坴2.9.14 鏈€鏂扮増涓€璧锋潵椋炶溅瀹夊崜鐗坴2.9.14 鏈€鏂扮増
璺戣窇鍗′竵杞︽墜鏈虹増瀹樻柟鏈€鏂扮増v1.16.2 瀹夊崜鐗�璺戣窇鍗′竵杞︽墜鏈虹増瀹樻柟鏈€鏂扮増v1.16.2 瀹夊崜鐗�
鐙傞噹椋欒溅8鏋侀€熷噷浜戜慨鏀圭増(鍏嶆暟鎹寘)v4.6.0j 閲戝竵鏃犻檺鐗�鐙傞噹椋欒溅8鏋侀€熷噷浜戜慨鏀圭増(鍏嶆暟鎹寘)v4.6.0j 閲戝竵鏃犻檺鐗�
鐧句箰鍗冪偖鎹曢奔2021鏈€鏂扮増5.78 瀹夊崜鐗�鐧句箰鍗冪偖鎹曢奔2021鏈€鏂扮増5.78 瀹夊崜鐗�
瑙掕壊鎵紨
姊﹀够鍓戣垶鑰呭彉鎬佺増1.0.1.2瀹夊崜鐗�姊﹀够鍓戣垶鑰呭彉鎬佺増1.0.1.2瀹夊崜鐗�
浠欏浼犺ro澶嶅叴瀹夊崜鐗�1.20.3鏈€鏂扮増浠欏浼犺ro澶嶅叴瀹夊崜鐗�1.20.3鏈€鏂扮増
姊﹀够璇涗粰鎵嬫父鐗�1.3.6 瀹樻柟瀹夊崜鐗�姊﹀够璇涗粰鎵嬫父鐗�1.3.6 瀹樻柟瀹夊崜鐗�
鐜嬭€呰崳鑰€V3.72.1.1 瀹夊崜鏈€鏂板畼鏂圭増鐜嬭€呰崳鑰€V3.72.1.1 瀹夊崜鏈€鏂板畼鏂圭増
璋佸灏忚溅寮烘墜鏈虹増v1.0.49 瀹夊崜鐗�璋佸灏忚溅寮烘墜鏈虹増v1.0.49 瀹夊崜鐗�
绯荤粺杞欢
mac纾佺洏鍒嗗尯宸ュ叿(Paragon Camptune X)V10.8.12瀹樻柟鏈€鏂扮増mac纾佺洏鍒嗗尯宸ュ叿(Paragon Camptune X)V10.8.12瀹樻柟鏈€鏂扮増
鑻规灉鎿嶄綔绯荤粺MACOSX 10.9.4 Mavericks瀹屽叏鍏嶈垂鐗�鑻规灉鎿嶄綔绯荤粺MACOSX 10.9.4 Mavericks瀹屽叏鍏嶈垂鐗�
Rar瑙e帇鍒╁櫒mac鐗坴1.4 瀹樻柟鍏嶈垂鐗�Rar瑙e帇鍒╁櫒mac鐗坴1.4 瀹樻柟鍏嶈垂鐗�
Mac瀹夊崜妯℃嫙鍣�(ARC Welder)v1.0 瀹樻柟鏈€鏂扮増Mac瀹夊崜妯℃嫙鍣�(ARC Welder)v1.0 瀹樻柟鏈€鏂扮増
Charles for MacV3.9.3瀹樻柟鐗�Charles for MacV3.9.3瀹樻柟鐗�
缃戠粶宸ュ叿
鎼滅嫍娴忚鍣╩ac鐗坴5.2 瀹樻柟姝e紡鐗�鎼滅嫍娴忚鍣╩ac鐗坴5.2 瀹樻柟姝e紡鐗�
閿愭嵎瀹㈡埛绔痬ac鐗圴1.33瀹樻柟鏈€鏂扮増閿愭嵎瀹㈡埛绔痬ac鐗圴1.33瀹樻柟鏈€鏂扮増
蹇墮mac鐗坴1.3.2 瀹樻柟姝e紡鐗�蹇墮mac鐗坴1.3.2 瀹樻柟姝e紡鐗�
鏋佺偣浜旂瑪Mac鐗�7.13姝e紡鐗�鏋佺偣浜旂瑪Mac鐗�7.13姝e紡鐗�
濯掍綋宸ュ叿
Apple Logic Pro xV10.3.2Apple Logic Pro xV10.3.2
Adobe Premiere Pro CC 2017 mac鐗坴11.0.0 涓枃鐗�Adobe Premiere Pro CC 2017 mac鐗坴11.0.0 涓枃鐗�
鍗冨崈闈欏惉Mac鐗圴9.1.1 瀹樻柟鏈€鏂扮増鍗冨崈闈欏惉Mac鐗圴9.1.1 瀹樻柟鏈€鏂扮増
Mac缃戠粶鐩存挱杞欢(MacTV)v0.121 瀹樻柟鏈€鏂扮増Mac缃戠粶鐩存挱杞欢(MacTV)v0.121 瀹樻柟鏈€鏂扮増
Adobe Fireworks CS6 Mac鐗圕S6瀹樻柟绠€浣撲腑鏂囩増Adobe Fireworks CS6 Mac鐗圕S6瀹樻柟绠€浣撲腑鏂囩増
鍥惧舰鍥惧儚
AutoCAD2015 mac涓枃鐗堟湰v1.0 瀹樻柟姝e紡鐗�AutoCAD2015 mac涓枃鐗堟湰v1.0 瀹樻柟姝e紡鐗�
Adobe Photoshop cs6 mac鐗坴13.0.3 瀹樻柟涓枃鐗�Adobe Photoshop cs6 mac鐗坴13.0.3 瀹樻柟涓枃鐗�
Mac鐭㈤噺缁樺浘杞欢(Sketch mac)v3.3.2 涓枃鐗�Mac鐭㈤噺缁樺浘杞欢(Sketch mac)v3.3.2 涓枃鐗�
Adobe After Effects cs6 mac鐗坴1.0涓枃鐗�Adobe After Effects cs6 mac鐗坴1.0涓枃鐗�
Adobe InDesign cs6 mac1.0 瀹樻柟涓枃鐗�Adobe InDesign cs6 mac1.0 瀹樻柟涓枃鐗�
搴旂敤杞欢
Mac鐗堝揩鎾�1.1.26 瀹樻柟姝e紡鐗圼dmg]Mac鐗堝揩鎾�1.1.26 瀹樻柟姝e紡鐗圼dmg]
Mac璇诲啓NTFS(Paragon NTFS for Mac)12.1.62 瀹樻柟姝e紡鐗�Mac璇诲啓NTFS(Paragon NTFS for Mac)12.1.62 瀹樻柟姝e紡鐗�
杩呴浄10 for macv3.4.1.4368 瀹樻柟鏈€鏂扮増杩呴浄10 for macv3.4.1.4368 瀹樻柟鏈€鏂扮増
Mac涓嬫渶寮哄ぇ鐨勭郴缁熸竻鐞嗗伐鍏�(CleanMyMac for mac)v3.1.1 姝e紡鐗�Mac涓嬫渶寮哄ぇ鐨勭郴缁熸竻鐞嗗伐鍏�(CleanMyMac for mac)v3.1.1 姝e紡鐗�
鑻规灉BootCamp5.1.5640 瀹樻柟鏈€鏂扮増鑻规灉BootCamp5.1.5640 瀹樻柟鏈€鏂扮増

首页西西教程DreamWeaver → CSS优化总结——网络性能与语法性能建议

CSS优化总结——网络性能与语法性能建议

相关文章发表评论 来源:dolphinX时间:2014/1/14 8:33:12字体大小:A-A+

作者:dolphinX点击:10次评论:0次标签: CSS

在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来。页面优化明显不是一两句能够说完的,这两天总结了一下CSS相关的优化知识,写篇博客梳理一下,还望大家多多指教

关于CSS的优化工作主要从两个方面着手

网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些

语法性能:同样都能实现某些效果,但并不是所有的方式效果都相同,我们看过不少关于JavaScript方面的语法优化知识,其实CSS里面也有一些

CSS压缩

CSS压缩并不是什么高端的姿势,但却很有用,其原理很简单,就是把我们CSS中没用的空白符等删去,达到缩减字符个数的目的

我们有这样一段CSS脚本

.test{     background-color:#ffffff;     background-image:url(a.jpg); }

经过压缩后会变成这样

.test{ background-color:#fff;  background-image:url(a.jpg)}

当然高级些的压缩工具也会帮我们优化一些语法,提供很多选项,让我们的压缩更有控制,之前在的公司不采用CSS压缩,所以我没有什么实践经验,自己写东西常用的是YUI Compressor,有很多在线版的很方便

YUI Compressor

CSS Compressor

CSS drive

Clean CSS

大家有什么好的资源希望也推荐一下

gzip压缩

Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Linux平台,这个不止是对CSS,当应用Gzip压缩到一个纯文本文件时,效果是非常明显的,大约可以减少70%以上的文件大小(这取决于文件中的内容)。想进一步了解gzip看看维基百科

在没有gzip压缩的情况下,Web服务器直接把html页面、CSS脚本、js脚本发送给浏览器,而支持gzip的Web服务器将把文件压缩后再发给浏览器,浏览器(支持gzip)在本地进行解压和解码,并显示原文件。这样我们传输的文件字节数减少了,自然可以达到网络性能优化的目的。gzip压缩需要服务器的支持,所以我们需要在服务器端进行配置

在IIS上启用Gzip压缩(HTTP压缩)

apache启用gzip压缩方法

Nginx Gzip 压缩配置

当然除了gzip压缩,缓存也是我们需要注意的,这和CSS优化关系不大了,在说web优化的时候再说

合写CSS

除了压缩的方式,我们还可以通过少写CSS属性来达到减少CSS字节的目的,拿个最常见的例子

.test{  background-color: #000;  background-image: url(image.jpg);  background-position: left top;  background-repeat: no-repeat; }

我们可以改写一下上面的CSS,达到同样的效果

.test{   background: #000 url(image.jpg) top left no-repeat; }

在CSS中还有很多类似的属性可以合写

font

{font-style: oblique; font-weight: bold; font-size: 16px; font-family: Helvetica, Arial, Sans-Serif;} {font: oblique bold 16px Helvetica, Arial, Sans-Serif;}

margin/padding

{margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 15px;} {margin: 5px 10px 20px 15px;}

{padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;} {padding: 5px 10px} {padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;} {padding:5px;}

background

{background-color: #000; background-image: url(image.jpg); background-position: left top; background-repeat: no-repeat;} {background: #000 url(image.jpg) top left no-repeat;}

border

{border-width: 2px; border-style: solid; border-color: #000;} {border: 2px solid #000;}{border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;} {border: 2px 5px 10px 3px;}

另外CSS3添加的很多属性如transform、animation相关的都可以合写,不一一列举,大家用的时候要注意

利用继承

CSS的继承机制也可以帮我们再一定程度上缩减字节数,我们知道CSS有很多属性是可以继承的即在父容器设置了默写属性,子容器会默认也使用这些属性,因此如果我们希望全文字体尺寸是14px,大可不必为每个容器设置,只需要在body上设置就可以了。应用这个技巧,把CSS属性在可能的情况下提到父容器是可以帮我们节省CSS字节的,顺便说一下哪些属性可以继承

所有元素可继承:visibility和cursor

内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

块状元素可继承:text-indent和text-align

列表元素可继承:list-style、list-style-type、list-style-position、list-style-image

表格元素可继承:border-collapse

不可继承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi

css中可以和不可以继承的属性 

抽离、拆分CSS,不加载所有CSS

抽离CSS是指把一些通用的CSS放到一个文件内,而不是写道各个页面,这样一次下载后,其它页面用到的时候就可以利用缓存了,减少不必要的重复下载。

应用抽离原则,在很多时候我们把页面通用的CSS写到了一个文件,这样加载一次后就可以利用缓存,但这样做并不适合所有场景,以前我写CSS把一些前端插件用的CSS全写到了一个页面,但是有时候页面只会用一个Dialog、有的页面只用到了一个TreeView,但却把十多个插件的CSS都下载到了页面,这就是问题了,所以虽然把CSS写道一个文件可以减少http请求,但像刚才的这种情况是不应该这样做的,对一些所有页面都会用到的我们可以这样做,所以我们在抽离和拆分的时候可要想好了。

CSS sprites

 这个其实算不上是CSS优化,应该说是web优化用到了CSS的技巧,顺便提一下,有兴趣同学可以看看使用CSS sprites减少HTTP请求。

网络性能方面能想到的就暂时这么多了,希望大家帮忙指正和补充,看一些语法上的性能优化

CSS放在head中,减少repaint和reflow

相信做web的同学都知道这条建议,但为什么CSS放在页面顶部有利于网页优化呢?浏览器渲染页面大概是这样的,当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有CSS生成render tree来渲染页面,当遇到新的CSS的时候下载并结合现有CSS重新生成render tree,刚才的渲染工作就白费了,如果我们把所有CSS都放到页面顶部,这样就没有重新渲染的过程了。对浏览器工作原理有兴趣的同学可以看看神文

浏览器的工作原理:新式网络浏览器幕后揭秘,相信会对浏览器工作原理有深入的认识。

类似的我们知道了这个也应该在脚本中注意尽量减少repaint和reflow,什么情况会导致这两种情况呢

reflow:当DOM元素出现隐藏/显示、尺寸变化、位置变化的时候都会让浏览器重新渲染页面,之前渲染工作白费了

repaint:当元素的背景颜色、边框颜色不引起reflow的变化是会让浏览器重新渲染该元素。貌似还可以接受,但如果我们在开始就定义好了,不让浏览器重复工作就更好了。 

不用CSS表达式

无论怎样生成的CSS,最终我们放到页面上得是静态普通文本,没有变量、计算神马的,CSS表达式是一种动态设置CSS属性的东东,被IE5-IE8支持,看一个大家常用的例子

body {   background-color: expression((new Date()).getHours()%2?"#B8D4FF":"#F08A00"); }

 这样我们赋予了CSS类似JavaScript的功能,CSS表达式非常强大,甚至可以使用CSS表达式实现 min-width 属性,隔行换色,模拟 :hover, :before, :after 等伪类,看起来能解决很多IE下的浏览器兼容性等问题,但是其带来的副作用超出我们的想象,这条CSS规则并不是只运行一次,为了确保有效性,CSS表达式会进行频繁的求值,当改变窗口大小,滚动页面甚至移动鼠标都会触发表达式进行求值,如此频繁的求值以至于浏览器的性能收到严重的影响。据《高性能网站建设建议》中的测试其执行次数远远超出我们想象,感兴趣同学可以进去看看,我们的建议就试尽量避免甚至不要使用CSS表达式。

不乱用CSS reset或属性设置

在网站建设中我们经常使用一些CSS reset,达到跨浏览器统一的目的,但是很多时候我们的CSS reset过于臃肿,主要有两个问题

把很多浏览器对元素的默认属性有设置了一边,比如div的padding和margin为0啊什么的,这是没有必要的

把一些很不常用的元素的设置也写进了CSS reset,如 ruby这样的元素

前几天写了篇关于CSS reset的博客常见标签的默认属性值及相互作用——关于CSS reset的思考,都是一些个人认识,希望大家批评指正

避免适用通配符或隐式通配符

CSS中的*代表通配符,虽然好用但使用不当这也是一个恶魔,比如

body * {padding:0;margin:0;}

我们以为这是对body的子结点都设置一些属性,但因为CSS继承特性的原因,页面所有元素都会接受这个规则,对于复杂的页面在性能上的影响还是很大的,这并不是说不能使用通配符,而是说使用的时候要注意范围。相信这个规则大家都知道,但是有一些隐式的通配符也需要我们的注意,比如

:visible{   padding:0; }

这样的几乎就和通配符一样,在使用的时候一定要注意范围限制问题

避免层级或过度限制的CSS

估计web开发的同学都看过MDN上Writing efficient CSS或者其各种翻译版本,文中总结了几点在书写CSS selector的意见,搞明白文中建议的一个前提是得知道CSS是从右到左解析的,而不是我们认为的从左到右,关于为什么这样做肯定是因为高效,不明就里的同学可以上网搜一下相关知识。

不要用标签或 class 来限制 ID 规则

这个应该是个常识,但很多同学都会误用,写出#test.info或者div#test这样的选择器,这个只能说是画蛇添足,id已经可以唯一而且最快的定位一个元素了

不要用标签名限制 class 规则

 这个估计被误用的更多,如div.info这样的写法,其实我们可以直接写为.info,从右到左解析的原因可以知道为什么其低效,如果直接使用class不能达到目的,一般情况下应该是class设计的有问题,CSS需要重构了

尽量使用最具体的类别、避免后代选择器、属于标签类别的规则永远不要包含子选择器

这三条规则是想通的,因为从左到右解析关系,在CSS选择器中后代选择器非但没有帮我们加快CSS查找,反而后代选择器是 CSS 中耗费最昂贵的选择器。 它的耗费是极其昂贵的—特别是当选择器在标签或通用类别中,作者给的建议是当使用子选择器时要十分谨慎,能免则免。其开销可见一斑了。

对此我们可以通过具体类别——使用单一或尽量少的class解决。

最后

平常用到和了解的关于优化CSS达到页面优化的手段就这些了,希望大家给出意见和补充。

相关评论

阅读本文后您有什么感想? 已有人给出评价!

  • 8 喜欢喜欢
  • 3 顶
  • 1 难过难过
  • 5 囧
  • 3 围观围观
  • 2 无聊无聊

热门评论

最新评论

发表评论 查看所有评论(0)

昵称:
表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
字数: 0/500 (您的评论需要经过审核才能显示)