WebAPP-1

Base64图片制作icon

优势：

• 可以减少请求(相当于提前把图片信息提前放到了css的文件当中）   background:url(data:image/png;base64,{img_data})
• 加快首屏数据的显示速度

note:体积更大（base64图片是未经压缩的）；维护不方便

 

使用CSS3制作icon

youshi优势：体积更小；

note:维护不大方便；存在兼容性问题；但用在WebAPP上很适合，几乎不存在兼容性问题；

 

触屏事件：

<script>
var body = document.getElementsByTagName('body');
body = body[0];

body.addEventListener('touchstart',function(){console.log('touchstart')},false);
body.addEventListener('touchmove',function(){console.log('touchmove')},false);
body.addEventListener('touchend',function(){console.log('touchend')},false);
body.addEventListener('mousedown',function(){console.log('mousedown')},false);
body.addEventListener('mouseup',function(){console.log('mouseup')},false);
body.addEventListener('click',function(){console.log('click')},false);
body.addEventListener('mousemove',function(){console.log('mousemove')},false);

</script>

 

使用viewport固定整个页面宽度:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>

 

ETag是一个可以与Web资源关联的记号（token）;

(缓存寿命的控制)   Cache-Control:max-age=2592000

 

前端性能陷阱：

1避免repaint(页面重绘）,reflow（页面回流）  也就是减少对DOM元素的操作

2尽量缓存可以缓存的数据(localStorage,sessionStorage,indexedDB)

3使用CSS3 transform代替DOM操作

 

note（比较Heck,非主流）:

• 不要给非static定位元素（absolute和relative的元素)增加CSS3动画，不然浏览器的开销会成倍的增加，这是一个原则
• 适当使用硬件加速（触发GPU的能力来处理），比如canvas就会 ，一般可以使用transform:translate3d(0.0.0);  这样，所有具有transform的CSS3属性的层都会被系统做硬件加速，又不会有任何视觉上的变换，只是让图层具有硬件加速的功能

 

真是开发流程：

交互解读    设计解读    开发（25%）   测试

 

移动开发技术选型： 

轻量化；维护简单；快速开发；高性能

 

框架的选择；模块的拆分

 

Base64图片文件和jsonp.js等lib建议放在文件里，因为这些东西几乎不变更的；与页面逻辑，尤其是产品逻辑相关的东西在数量不大的情况下放在页面效果最好

 

数字不会被当成电话号码显示：

<meta name="format-detection" content="telephone=no">