2021-10-18

JS小白学习笔记（day_11）

一、json，异步加载

json{"name":"ke"}//属性名必须加双引号
json是一种传输数据的格式(以对象为样板，本质就是对象，但用途有区别，对象就是本地用的json是用来传输的)

两种转换的方式：

json.parse();//string->json
json.stringify();//json->string

domTree + cssTree = randerTree
reflow 重排 dom结点的删除，添加
dom 结点的宽高变化，位置变化display none–>offsetWidth/offsetLeft
repaint 重绘，浪费效率比较少

二、javascript加载的三种方案

1.defer异步加载，只要等到dom文档全部解析完才会被执行，只有IE能用，也可以将代码写到内部

<script type="text/javascript" src="tools.js" defer="defer">可以写入内容</script>//ie9以下可以用

2.async异步加载，加载完就执行，async只能加载外部脚本

<script type="text/javascript" aysnc="aysnc">里面不能写东西</script>

什么时候能够异步加载完成

<script type="text/javascript">
var script = document.createElement('script');
script.type="text/javascript";
script.src="tools.js";//下载完
document.head.appendChild(script);//执行
script.onload = function(){//Safari chrome fiirefox opera
        //方法
    }
//Ie没有load方法
//监听事件script.readyState="loaded";
script.onreadyState == "complete" || script.
if(script.readState){
script.onreadystatechange = function(){
	if(script.readyState == "complete") || script.readyState == "loaded"){
	//方法}
    }
}
</script>

//事件监听判断是不是已经加载完毕封装函数

  function loadScript(url,callback){
        var script = document.getElementsByTagName('script');
    script.type = "text/javascript";
    if(script.readState){
        script.onreadystatechange = function(){
            if(script.readState == "complete"|| script.readyState == "loaded") {
            //方法
            //ie浏览器
            callback();//eval(callback)可以把字符串当做函数来执行
            }
        }
    }else{
        script.onload = function(){
        //方法
        //除了ie浏览器的其他多个浏览器
        callback();
        }
    }
    script.src = url;
    document.head.appendChild(script);
}
    loadScript('demo.js',function(){test();});//"test()"

二、json加载时间线

1.创建Document对象，开始解析web页面。解析HTML元素和他们的文本，阶段document.readyState = ‘loading’
2.遇到link外部css，创建异步线程，并继续加载文档
3.遇到script外部js，并没有设置async、defer、浏览器加载并堵塞
4.遇到script外部js，并设有async、defer，浏览器创建线程进行加载，加载后立即执行(异步禁止使用documnet.write())
5.遇见img先正常解析dom结构，然后浏览器进行异步加载src并继续解析
6.当文档解析完成document.readyState=‘interactive’
7.解析完成后，所有设置有defer脚本会按照顺序执行
8.document对象出发DOMContentLoaded是从脚本执行阶段转化为事件驱动阶段
9.当所有页面脚本全部执行完毕之后document.readyState=‘complete’,window对象出发load
10.从此…

DOMContentLoaded有一个独有的监听方式addEventListener

document.addEventListener('DOMContentLoaded',function(){console.log('a')};,false);