javaScript基础（16）：(js异步加载和时间线)

打好基础，查漏补缺

基础是重中之重

reflow 重排 改变domTree引起页面重新渲染

会引起页面重排的原因 ：

1、dom节点的新增和删除 ，dom节点的宽高变化，位置变化，display none ——> block ,offsetWidth,offsetLeft

repaint 重绘

基于cssTree改变影响renderTree，效率浪费较少

比如背景颜色的改变等

js的异步加载

js引用一般是同步的。当引入过多js，风险增大，只要一个js的1kb文件出问题，后续整个页面都无法加载。

1、defer 只在ie中有效果,可以把代码写在内部

<script type='text/javascript' src="xxxx.js" defer='defer'></script>
// defer 后 js引入发生在页面解析完毕，即domTree生成完

2 、async

<script type='text/javascript' src="xxxx.js" async='async'></script>
// async 后 加载完就能执行

3、创建标签，插入页面

  var script  = document.createElement('script')
  
    script.type='text/javascript'
    
    script.src='tools.js'
    
    document.body.appenChild(script)
    
    // ie中监听加载完毕 
    if(script.readyState){
        script.onreadystatechange = function(){
            if (script.readyState == 'loaded' || script.readyState == 'complete'){
                test()
            }
        }
    } else {
       script.onload= function(){ // 异步加载结束后的回调
        // chrome,opear,safari,firefox
            test()  // tools.js中的方法
        }
    }

js加载时间线