亚洲精品视频一区二区,一级毛片在线观看视频,久久国产a,狠狠狠色丁香婷婷综合久久五月,天天做天天欢摸夜夜摸狠狠摸

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

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

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

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

如果我們全部以CSS的形式模擬這個(gè)小箭頭,空間資源會(huì )占多少?我們來(lái)計算一下,首先貼下代碼
HTML代碼如下

CSS代碼如下

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

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

CSS代碼:

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

CSS代碼:

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

CSS代碼:

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

CSS代碼:

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

HTML結構:

CSS代碼:

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

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

CSS代碼:

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

HTML結構:

CSS代碼:

2)圓點(diǎn),效果圖如下

HTML結構:

CSS樣式:

3)箭頭,效果圖如下

HTML結構:

CSS樣式:

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

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

CSS樣式:

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

CSS樣式:

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

HTML結構:

CSS樣式:

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

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

作者:微博UDC

相關(guān)文章:

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

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

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

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

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

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

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

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

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

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

  • 公司:西安蟠龍網(wǎng)絡(luò )科技有限公司
  • 聯(lián)系人:張經(jīng)理
  • 手機/微信:
  • Q Q: 點(diǎn)擊這里給我發(fā)消息
  • 地址:西安市雁塔區唐延南路11號逸翠園i都會(huì )
亚洲精品视频一区二区,一级毛片在线观看视频,久久国产a,狠狠狠色丁香婷婷综合久久五月,天天做天天欢摸夜夜摸狠狠摸