亚洲欧美成人综合一区_国产精品一区二区无码_亚洲风情偷拍区_成?人免费无码视频在线看

在線客服與您一對一交流
當(dāng)前位置: 主頁 > 行業(yè)新聞 > seo >

網(wǎng)站性能優(yōu)化之CSS無圖片技術(shù)

一、無圖片技術(shù)定義
在不使用CSS Image(通過CSS的引入的背景圖片,不包括img標(biāo)簽內(nèi)的圖片)情況下生成類似圖片效果的技術(shù);換句話的意思就是在使用純CSS生成類似圖片效果的技術(shù)。
二、為什么要“無圖片”?
首先我們通過yslow的statistics查看新浪微博最新版首頁的文件,得到Stylesheet File(CSS文件)大小為206.8K, CSS Image大小為623.8K。明顯發(fā)現(xiàn)CSS文件比CSS Image小很多。西安做網(wǎng)站推薦閱讀>>> 淺析網(wǎng)站開發(fā)css架構(gòu),

當(dāng)然單純拿這兩個來比,還不能說明什么。
下面我們通過計算來說下CSS文件與CSS Image關(guān)系
CSS Image是由一系列的圖片組成,每一張圖,即使最小一個小箭頭(如下圖),你存成一張圖片,怎么也得1KB吧。
例如微博的這個小三角圖形

如果我們?nèi)恳訡SS的形式模擬這個小箭頭,空間資源會占多少?我們來計算一下,首先貼下代碼
HTML代碼如下

CSS代碼如下

從上面的代碼可以看出,在CSS文件中總共不到200個字符,如果我們按照1字符等于1B的來計算的話,200個字符大概等于0.2KB,比直接用圖片做節(jié)約了4/5的下載資源,明顯減少請求資源的大小。如果我們盡可能的使用無圖片技術(shù)來實現(xiàn),明顯可以提高頁面的加載速度;其次,我們知道每一個CSS image都需要一個http請求去加載,瀏覽器每次發(fā)出的請求個數(shù)是有限的,減少CSS image的個數(shù),顯然減少了http請求數(shù),也就提高頁面的呈現(xiàn)速度;再次,經(jīng)常使用微博的同學(xué)都知道,微博是可以換膚,如果使用CSS無圖片技術(shù),我們僅需要簡單換一下CSS屬性就能實現(xiàn)換膚,提高了代碼的可維護(hù)性。
通過以上分析,使用CSS無圖片技術(shù),可以總結(jié)得到以下3個優(yōu)點
減少請求資源的大小
減少http的請求個數(shù)
提高可維護(hù)性
三、CSS無圖片技術(shù),微博中有哪些實際應(yīng)用呢?
西安網(wǎng)站建設(shè)推薦閱讀>>> sass/scss 和 less的區(qū)別,

通過上面的展示,我們可以看到,無圖片技術(shù),在微博上應(yīng)用是十分普遍的。
四、無圖片技術(shù)的實現(xiàn)方式
大概有四種方式:一是通過background-color、border生成圖片;二是通過字符生成圖片;三是通過CSS3 的gradient等生成圖片(這個要考慮低級瀏覽器不兼容的問題);四是CSS3的自定義字體(@font-face)生成圖片。
利用CSS的background-color、border屬性可以生成一些圖形,例如三角。純粹的CSS2的內(nèi)容,完全可以兼容IE6。
1)用background-color生成的小方塊,效果如下:

CSS代碼:

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

CSS代碼:

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

CSS代碼:

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

CSS代碼:

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

HTML結(jié)構(gòu):

CSS代碼:

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

這里只貼一下中間圖形的代碼,其他的,要興趣的同學(xué)可以自己去研究,更多有意思的圖形等著你去完成。
HTML結(jié)構(gòu):

CSS代碼:

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

HTML結(jié)構(gòu):

CSS代碼:

2)圓點,效果圖如下

HTML結(jié)構(gòu):

CSS樣式:

3)箭頭,效果圖如下

HTML結(jié)構(gòu):

CSS樣式:

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

3.CSS3生成圖片,使用box-shadow,border-radius,gradient漸變等CSS3的新屬性生成圖形,IE瀏覽器下漸變背景的使用需要使用IE的漸變?yōu)V鏡,但是使用濾鏡資源會消耗很大,所以,根據(jù)項目實際情況去權(quán)衡是否使用濾鏡。
先看下谷歌搜索按鈕的例子

CSS樣式:

GOOGLE搜索這個按鈕沒有使用濾鏡,IE瀏覽器就沒有做漸變處理,大家都知道GOOGLE是非常在意性能的公司,有些時候為了極致的性能,稍微犧牲一下視覺體驗也是可以接受的。
再看一下淘寶網(wǎng)“查看更多”的按鈕

CSS樣式:

淘寶網(wǎng)這個按鈕使用濾鏡,可以完美兼容IE,當(dāng)然這也不能去猜測淘寶不注重性能,只能說視覺體驗和性能博弈的結(jié)果。
4. CSS3的自定義字體(@font-face)生成圖片,雖然這個方法不屬于真正意義的無圖片,但是容易編輯和維護(hù),更重要的是它的尺寸,顏色可以通過CSS來控制,這間接地做到少使用圖片。
具體應(yīng)用,微博微吧的ICON

HTML結(jié)構(gòu):

CSS樣式:

至于具體實現(xiàn)方式的理論基礎(chǔ),要展開寫,又是一篇文章,有興趣的同學(xué)參考一下@神飛寫的《CSS3 icon font完全指南》http://www.qianduan.net/css3-icon-font-guide.html。

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

作者:微博UDC

相關(guān)文章:

  • 西安網(wǎng)站建設(shè)_西安做網(wǎng)站_西安網(wǎng)站制作——西安網(wǎng)絡(luò)公司...

  • 從企業(yè)建站角度講,最便捷、最適合企業(yè)的建站系統(tǒng)莫過于自助建站系統(tǒng),市場上可供選擇的自助建站平臺也是一搜一大把。這些自助建站平臺采用傻瓜式建站風(fēng)格,容易上手,操作簡單方便...

  • 現(xiàn)在想做一個網(wǎng)站成本很低了,買個域名,買個幾十塊空間,弄個網(wǎng)站建設(shè)程序就可以開始你的玩耍了,如果你還想找成本更低的,可以看下面的分享。 如何創(chuàng)建網(wǎng)站一直都是很多朋友想要知...

  • 商城網(wǎng)站建設(shè)如何將吸引力提升 在信息如此豐富多樣的今天,商城網(wǎng)站建設(shè)如何才能夠在眾多的同類當(dāng)中脫穎而出,獲得大眾的吸引和青睞呢?這其實是相關(guān)網(wǎng)站建設(shè)人員一直在思考的一個問...

  • 現(xiàn)在越來越多的企業(yè)重視網(wǎng)站的運(yùn)營推廣,那怎樣推廣效果更好呢?西安蟠龍網(wǎng)絡(luò)小編認(rèn)為沒用永恒不變得,而且要根據(jù)企業(yè)的具體情況選擇合適的推廣方式才是最好的,如果你又運(yùn)營推廣的...

  • 隨著互聯(lián)網(wǎng)的發(fā)展,人們每時每刻已經(jīng)離不開網(wǎng)絡(luò),而網(wǎng)站是網(wǎng)絡(luò)的基本組成部分,可以這么說,網(wǎng)絡(luò)是由各種各樣的網(wǎng)站組成的,當(dāng)下,網(wǎng)站是每個企業(yè)的標(biāo)配,很多個人都有自己的網(wǎng)站,...

  • 網(wǎng)站現(xiàn)在是一個企業(yè)的標(biāo)配,很多沒有網(wǎng)站的企業(yè)不清楚網(wǎng)站對企業(yè)有什么作用,那么今天西安蟠龍小編總結(jié)一下網(wǎng)站對企業(yè)都有哪些好處,希望看完之后您對網(wǎng)站有更深一層的認(rèn)識。 一、低...

  • 現(xiàn)在網(wǎng)站對一個企業(yè)越來越重要了,網(wǎng)站不僅是一個公司必備的名片,而且有利于提升企業(yè)的品牌形象,低成本擴(kuò)大公司銷售的一個重要渠道,可以將公司的業(yè)務(wù)和產(chǎn)品推向全國,那么公司想...

  • 在互聯(lián)網(wǎng)發(fā)展至今天,網(wǎng)站對于一個企業(yè)越來越重要,網(wǎng)站不僅能有效的提升企業(yè)品牌知名度,企業(yè)形象,也是一個企業(yè)的有力的銷售渠道,網(wǎng)絡(luò)營銷推廣做好了可以做全國的業(yè)務(wù),那一個企...

  • 隨著互聯(lián)網(wǎng)發(fā)展的迅猛,網(wǎng)站建設(shè)市場競爭越來越大,魚龍混雜,出現(xiàn)智能建站、模板建站、定制建站等服務(wù),很多朋友搞不清楚他們的區(qū)別,以及定制型網(wǎng)站有什么優(yōu)勢,今天西安蟠龍小編...

  • 公司:西安蟠龍網(wǎng)絡(luò)科技有限公司
  • 聯(lián)系人:張經(jīng)理
  • 手機(jī)/微信:
  • Q Q: 點擊這里給我發(fā)消息
  • 地址:西安市雁塔區(qū)唐延南路11號逸翠園i都會