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