資訊專欄INFORMATION COLUMN
摘要：為何要面向高清據(jù)介紹，天貓移動端訪問中，有八成以上的用戶使用高清屏。特別是對于圖片很多的頁面比如商品圖片眾多的天貓首頁。
今天下午杭州GDG舉辦了谷歌 Women Techmakers活動，不少杭州的程序媛前來參加，論技術(shù)、聊藝術(shù)、談人生。其中天貓前端工程師@Doris_fhy分享了《跨終端頁面展現(xiàn) 高清化的解決方案》（YouTube），非常精彩。這里是一篇聽講筆記，和大家共享一下。
為何要面向高清？據(jù)Doris_fhy介紹，天貓移動端訪問中，有八成以上的用戶使用高清屏。PC端雖然目前只有1%不到用戶使用高清屏，然而高清屏是未來的趨勢。
如何面向高清？ 圖標(biāo)字體純色圖標(biāo)可以使用圖標(biāo)字體。
無論屏幕是視網(wǎng)膜、高清屏、普通屏，圖標(biāo)字體的效果都一樣細(xì)膩平滑。一套字體可以通吃所有設(shè)備。
阿里開發(fā)的矢量圖標(biāo)庫提供了大量精美的矢量圖標(biāo)，值得各位前端開發(fā)者一看。
對于中文圖標(biāo)，可以將字體的編碼設(shè)定到對應(yīng)的中文，例如“天貓”圖標(biāo)就編碼為“天貓”，這樣圖標(biāo)沒有加載的時候可以顯示相應(yīng)的漢字。
SVG圖表可以使用SVG。
SVG是矢量圖形格式，縮放時質(zhì)量不會有損失。缺點是制作起來成本較高。
高清圖片一些色彩比較復(fù)雜的圖片，例如天貓的商品圖片，不適合用SVG來做。只能為不同設(shè)備準(zhǔn)備不同尺寸的圖片。
使用CSS媒體查詢( CSS media queries )，根據(jù)不同設(shè)備加載不同品質(zhì)的圖片：
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){
/* 2倍分辨率 執(zhí)行樣式*/
}
標(biāo)簽加載的圖片則用JavaScript替換，使用 window.devicePixelRatio 來判斷是否為高清設(shè)備。
當(dāng)然也可以在CDN層面解決。同一張圖片，根據(jù)設(shè)備的不同，加載不同的版本。
加載速度使用高清圖片，可能會影響到加載速度。特別是對于圖片很多的頁面（比如商品圖片眾多的天貓首頁）。因此，是否加載高清圖片，除了判斷是否為高清設(shè)備以外，還要考慮網(wǎng)速。
判斷網(wǎng)速大致可以通過以下途徑：
根據(jù)ip來源判斷是3G還是WiFi
根據(jù)NetworkInformation.connection判斷
如果是移動app中訪問的話，可以調(diào)用平臺相應(yīng)的API來獲取網(wǎng)絡(luò)類型
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/110871.html
摘要：在有了基礎(chǔ)之后，進(jìn)一步學(xué)習(xí)內(nèi)容包括框架。前端學(xué)習(xí)交流群禁止閑聊，非喜勿進(jìn)。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有 網(wǎng)站開發(fā)開發(fā)大致分為前端和后端，前端主要負(fù)責(zé)實現(xiàn)視覺和交互效果，以及與服務(wù)器通信，完成業(yè)務(wù)邏輯。其核心價值在于對用戶體驗的追求?？梢园慈缦滤悸穼W(xué)習(xí)系統(tǒng)學(xué)習(xí)： 基礎(chǔ)知識： html + css 這部分建議在?w3school 在線教程上學(xué)習(xí)，邊...
摘要：在有了基礎(chǔ)之后，進(jìn)一步學(xué)習(xí)內(nèi)容包括框架。前端學(xué)習(xí)交流群禁止閑聊，非喜勿進(jìn)。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有 網(wǎng)站開發(fā)開發(fā)大致分為前端和后端，前端主要負(fù)責(zé)實現(xiàn)視覺和交互效果，以及與服務(wù)器通信，完成業(yè)務(wù)邏輯。其核心價值在于對用戶體驗的追求?？梢园慈缦滤悸穼W(xué)習(xí)系統(tǒng)學(xué)習(xí)： 基礎(chǔ)知識： html + css 這部分建議在?w3school 在線教程上學(xué)習(xí)，邊...
摘要：今天去了的杭州，三周年技術(shù)大會，簡單記錄一下一天的行程與收獲。首先說會場設(shè)施安排，好歹也是收了的報名費，現(xiàn)場不但不提供，而且到處都是各種傳單，愣是連一張會場日程的目錄都沒有?？偟膩碚f今天還是有所收獲，包括體驗了一把功夫熊的推拿服務(wù) http://blog.rainy.im/2015/05/30/d-day-hangzhou/ 今天去了 segmentfault 的 D-Day 杭州，...
摘要：未來一個大的趨勢就是前端開發(fā)的效果，正無限逼近原生效果同時一些大廠也在紛紛提前布局了，之前驚艷四方的天貓造物節(jié)淘寶造物節(jié)風(fēng)靡朋友圈的怎么做的如果我們要在這波浪潮上取得先機(jī)，那么就必須提前學(xué)習(xí)。我個人想學(xué)習(xí)的框架是天貓的。 面向2018年，我覺得前端有這么三個方向可以突破 前端邏輯層（包括三大框架，webpack，前端數(shù)據(jù)管理） 前端交互層（包括css3，canvas，svg，vr...
閱讀 1325·2021-11-19 09:40
閱讀 3195·2021-11-02 14:47
閱讀 3481·2021-10-11 10:58
閱讀 3279·2019-08-30 15:54
閱讀 2758·2019-08-30 12:50
閱讀 1789·2019-08-29 16:54
閱讀 524·2019-08-29 15:38
閱讀 1288·2019-08-29 15:19
