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

转载于:https://www.cnblogs.com/chenyingjie1207/p/10025207.html