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

young.li 发布于2019-08-28 17:53 / 1338人阅读

摘要：为何要面向高清据介绍，天猫移动端访问中，有八成以上的用户使用高清屏。特别是对于图片很多的页面比如商品图片众多的天猫首页。

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

idc机房托管专线服务 web前端开发工程师做什么的 web前端开发工程师是做什么的前端前端开发工程师前端开发前端工程师

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110871.html

零基础的前端开发初学者应如何系统地学习？

摘要：在有了基础之后，进一步学习内容包括框架。前端学习交流群禁止闲聊，非喜勿进。代码提交前必须做的三个事情检查所有变更跑一边单元测试手动运行一遍所有网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习：基础知识： html + css 这部分建议在 w3school 在线教程上学习，边...

JouyPub 2019-08-01 17:53 评论0 收藏0
零基础的前端开发初学者应如何系统地学习？

摘要：在有了基础之后，进一步学习内容包括框架。前端学习交流群禁止闲聊，非喜勿进。代码提交前必须做的三个事情检查所有变更跑一边单元测试手动运行一遍所有网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习：基础知识： html + css 这部分建议在 w3school 在线教程上学习，边...

funnyZhang 2019-08-29 13:42 评论0 收藏0
D-Day 杭州一日行程记录

摘要：今天去了的杭州，三周年技术大会，简单记录一下一天的行程与收获。首先说会场设施安排，好歹也是收了的报名费，现场不但不提供，而且到处都是各种传单，愣是连一张会场日程的目录都没有。总的来说今天还是有所收获，包括体验了一把功夫熊的推拿服务 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