json，异步加载，时间线

最新推荐文章于 2020-05-13 21:12:48 发布
old_man31
最新推荐文章于 2020-05-13 21:12:48 发布
阅读量240
点赞数
分类专栏： javascript
本文链接：https://blog.csdn.net/old_man31/article/details/86912685
版权
javascript 专栏收录该内容
6 篇文章 0 订阅
订阅专栏
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<!--

//
//     json:是一种传输数据格式
//         前端传给后台的是字符串，字符串里面是json格式。后端接收到字符串转换为json,JSON.stringify(),转换成json----str
//     后端给前端传输的是json，转换成字符串。JSON.parse()对象，属性值和属性名来用
//     ‘{"name":"leo",}’
//
//


//
// var obj = {
//     "name":"leo",
//     "age":32
// };
//
// var str = JSON.stringify(obj);
//
// var s=JSON.parse(str);
//
//     浏览器里面有渲染引擎 一行一行一个像素一个像素绘制，按css和html语法绘制页面
//         1、
//         浏览器内核内部，先识别html代码，把代码形成一个DOM树，一行一行识别，挂一个颗树，它
//         的顶端html，下面head ，body符合深度优先原则，
//    不等里面的src等资源下载完，就解析完了，挂树上了
// //     解析就是认识就行了，没必要全部下载，
//     2、html的DOM树解析完后，等带css树解析，深度优先
//     3、DOM树和CSS树合成一个rander树
//     DOM树    +  CSS树     =randerTree
//
//
//     然后开始绘制页面
//     js可以动态改变css和dom
//     js改变randertree，需要randertree的重构
// dom优化前提减少dom节点的添加删除
//     避免reflow重排，dom节点删除，添加，dom节点的宽高变化，位置变化，display none，block，offsetwidth，offsetLEft（重新构建确保正确触发重排），凡是重构randertree的过程都会影响效率
//     repaint重绘，影响小点，改字体颜色，背景颜色，改背景图片，大小，不会全改变。只会改变css树，改变一部分。效率浪费比较小。
//

js一般是同步加载，加载到js文件的时候，就阻断了css和html的加载线，让css和html等着，
    等js加载完后在继续。
为什么js可以阻断，为什么js 的下载和执行过程，不能并行去做，因为js会修改css和html。
为什么js单线程，js可以修改页面，如果可以多线程可以并行做的话，一个线程增加一个节点，
    一个线程减少一个节点。到顶听那个线程的？

有些时候想让他变成异步记载，比如，js文件不是传统的操作页面，有些是初始化数据，引入工具
包一个个function的，不会影响页面。我们
希望像工具一样并行的加载过来，如果全部js都是同步的，阻塞后续页面的，js过多，有些时作为辅助的
，如果有一个数据量一字节k没有下载过来，整个页面就废了，阻塞了，其他的都加载不来，都等着，js 有阻塞
后续页面的作用。页面留白加载的是js，js没下载过来，后续页面别想下载过来，等js下载完了才会一边下载css一遍下载html
并同时进行绘制。


    异步加载js
    js加载的缺点，加载工具方法没必要阻塞文档，过得js加载会影响页面效率，一旦网速不好，那么整个
    网站将等待js加载而不进行后续的渲染等工作

    有些工具方法，初始化，或者需要按需加载，用到在加载，不用不加载
    用到新的方法3种：



        1、defer='defer',凡是属性名等于属性值，写个属性名就可以了，按标准写全
<script type="text/javascript" src="taobao.js" defer="defer"></script>
<script type="text/javascript" defer="defer">
    var a=233;
</script>
#不能src又写内部。
从此这个javascript就是一个异步加载的js，就是系统读到这个js时，不会阻塞其他css和html的加载。
并行下载
互不干扰。
有点小规则：
####IE能用，标准DOM不能用，IE给自己用IE9以下可以用。既可以引入外部文件进行异步加载以外，
还可以对写到内部的js起作用
什么时候执行
正常js会在加载后立即之执行
而这种defer过后的下载完后不会立即执行，等到整个页面解析完才执行。
dom树生成完，叫整个页面的解析完。解析完一定发生在页面加载完毕之前，图片文件没下载完
defer标签执行的时刻在全部页面解析完毕时。



    2、aysnc=’aysnc‘非IE用，除高版本ie
实现原理和defer一样，只不过
IE9以上都可以用，标准DOM的浏览器google和firfox都可以，w3c标准方法。
不像defer一样，非要等到页面解析完才执行，加载完就执行
只能加载外部脚本，不能把js写在script标签里。
<script type="text/javascript" src="taobao.js" defer="defer"></script>
不会影响页面里的其他东西

以上2中浏览器兼容性不好。也不能写2个啊


    3、创建script，插入到DOM中，加载完毕后callback。
按需加载：页面上有一个按钮，点击后生产一大推东西，但经过统计后按按钮的概率很低，当也用户点击时，动态
下载完后再去执行。没必要加载过来，优化效率
<script>

    var script = document.createElement('script');
    script.type="text/javascript";
    script.src = 'taobao1.js';// 当代码只有这枚多时，只会下载，永远不会执行。当吧标签插入页面时
    //这个sript才会执行，
    ///所以：
    document.head.appendChild(script);//此时才会解析执行脚本。,如果注释掉，就不会执行。

    // test();//ReferenceError: test is not defined[详细了解]
    //当直接使用test时，提示错误，因为在test9（）解析的时候，taobao。js还没有下载完。
    //可以使用setTimeout进行延迟测试执行。程序执行微妙级，下载发请求，回资源的过程，在整个过程中
    //异步过程。
    //setTimeout(function () {
     //   test();
    //},1000);
    //此时可以弹出leo。


    //script.function () {//safari,chrome,firefox,opera。  IE没有load事件。IE有个
        //状态码，
    //    test();

    //};
    //script.readyState='loading'//根据加载进度，改成complete，或loaded。状态码
    //当状态码发生改变时，会触发这个事件
    //script.onstatechange=function () {
    //    if (script.readyState=="complete" || script.readyState=="loaded"){
      //      test();
        //}

    //};

    //以上合并，就可以写成if语句，包含IE和标准DOM浏览器。


    if(script.readyState){
        script.onstatechange=function () {
        if (script.readyState=="complete" || script.readyState=="loaded"){
            test();
        }

    };

    }else{
        script.function () {//safari,chrome,firefox,opera。  IE没有load事件。IE有个
        //状态码，
        test();

    };

    }

    把以上封装成一个函数

</script>
-->

<script>


    function loadScript(url, callback) {


        var script = document.createElement('script');
        script.type = 'text/javascript';
        //script.src=url;//如果网速非常快，则有可能在执行文件的时候已经状态变化了，这个时候就不会触发nostatechange，就不能调用callback（）函数
        if (script.readyState) {
            script.onstatechange = function () {
                if (script.readyState == "complete" || script.readyState == "loaded") {
                    callback();
                }

            };

        } else {
            script.onload = function () {//safari,chrome,firefox,opera。  IE没有load事件。IE有个
                //状态码，
                callback();

            };
        }
        script.src = url;//如果网速非常快，则有可能在执行文件的时候已经状态变化了，这个时候就不会触发nostatechange，就不能调用callback（）函数

        document.head.appendChild(script);//此时才会解析执行脚本。,如果注释掉，就不会执行。


    }
    loadScript('taobao1.js',function (){
        test();
    });
    //由于如果使用 loadScript('taobao1.js',test);function引用，不会读里面的代码。不会解析。
</script>












</body>
</html>
taobao1.js
function test(){
    alert('leo');
}
old_man31
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
json，异步加载，时间线

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
复制链接

扫一扫