摘要:在所有的網站優化話題中,資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現的,并使用進行合并。可以減少請求,還可以配合離線存儲做性能優化。創作自已的字體圖標很費時間,重構人員后期維護的成本偏高。
前言
第一篇文章,小弟先做一番自我介紹^ω^
姓名不說,年齡21歲,湖北武漢一所二本大學2016屆本科畢業生,大四前的暑假起對web前端產生興趣并有半年實習經驗。ng、vue、react等等高大上的框架完全不懂,卻也靠前端交流群和百度積攢下了一些小小心得。說來寫文章也是比較心虛,怕有理解不到位之處還可能禍害別人。可是萬一哪位大牛看到之后閑來無事在評論里指點一波,我不就賺大了么^ω^希望各位能抱著辯證的觀點看看我的文章,有什么錯誤之處還請不吝賜教。^ω^
在這里將三者放在一起比較其實比較勉強,根據圖像類型來區分,img/background和iconfont是一對參照物,根據圖像使用方式來區分,img和background是一對參照物。那么我們一個一個看吧。
1.img與background使用區別http://blog.sina.com.cn/s/blog_6722ab160101bnn7.html
上面的鏈接內容是一位前輩對于img和background的見解。很好很強大,我是怎么也想不到seo這里去的,根據前輩所述,按照瀏覽器解析機制,html標簽優先解析,像官網的logo這種需要非常醒目的標志性圖片,選擇img會更合適。使用img的另外一個好處就是圖片提示。就像我們在瀏覽愛奇藝網站的時候,有時視頻下的文字由于太長而被省略,我們將鼠標移動到圖片上時會有一個小的氣泡彈出,里面顯示該視頻的標題全部內容。這樣有利于輔助閱讀。
而使用background屬性來加載圖片有一個非常好用的技巧就是雪碧圖(css sprite)。在所有的網站優化話題中,資源文件的壓縮都是占很大比重的。如果能將若干張小圖片合并成一張大圖片,那么只需要一次http請求就能取到我們所需要的資源,可以提高頁面載入速度。像百度圖片中的友情鏈接所使用的圖片就是作為backgeound-image呈現的,并使用css sprite進行合并。并且相對來講,background更加支持自適應布局,css3中提供了background-size的屬性,可以將圖片拉伸、縮放至需要的大小。
總結一下:當需要優先加載、需要提供詳細信息的時候,我們選擇img更合適;而一些小圖標比如用戶頭像、等數量繁多且體積小的圖片,則適合用background來加載。一般來說,如果是裝飾性的圖片就使用background-img,如果和文體內容很相關就使用img。
下面一則鏈接同樣是一位前輩總結的兩者使用環境的區分,各位且看且斟酌。
2.iconfont的使用環境http://my.oschina.net/u/1162572/blog/137403
iconfont中文名為圖標字體,顧名思義是一類字體,以約定好的代碼來代表對應相對應樣式,能夠做到不使用圖片而呈現圖片的效果,總結有以下優點:
輕量性:一個圖標字體比一系列的圖像(特別是在Retina屏中使用雙倍圖像)要小。一旦圖標字體加載了,圖標就會馬上渲染出來,不需要下載一個圖像。可以減少HTTP請求,還可以配合HTML5離線存儲做性能優化。
靈活性:圖標字體可以用過font-size屬性設置其任何大小,還可以加各種文字效果,包括顏色、Hover狀態、透明度、陰影和翻轉等效果。可以在任何背景下顯示。使用位圖的話,必須得為每個不同大小和不同效果的圖像輸出一個不同文件。
兼容性:網頁字體支持所有現代瀏覽器,包括IE低版本。我們在caniuse.com可以查到其對于主流瀏覽器的兼容性。
只要支持網頁字體就能使用圖標字體。
除了以上優勢之外,當然也有劣勢:
圖標字體只能被渲染成單色或者CSS3的漸變色,由于此限制使得它不能廣泛使用。
使用版權上有限制,有好多字體是收費的。當然也有很多免費開源的精美字體圖標供下載使用。
創作自已的字體圖標很費時間,重構人員后期維護的成本偏高。
圖標字體使用方法這里就不多敘述了,有興趣的各位可以在下面鏈接看看。
http://www.tuicool.com/articles/B32uYj
淘寶對于圖標字體是非常支持的,以至于淘寶自己開發了一套iconfont庫。 如果需要展示純色圖片,使用iconfont會是不錯的選擇,前面也提到了圖標字體具有輕量的特性,并且可以自定義顏色、大小,可以使用控制字體的屬性對圖標字體進行控制。對于移動端來講,iconfont的使用更加廣泛。許多頁面上的icon如點贊、評論、收藏等純色圖標都會使用iconfont,非常方便。
結語綜上所述,我總結了一個列表:
img | background | iconfont |
---|---|---|
網站logo | 輪播圖片 | 小型純色圖標 |
產品/視頻/新聞列表欄目 | 合并圖片(css sprites) | |
需要優先加載的圖片 |
希望本文對大家搭建頁面時有所幫助。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111303.html
摘要:在所有的網站優化話題中,資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現的,并使用進行合并。可以減少請求,還可以配合離線存儲做性能優化。創作自已的字體圖標很費時間,重構人員后期維護的成本偏高。 前言 第一篇文章,小弟先做一番自我介紹^ω^姓名不說,年齡21歲,湖北武漢一所二本大學2016屆本科畢業生,大四前的暑假起對web前端產生興趣并有半年實習經驗。ng...
摘要:前端發展很快,各種框架推陳出新,很多小伙伴面臨最大的問題就是,我該選哪個框架學習呢從本質上來說,每個框架各有長處,沒有絕對的好壞,各自有適合的項目場景,唯一家獨大的框架吹固然是不可取的選擇的時候,先明確要做的是什么項目,如果是管理后臺,選寫 前端發展很快,各種框架推陳出新,很多小伙伴面臨最大的問題就是,我該選哪個框架學習呢? 從本質上來說,每個框架各有長處,沒有絕對的好壞,各自有適合...
摘要:簡評注意,這不是演習,要退出編輯器真的很難。這意味著在工作日的高峰時段,每小時約有人需要被幫助退出。結論你永遠不知道你貢獻的答案可以幫助數以百萬計的人,無論是分享如何撤消提交,或者中的關鍵字如何工作。 簡評:注意,這不是演習,要退出 Vim 編輯器真的很難。 早上,一個流行的 Stack Overflow 問題成為一個重大里程碑: showImg(https://segmentfaul...
摘要:從這個函數最后一行可以看出,最終執行的還是根據不同的用法會使用不同的處理此處以為例。如下總結效率高于之后有左右的提升有將近的提升。 1、概述 經常使用isset判斷變量或數組中的鍵是否存在, 但是數組中可以使用array_key_exists這個函數, 那么這兩個誰最優呢? 官方文檔對兩者的定義 - 分類 描述 文檔 isset 語言構造器 檢測變量是否已設置并且非 NULL...
摘要:時間永遠都過得那么快,一晃從年注冊,到現在已經過去了年那些被我藏在收藏夾吃灰的文章,已經太多了,是時候把他們整理一下了。那是因為收藏夾太亂,橡皮擦給設置私密了,不收拾不好看呀。 ...
閱讀 1083·2021-09-22 15:19
閱讀 1697·2021-08-23 09:46
閱讀 2226·2021-08-09 13:47
閱讀 1405·2019-08-30 15:55
閱讀 1408·2019-08-30 15:55
閱讀 1974·2019-08-30 15:54
閱讀 2795·2019-08-30 15:53
閱讀 713·2019-08-30 11:03