『壹』 js 怎么动态设置CSS3动画的样式
引入jquery
然后给你要设置动画的对象增加或者删除css3动画的类就可以了。
如我这里用colorchange这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>Test</title>
<styletype="text/css">
body{
padding:20px;
background-color:#FFF;
}
.colorchange
{
animation:myfirst5s;
-moz-animation:myfirst5s;/*Firefox*/
-webkit-animation:myfirst5s;/*SafariandChrome*/
-o-animation:myfirst5s;/*Opera*/
}
@keyframesmyfirst
{
from{background:red;}
to{background:yellow;}
}
@-moz-keyframesmyfirst/*Firefox*/
{
from{background:red;}
to{background:yellow;}
}
@-webkit-keyframesmyfirst/*SafariandChrome*/
{
from{background:red;}
to{background:yellow;}
}
@-o-keyframesmyfirst/*Opera*/
{
from{background:red;}
to{background:yellow;}
}
#main{
width:100px;
height:100px;
background:red;
}
#cgbt{
width:100px;
margin:20px000;
text-align:center;
cursor:pointer;
}
#cgbt:hover{
background-color:#2D93CA;
}
</style>
</head>
<body>
<divid="main">
我会变么？
</div>
<divid="cgbt">
点我让上面的变颜色
</div>
<scriptsrc="jquery-3.2.1.min.js"type="application/javascript"></script>
<script>
$(document).ready(function(){
$("#cgbt").click(function(){
$("#main").attr("class","colorchange");
});
});
</script>
</body>
</html>
『贰』 CSS3 动画
在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。
CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ；
transform 可以用来设置元素的形状改变，主要有以下几种变形： rotate （旋转）、 scale （缩放）、 skew （扭曲）、 translate （移动）和 matrix （矩阵变形），语法如下：
none 表示不做变换； <transform-function> 表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在 () 里面，用 空格 分开，例如：
所有的变形都是基于基点，基点默认为元素的中心点。用法： transform-origin: (x, y) ，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用 left 、 center 、 right ；y 可以用 top 、 center 、 bottom 。
用法： rotate(<angle>) ；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如：
它有三种用法： scale(<number>[, <number>]) 、 scaleX(<number>) 和 scaleY(<number>) ；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。
移动也分三种情况： translate(<translation-value>[, <translation-value>]) 、 translateX(<translation-value>) 和 translateY(<translation-value>) ；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位： px 、 rem 等;
扭曲同样也有三种情况， skew(<angle>[, <angle>]) 、 skewX(<angle>) 和 skewY(<angle>) ；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。
矩阵变形相对来说非常复杂，涉及到数学中的矩阵计算，有兴趣的同学可以研究一下： CSS3 Transform Matrix
transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：
它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：
它是用来设置转换过程的持续时间，单位是 s 或者 ms ，默认值为0；
它是来设置过渡效果的速率，它有6种形式的速率：
它是来设置过渡动画开始执行的时间，单位是 s 或者 ms ，默认值为0；
它是 transition-property 、 transition-ration 、 transition-timing-function 、 transition-delay 的简写：
animation 比较类似于 flash 中的 逐帧动画 ，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由 关键帧 组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性 keyframes 来完成逐帧动画的。
它是用来设置动画的名称，可以同时赋值多个动画名称，用 , 隔开：
它是用来设置动画的持续时间，单位为 s ，默认值为 0 ：
和 transition-timing-function 类似：
它是来设置动画的开始时间，单位是 s 或者 ms ，默认值为0：
它是来设置动画循环的次数，默认为 1 ， infinite 为无限次数的循环：
它是来设置动画播放的方向，默认值为 normal 表示向前播放， alternate 代表动画播放在第偶数次向前播放，第奇数次向反方向播放：
它主要是来控制动画的播放状态： running 代表播放，而 paused 代表停止播放， running 为默认值：
它是 animation-name 、 animation-ration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的简写：
关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了，让我们回顾一下。 transform 我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变； transition 和 animation 它们很像 flash 中的 补间动画 和 逐帧动画 ； transition 是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等； animation 的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。
『叁』 css3动画和javascript动画相比谁更快
CSS动画和JS动画主要的不同点是
功能涵盖面，JS比CSS3大
定义动画过程的@keyframes不支持递归回定义，如果有多种类似的动答画过程，需要调节多个参数来生成的话，将会有很大的冗余（比如jQuery Mobile的动画方案），而JS则天然可以以一套函数实现多个不同的动画过程
时间尺度上，@keyframes的动画粒度粗，而JS的动画粒度控制可以很细
CSS3动画里被支持的时间函数非常少，不够灵活
以现有的接口，CSS3动画无法做到支持两个以上的状态转化
实现/重构难度不一，CSS3比JS更简单，性能调优方向固定
对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码
CSS动画有天然事件支持（TransitionEnd、AnimationEnd，但是它们都需要针对浏览器加前缀），JS则需要自己写事件
CSS3有兼容性问题，而JS大多时候没有兼容性问题。
『肆』 怎么用js触发css3动画
你用CSS3的方式预先写好动画样式，不调用这个class,前端中设置鼠标经过增加一个class，这样鼠标指向的时候就有CSS3的动画，鼠标离开去除样式动画结束
『伍』 JS 怎么动态设置CSS3动画的样式
说说原理，这里并不是纯css3，，只是用css3定义好动画，
@-moz-keyframes tips {
0% {box-shadow: 0px 0px 0px #f00;}
25% {box-shadow: 0px 0px 8px #f00;}
50% {box-shadow: 0px 0px 0px #f00;}
100% {box-shadow: 0px 0px 8px #f00;}
}
然后，js在切屏后，用Js来触发这一个样式内，这容个样式调用了刚才定义的动画。
.tips {
-webkit-animation:tips 1s;
-moz-animation:tips 1s ;
}
当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。
『陆』 如何使用js捕获css3动画
CSS Animation Store
这个主意是通过一个简单的接口来访问CSS动画，实际上之前的Morf.js和CSSA中都有这样的处理，大部分代码已经有了，只需要整整，按照Chris所建议的接口风格写下来
从GitHub下载CSS Animation Store
下面是CSS Animation Store的基本接口（关于代码如何工作的信息），将代码放在标签之前，会创建一个全局的对象 CSSAnimations，这个对象包含所有当前可以使用的CSS动画
比如，获取名称为”spin”的动画，你可以按下面的代码：
var spin = CSSAnimations.spin;
参数spin是一个KeyframeAnimation实例，有下面的属性和函数：
keyframes – KeyframeRule 集合
original – 原始对象 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型
getKeyframeTexts() – 返回所有keyframe文本集合, e.g. [‘0%’, ‘50%’, ‘100%’]
getKeyframe(text) – 返回指定文字的 KeyframeRule 对象, e.g. getKeyframe(‘0%’)
setKeyframe(text, css) – 设置新的CSS, e.g.setKeyframe(‘10%’, {background: ‘red’, ‘font-size': ‘2em’})
可以看出，KeyframeRule提供了一些方法和函数，是对 WebKitCSSKeyframeRule 和MozCSSKeyframeRule （注意是frame不是frames）的封装，具有下面的属性和方法
css – 该keyframe的css内容, e.g. {background: ‘red’, ‘font-size': ‘2em’}
keyText – 该帧的名称, e.g. 10%
original – 原始对象 WebKitCSSKeyframeRule 或者MozCSSKeyframeRule
示例
获取动画中的所有帧
var spin = CSSAnimations.spin;
for(var i=0; i<spin.keyframes.length; i++)
console.log(spin.keyframes[i].css);
修改动画中的某一帧
var spin = CSSAnimations.spin;
spin.setKeyframe('10%', {background: 'red', 'font-size': '2em'});
反馈
给我博客或者GitHub留言，让我知道你的想法，我还开放了修改和增加的权限
使用原生JavaScript访问和创建CSS动画
如果你不想使用CSS Animation Store，或者只是想知道它的实现原理，可以参看下面的介绍
访问CSS动画
可以通过CSSOM访问keyframe动画，下面是我CSSA中的代码，用于访问指定的CSS动画
『柒』 svg支持哪三种类型的动画
CSS3动画，javascript动画(canvas)，html动画(SVG)。svg支持三种类型的动画分别是CSS3动画，javascript动画(canvas)，html动画(SVG)，SVG指可伸缩矢量图形，是使用XML来描述二维图形和绘图程序的语言。
『捌』 如何让javascript控制css3的animation和transition，让css3反复执行
通过按钮的click事件反复触发一个元素的css3动画，点击一次，动画效果就跑一次。
看码——
html：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>
<title>测试页面</title>
<scriptid="jquery_183"type="text/javascript"src="//runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<divid="testDiv01">
</div>
<buttonid="testBtn01">反复触发transition</button>
<br>
<divid="testDiv02">
</div>
<buttonid="testBtn02">反复触发animation</button>
</body>
javascript：
let[testDiv01,testDiv02,testBtn01,testBtn02]=[$('#testDiv01'),$('#testDiv02'),$('#testBtn01'),$('#testBtn02')];
testBtn01.on('click',function(){
testDiv01.addClass('transi');
lett=setTimeout(()=>{
testDiv01.removeClass('transi');
clearTimeout(t);
},500);
});
testBtn02.on('click',function(){
testDiv02.addClass('ani');
lett=setTimeout(()=>{
testDiv02.removeClass('ani');
clearTimeout(t);
},500);
});css：
body{
padding:20px;
}
.testDiv{
width:100px;
height:100px;
border-radius:50%;
background-color:#e0a718;
}
.testDiv.ani{
-webkit-animation:pop200msease0ms;
animation:pop200msease0ms;
}
.testDiv.transi{
-webkit-transform:scale(1.2);
transform:scale(1.2);
-webkit-transition:-webkit-transform0.5s;
transition:-webkit-transform0.5s;
transition:transform0.5s;
transition:transform0.5s,-webkit-transform0.5s;
}
.testBtn{
margin-top:20px;
height:30px;
padding:0px10px;
border:1pxsolid#CCCCCC;
}
@-webkit-keyframespop{
0%{
-webkit-transform:scale(0);
transform:scale(0);
}
50%{
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
100%{
-webkit-transform:scale(1);
transform:scale(1);
}
}
@keyframespop{
0%{
-webkit-transform:scale(0);
transform:scale(0);
}
50%{
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
100%{
-webkit-transform:scale(1);
transform:scale(1);
}
}
『玖』 CSS3动画和js动画各有什么优劣
CSS3的动画的优点：
1.在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）
2.代码相对简单
但其缺点也很明显：
1.在动画控制上不够灵活
2.兼容性不好
3.部分动画功能无法实现（如滚动动画，视差滚动等）
JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但想想CSS动画的transform矩阵是C++级的计算，必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。
所以，对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧。
『拾』 h5做app和原生app有什么区别
H5开发的web APP和原生APP的区别有以下几个方面：
一、开发方面
原生App
⊙ 每一种移动作业系统都需要独立的开发专案
⊙ 每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等
⊙ 需要使用各自的软体开发包，开发工具以及各自的控制元件
移动Web App
⊙ 因为执行在移动装置的浏览器上，所以只需要一个开发专案
⊙ 这种应用可以使用HTML5,CSS3以及JavaScript以及伺服器端语言来完成（PHP,Ruby on Rails,Python）
⊙ 这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2，APPcan以及Appcelerator Titanium等等。
二、能力方面
原生App
⊙ 能够与移动硬体装置的底层功能，比如个人资讯，摄像头以及重力加速器等等
移动Web App
⊙ 只能使用有限的移动硬体装置功能。
三、获取方法
原生App
⊙ 直接下载到装置
⊙ 以独立的应用程式执行(并不需要浏览器)
⊙ 使用者必须手动去下载并安装这些原生App
⊙ 有一些商店与卖场来帮助使用者寻找你的App，目前app市场不计其数
移动Web App
⊙ 从移动装置上的浏览器访问
⊙ 不需要安装额外的软体
⊙ 软体更新只需要伺服器就够了
⊙ 因为现在没有什么商品或卖场提供这种App，所以如何搜寻这些移动Web App相当不简单。
四、版本控制
原生App
⊙ 使用者可以自由地选择是否更新软体版本，所以会出现不同使用者同时使用不同版本的情况
移动Web App
⊙ 所有的使用者都是用同样的版本
五、优势
原生App
⊙ 比移动Web App执行快
⊙ 一些商店与卖场会帮助使用者寻找原生App
⊙ 官方卖场的应用稽核流程会保证让使用者得到高质量以及安全的App
⊙ 官方会发布很多开发工具或者人工支援来帮助你的开发
移动Web App
⊙ 跨平台开发
⊙ 使用者不需要去卖场来下载安装App
⊙ 任何时候都可以释出App，因为根本不需要官方卖场的稽核
⊙ 如果你已经有了一个Web App，你可以使用 responsive web design来辅助改进
六、缺陷
原生App
⊙ 开发成本高，尤其是当需要多种移动装置来测试时
⊙ 因为是不同的开发语言，所以开发，维护成本也高
⊙ 因为使用者使用的App版本不同，所以你维护起来很困难
⊙ 官方卖场稽核流程复杂且慢，会严重影响你的释出程序
移动Web App
⊙ 无法使用很多移动硬体装置的独特功能
⊙ 要同时支援多种移动装置的浏览器让开发维护的成本也不低
⊙ 如果使用者使用更多的新型浏览器，那问题就更不好处理了
⊙ 对于使用者来说，这种App很难被使用者发现
附：原生App 与 移动Web App:您如何选择？
所以在你准备做移动App时，你应该先问问自己以下几个问题：
1. 你的应用是否需要使用某些装置的特殊功能，比如摄像头，摄像头闪光灯或者重力加速器
2. 你的开发预算是多少？
3. 你的应用是否一定需要网路
4. 你的应用的目标硬体装置是所有的移动装置还是仅仅只是一部分而已
5. 你自己已经熟悉的开发语言
6. 这个应用对于效能要求是否苛刻
7. 如何靠这个应用赢利
H5 APP即是一种框架型APP开发模式(HTML5 APP 框架开发模式)，该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的资料则是每次开启APP的时候，去云端取资料呈现给手机使用者。
原生APP又称Native App，该开发针对IOS、Android、Windows等不同的手机作业系统要采用不同的语言和框架进行开发，该模式通常是由“云伺服器资料+APP应用客户端”两部份构成，APP应用所有的UI元素、资料内容、逻辑框架均安装在手机终端上。
1、开发方面的区别（这个地方太专业啦，请教了团队的开发小伙伴）
目前React Native开发越来越火，微信小程式是基于React Native开发的，体验接近原生APP，发展前景值得重视。不过好在现在非原生APP同样可以呼叫蓝芽、相机等硬体，也能顺利释出到苹果APP store。
移动Web App
1、因为执行在移动装置的浏览器上，所以只需要一个开发专案
2、这种应用可以使用HTML5,CSS3以及JavaScript以及伺服器端语言来完成(PHP,Ruby on Rails,Python)
3、这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。
原生App
1、每一种移动作业系统都需要独立的开发专案
2、每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等
3、需要使用各自的软体开发包，开发工具以及各自的控制元件
2、能力方面的区别
移动Web App
只能使用有限的移动硬体装置功能。
原生App
能够与移动硬体装置的底层功能，比如个人资讯，摄像头以及重力加速器等等。对于这一点感触很深刻，2016年做新年H5营销小活动的时候，就是因为没有考虑到H5不能使用移动硬体端重力加速器而导致临时替换设计方案。
3、获取方法的区别
移动Web App
1、从移动装置上的浏览器访问
2、不需要安装额外的软体
3、软体更新只需要伺服器就够了
4、因为现在没有什么商品或卖场提供这种App，不过一般都是巢状在系统内部，或者内部系 统中使用
5、跨平台开发，使用者不需要去卖场来下载安装App
6、需要过度依赖网路，没有任何快取资料
7、任何时候都可以释出App，因为根本不需要官方卖场的稽核
8、如果你已经有了一个Web App，你可以使用 responsive web design来辅助改进(这也是优势?)
9、所有的使用者都是用同样的版本
原生App
1、直接下载到装置
2、以独立的应用程式执行(并不需要浏览器)
3、使用者必须手动去下载并安装这些原生App
4、有一些商店与卖场来帮助使用者寻找你的App，app store里面应有尽有。
5、原生型APP应用的安装包相对较大，包含UI元素、资料内容、逻辑框架;
6、手机使用者无法上网也可访问APP应用中以前下载的资料。
7、原生型的APP可以呼叫手机终端的硬体装置(语音、摄像头、简讯、GPS、蓝芽、重力感应等)
8、APP应用更新新功能，涉及到每次要向各个应用商店进行提交稽核。
9、使用者可以自由地选择是否更新软体版本，所以会出现不同使用者同时使用不同版本的情况
即使两者之间有很大的区别，即使H5有一大堆的坑和问题，但是仍旧不妨碍移动WEB无所不在，移动web是目前唯一的支援各种装置访问的平台，也是唯一一个可供开发者释出移动应用的平台，它将各种移动互动与PC系统任务有效的结合在一起。而原生native app可以充分利用装置的特性，这一点是它得天独厚的优势。
正式因为它有复杂多变的CSS样式消耗了大量效能，它才有一个更有竞争力的优势——它带来了多样性的排版，能够细致到每一个字宽行高和风格的画素级处理，能够给你带来不一样的图文汇合的排版。
原生是基于他们自己平台的语言开发，比如ios和安卓是2个平台，也就是要开发2份app。h5的开发完一个，两个系统可以相容(除错测试好)就可以，所以h5比原生app要便宜。 h5的app，载入速度不如原生，受网路影响大，体验度偏低，开发成本一般。 原生app，载入速度快，受网路影响较小，体验度很高，开发成本偏高。 很多市面上的h5虽然功能有了，效果却差了很大，要知道一款好的app光ui设计上就会比普通能凑合用的app高出几倍，也就是说正常二十万左右的appui可能也仅仅占了一万两万，甚至有的公司为了赚钱ui都是修改之前的成品app。
1.H5的效能很差，一般经常改的地方可以用H5，比如论坛，咨询之类的，而且限制也是很大，很多效果是没办法做到的。GUI框架的WebView普遍是这样的。如果一个APP全部由H5来做(不太可能，送审很可能被拒)，那么会显得非常卡。
2.用iOS SDK，如果实现热更新是比较麻烦的。对于论坛，咨询这种模组，动不动就改版，做起来比较头疼，用H5就很合适了。尤其在APP跨安卓和iOS的时候，这类模组如果直接用H5，那么就很容易共用。
H5网页App开发和纯原生的App的差距主要聚集在以下几个方面：
1、动画
动画有很多种，比如侧边栏选单的滑入滑出、元素的响应动画、页面切换之间的过场等等，在H5之下的众多实现方法都没有办法达到纯原生的效能。一般这些的话有几种不同的选择：css3动画、javascript动画、原生动画。
css3动画非常的消耗效能，如果某一个元素用到css3动画可能还看不出来，但大面积或过场使用css3动画会让app低端手机体验非常差。最好的选择一般是通过框架呼叫底层的动画，但不管怎么样等于在原来的程式码上包上了一层，效能还是不可避免的受到影响。
比如在一个新页面的载入上，如果呼叫底层动画要考虑的问题有两个，一个是本身资源页面的渲染问题，另一个是远端资料的获取。即便是这些动画能够很快的响应，但大量的css页面会导致渲染卡顿，滑入时可能会有白屏/机器卡顿的现象。为了解决这些效能问题又必须要用到预载入或模拟动画。即便是这样，滑入滑出的动画在低端的安卓机器上还是有很多问题，如果获取服务端资料处理的方式不合适，卡顿白屏的现象会更严重。具体看下面的资料获取方式。
2、获取服务端资料
首先要接受的是，这里的资料获取都是在资源页面上非同步完成的，因为只有这样才能让这些资源页面完成预载入或者渲染。但是非同步拿到的资料在填入页面中时可能会涉及DOM操作，众所周知，DOM操作非常消耗效能，如果页面小还好，页面稍大资料稍微复杂一点，频繁的DOM操作会导致明显的闪白。而且最重要的一点是，如果页面载入进来之后资料更新的速度太慢，也会让页面模板等待很长时间，对使用者体验又不友好，总不能每次开启都像浏览器一样等待重新整理是吧
这个问题如果没有得到解决，H5开发是很难承担大规模资料的页面，在它们之中频繁切换更是难上加难，那么肯定有人也会想到用MVVM的方式，其实我也写过一些基于MVVM的H5app开发，相对来说它们获取资料和更新资料的方式更敏捷更科学，但写的过程中又要注意很多H5独有的问题，这些问题在下面的页面切换里来讲。
3、页面切换
上面我们看到了几种不错的实现方式，比如预载入和模拟动画，甚至有批量的预载入，批量的截图模拟动画等等，虽然看起来很友好解决了不少问题，但事实上如果页面足够多就会引发另一个问题——页面的生存周期。
试想一下，如果引导页或者主页面快取了5个子页面的资源，在跳转到响应的子页面时又会快取这些子页面的下级页面资源，如此反复肯定会占据大量记忆体使APP的体验下降。那么怎么知道那些页面是需要的，最多快取多少页面，什么时候结束哪些页面的生存周期呢？在我用过的很多H5APP的框架里都没有对这些问题有一个完美的解答，因此在页面较多内容较多的app开发中可能会因这些资源分配的问题降低效能。
这时候我们回过头来再看看MVVM的资料载入问题，实际上不管哪个MVVM框架，写过的人都知道管理这种新型的前端程式码最重要的问题是记忆体的问题，你既要保证程式码写的足够优雅没有任何记忆体泄露问题，也要考虑到在页面生存周期结束时它们的控制器/页面资源是否得到释放，这对全域性有没有什么影响，在多个请求时也要合理的分配资源，甚至是复用这些父级页面传过来的快取资源等等。较小的APP可能并不会有这些问题，如果你想用纯H5来开发大型app，这很可能会浪费你很多时间——而且结果还不会让你满意。
4、Android/iOS的区别
很多人都说纯H5app开发一次编写就能编译Android/iOS两种不同的APP，大大降低了成本。实际上这个观点本身就是值得怀疑的，如果你写过这类APP就能明白我在说什么，它们既不省事，又存在很多BUG，除错时尤其繁琐。举一个很简单的例子，Android和iOS在返回上一页的处理方式上就有明显的区别，iOS的顶部bar在全屏下怎样处理，Android机器出现 *** art bar怎样处理页面的布局，呼叫底层硬体时怎样区分不同的场景等等，你需要写一个又一个机型和系统的判断，然后分别在Android和iOS下除错，最后你却发现这并没有卵用，累的要死却什么没学到，只有一堆不知道什么时候会过时的经验。
现在做H5混合APP开发的人很多，但是纯H5却很年轻，很多问题都没有很好的解决，这几个是我在做这些APP时考虑最多的问题。最后说一个很少人注意到的H5优势，大家大谈H5APP时都是快速开发、低成本、多平台等等，但我却觉得它和很多APP开发方式相比有一个不同之处——图文混合的排版。正是这些复杂多变的CSS样式消耗了效能，但是它带来了排版的多样性，能够细致到每一个字宽行高和风格的画素级处理，才是H5的优异之处。
原生App更流畅，这个是web app无法比的，但是原生的想更新就得下载新的包或者打补丁，这方面来说，web app的优势更大一些，从体验来说，肯定选择原生，但从开发效率和迭代成本，就选择web app
区别如下：
Web APP应用呈现以下特点：
（1）每次开启APP，都要通过APP框架向云网站取UI及资料；
（2）手机使用者无法上网则无法访问APP应用中的资料。
（3）框架型的APP无法呼叫手机终端的硬体装置（语音、摄像头、简讯、GPS、蓝芽、重力感应等）
（4）框架型APP的访问速度受手机终端上网的限制，每次使用均会消耗一定的手机上网流量；
（5）框架型APP应用的安装包小巧，只包含框架档案，而大量的UI元素、资料内容刚存放在云端；
（6）APP使用者每次都可以访问到实时的最新的云端资料；
（7）APP使用者无须频繁更新APP应用，与云端实现的是实时资料互动；
适用企业：电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。
Native App（原生型APP）应用呈现以下特点：
（1）每次获取最新的APP功能，需要升级APP应用；
（2）原生型APP应用的安装包相对较大，包含UI元素、资料内容、逻辑框架；
（3）手机使用者无法上网也可访问APP应用中以前下载的资料。
（4）原生型的APP可以呼叫手机终端的硬体装置（语音、摄像头、简讯、GPS、蓝芽、重力感应等）
原生App ⊙ 每一种移动作业系统都需要独立的开发专案 ⊙ 每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等 ⊙ 需要使用各自的软体开发包，开发工具以及各自的控制元件 移动Web App
APP原生开发一般指 手机/PC程式 以及相关应用开发。
H5开发一般指 HTML5 PC或者 手机网页的开发。
APP混合开发 就是集中的两者以上的共同内容。
原生开发的App
每一种移动作业系统都需要独立的开发专案，需要独立的开发语言，使用各自的软体开发包，开发工具以及各自的控制元件。
手机网站打包的APP
从原生演变过来的通过APP嵌入网站来是实现的，以及伺服器端语言来完成。
功效方面
原生开发的App能够与移动硬体装置的底层功能，比如个人资讯，摄像头以及重力加速器等等。
网站制作的App只能使用有限的移动硬体装置功能。
微信H5支付介面，这种介面可以用在 手机网站支付，也可以用于APP， 它的支付方式是通过浏览器吊起微信APP端进行支付，这种介面主要用于游戏，直播等行业，普通APP支付介面也就是SDK，只能用于APP，稳定。还有H5通道切换通道很方便，SDK的话就比较复杂。希望可以帮助到你，我司是第三方支付，接支付介面撩，希望采纳！