webapp优化

时间:2021-08-06 20:57:39

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树,渲染页面也会出现假死现象,该问题需要规避。