移动web开发规范

要考虑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)考虑延迟加载非首屏业务模块
  • 开启Keep-Alive链路复用

运行性能优化, 达到操作足够流畅

  • 避免 iOS 300+ms 点击延时问题
  • 缓存 DOM 选择与计算
  • 避免触发页面重绘的操作
  • Debounce连续触发的事件(scroll / resize / touchmove等)，避免高频繁触发执行
  • 尽可能使用事件代理，避免批量绑定事件
  • 使用CSS3动画代替JS动画
  • 避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度
  • HTML结构层级保持足够简单
  • 尽能少的使用CSS高级选择器与通配选择器
  • Keep it simple

在线性能检测评定工具使用指南

  • 访问 Google PageSpeed 在线评定网站
  • 在地址栏输入目标URL地址，点击分析按钮开始检测
  • 按 PageSpeed 分析出的建议进行优化，优先解决红色类别的问题
时间： 2024-09-28 17:49:12

移动web开发规范的相关文章

转载：移动web开发规范

本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头部声明 1.其中width=device-width就是说把页面宽度设置成和屏幕宽度一样 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 2.首先我们来看看webki

web开发规范文档二

头部        header\hd 内容块      content\con\bd text txt title 尾部        footer 导航        nav\menu sub-nav\sub-menu 侧栏        side-con 栏目        item 外容器      wrapper\sprite 左右中      left\right\center 上下        top\bot 登录        login-bar 标志        logo

Web编程规范之三层架构设计规范

本篇是我对Web开发规范中关于三层架构设计规范的一些浅见.虽然三层架构是比较普通,也比较简单的架构设计模式.但是随着业务的增长,涉及到的对象越来越多,处理的逻辑越来越复杂.这其中难免会出现设计不当,从而导致业务报错或逻辑代码混乱等问题的出现.下面我就来简单的谈一谈我是如何设计的?(注:本篇的见解是在基于当前比较流行的MVC设计模式,不知道什么是MVC设计模式的小伙伴,请自行查找相关资料.) 逻辑划分 在三层的架构设计中通常会采用如下设计方案对逻辑进行划分: Controller (表现层) 在M

web前端开发规范

本文原创,这里首先声明,转载注明本文出处,翻版必究! web前端开发规范的现实意义 1.提高团队的协作能力 2.提高代码的重复利用率 3.可以写出质量更高,效率更好的代码 4.为后期维护提供更好的支持 5.可读性高 一.命名规则 1.html命名规则: a.文件名称命名规则:统一使用小写英文字母.数字.下划线的组合,不得包含汉字空格和特殊字符 2.命名原则:方便理解.方便查找 b.索引文件命名原则:index.html.index.htm.index.asp.index.aspx.index.j

Web前端开发规范文档（google规范）

(Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 我推荐去看看google的开发规范,然后从他的当中去总结自己的开发规范. Google HTML/CSS代码风格指南 Google JavaScript 编码规范指南 ------------------------------------------------------------------------------------------------------------------------------- 绝大多数项

麦子新课上线之web前端开发规范

同学们,Web前端开发又有课程上线啦!对Web前端感兴趣的同学们,速来围观哦~~下面简单介绍一下课程. [学霸学新,课快人一步] 课程简介: Web前端开发规范,可以帮助同学们,了解web前端开发规范的意义,掌握前端开发中的开发规范,掌握web前端开发中的实用技巧.面对企业团队开发,可以很快融入团队合作中,高效率的完成团队给予的任务. 课程地址→http://www.maiziedu.com/course/web/621-8960/ 老师简介: 何虎:8年软件开发经验,擅长互联网应用程序开发,曾

Web前端开发规范收集

在Web开发中,后端跟前端配合非常easy出现故障.这时我们就须要一些规则来约束前端任意的编写. CSS编程规范 1.      属性书写基本顺序 a.      先位置属性(position, top, right, z-index, display, float等) b.      大小(width, height, padding, margin) c.      文字(font, line-height, letter-spacing, color- text-align等) d.   

Web前端开发规范一例

规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的 解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发

WEB前端开发规范文档（转）

http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或