js-JSON, js异步加载

1. JSON

json是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象是本地的，JSON是用于传输的。
JSON.parse();//string --> json
JSON.stringify();//json --> string

2. 页面渲染

randerTree = domTree + cssTree；深度优先
reflow重排：对效率影响很大，效率很低
- dom节点增删；
- dom节点的宽高变化，位置变化，display:none --> block；
- offsetWidth,offsetLeft
repaint 重绘：效率低，但影响较小。

3. js加载

js加载的缺点：
- 加载工具文档没必要阻塞文档，使得js加载会影响页面效率，一旦网速不好，那么整个网页将等待js加载可不进行后续渲染等工作。
- 有些工具方法需要按需加载，用到再加载，不用不加载

js异步加载的三种方案：

defer异步加载，但要等到dom文档全部解析完才会执行。只有IE能用。
async异步加载，加载完就执行，只能加载外部脚本，不能将JS写在script标签里。执行时也不阻塞页面。
创建script,插入到DOM中，加载完毕后callback。

function loadScript(url,callback){
		var script = document.createElement('script');
		script.type = "text/javascript";
		if(script.readyState){
			//IE有状态码
			script.onreadystatechange = function(){
				if(script.readyState == 'complete' || script.readyState == 'loaded'){
					// callback();
					eval(callback);
				}
			}
		}else{
			script.onload = function(){
				// callback();
				eval(callback);
			}//IE不适用
		}
		script.src = url;//先在上面绑定事件，再加载文件。-- onreadystatechange事件
		document.head.appendChild(script);
	}

	// loadScript('tools.js',function(){
	// 	test();
	// });//loadScript函数还没执行完，没办法识别tools.js里面的test函数，所以采用回调函数。
	loadScript('tools.js','test()');

4. js时间线

1）创建Document对象，开始解析web页面。解析HTML元素和它们的文本内容后添加Element对象和文本节点到文档中。这个时候document.readystate = 'loading'.
2)遇到link 外部css,创建线程加载，并继续解析文档。
3）遇到script外部js,并没有defer或async等异步属性，浏览器加载，并阻塞，在js加载并执行完后继续解析文档。
4）遇到外部js，并设置了defer或者async，浏览器创建新线程异步加载，并继续解析文档。对于async文件加载完之后立即执行。（异步加载禁用document.write，因为异步加载的情况下会抹掉原来的文本节点和内容。onload事件之后的document.write也是一样的）
5）遇到img等，先正常解析dom结构，然后异步加载图片资源，并继续解析文档。
6）当文档解析完成后，documen.readystate = 'interative';
7)文档解析完后，所有设置有defer的脚本会按顺序执行，这里与async不同，但也禁止使用document.write.
8)document对象触发DOMContentLoaded事件，这意味着程序从同步脚本执行阶段转到事件驱动阶段。
9）当所有async的脚本都加载并执行完，img等加载完成之后，document.readystate = 'complete',触发load事件。
10）从此以异步响应方式处理用户输入和网络事件等。