第十九节: JavsScript对象类型检测,克隆与JS异步加载问题

克隆对象

var obj = {
    name:'a',
    run: function(){},
    arr: ['wuwei','dd'],
    haha:{name:'cc',age:18}
}

function clone(origin,target){
    target = target || {};
    var toStr = Object.prototype.toString;

    for(var key in origin){
        if(typeof origin[key] !== null && typeof origin[key] === 'object'){ // 引用值,数组,对象
            if(toString.call(origin[key]) === '[object Array]'){
                target[key] = [];
            }else{
                target[key] = {}
            }   
            clone(origin[key],target[key])
        }else{
            target[key] = origin[key]
        }
    }
    return target;
}

var target = {};
target = clone(obj,target)

检测类型

function type(data){
    var toStr = Object.prototype.toString;

    var obj = {
        '[object Array]':'Array',
        '[object Object]':'Object',
        '[object RegExp]':'RegExp',
        '[object Number]':'Number',
        '[object String]':'String',
        '[object Boolean]':'Boolean'
    }

    if(data === null) return 'null';
    if(typeof data === 'object'){ // 引用类型
        // if(toStr.call(data) === '[object Array]'){
        //  return 'Array';
        // }

        // switch(toStr.call(data)){
        //  case '[object Array]':
        //      return 'Array';
        //  case '[object Object]':
        //      return 'Object';
        //  case '[object RegExp]':
        //      return 'RegExp';
        //  case '[object Number]':
        //      return 'Number';
        //  case '[object String]':
        //      return 'String';
        //  case '[object Boolean]':
        //      return 'Boolean';
        // }
        return obj[toStr.call(data)];

    }else{
        return typeof data;
    }
}

一. DOM树解析

什么是DOM树 ==>DOM节点按照树型结构排列

1. DOM树生成的原则

深度优先

2. 浏览器渲染页面前的步骤

解析DOM节点，生成DOM树
继续解析css代码生成CSS树
DOM树和CSS树合并在一块生成Render树
浏览器开始渲染绘制页面

3. script标签同步加载的弊端

js的加载是同步的;

3.1 js加载是同步的

同步加载js是为了防止js操作DOM元素,而造成问题
js下载会阻止后面的标签执行,js还学会阻止网页中所有的下载行为

2.2 如果需要异步加载JS

比如要加载一些工具类的script文件,这些js文件并不会去操作DOM,也就不会对DOM结构和CSS产生影响.

那么现在同步加载就会影响性能，因为如果没有加载完成，会阻塞后面的DOM结构的解析文件和css文件的加载，过多的工具类script文件，会让网页的加载时间过长。不利于用户体验

个别工具类script文件是按需加载,使用时才加载,不使用的时候就不加载

但有的时候我们是希望JS的加载是异步的

有些JS并不会操作页面,只是初始化一个数据,还有就是引入工具包吧,工具包就是一个一个function,你不调用压根不会执行,这样的js我们是不希望同步吧,因为如果在加载过程中有1k的内容没有加载过了,你整个程序就中断了,js会阻塞后面的内容

后来研究,就加载那些工具按需加载,用到在加载,不用不加载

2.3 JS操作DOM和CSS造成的重构和重绘

DOM树生成完成了在等着,等着CSS树生成

rander树一旦生成,页面就会绘制了吧

reflow 重构

如果在页面也就渲染完成了,你此时通过JS修改了DOM树,就会生成新的DOM树然后生成新的rander树,造成性能的浪费,所以即使你要修改DOM也请一次修改完,别修改一次等一会你在一次修改DOM树

重构效率是最低的,哪几种情况会触发重构呢
- DOM节点的删除添加,
- DOM节点的宽高变换,位置变换 none - block

repaint 重绘，

如就是改变背景原色,触发CSS树变换的叫重绘，这个重绘的只是一部分，并不会导致整个页面重构,

比如改个文字颜色啊,改个背景颜色啊,影响比较小,但是文字大小,改变就会触发重构

重构你可以理解为结构发生了变换,导致整体发生变化,重绘只是样式发生了变换,不会影响整体

2.3 异步加载js文件的三种方案

defer 异步加载
在DOM文档解析完成之后才执行js文件，IE独有

正常的JS下载完成后就会理解执行,家里defer后就算js下载完了也不会执行

DOM解析完成一定是在DOM加载完成

1.2 可以让内部script标签里的代码异步,IE9一下才可以用

IE用的

async
在加载完js文件之后就执行，只能加载外部js文件，不能把js代码写在js文件里

js文件加载完成后理解执行.同时执行也是也不执行.不影响其他代码加载执行.

这是w3c的方法,IE9以上都可以用,IE9及其以下不能用

内嵌的JS不能使用

非IE用的

创建script标签，插入在DOM中，在js文件加载完毕之后callBack
能够实现按需加载
封装兼容函数loadSript

var script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'tools.js';    // 这行代码只会下载js文件但不会执行,什么时候会执行呢,就是将标签加到body中

document.head.appendChild(script)

//因为加载js是异步的,所以这里有会有问题,js还没加载前,就讲script加到head中了
// 那有没有一个事件可以可以通知我们js加载完成了了呢
// load事件

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'index2.js';    // 这行代码只会下载js文件但不会执行,什么时候会执行呢,就是将标签加到body中

//因为加载js是异步的,所以这里有会有问题,js还没加载前,就讲script加到head中了
// 那有没有一个事件可以可以通知我们js加载完成了了呢
// load事件
script.onload = function (){
  // text()
}

document.head.appendChild(script);
text();  // 这个时候回报错,text是index2中定义了一个函数text,所以text放在onload事件里执行

但是IE 8及其以下身上没有onload事件,IE自己有一个特殊的状态码

script.readyState = 'lading';  // 
script.onreadystatechange = function(){
    if(script.readyState == 'loading' || script.readyState == 'complete'){
        text()
    }
}

总之一切的东西都是为了优惠效率

封装loadScript

function loadScript(url,callback){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // script.src = url;   

    if(script.readyState){
        script.onreadystatechange = function(){
            if(script.readyState == 'loading' || script.readyState == 'complete'){
                callback()
            }
        }
    }else{
        script.onload = function (){
            callback()
        }
    }

    script.src = url;   
    document.head.appendChild(script);
}

loadScript('index2.js',function(){
    text();
})

封装的这个方法就可以按需加载按需执行.

二. js的时间线

js出生时浏览器执行的事,记录浏览器执行的顺序

创建document对象。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = 'loading'。
如果遇到link外部css文件，浏览器会创建新线程加载，同时继续解析文档。
如果遇到外部js文件，并且没有设置async、defer，浏览器会加载js文件,阻塞主线程，等待js文件加载完成并执行该文件，然后继续解析文档。
如果遇到外部js文件，并且设置有async、defer，浏览器会创建新线程加载js文件，同时继续解析文档。对于async属性的js文件，会在js文件加载完成后立即执行。
如果遇到img,iframe等，浏览器在解析dom结构时，会异步加载src，同时继续解析文档。
当DOM文档解析完成，document.readyState = 'interactive’。
文档解析完成后，所有设置有defer的脚本会按照顺序执行。
document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件
从此,以异步响应方式处理用户输入,网络事件等

简化就三个步骤

1.创建document对象

2.文档解析完成

3.文档加载完成

console.log(document.readyState);   // loading

window.onload = function(){
    console.log(document.readyState)   // complete
}

document.onreadystatechange = function(){
    console.log(document.readyState)    //interactive  complete
}

// 文档解析完成 onload太墨迹了 要全部加载完才执行
document.addEventListener('DOMContentLoaded',function(){
    console.log(33)
},false)