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

今天下午 杭州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來擷取網絡類型