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