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

young.li 發布于2019-08-28 17:53 / 1437人閱讀

摘要：為何要面向高清據介紹，天貓移動端訪問中，有八成以上的用戶使用高清屏。特別是對于圖片很多的頁面比如商品圖片眾多的天貓首頁。

今天下午杭州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倍分辨率 執行樣式*/
}

標簽加載的圖片則用JavaScript替換，使用 window.devicePixelRatio 來判斷是否為高清設備。

當然也可以在CDN層面解決。同一張圖片，根據設備的不同，加載不同的版本。

加載速度

使用高清圖片，可能會影響到加載速度。特別是對于圖片很多的頁面（比如商品圖片眾多的天貓首頁）。因此，是否加載高清圖片，除了判斷是否為高清設備以外，還要考慮網速。

判斷網速大致可以通過以下途徑：

根據ip來源判斷是3G還是WiFi

根據NetworkInformation.connection判斷

如果是移動app中訪問的話，可以調用平臺相應的API來獲取網絡類型

GPU云服務器云服務器 web前端開發工程師做什么的 web前端開發工程師是做什么的前端前端開發工程師前端開發前端工程師

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110871.html

零基礎的前端開發初學者應如何系統地學習？

摘要：在有了基礎之后，進一步學習內容包括框架。前端學習交流群禁止閑聊，非喜勿進。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有網站開發開發大致分為前端和后端，前端主要負責實現視覺和交互效果，以及與服務器通信，完成業務邏輯。其核心價值在于對用戶體驗的追求?？梢园慈缦滤悸穼W習系統學習：基礎知識： html + css 這部分建議在?w3school 在線教程上學習，邊...

JouyPub 2019-08-01 17:53 評論0 收藏0
零基礎的前端開發初學者應如何系統地學習？

摘要：在有了基礎之后，進一步學習內容包括框架。前端學習交流群禁止閑聊，非喜勿進。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有網站開發開發大致分為前端和后端，前端主要負責實現視覺和交互效果，以及與服務器通信，完成業務邏輯。其核心價值在于對用戶體驗的追求?？梢园慈缦滤悸穼W習系統學習：基礎知識： html + css 這部分建議在?w3school 在線教程上學習，邊...

funnyZhang 2019-08-29 13:42 評論0 收藏0
D-Day 杭州一日行程記錄

摘要：今天去了的杭州，三周年技術大會，簡單記錄一下一天的行程與收獲。首先說會場設施安排，好歹也是收了的報名費，現場不但不提供，而且到處都是各種傳單，愣是連一張會場日程的目錄都沒有?？偟膩碚f今天還是有所收獲，包括體驗了一把功夫熊的推拿服務 http://blog.rainy.im/2015/05/30/d-day-hangzhou/ 今天去了 segmentfault 的 D-Day 杭州，...

TZLLOG 2019-08-21 10:32 評論0 收藏0
移動端布局方案探究

摘要：歡迎大家學習交流地址我的博客參考文獻移動前端開發之的深入理解原創移動端高清多屏適配方案手機端頁面根據和寬度計算出對應數值語法研究了淘寶，天貓和網易彩票163的wap主頁樣式布局，總結移動端布局方案注意：代碼運行是file協議，在chrome里不支持引用本地文件，會提示跨域錯誤，可以用firefox或者Safari打開當時做的ppt下載: 2015年12月移動端布局方案探究一、基本...

yzzz 2019-08-26 11:46 評論0 收藏0
2018年，前端應該怎么學？

摘要：未來一個大的趨勢就是前端開發的效果，正無限逼近原生效果同時一些大廠也在紛紛提前布局了，之前驚艷四方的天貓造物節淘寶造物節風靡朋友圈的怎么做的如果我們要在這波浪潮上取得先機，那么就必須提前學習。我個人想學習的框架是天貓的。面向2018年，我覺得前端有這么三個方向可以突破前端邏輯層（包括三大框架，webpack，前端數據管理）前端交互層（包括css3，canvas，svg，vr...

AnthonyHan 2019-08-22 11:18 評論0 收藏0