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）从此以异步响应方式处理用户输入和网络事件等。