成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

young.li / 1494人閱讀

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

今天下午杭州GDG舉辦了谷歌 Women Techmakers活動(dòng)，不少杭州的程序媛前來參加，論技術(shù)、聊藝術(shù)、談人生。其中天貓前端工程師@Doris_fhy分享了《跨終端頁面展現(xiàn) 高清化的解決方案》（YouTube），非常精彩。這里是一篇聽講筆記，和大家共享一下。

為何要面向高清？

據(jù)Doris_fhy介紹，天貓移動(dòng)端訪問中，有八成以上的用戶使用高清屏。PC端雖然目前只有1%不到用戶使用高清屏，然而高清屏是未來的趨勢(shì)。

如何面向高清？ 圖標(biāo)字體

純色圖標(biāo)可以使用圖標(biāo)字體。

無論屏幕是視網(wǎng)膜、高清屏、普通屏，圖標(biāo)字體的效果都一樣細(xì)膩平滑。一套字體可以通吃所有設(shè)備。

阿里開發(fā)的矢量圖標(biāo)庫(kù)提供了大量精美的矢量圖標(biāo)，值得各位前端開發(fā)者一看。

對(duì)于中文圖標(biāo)，可以將字體的編碼設(shè)定到對(duì)應(yīng)的中文，例如“天貓”圖標(biāo)就編碼為“天貓”，這樣圖標(biāo)沒有加載的時(shí)候可以顯示相應(yīng)的漢字。

SVG

圖表可以使用SVG。

SVG是矢量圖形格式，縮放時(shí)質(zhì)量不會(huì)有損失。缺點(diǎn)是制作起來成本較高。

高清圖片

一些色彩比較復(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è)備的不同，加載不同的版本。

加載速度

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

判斷網(wǎng)速大致可以通過以下途徑：

根據(jù)ip來源判斷是3G還是WiFi

根據(jù)NetworkInformation.connection判斷

如果是移動(dòng)app中訪問的話，可以調(diào)用平臺(tái)相應(yīng)的API來獲取網(wǎng)絡(luò)類型

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110871.html

相關(guān)文章

  • 零基礎(chǔ)的前端開發(fā)初學(xué)者應(yīng)如何系統(tǒng)地學(xué)習(xí)？

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

    JouyPub 評(píng)論0 收藏0

  • 零基礎(chǔ)的前端開發(fā)初學(xué)者應(yīng)如何系統(tǒng)地學(xué)習(xí)？

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

    funnyZhang 評(píng)論0 收藏0

  • D-Day 杭州一日行程記錄

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

    TZLLOG 評(píng)論0 收藏0

  • 移動(dòng)端布局方案探究

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

    yzzz 評(píng)論0 收藏0

  • 2018年，前端應(yīng)該怎么學(xué)？

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

    AnthonyHan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<