笔记：前端自学基础之JSON、重排重绘、异步加载、js加载时间线

本文链接：https://blog.csdn.net/qq_38349067/article/details/103352422

JSON简介

异步加载JS

js加载时间线

网页渲染的过程

JSON是一种传输数据的格式

（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的）

JSON.parse(); string -> json

JSON.stringify(); json -> string

过去传输数据的格式：Xml （可以自定义标签）

HTML 不可以自定义标签

现在传输数据的格式：json （对象）。区别：json属性名必须加双引号，但是对象没有这个强制规定。

前端与后台之间传输的数据是字符串格式的。如：'{"name" : "deng","age" : 123}'

e.g:

前端往后端传数据时：

var obj = {

"name" : "abc",

"age" : 123

}

JSON.stringify(obj) ======> "{"name" : "abc","age" : 123}"

前端接收到后端传过来的数据str="{"name" : "abc","age" : 123}"时：

JSON.parse(str) =======> Object {name:"abc",age:123}

异步加载JS

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

同步加载如：<head>

</head>

javascript异步加载的三种方案：

1、defer异步加载，但要等到dom文档全部解析完时才会被执行。只有IE能用，也可以将代码写到内部。不阻塞页面。

<head>

<script type="text/javascript" src="tools.js" defer="defer">内部可以写js代码</script>

</head>

2、async异步加载，加载完就异步执行，async只能加载外部脚本，不能把js写在script标签里。W3C标准方法，非IE浏览器和高版本IE浏览器可用，不阻塞页面。

<head>

<script type="text/javascript" src="tools.js" async="async">内部不可以写js代码</script>

</head>

3、创建script，插入到DOM中，加载完毕后callBack。可以按需加载（最常用）

<body>

<script type="text/javascript">

            var script = document.createElement('script');

            script.type = "text/javascript";

            script.src = "tools.js";//此时开始异步加载tools.js资源，但是不执行该js内的语言 

            document.head.appendChild(script);//此时才执行，所以可以通过控制这句指令，来按需使用。

            script.onload = function(){       //  safari   chrome     firefox   opera可以用  IE的script标签没有load事件

                     some function in tools.js

            }

             IE中使用script.readyState     loading---->complete/loaded   

            script.onreadystatechange = function(){

                      if(script.readState == 'complete" || script.readyState == "loaded"){some function}

              }

</script>

</body>

封装：

function loadScript(url,callback){
      var script = document.createElement('script');
      script.type = "text/javascript";
      if(script.readyState){
            script.onreadystatechange = function(){
                  if(script.readyState == 'complete' || script.readyState == 'loaded'){
                        callback();
                  }
            }
      }else{
            script.onload = function(){
                  callback();
            }
      }
      script.src = url;
      document.appendChild(script);
}
loadScript('demo.js',function(){
      test();
});//传入的第二个参数是一个函数引用，这样可以防止未定义函数名报错。实现按需加载。

或使用如下：

tools[callback]()