高性能JavaScript摘要 (二)

响应接口

Javascrip和用户界面更新在同一个进程中进行，同一时刻你只有一个可以运行。这意味着当javascript代码正在运行时，用户界面不能响应输入，反之亦然。有效管理UI线程就是要确保JavaScript不能运行太长时间，以免影响用户体验。

1、Javascript运行时间不应该超过100毫秒。过长的运行时间导致UI更新出现可察觉的延迟，从而对整体用户体验产生负面影响。

2、javascript运行期间，浏览器响应用户交互的行为存在差异。无论如何，javascript长时间运行将导致用户体验混乱和脱节。

3、定时器可用于安排代码推迟执行，它使得你可以将长时间运行脚本分解为一系列较小的任务。

4、网页人工线程是新式浏览器才支持的特性，它允许你在UI线程之外运行javascript代码而避免锁定UI。

5、网页应用越复杂，积极主动管理UI线程就显得重要。没有什么javascript代码可以重要到允许影响用户体验的程度。

第一种基本的异步代码

//items数组 process执行的函数  callback回调函数
function processArray(items, process, callback){
	var todo = items.concat();
	setTimeout(function(){
	    process(todo.shift());
		if(todo.length > 0)
		    setTimeout(arguments.callee, 25);
		else
		    callback(this);
	},25);
}

var items = [1,2,3,4,5];
function process(value){
    console.log(value);
}
processArray(items, process, function(){
    console.log('Done');
});

这种异步代码可以分步解决长时间函数

//开始的函数
function saveDocument(id){
    open(id);
	write(id);
	close(id);
	update(id);
}
//这样一直执行就会是个庞大的时间耗费
//可以分解为子任务

//items数组 process执行的函数  callback回调函数
function multistep(steps, args, callback){
	var tasks = steps.concat();
	setTimeout(function(){
	    var task = task.shift();
		task.apply(null, args||[]);
		if(todo.length > 0)
		    setTimeout(arguments.callee, 25);
		else
		    callback(this);
	},25);
}

fuunction saveDocument(){
    var tasks = [open, write, close, update];
	multistep(tasks, [id], function(){
	    console.log('Done!');
	});
}

第二种异步

限时运行，就是在处理大数据量中，通过批量处理，但是每次批量处理为一定的时间

//items数组 process执行的函数  callback回调函数
function processArray(items, process, callback){
	var todo = items.concat();
	setTimeout(function(){
	    var start =+ new Date();
		if(todo.length > 0)
		    setTimeout(arguments.callee, 25);
		else
		    callback(items);
		do{
		    process(todo.shift());
		}while(todo.length > 0 && (+new Date() - start < 50));
	},25);
}

关于web人工线程，暂时放到后面学习HTML5再研究。

高性能AJAX

1、作为数据传输格式，纯文本和HTML是高度限制的，但它可以节省客户端CPU周期。XML被广泛应用普遍支持，但它非沓长且解析缓慢。JSON是轻量级的，解析迅速，交互性与XML相当。字符分割的自定义格式非常轻量，在大量数据解析时速度最快，但需要编写额外的程序在服务器构造格式，并在客户端解析。

2、当从页面域请求数据时，XHR提供最完善的控制和灵活性，尽管他将所有传入数据视为一个字符串，这有可能降低解析度。另一方面，动态脚本标签插入技术允许跨域请求和本地运行Javascript，虽然他的接口不完全，而且不能读取信息头或响应报文代码。多部分XHR可减少请求的数量，可多次响应中处理不同的文件类型，尽管它不能缓存收到的响应报文。当发送数据时，图像灯是最简单和最有效的方法。XHR也可用POST方法发送大量数据。

3、减少请求数量，可通过Javascript和CSS文件打包，或者使用MXHR。

4、缩短页面的加载时间，在页面其它内容加载后，使用AJAX获取少量重要文件。

5、确保错误代码不要直接显示给用户，并在服务器端处理错误。

五种向服务器发送数据的请求

XMLHttpRequest(XHR)

Dynamic script tag insertion 动态脚本标签插入

iframes

Connect

Multipart XHR 多部分的XHR

在现代高性能Javascript使用三种技术XHR，动态脚本和多部分的XHR。使用Connect和iframe网网是极限情况。

XHR中“： readyState等于3的时候表示此时正在与服务器交互，响应报文还在传输中。不过老版本的IE不提供3

readyState等于4的时候表示整个响应报文已经接受完成可用于操作。

关于GET与POST

GET与POST区别就是GET相当于查，POST相当于改。POST能够改变服务器状态，更新资源信息PUT，DELETE相应为增和删了。GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连，POST把提交的数据则放置在是HTTP包的包体中，GET方式提交的数据最多只能是1024字节，理论上POST没有限制，可传较大量的数据，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。POST数据是没有限制的，起限制作用的是服务器的处理程序的处理能力。POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改，而这里安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击。Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求。摘抄了这么一大段，区别应该很清楚了。

动态脚本插入：

克服XHR最大的限制，可以从不同域的服务器上获取资源，参数只能通过GET发送，不能设置请求超时或重试，而且返回数据必须是可执行的JS，必须用回调函数封装起来。

多部分XHR：

我们可以将多个文件合并成一个AJAX请求，在请求中解析。当请求的返回结果过大时，我们可以通过监听readyState==3，代表文件在传输过程中，我们也可以进行解析，不过在低版本的IE不支持。请求的数据也不能狗进行缓存。在图片过多的情况下，我们可以使用来减轻页面加载的压力。

Sending data 发送数据

XHR技术

跟上面一样通过POST跟GET发送数据

灯标

js用于创建一个新的Image对象,将src这只为服务器上的一个脚本文件的URL.此URL包含我们打算通过GET格式传回键值对数据.注意并没用创建img元素或者将它们插入到DOM中.

var url = '/status_tracker.php';
var params = ['step = 2','time =1248027314'];
(new Image()).src=url+'?'+params.join('&');

服务器取得此数据并保存下来,而不必向客户端返回什么,因此没用实际的图像显示,这是将信息发回服务器的最有效方法.可以监听Image对象的load事件,告诉服务器是否成功接收了数据.你还可以检查服务器返回图片的宽度和高度(如果返回了一张图片)并用这些数字通过你服务器的状态,例如,宽度为1表示"成功",2表示"重试". 如果你不需要为此响应返回数据,那么你应该发送一个204 No Content响应代码,无消息正文.它将组织客户端继续等待.

var url = '/status_tracker.php';
var params = ['step = 2','time =1248027314'];
var beacon = new Image();
beacon.src = url + '?' + params.join('&');
beacon.onload = function{
     if(this.width == 1){
      //success
     }
     else if (this.width ==2){
     //Failure,create another beacon and try again
     }
};
beacon.onerror = function {
     //Error,wait a bit,then create another beacon and try again
}

这里我始终不明白如何返回结果，返回的结果是根本接收不到的呀~

我只能认为灯标不能接受服务器返回的内容。

数据格式

返回的数据格式考虑的因素有：功能集，兼容性，性能，最重要的就是速度。

XML

所有的服务器支持，格式严格，易于验证，缺点在于长，太依赖结构。

JSON

解析简单，更少的结构和更小的字符

JSON-P

把JSON当作一个JS文件执行，JSON数据包裹在回调函数中。

HTML

HTML更加的长，占用更大的空间

自定义格式

如果轻量级，考虑JSON和自定义格式

AJAX性能向导

缓存数据

一是服务器端设置HTTP头，确保返回报文缓存在浏览器中。

二是客户端，本地缓存已获取的数据，不要多次请求同一个数据。

设置HTTP头

如果希望报文数据被缓存，必须在发送请求时使用GET方法，还需要一个Exprires头确保浏览器缓存响应报文。

本地存储数据

直接存储从服务器接受到的报文，存储在对象中，以URL为键值索引它。