听天猫工程师讲面向高清的前端开发

今天下午杭州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来获取网络类型