《HTML5 移动Web App阅读器》随笔

一、Web App介绍
1.HTML5应用场景

（1）PC端web站点（pc端网站开发）
（2）基于WebView的hybrid native App开发 (融合WebApp与MobileApp混合开发)
（3）Web App开发 (移动端网站开发)

2.Native App & Web App & Hybrid App

(1)Native App（原生app）第三方应用程序，手机桌面上的图标点进去。

(2)Web App 手机浏览器点击进入，会有一些应用小图标，这些小图标在点击后，在浏览器里加载的页面 ，跟你直接下载一个app后打开的页面是相同的，这些小图标代表的就是web app。

优点：跨平台、免安装、快速部署、超链接
缺点：体验差、业界不支持、用户不在乎

(3)Hybrid App（混合app） 在native app里内置浏览器，合适的功能页面采用网页的形式呈现。比如京东的某些营销页面，今日头条的某些新闻页面、微信的腾讯新闻的内容页面等。

3.WebApp开发现状

• 不能一次开发和多终端（ios,Android,微软）适配
• 相比Native App 和 Hybrid APP ，Web App开发是相对比较差的，主要体现在动画方面DOM操作上，因为对于CPU（计算）和GPU(图形渲染)性能，手机设备还是不能同PC端相比。
• 发展趋势：趋近于Native App

Web App的性能瓶颈

二、HTML5 API

HTML5
1.【Web Workers 】

把 JS计算委托给后台线程,在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性。

workers和主线程间的数据传递——双方都使用postMessage()方法发送各自的消息，使用onmessage事件处理函数来响应消息（消息被包含在Message事件的data属性中）。这个过程中数据并不是被共享而是被复制。

只要运行在同源的父页面中，workers可以依次生成新的workers；

具体应用见链接

2.AJAX API

ajax 技术核心是XMLHttpRequest对象（XHR)，为向服务器发送请求和解析服务器响应提供了流畅的接口，以异步方式从服务器获取信息，不必刷新页面也能获取新数据，但不一定是XML数据。

创建XHR对象 var xhr = new XMLHttpRequest();

open(请求类型，请求URL，是否异步发送)
xhr.open(“get”,“example.php”,false);
调用open()不会真正发送请求，只是启动一个请求以备发送

xhr.send(null); 发送特定请求到服务器，由于设置请求为同步，JS代码会等到服务器响应之后再继续执行

由readystatechange事件检测每次状态变化后readystate的值

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	if(xhr.readystate==4)
	{
		if((xhr.status>=200&&xhr.status<300)||xhr.status==304)
		{
			alert(xhr.responseText);
		}
		else{
			alert("Request was unsuccessful:"+xhr.status);
		}
	}
};
xhr.open("get","example.php",true);
xhr.send(null); 

这里要注意ajax请求中的“同域”和“跨域”的问题！！！
以下实例参考：jQuery的$.ajax

如上图所示，open()函数中的url是与当前域同域的。同域ajax是指在同个域名和站点下，如本站是:http://wap.cmread.com，请求地址是http://wap.cmread.com/xxx.json，

var ajaxUrl = 'http://wap.cmread.com/xxx.json';
$.ajax({
    type:'get',/*请求类型get还是post*/
    url:ajaxUrl,/*请求地址*/
    cache:false,/*是否缓存,false不缓存*/
    success:function(returnData){/*请求成功之后的回调函数*/
        console.log(returnData);
    },
    error:function(){/*失败后的回调函数*/
        console.log('error');
    }
});