淘宝移动端开发规范_淘宝用户体验开发规范引导-CSDN博客

本文链接：https://blog.csdn.net/libin_1/article/details/51483228

本文介绍了淘宝移动端开发的规范，包括字体设置、基础交互、移动性能优化和常见Hack。强调了考虑低端机与2G网络的性能，如压缩图片、减少初始请求资源、使用CSS3替代图片等，并提醒注意iOS点击延时问题、事件代理和CSS3动画的使用，以提升用户体验和性能。

摘要由CSDN通过智能技术生成

字体设置

使用无衬线字体

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

基础交互

设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为

a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

移动性能

要考虑Android低端机与2G网络场景下性能注意！

发布前必要检查项

所有图片必须有进行过压缩
考虑适度的有损压缩，如转化为80%质量的jpg图片
考虑把大图切成多张小图，常见在banner图过大的场景

加载性能优化, 达到打开足够快

数据离线化，考虑将数据缓存在 localStorage
初始请求资源数 < 4 注意！
图片使用CSS Sprites 或 DataURI
外链 CSS 中避免 @import 引入
考虑内嵌小型的静态资源内容
初始请求资源gzip后总体积 < 50kb
静态资源(HTML/CSS/JS/Image)是否优化压缩？
避免打包大型类库
确保接入层已开启Gzip压缩（考虑提升Gzip级别，使用CPU开销换取加载时间）注意！
尽量使用CSS3代替图片
初始首屏之外的静态资源（JS/CSS）延迟加载注意！
初始首屏之外的图片资源按需加载（判断可视区域）注意！
单页面应用(SPA)考虑延迟加载非首屏业务模块