webapp优化

1. 优化前提： 业务架构与数据库设计

2.  单页web应用  ： ExtJs  backbone  ng  avalon

     框架： React Native    ， ionic  ， Mui, metror,WeeX,device one

Meteor(版本: 1.0) 的另外一个特色是它会经过手机内存中运行的 miniMongo 数据库在本地维护一个数据拷贝。另外，Meteor 会完成全部电话和服务器之间的数据通讯及同步。(miniMongo 是 JavaScript 实现的 MongoDB API。) 

3.   优化：  a、网络传输优化 （下降请求，并行加载 数量与容量的临界值）  b、首屏加速 （fake页 ，懒加载，Dom优化（页面渲染，资源清理），减小使用fixed、absolute ） c、内存资源优化  d、用户体验

4,. 无后端的web应用  本身编页面  云平台定制服务端的API和云存储  集成这个平台提供的SDK 实现注册认证 社交 消息推送  实时通讯 云存储

5.单页应用 ： 1. SEO差  2. js渲染性能比较差，基于框架：phoneGap,Corona,Xamarin，Titanium 手机 SDK，jq Mobile

6.技能需求： JS，组件化，设计模式

7. 技术上： ios==>Objective-C , android ==> Java  ,  windows Phone   == > .net

static元素处于文档流中，其渲染速度是最快的，咱们作过一个测试： 
100个absolute元素与100个static元素渲染时差在0.01-0.007ms 
100000个元素渲染差距便增至30ms左右，这个微小的时差在移动端变得尤其明显，好比： 
小米/三星手机（1000左右），便存在明显的渲染问题，具体表现为：

l)定位元素在手机上不能显示。 
2)定位元素动画效果失效。

8.

l)CSS选择器尽可能使用id与class，避免过分层叠 
2)避免使用数值，好比：border: none不会引发渲染，而boder: 0会 
3)动画时候让元素脱离文档流，以避免致使大量reflow 
4)避免逐条修改DOM样式，改以className实现一样功能 
5)操做DOM时将display设置为none，由于这种元素不会影响渲染，或者操做fragment对象取代操做显示在页面上的DOM 
6)避免将获取DOM样式属性的操做写在循环中，可能引发重复reflow

 

一个解决方案是使用settimeout，更好的方案是使用DOMNodeRemoved事件监控页面DOM改变，将咱们的DOM操做回调放入以确保渲染结束。

l) 释放没有使用的闭包 
2)观察者须要获得清理 
3) 释放定时器 
4)view切换过程当中，在destroy中释放view相关资源

 

1)webapp中view实例保存不超过5个，多了便释放dom结构以及内存引用（临界值本身判断最优） 
2)view隐藏时释放内部资源，解除DOM事件句柄 
3) UI组件与view相同，须要统一释放机制

 

1) 使用函数替换逻辑

让咱们的函数产生一个返回值替换函数中的大段逻辑，这样的第一个好处即是逻辑清晰，第二个好处是这些函数在不一样的函数中，这个函数被使用后便会自动获得释放。

2) 清理闭包引用

当一个闭包函数或者什么使用结束后，若不会再使用，便须要手动清理该变量，以便解除闭包之间的引用关系，从而释放资源。

3) 使用对象属性或者方法

一个对象能够引用其余对象的属性或者方法，好比obj.foo = thatObj;这种状况下，咱们能够随时删除对象解除引用关系，而后即可以清理资源。

动画与假死

动画而言建议采用CSS3实现动画，CSS3中又推荐采用最新的接口，好比使用transform取代top/lelf操做，这样操做效率搞得多。

如果采用动画能够将对应元素设置为absolute以减小回流，另外最关键一点仍是避免移动DOM树过多的节点，这个时候须要驳回产品无理需求，好比：

产品要求日期滚屏组件，显示半年的数据，这半年的数据即是180个DOM树

这个级别的DOM一旦移动整个手机会直接卡死，甚至构建DOM树，渲染页面也会出现假死现象，该问题须要规避。