移动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-07-30 13:44:15

移动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开发文档,仅供大家参考. 规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或

移动web开发规范

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

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

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