您現在的位置: 网站首頁 / 網站建設 / 正文

網站性能優化之CSS無圖片技術

作者: admin 发布: 2014-11-19 18:46:59 分类: 網站建設 閱讀: 次 查看評論

  一、無圖片技術定義

  在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术。

  二、爲什麽要“無圖片”?

  首先我们通过yslow的statistics查看新浪微博最新版首頁的文件,得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K。明显发现CSS文件比CSS Image小很多。

  网站性能优化 网站优化 CSS无图片技术

  當然單純拿這兩個來比,還不能說明什麽。

  下面我们通过计算来说下CSS文件与CSS Image关系

  CSS Image是由一系列的图片组成,每一张图,即使最小一个小箭头(如下图),你存成一张图片,怎么也得1KB吧。

  例如微博的這個小三角圖形:

  网站性能优化 网站优化 CSS无图片技术

  如果我們全部以CSS的形式模擬這個小箭頭,空間資源會占多少?我們來計算一下,首先貼下代碼

  HTML代碼如下:

  网站性能优化 网站优化 CSS无图片技术

  CSS代碼如下:

  网站性能优化 网站优化 CSS无图片技术

  从上面的代码可以看出,在CSS文件中总共不到200个字符,如果我们按照1字符等于1B的来计算的话,200个字符大概等于0.2KB,比直接用图片做节约了4/5的下载资源,明显减少请求资源的大小。如果我们尽可能的使用无图片技术来实现,明显可以提高页面的加载速度;其次,我们知道每一个CSS image都需要一个http请求去加载,浏览器每次发出的请求个数是有限的,减少CSS image的个数,显然减少了http请求数,也就提高页面的呈现速度;再次,经常使用微博的同学都知道,微博是可以换肤,如果使用CSS无图片技术,我们仅需要简单换一下CSS属性就能实现换肤,提高了代码的可维护性。

  通過以上分析,使用CSS無圖片技術,可以總結得到以下3個優點:

  減少請求資源的大小

  減少http的請求個數

  提高可維護性

  三、CSS無圖片技術,微博中有哪些實際應用呢?

  网站性能优化 网站优化 CSS无图片技术

  网站性能优化 网站优化 CSS无图片技术

  通過上面的展示,我們可以看到,無圖片技術,在微博上應用是十分普遍的。

  四、無圖片技術的實現方式

  大概有四种方式:一是通过background-color、border生成图片;二是通过字符生成图片;三是通过CSS3 的gradient等生成图片(这个要考虑低级浏览器不兼容的问题);四是CSS3的自定义字体(@font-face)生成图片。

  利用CSS的background-color、border屬性可以生成一些圖形,例如三角。純粹的CSS2的內容,完全可以兼容IE6。

  1)用background-color生成的小方塊,效果如下:

  网站性能优化 网站优化 CSS无图片技术

  CSS代碼:

  网站性能优化 网站优化 CSS无图片技术

  2)用border生成的小方塊,效果如下:

  网站性能优化 网站优化 CSS无图片技术

  CSS代碼:

  网站性能优化 网站优化 CSS无图片技术

  3)用border生成的小三角,效果如下:

  网站性能优化 网站优化 CSS无图片技术

  CSS代碼:

  网站性能优化 网站优化 CSS无图片技术

  4)用border生成的尖三角,效果如下:

  网站性能优化 网站优化 CSS无图片技术

  CSS代碼:

  网站性能优化 网站优化 CSS无图片技术

  5)用border生成的斜三角,效果如下:

  网站性能优化 网站优化 CSS无图片技术

  HTML結構:

  网站性能优化 网站优化 CSS无图片技术

  CSS代碼:

  网站性能优化 网站优化 CSS无图片技术

  网站性能优化 网站优化 CSS无图片技术

  通過以上5種圖形,可以得到以下圖形,效果圖如下。

  网站性能优化 网站优化 CSS无图片技术

  這裏只貼一下中間圖形的代碼,其他的,要興趣的同學可以自己去研究,更多有意思的圖形等著你去完成。

  HTML結構:

  網站性能優化之CSS無圖片技術

  CSS代碼:

  網站性能優化之CSS無圖片技術

  網站性能優化之CSS無圖片技術

  網站性能優化之CSS無圖片技術

  2.通過字符生成圖片,例如尖角、圓點以及箭頭,這也是CSS2範疇,完全可以兼容ie6。這個在博中使用廣泛,這裏不單獨寫demo了。

  1)尖角,效果圖如下

  網站性能優化之CSS無圖片技術

  HTML結構:

  網站性能優化之CSS無圖片技術

  CSS代碼:

  網站性能優化之CSS無圖片技術

  網站性能優化之CSS無圖片技術

  2)圓點,效果圖如下

  網站性能優化之CSS無圖片技術

  HTML結構:

  網站性能優化之CSS無圖片技術

  CSS樣式:

  網站性能優化之CSS無圖片技術

  3)箭頭,效果圖如下

  網站性能優化之CSS無圖片技術

  HTML結構:

  網站性能優化之CSS無圖片技術

  CSS樣式:

  微博名人堂沒做具體的定義,但是建議可以對字體樣式做些限制,以便在各種浏覽器表現一樣。

  3.CSS3生成圖片,使用box-shadow,border-radius,gradient漸變等CSS3的新屬性生成圖形,IE浏覽器下漸變背景的使用需要使用IE的漸變濾鏡,但是使用濾鏡資源會消耗很大,所以,根據項目實際情況去權衡是否使用濾鏡。

  先看下谷歌搜索按鈕的例子

  網站性能優化之CSS無圖片技術

  CSS樣式:

  網站性能優化之CSS無圖片技術

  GOOGLE搜索這個按鈕沒有使用濾鏡,IE浏覽器就沒有做漸變處理,大家都知道GOOGLE是非常在意性能的公司,有些時候爲了極致的性能,稍微犧牲一下視覺體驗也是可以接受的。

  再看一下淘寶網“查看更多”的按鈕

  網站性能優化之CSS無圖片技術

  CSS樣式:

  網站性能優化之CSS無圖片技術

  淘寶網這個按鈕使用濾鏡,可以完美兼容IE,當然這也不能去猜測淘寶不注重性能,只能說視覺體驗和性能博弈的結果。

  4. CSS3的自定义字体(@font-face)生成图片,虽然这个方法不属于真正意义的无图片,但是容易编辑和维护,更重要的是它的尺寸,颜色可以通过CSS来控制,这间接地做到少使用图片。

  具體應用,微博微吧的ICON

  網站性能優化之CSS無圖片技術

  HTML結構:

  網站性能優化之CSS無圖片技術

  CSS樣式:

  網站性能優化之CSS無圖片技術

  至于具體實現方式的理論基礎,要展開寫,又是一篇文章,[email protected] icon font完全指南》http://www.qianduan.net/css3-icon-font-guide.html。

  總之,CSS無圖片技術,是我們在寫CSS樣式中需要形成的一種理念,我不必死磕無圖片技術,要在實際的項目權衡利弊,根據實際情況,靈活運用無圖片技術做一些合理有效的性能優化。

  作者:微博UDC

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: CSS  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表