json

最新推荐文章于 2023-05-12 14:40:58 发布

狂兔

最新推荐文章于 2023-05-12 14:40:58 发布

阅读量202

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_41853863/article/details/81461937

javascript 专栏收录该内容

26 篇文章

订阅专栏

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

 JSON.parse(); string-->json   //字符串转换为对象
 JSON.stringify(); json-->string   //转换为字符串的json形式

浏览器识别 html 代码，将代码的每一个节点放在 domTree 树下会一条道走到黑，一条枝干走到头才看另一条枝干（深度优先原则）

                domTree
                <html>
        <head>         <body>
                 <div>  <span> <strong>
                               <em>

如果遇见 img等，读到 img 直接将节点挂在树上，dom树的完成代表解析完，不一定下载完（异步）
dom 树形成完等 cssTree 形成（原则与dom 树一样）
domTree + cssTree = randerTree 全部完成后，渲染引擎才开始绘制页面（randerTree页面绘制的依据）
dom 节点的删除添加，dom 节点的宽高变化，位置变化，offsetWidth offsetLeft 会触发重排。代表randerTree的重建（reflow重排）
repaint 重绘（重绘绘制一部分，改变背景图片字体颜色等）

异步加载js

引出：
（html css 遇见 js，加载直接被阻断，必须等待 js 加载完毕执行完毕才可继续加载同步加载因为js可以修改html css）

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

有些工具方法需要按需要加载，用到再加载，不用不加载

javascript 异步加载的三种方案：
异步加载：不会阻断 html css 的加载，（异步加载的执行是不会阻塞页面）

1）defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE可用，也可以将代码写到内部。
2）async 异步加载，加载完就执行，async 只能加载外部脚本，不能把 js 写在 script 标签里

// defer 这三种形式都可以
<script type="text/javascript" src="change.js" defer="defer"></script>

<script type="text/javascript" src="change.js" defer></script>

<script type="text/javascript" defer="defer"> 
        var text="hello world";
     </script>

3)
引出问题：

                        //demo.js
function text(){
    console.log("hello");
}
                         //例1
 <script type="text/javascript">
        var script=document.createElement('script'); //创建
        script.type="text/javascript";  //设置
        script.src="demo.js";  //下载 异步下载
        document.head.appendChild(script);
        text();  // 还没下载完  执行显示错误  
     </script>
                         //例2
<script type="text/javascript">
        var script=document.createElement('script');
        script.type="text/javascript";
        script.src="demo.js";
        document.head.appendChild(script);

        setTimeout(function(){
           text();  //可以执行
        },1000)

     </script>

load 事件：当触发这个事件说明下载完毕（IE不兼容）
状态码：IE script标签上有 readyState 属性（状态码）一开始的值为loading 加载完毕后会改变为 complete 或者 loaded

<script type="text/javascript">
        var script=document.createElement('script');
        script.type="text/javascript";
        script.src="demo.js";  //外部引入

        if(script.readyState){  
            //onreadystatechange事件 监听readystate (状态码) 的变化
            script.onreadystatechange=function(){   //满足加载完毕 IE
                if(script.readyState == "complete" || script.readyState =="loaded"){  
                text();
                }
            }
        }
        else{ 
            script.onload=function(){
            text();
            }//确保下载完后才执行  IE不支持
        }
        document.head.appendChild(script);

     </script>