高性能javascript笔记.txt

    ----------------------------------------------------------- 第一章 加载和执行 -------------------------------------
1.脚本位置
	浏览器在遇到<script>标签时会等待脚本下载完并执行完才会继续渲染页面
		因为js代码有可能会改变dom结构，所以需要等待js的执行完成
		遇到<script>标签 -> 下载脚本 -> 执行脚本 -> 继续渲染
		旧浏览器：逐个下载，逐个执行
		新浏览器：并发下载，顺序逐个执行
	so: 脚本尽量放在靠近</body>的底部
		尽可能合并脚本(下载一个比下载多个快)
2.延迟的脚本
	defer:立刻下载，等到onload事件被触发前才执行(仅IE4.0+和Firefox3.5+支持)
	动态创建<script>节点:添加到页面时开始下载，下载完成立刻执行
		* 下载完成的事件：readystatechange(IE)、onload(其他浏览器)
	XHR脚本注入：XMLHttpRequest来获取js文件内容，再动态创建<script>节点
		* 必须处于相同域，不适用大型Web应用
3.推荐的方式
	先添加动态加载所需的代码，然后加载其他代码：
		<script type="text/javascript" src = "loader.js"></script>
		<script type="text/javascript">
			loadScript("the-rest.js"),function(){
				Application.init();
			}
		</script>
		放置</body>闭合标签前，保证DOM结构已经创建完毕，无需其他的时间，例如window.onload来检测页面是否准备好
4.类库
	LazyLoad.js:
		<script type="text/javascript" src = "lazyload-min.js"></script>
		<script type="text/javascript">
			LazyLoad.js(["first.js","second.js"]),function(){
				Application.init();
			}
		</script>
	lab.js:
		<script type="text/javascript" src = "lab.js"></script>
		<script type="text/javascript">
			$LAB.script("first.js").wait()	// 如果需要按序执行则需要加上wait()
				.script("second.js")
				.wait(function(){
						Application.init();
				});
		</script>
	
--------------------------------第二章 数据访问---------------------------------------
1.作用域链和标识符解析
	内部属性[[Scope]] --- 作用域链  --- 0 --- 活动对象([[Scope]]属性中所包含的对象，即函数范围内的变量)
									--- 1 --- 全局对象(this, window, document 等等全局变量)
2.so 尽量把链深处的变量存储到局部变量里，介以提升性能
	* 采用优化过的js引擎不存在这种问题，老版的IE、Firefox和Safari都有问题

3.改变作用域链：
		with(document){...}	//with把document推进了作用域链的第一层，但是导致访问局部变量路径变远了，所以不推荐
		try{}catch(ex){}	//catch里面把异常对象推入了作用域链的头部

4.访问对象也一样，首先在实例中查找，然后再去原型链中查找
	so 如果需要访问多次，那么缓存对象属性可以提升性能
	
--------------------------------第三章 DOM编程---------------------------------------
1.尽量少访问DOM，把运算留在ECMAScript这一端处理

2.innerHTML属性和类似document.createElement()、document.createTextNode()的原生DOM方法性能差不多

3.cloneNode()比createElement要稍快一点

4.HTML集合
	document.getElementsByName();
	document.getElementsByClassName();
	document.getElementsByTagName();
	HTML集合是动态的，类数组，提供一个length属性
	* 访问length属性时会重新执行一次查询的过程
	so，缓存length属性很有必要
	
5.只返回元素节点
	children					childNodes
	childElementCount			childNodes.length
	firstElementChild			firstChild
	lastElementChild			lastChild
	nextElementSibling			nextSibling
	previousElementSibling		previousSibling
	
6.选择器API
	原生DOM方法：querySelectorAll();
	
7.重绘与重排
	构建DOM树与渲染树 --- 绘制页面元素
	重排：
		添加、删除DOM元素
		元素位置改变
		元素尺寸改变
		内容改变(例如文本改变、图片被另外一个不同尺寸的图片替代)
		页面渲染器初始化
		浏览器窗口尺寸改变
	浏览器通过队列化修改并批量执行来优化重排过程，但以下属性会强制刷新队列：
	offsetTop, offsetLeft, offsetWidth, offsetHeight
	scroll...
	client...
	getComputedStyle()(currentStyle in IE)
	以上属性需要返回最新的布局信息，所以浏览器需要执行队列中的"待处理变化"并触发重排以返回正确的值
	so 以上属性尽量少使用，并且使用这些属性的位置应该在修改布局信息的后面，中间的话会导致多次重排

8.最小化重绘和重排
	·合并多次所有的改变一次处理
	·批量修改DOM
		脱离文档流
		应用多重改变
		带回文档
	三种方式：隐藏元素 --- 修改 --- 重新显示
				使用文档片段(document fragment)
				拷贝 --- 修改拷贝 --- 替换原始(replaceChild(new, old))
	
9.缓存布局信息

10.让元素脱离动画流
	绝对定位页面上的动画元素，将其脱离文档流
	让元素动起来，只重绘了该元素，会临时覆盖部分页面
	动画结束时恢复定位，只下移一次文档的其他元素

11.元素很多时应避免使用:hover这个CSS伪选择器

12.事件委托
	只绑定最外围的元素点击事件，判断来源是否是目标

--------------------------------第四章 算法和流程控制---------------------------------------
1.for-in循环的性能只有其他循环的1/7,
	so 尽量不要使用for-in来遍历对象的属性名

2.少量条件用if-else, 大量条件用switch-case

3.列表查找比循环查找要快
	so, 数据放置一个Array中, 通过位置来查找
	
4.尽量减少循环

5.存在重复的计算结果时，可以使用缓存

--------------------------------第五章 字符串和正则表达式---------------------------------------
1.字符串连接
	把基础字符串及放置左边可以提升性能
	* 因为除IE外，其他浏览器会尝试为左侧的字符串分配更多的内存，然后简单地将第二个字符串拷贝至它的末尾
	
2.Array.prototype.join();
	String.prototype.concat();	//concat比普通的+和+=以及join慢一点

3.正则表达式的编译很快，只需要注意别在循环中重复编译正则表达式就行
	while(/regex1/.test(str1))
	
4.只是检测位置不适用正则表达式
	例如检测是否以;结尾：
		/;$/ --- str.charAt(str.length-1)== ";";
	其他函数有slice、substr、substring、indexOf和lastIndexOf
	
5.去除首尾空格
	用两个子表达式综合效率要高一些，尤其是在处理长字符串时
	str.replace(/^\s+/,"").replace(/\s+$/,"");
	* 其他有一次性处理完的，但多少有各方面的性能问题
		比方说/^\s+|\s+$/，每个字符串都会去匹配这两个分支条件

--------------------------------第六章 快速响应的用户界面---------------------------------------
1.js的执行不应超过100毫秒(用户体验中能忍受的页面阻塞时间最大值)

2.定时器的推荐最小值为25毫秒
	* windows系统的最小识别为15毫秒，设置一个小于15毫秒的定时值，IE会锁定
	* 在小于10毫秒时，各浏览器各系统均会有不同的表现
	
3.可以通过定时器来依次执行多个任务
	* 将一个任务分割成多个任务，用定时器来执行
	
4.Web Workers
	Worker没有绑定UI线程，适用于纯数据处理，与网页代码通过事件接口进行通信
	网页代码：
		var worker = new Worker("code.js");
		worker.onmessage = faunction(event){
			// ...
		}
		worker.postMessage("Thyiad");
	worker代码(code.js)：
		importScripts("file1.js", "file2.js");
		self.onmessage = function(event){
			self.postMessage("Hello, " + event.data + "!");
		}
		
--------------------------------第七章 AJAX---------------------------------------
1.常用的三种技术是：XHR、动态脚本注入和multipart XHR

2.XHR
	readyState的值
		3	正在与服务器交互
		4	整个响应已接收完毕，可进行操作
	* GET常用来请求数据，POST则用来发送数据
		一个GET请求只会发送一次数据包，而一个POST请求会发送两次数据包(一个装载头一个装载正文)
		应该在参数接近或超过2048个字符时，才应该使用POST获取数据，因为IE限制URL长度
	* 不能跨域请求数据

3.动态脚本注入
	动态创建一个script元素，设置src属性为不同域的URL
	* 返回的响应消息必须是可执行的JavaScript代码
	
4.Multipart XHR
	一次请求多个资源，从readyState值为3时开始设定一个定时器监听处理数据(需要自己定义数据格式并处理)
	* 这种方式资源不会被缓存
	* IE6、7不支持readyState为3的状态和data:URL

5.Beancons - 信标
	通过创建一个Image，设定src来回传数据
		var beacon = new Image();
		beacon.src=url+'?'+params.join('&');
		beancon.onload = function(){	// 通过监听image的load事件来处理简单返回时间
			if(this.width === 1){		// 如果不需要返回数据，那么响应中应该发送一个 204 No Content 状态码(即：不带消息正文)
			}							// 以阻止客户端继续等待永远不会到来的消息正文
			else{}
		}
		
6.数据格式
	XML		不推荐，数据量大解析又慢
	JSON	推荐，数据轻便解析又快
	JSON-P	返回的文本作为js代码直接执行(用eval直接调用)
	HTML	不推荐，既缓慢又臃肿
	自定义	同JSON，适用的情景下速度还会比JSON更快点
	
7.缓存数据
	用GET请求数据、响应中发送 Expires 头信息：Expires: Mon, 28 Jul 2015 23:30:00 GMT	// 告诉浏览器缓存此响应到7月
	本地数据存储：使用对象的属性存储缓存(键存url，值存返回数据)
	* 本地存储最适用移动设备，大多移动设备的浏览器都很小或没有缓存
	
--------------------------------第八章 编程实践---------------------------------------
1.避免双重求值
	尽量不使用eval和Function构造函数，以避免双重求值带来的性能消耗
	同样的，应该给setTimeout()和setInterval()传入函数而不是字符串作为参数
	
2.使用直接量创建对象和数组 - 效率更高

3.不要重复工作
	当需要检测浏览器时，可使用延迟加载或条件预加载
	延迟加载：
		function addHandler(target, eventType, handler){
			if(target.addEventListener){
				addHandler = function(target, eventType, handler){
					target.addEventListener(eventType, handler, false);
				}
			}
			else{
				addHandler = function(target, eventType, handler){
					target.attachEvent("on"+eventType, handler);
				}
			}
			
			addHandler(target, eventType, handler);
		}
	条件预加载：
		var addHandler = document.body.addEventListener ?
			function(target, eventType, handler){
					target.addEventListener(eventType, handler, false);
				} :
			function(target, eventType, handler){
					target.attachEvent("on"+eventType, handler);
				};

4.使用速度快的部分
	位操作
		toString()方法把数字转换为二进制形式的字符串：
			var num = 25;
			alert(num.toString(2));		//"11001"
		是否为2的整数：
			var num = 25;
			if(num & 1){	// 奇数&1 => 1
			}
			else{}			// 偶数
		位掩码：
			var OPTION_A = 1, OPTION_B = 2, OPTION_C = 4, OPTION_D = 8, OPTION_E = 16;
			var options = OPTION_A | OPTION_C | OPTION_D;
			if(options & OPTION_A){	//选项A是否在列表中
				// ...
			}
			
5.原生方法
	尽量使用原生方法，比如数学计算(Math)和CSS选择器(querySelector()、querySelectorAll())
	
--------------------------------第九章 构建并部署高性能JavaScript应用---------------------------------------
1.Apache Ant

2.合并多个JavaScript文件

3.预处理JavaScript文件
	在js代码中添加宏定义(#define, #undef)和条件编译(#if, #ifdef, #ifndef)

4.JavaScript压缩
	JSMin				http://www.crockford.com/javascript/jsmin.html
	YUI Compressor		http://developer.yahoo.com/yui/compressor
	Closure Compiler	http://code.google.com/closure/compiler/
	Packer				http://dean.edwards.name/packer/

5.JavaScript的HTTP压缩
	Accept-Encoding HTTP头：值为gzip、compress、deflate和identity
		服务器会选择最合适的编码方法，通过Content-Encoding HTTP头来告知浏览器
		
6.缓存JavaScript文件
	* Expires HTTP 响应头
	* 客户端存储机制(js自己控制)
	* HTML5 离线应用缓存(manifest属性，mime type为text/cache-manifest)
	
7.处理缓存问题
	推荐使用时间戳后缀
	
8.CDN
	
--------------------------------第十章 工具---------------------------------------
1.原生分析
	new Date();	//通过Date相减
	
2.YUI Profiler
	
3.FireBug

4.Console API
	profile()、profileEnd()
		console.profile("regexTest");
		regexTest();
		console.profileEnd();
		* profileEnd()会阻塞后续执行，所以可以将profileEnd()调用封装在setTimeout中
		
5.Page Speed
	对如何重构进行分析建议，比如哪些脚本在load之前没有用到过，可以延迟加载
	* FireBug插件
	
6.Fiddler
	HTTP调试代理工具，整个网络过程的Timeline进行分析，哪块占用时间多需要优化
	
7.YSlow
	分析后的优化建议工具  
	* FireBug插件
		
8.dynatrace Ajax Edition
	同Fiddler的作用，可以监控整个过程的时间，更能深入到特定的事件