聽天貓工程師講面向高清的前端開發

今天下午杭州GDG舉辦了谷歌 Women Techmakers活動，很多杭州的程序媛前來參加，論技術、聊藝術、談人生。其中天貓前端工程師@Doris_fhy分享了《跨終端頁面展示 高清化的解決方案》（YouTube），很是精彩。這裏是一篇聽講筆記，和你們共享一下。

爲什麼要面向高清？

據Doris_fhy介紹，天貓移動端訪問中，有八成以上的用戶使用高清屏。PC端雖然目前只有1%不到用戶使用高清屏，然而高清屏是將來的趨勢。

如何面向高清？

圖標字體

純色圖標可使用圖標字體。

不管屏幕是視網膜、高清屏、普通屏，圖標字體的效果都同樣細膩平滑。一套字體能夠通吃全部設備。

阿里開發的矢量圖標庫提供了大量精美的矢量圖標，值得各位前端開發者一看。

對於中文圖標，能夠將字體的編碼設定到對應的中文，例如「天貓」圖標就編碼爲「天貓」，這樣圖標沒有加載的時候能夠顯示相應的漢字。

SVG

圖表可使用SVG。

SVG是矢量圖形格式，縮放時質量不會有損失。缺點是製做起來成本較高。

高清圖片

一些色彩比較複雜的圖片，例如天貓的商品圖片，不適合用SVG來作。只能爲不一樣設備準備不一樣尺寸的圖片。

使用CSS媒體查詢( CSS media queries )，根據不一樣設備加載不一樣品質的圖片：

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ 
         /* 2倍分辨率 執行樣式*/
}

<img>標籤加載的圖片則用JavaScript替換，使用 window.devicePixelRatio 來判斷是否爲高清設備。

固然也能夠在CDN層面解決。同一張圖片，根據設備的不一樣，加載不一樣的版本。

加載速度

使用高清圖片，可能會影響到加載速度。特別是對於圖片不少的頁面（好比商品圖片衆多的天貓首頁）。所以，是否加載高清圖片，除了判斷是否爲高清設備之外，還要考慮網速。

判斷網速大體能夠經過如下途徑：

• 根據ip來源判斷是3G仍是WiFi
• 根據NetworkInformation.connection判斷
• 若是是移動app中訪問的話，能夠調用平臺相應的API來獲取網絡類型