前言
刚完成了京致衣橱APP的开发，本文将带大家探索京致使用的一些技术，分享一些经验：
一 布局方式
移动端页面布局分两种：
- 流式布局（响应式宽度自适应布局）
- 版式布局（页面等比缩放布局）
两种布局方式各有优劣，京致最终选用流式布局，原因：
- 部分页面还是与现有购物模块共用，改动成本高，不好维护。
- 考虑到页面在大屏手机等比放大后的体验不佳，部分图片等比放大后也因此模糊。
- 可以针对大屏手机做一些更灵活的排版（配合媒体查询）。
二 设计规范
京致作为一个长期大型项目，前期规范很重要，从开发一期就已经跟设计师达成共识制定了一套设计规范。
设计规范包括：页面背景色、文字颜色、边框颜色、商品组样式、各种按钮样式、图标等等。
当然除了设计规范，重构这边也分离了一些可复用的组件、公共样式，包括：公共底部、商品组模块、轮播组件等。
三 技巧
1. 还原设计稿的 0.5px
在 2014 年的 WWDC，“设计响应的 Web 体验” 一讲中，Ted O’Connor 讲到关于“retina hairlines”（retina 极细的线）：在 retina 屏上仅仅显示 1 物理像素的边框。
简单点说就是：在 Retina 屏的设备上，1px 其实相当于 2 个物理像素，所以 1 个物理像素 = 0.5px。
实现 0.5px 有很多种方法，这里比较一下各种处理的优缺点：
1. iOS8 以上支持 0.5px
优点：原生、简单、常规写法
缺点：目前只有 iOS8 以上系统才能支持，iOS7及以下、安卓系统都显示为 0px
2. CSS 渐变模拟
实现方法：
设置 1px 通过 css 实现的 image，50%有颜色，50%透明
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%), linear-gradient(270deg, red, red 50%, transparent 50%), linear-gradient(0deg, red, red 50%, transparent 50%), linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top; padding: 10px;
}
优点：可以实现单个、多个边框，大小、颜色可以配置，兼容性较好
缺点：代码量多、无法实现圆角、同时占用了背景样式
3. 阴影
实现方法：利用 css 对阴影处理的方式模拟
-webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
优点：简单、几乎所有场景都能满足
缺点：模拟效果强差人意，颜色也不好配置
4. viewport + rem
实现方法：
通过设置页面 viewport 与对应 rem 基准值
devicePixelRatio = 2：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
devicePixelRatio = 3：
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
优点：兼容比较好，写法跟常规写法无异
缺点：老项目改用 rem 单位成本较高
5. border-image
实现方法：
通过图片配合边框背景模拟
.border-image{
border-image: url("") 2 0 stretch;
border-width: 0 0 1px;
}
优点：无
缺点：图片边缘模糊，大小、颜色更改不灵活
6. CSS3 缩放
实现方法：
利用 :before/:after 重做 border，配合 scale 使得伪元素缩小一半
优点：实现简单、大小颜色可以配置
缺点：无
总结：经过比较与实操测试，最好的处理方式是 CSS3 缩放
2. Flexbox 布局
Flexbox Layout（弹性盒模型）模块（目前W3C工作草案正在最后通过）的目的是为了提供一种更有效的方式来布局，使各模块即使大小是未知或者动态的也可以在项目空间中合理分配位置（就像“弹性”这个词一样）。
京致哪些地方使用了 flexbox？
具体实现代码：
ul {
display: box;
display: -webkit-box;
display: flex;
display: -webkit-flex;
}
ul li {
display: block;
flex: 1; -webkit-flex: 1;
box-flex: 1;
-webkit-box-flex: 1;
}
3. 水平垂直居中
虽然说实现方法有多种，但有些方法使用起来不是很智能或者是在某些浏览器下无法正常工作。
京致推荐：使用 transform: translate(-50%, -50%); 配合绝对定位/固定定位。使用场景：提示弹层，要求弹层高度自适应且始终固定居中定位
兼容性：Android2.3 系统浏览器不支持容器直接使用 fixed 进行定位，外加 fixed 容器可解决。
4. 图片占位
图片未加载出来之前浏览器是无法计算出图片实际尺寸的，所以会出现一个问题，页面刚打开各种元素会因为图片未完全加载而跳动/错位。
关于图片占位网上也有多种不同的实现方法，京致推荐：padding-top 配合图片绝对定位。
实现原理：
通过图片比例计算出图片所需占位空间赋值于外容器，图片再绝对定位在等比缩放的容器当中。
计算公式：
padding-top = 图片高度(px)/图片宽度(px) * 100%
比如：
1:1 比例的图片 padding-top: 100%;
2:1 比例的图片 padding-top: 50%;
四 极大减少样式图片
京致页面大多图标元素都使用 CSS 样式绘制，大大减少了样式图资源请求还有图标可维护性。
比如：链接箭头、圆点、优惠券点点、选择框、checkbox等等。
五 使用 WebP 格式图片
WebP 格式，由 google 于 2010 年推出的新一代图片格式，在压缩方面比 JPEG 格式更优越，并能节省大量的服务器带宽资源和数据空间。与 JPEG 相同，WebP 也是一种有损压缩，主要优势在于高效率。在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%。
京致内大部分页面素材图都使用了 WebP 格式，京致对于 WebP 使用的解决方案是：
- 打开场景是浏览器：通过 javascript 检测，对支持 WebP 的用户输出 WebP 格式图片。
- 打开场景是APP：根据不同系统使用 Android WebP 解析库或iOS WebP 解析库做兼容解析。
PS：除了 Android4.0 以上提供原生支持
成果：保证图片高清质量的同时，大大压缩了图片大小，节省了服务器带宽资源和数据空间。
六 缓存策略
1. 缓存方式
- 模块化的使用 APP 缓存，写入磁盘，包括 HTML、JS、CSS。
- 图片使用浏览器缓存，稳定后的背景图以及常用图片也使用 APP 缓存。
2. 缓存更新
- 主模块更新：APP 打开就发送主模块版本号到服务端，返回有更新的模块内容以及版本号，并且返回所有模块版本索引。
- 子模块更新：进去一个主模块，在加载完成后，会检查所有子模块版本索引，并获取需要更新的模块内容。
- 当前模块更新：在直接打开模块时（非首页进入），会去 check/更新一下当前版本，然后在加载。
（感谢开发同学提供缓存技术资料）
网友评论