异步加载js及时间线

一. DOM树解析

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

1. DOM树生成的原则

深度优先

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

1. 解析DOM节点，生成DOM树

2. 继续解析css代码生成CSS树

3. DOM树和CSS树合并在一块生成Render树

4. 浏览器开始渲染绘制页面

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

3.1 js加载是同步的

1. 同步加载js是为了防止js操作DOM元素,而造成问题
2. 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树一旦生成,页面就会绘制了吧

1. reflow 重构

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

   重构效率是最低的,哪几种情况会触发重构呢

   • DOM节点的删除 添加,
   • DOM节点的宽高变换,位置变换 none - block

2. repaint 重绘，

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

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

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

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

1. defer 异步加载

   在DOM文档解析完成之后才执行js文件，IE独有

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

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

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

   IE用的

2. async

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

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

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

   内嵌的JS不能使用

   非IE用的

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

封装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();
})

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

二. 时间线

j浏览器执行的事,记录浏览器执行的顺序

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

简单总结一下

1. 创建Document对象
2. 文档的解析
3. 文档的加载